javascript - depurar - Herramientas de desarrollo de Chrome: ¿Qué es el Soporte de fragmentos?

depurar javascript online (6)

El soporte de fragmentos de Chrome Developer Tools permite crear / editar / guardar y ejecutar fragmentos de código JavaScript.

A partir de la versión 19, el Inspector web de Chrome tiene una función experimental llamada "compatibilidad con fragmentos". Aquí es cómo activarlo:

Abre chrome: flags, habilita "Developer Tools experiments", reinicia.
Abra Web Inspector (Herramientas de desarrollo), presione el ícono de ajustes de configuración en la esquina inferior derecha, habilite "Compatibilidad con fragmentos", reinicie.
Abra el panel de Scripts, haga clic en el icono "árbol de navegación" a la izquierda y busque una pestaña de Fragmentos vacía.

Mi pregunta es: ¿para qué puedo usar esto? ¿Cómo puedo llenar esto con fragmentos?

En resumen, los fragmentos son una consola multilínea, un flujo de trabajo iterativo de desarrollo JS y una tienda persistente para los ayudantes comunes de depuración.

developers.google.com/chrome-developer-tools/docs/…

Algunos de los casos de uso que los Snippets pueden ayudar son:
Bookmarklets : todos tus marcadores de libros se pueden almacenar como fragmentos, especialmente aquellos que desees editar.
Utilidades : los asistentes de depuración para interactuar con la página actual pueden almacenarse y depurarse. Hay disponible una lista de tales servicios públicos seleccionada por la comunidad.
Depuración - Los fragmentos ofrecen una consola multilínea con resaltado de sintaxis y persistencia, por lo que es conveniente para la depuración de código que es más que un trazador de líneas.
Código de parcheo de monos : el código que desea parchear en tiempo de ejecución se puede hacer a través de fragmentos, aunque muchas veces puede editar en vivo el código en la pestaña Orígenes.

developers.google.com/chrome-developer-tools/docs/…

Por último, personalmente he recopilado algunos fragmentos comunes que puedes incluir en tu arsenal: github.com/paulirish/devtools-addons/wiki/Snippets

Para ejecutar fragmentos rápidamente, ahora puedes hacer esto. Ctrl-Shift-P para la "paleta de comandos", luego retrocede y usa a! prefijo, luego ingrese el nombre de fragmento que quiera ejecutar.

Haga clic derecho para crear uno nuevo.

Le pregunté a Paul Irish si sabía algo al respecto, tampoco estaba seguro, pero dice que aún no está completamente implementado y me señaló el rastreador de errores, encontré el ticket y estoy viendo algunos de los códigos. Los diffs tienen una gran cantidad de FIXME: To be implemented. comentarios

No puedo activar ese experimento yo mismo (no hay Developer Tools experiments en mis chrome:flags , pero de Safari encontré this explicación:

En resumen, "es una pequeña utilidad que te permite ingresar bloques de HTML y CSS y hacer que se renderice sobre la marcha".

Desde la publicación del blog, parece que tiene errores en Safari, por lo que Chrome aún no lo ha implementado.

Puede encontrar la lista de fragmentos útiles aquí http://bgrins.github.io/devtools-snippets/

uno de los fragmentos más útiles es ''jquerify.js'': con esto puede incluir jQuery en cualquier página si aún no está incluida.