Para quién es · ·
Guarda documentación con el código intacto
Clean Web Clipper lee el lenguaje del marcado de la propia página –la clase del bloque, el elemento padre o lo que dejó el resaltador– y lo escribe en el bloque de Markdown. En un corpus técnico de nueve páginas la etiqueta sobrevivió en 73 de 156 bloques, frente a 20 y 0 de los dos motores comparados.
De dónde salen estas cifras: la medición, con las versiones de los motores y las fechas
¿Por qué hay que limpiar la documentación capturada?
La documentación técnica es sobre todo código, y es justo la parte que se cae por el camino. Capturas una página de referencia y en la nota aparece un bloque desnudo, sin js ni python, con todo el texto en gris. Para recuperar el resaltado hay que abrir cada bloque y escribir la etiqueta a mano, y una página de referencia trae quince o veinte.
El segundo golpe llega con las tablas. Las tablas de parámetros y de códigos de respuesta suelen llevar código dentro de una celda, y un conversor genérico las aplasta en una línea o las pierde enteras. Lo que queda es una nota que hay que leer con la página original abierta al lado, que era exactamente lo que querías evitar.
El tercer problema aparece meses después. La documentación se versiona: la página que leíste para la 3.x redirige a la 4.x, el ejemplo cambió y ya no hay forma de saber cuál era el bueno. Una nota sin la dirección de origen ni la fecha de publicación no resuelve esa duda; con las dos en el frontmatter, y con el campo extraction indicando si el texto salió del DOM renderizado o de los datos estructurados, la nota se sostiene sola.
Mira qué llega a la nota
- El bloque sale como
```js, no desnudo: el resaltado funciona en Obsidian, VS Code y GitHub nada más pegar - La etiqueta se lee del marcado del sitio; la extensión no adivina el lenguaje a partir del código
- Las tablas con código o con una lista dentro de una celda mantienen la fila en su sitio
- La sangría y las líneas en blanco dentro del bloque se conservan tal cual
- Los README de GitHub, las respuestas de Stack Overflow y la documentación de frameworks fueron el corpus de prueba original
- En nueve páginas técnicas la etiqueta sobrevivió en 73 de 156 bloques, frente a 20 y 0 de los motores comparados
- El código en línea entre comillas invertidas sigue siendo código en línea: un nombre de método no se confunde con prosa
- La captura tarda decenas de milisegundos y el tiempo aparece en la esquina de la ventana, así que sabes si la página tardó por sí sola
La API de JSON devuelve unos datos con este aspecto:
```js
[
{ category: "Fruits", price: "$1", stocked: true, name: "Apple" },
{ category: "Vegetables", price: "$2", stocked: true, name: "Spinach" }
]
```
## Paso 1: Divide la interfaz en una jerarquía de componentesCaptura documentación paso a paso
Cinco minutos de ajustes iniciales y a partir de ahí una página de referencia se guarda con un atajo. Clean Web Clipper es una extensión Manifest V3 para Chrome, y la única dirección con la que puede comunicarse es nuestra propia dirección de estadísticas, nunca los sitios que lees.
- Instala la extensión y abre sus ajustes. Lo primero que decide todo lo demás es la línea «qué hace el clic en el icono»: vista previa, portapapeles, descarga
.md, carpeta en el disco o vault de Obsidian. Para documentación deja «vista previa» al principio, hasta que confíes en el resultado. - En «carpeta de destino» pulsa el botón de elegir carpeta y señala la carpeta donde vives con tus notas técnicas. El navegador pide confirmación una sola vez y recuerda el permiso; fuera de esa carpeta la extensión no lee ni escribe nada.
- Escribe la subcarpeta
Docsy la plantilla de nombre{domain}-{title}. El dominio delante agrupa por origen al ordenar por nombre, que en documentación es más útil que ordenar por fecha, porque lo que buscas es «lo de MDN» o «lo de Python». - Pon las imágenes en «omitir» como valor general. En documentación las capturas de pantalla de la interfaz aportan poco a una nota de referencia, y como los archivos binarios no se descargan, un enlace de imagen roto es ruido garantizado a medio plazo.
- Crea una regla por sitio para el dominio de documentación que más uses –por ejemplo
developer.mozilla.org– y dale su propia subcarpeta y su propio ajuste de imágenes. La regla se aplica sola cuando la dirección coincide con el patrón. - Comprueba el atajo en
chrome://extensions/shortcuts. Alt+Shift+M viene puesto de fábrica, pero si otra extensión ya lo ocupa la casilla aparece vacía y el atajo no dispara nada; asígnalo ahí. - Captura una página de referencia con varios bloques de código y ábrela en la vista de lectura antes de guardarla. Si el bloque sale marcado como
jsopython, la página declara el lenguaje y todas las demás de ese sitio se comportarán igual.
Elige los ajustes para documentación
Esta es la configuración con la que una página de referencia queda utilizable sin retoques. Cada valor resuelve un problema concreto de la documentación técnica, no una preferencia general.
| Ajuste | Valor | Por qué así para documentación |
|---|---|---|
| Clic en el icono | Vista previa | La documentación varía mucho de un sitio a otro; ver la captura antes de guardarla evita descubrir dos semanas después que ese sitio pierde los bloques |
| Carpeta y subcarpeta | Tu vault → Docs | Una sola carpeta para todo lo técnico hace que la búsqueda por nombre de función devuelva algo |
| Plantilla de nombre | {domain}-{title} | La referencia se busca por origen, no por fecha: developer.mozilla.org-Array.prototype.map se encuentra escribiendo map |
| Imágenes | Omitir | No se descargan archivos binarios: un enlace de imagen a un sitio que se rediseña es un hueco futuro en la nota |
| Frontmatter | title, source, published, extraction | Con source vuelves a la versión exacta y con extraction sabes si el cuerpo salió del DOM o de los datos estructurados |
| Regla por sitio | developer.mozilla.org → Docs/MDN | Cada fuente de documentación en su carpeta evita que un README y una referencia del navegador acaben mezclados |
| Atajo de teclado | Alt+Shift+M | Capturar sin soltar el teclado es la diferencia entre guardar la página y dejarla en una pestaña abierta |
| Parámetro | Tipo | Descripción |
| --- | --- | --- |
| `resource` | `string` \| `Request` | La dirección que se quiere recuperar, o un objeto `Request` ya construido |
| `options` | `object` | Admite `method`, `headers`, `body`, `mode`, `credentials`, `cache` |
```js
const respuesta = await fetch("/api/datos", { method: "POST" });
```
```
$ npx serve ./public
```
El segundo bloque sale sin etiqueta a propósito: la página no declara
ningún lenguaje para él, y poner una equivocada rompería el resaltado
en lugar de arreglarlo.Mira tres sesiones de trabajo
Los tres casos de abajo usan el mismo atajo por tres motivos distintos: llevarse una guía de varios capítulos al editor sin veinte pestañas abiertas, quedarse solo con la respuesta de un foro que de verdad funciona y comparar la misma referencia antes y después de una versión mayor. Ninguno es un caso raro, y cada captura cuesta una pulsación.
Llevarte una guía larga al editor
Estás siguiendo un tutorial de varios capítulos y no quieres tener veinte pestañas abiertas. Abres el primer capítulo, pulsas Alt+Shift+M y repites capítulo a capítulo: la extensión no rastrea, así que cada página la decides tú, y eso es exactamente lo que quieres cuando la mitad de los capítulos no te interesan.
Al terminar tienes seis archivos en Docs, nombrados por dominio y título, con los bloques de código etiquetados. Abres la carpeta en el editor y buscas por el nombre de la función; el frontmatter conserva la dirección de cada capítulo por si hay que volver al original a comprobar una nota al pie.
Guardar solo la respuesta que funciona
Encuentras en un foro técnico la respuesta que resuelve tu problema, entre otras nueve que no. Seleccionas el bloque de código y el párrafo que lo explica, y capturas la selección: el interruptor de la parte superior de la ventana indica en todo momento si estás viendo la página entera o solo lo seleccionado.
Se guarda un archivo con esos dos elementos y el frontmatter completo, incluida la dirección del hilo. La etiqueta de lenguaje viaja con el bloque seleccionado, así que el fragmento sale resaltado en la nota igual que salía en el foro.
Saber qué cambió entre dos versiones de una referencia
Capturas hoy la página de un método que estás usando. Tres meses después el proyecto sube de versión mayor y quieres saber qué se movió: capturas otra vez la misma dirección. Como el nombre coincide, la extensión añade un sufijo numérico en lugar de pisar la captura anterior.
Ahora tienes dos archivos de texto de la misma página en dos momentos, y cualquier herramienta de comparación te enseña qué párrafos y qué firmas cambiaron. La extensión no compara nada por su cuenta ni vigila la página: lo que aporta es que las dos copias sean comparables línea por línea.
Compara con las otras formas de guardar documentación
Todas estas vías funcionan; la cuestión es qué se pierde por el camino. La última fila es esta extensión, con su coste dicho igual de claro que el de las demás.
| Cómo se hace ahora | Qué obtienes | Qué cuesta |
|---|---|---|
| Copiar y pegar en el editor | El texto y, con suerte, la estructura de encabezados | Los bloques llegan sin etiqueta de lenguaje y las tablas con código dentro se deshacen; se pierden la dirección de origen y la fecha |
| Imprimir a PDF | La página tal como se ve, con su maquetación | El código no se puede copiar con fiabilidad, el archivo no se busca bien y arrastra menú, barra lateral y pie |
| Guardar la página completa (HTML) | Todo, incluidos los recursos | Una carpeta por página, HTML que no se lee en un editor de texto y un resultado que depende de que el navegador siga abriéndolo igual |
| Marcador | Un enlace, en un segundo | No hay texto: cuando el sitio se rehace o la versión cambia, el marcador apunta a otra cosa |
| Captura de pantalla | Prueba visual de lo que viste | El código no se puede pegar ni buscar, y una referencia larga son quince imágenes |
| Clean Web Clipper | Markdown con el código etiquetado, las tablas enteras y el origen en el frontmatter | Una página cada vez, sin rastreo; las imágenes quedan como enlaces o se omiten, y si la página no declara el lenguaje el bloque sale sin etiqueta |
¿Qué hacer cuando la captura no sale bien?
Cuando la captura de documentación con Clean Web Clipper no sale bien, casi siempre es una de cuatro cosas: un bloque sin etiqueta porque la página no la declara, una referencia de API marcada como «sin artículo», media página que no se había cargado todavía o un atajo de teclado ocupado por otra extensión. Cada caso tiene abajo una causa concreta que se puede comprobar, y ninguno significa que la captura fallara en silencio.
¿Por qué el bloque de código sale sin etiqueta de lenguaje?
Porque esa página no la declara. La etiqueta se lee del marcado del sitio –la clase que dejó el resaltador o el elemento padre del bloque–, no del contenido del código. Un sitio que resalta con un script sin dejar rastro en el DOM, o que sirve el ejemplo dentro de una imagen, no da nada que leer. En el corpus técnico la etiqueta sobrevivió en 73 de 156 bloques: la diferencia hasta 156 son, en su mayoría, páginas que no la declaran.
¿Por qué una referencia de API sale marcada como «sin artículo»?
Porque es un índice, no un artículo. La extensión revisa el Markdown terminado y, si más de una cuarta parte del texto está dentro de etiquetas de enlace, informa de «sin artículo» en lugar de entregarte trescientos enlaces. Las páginas de índice de una API –listas de métodos, mapas del sitio, árboles de módulos– caen justo ahí. Abre la página del método concreto y captúrala.
¿Por qué falta la mitad de la página en un sitio de documentación?
Casi siempre porque esa mitad todavía no estaba en la página. La extensión lee el DOM en el momento en que pulsas, así que los ejemplos que viven en pestañas cerradas, las secciones plegadas y lo que se carga al bajar no existen para ella.
La solución es mecánica: despliega lo que quieras conservar, cambia a la pestaña de ejemplos que te interesa, baja hasta el final y entonces captura. Si aun así falta el cuerpo entero y el campo extraction dice jsonld-articlebody, lo que ha ocurrido es que la página nunca terminó de renderizarse y el texto se leyó de sus datos estructurados.
¿Por qué no hace nada Alt+Shift+M?
Porque el atajo está ocupado. Chrome no avisa de los conflictos: asigna la combinación a la primera extensión que la reclama y deja vacías las demás. Abre chrome://extensions/shortcuts, busca Clean Web Clipper y comprueba si la casilla tiene algo escrito. Mientras tanto, el clic en el icono hace exactamente lo mismo, y en las páginas que el navegador protege –chrome://, la propia tienda de extensiones– no se ejecuta ninguna de las dos cosas.
¿Qué no hace Clean Web Clipper?
Clean Web Clipper no rastrea un sitio de documentación entero: captura la página que tienes delante y no sigue enlaces por su cuenta. No adivina el lenguaje cuando la página no lo declara; entonces el bloque sale sin etiqueta, porque una equivocada es peor que ninguna. No descarga imágenes ni diagramas: quedan como enlaces al original. Y no se ejecuta en páginas que el navegador protege, como chrome:// o la tienda de extensiones.