Novedades de Herramientas para desarrolladores (Chrome 66)

Kayce Basques

Las nuevas funciones y los cambios importantes que se incluirán en las Herramientas para desarrolladores de Chrome 66 son los siguientes:

• Ignorar la secuencia de comandos en el panel Network
• Ajuste automático del zoom en el Modo de dispositivo
• Impresión con formato en las pestañas Vista previa y Respuesta
• Vista previa del contenido HTML en la pestaña Vista previa
• Anulaciones locales con estilos dentro de HTML

Sigue leyendo o mira la versión en video de las notas de la versión a continuación.

Ignorar la secuencia de comandos en el panel de red

La columna Iniciador del panel Red te indica por qué se solicitó un recurso. Por ejemplo, si JavaScript hace que se recupere una imagen, la columna Iniciador te muestra la línea de código JavaScript que causó la solicitud.

Anteriormente, si tu framework incluía las solicitudes de red en un wrapper, la columna Iniciador no era tan útil. Todas las solicitudes de red apuntaban a la misma línea de código de wrapper.

En este caso, lo que realmente quieres es ver el código de la aplicación que causa la solicitud. Ahora es posible:

1. Coloca el cursor sobre la columna Iniciador. La pila de llamadas que causó la solicitud aparece en una ventana emergente.
2. Haz clic con el botón derecho en la llamada que quieras ocultar en los resultados del iniciador.
3. Selecciona Agregar secuencia de comandos a la lista de elementos ignorados. La columna Iniciador ahora oculta cualquier llamada del script que ignoraste.

Figura 1. Ignorando requests.js

Administra las secuencias de comandos ignoradas desde la pestaña Lista de ignorados en Configuración.

Consulta Cómo ignorar una secuencia de comandos o un patrón de secuencias de comandos para obtener más información.

Impresión con formato en las pestañas Vista previa y Respuesta

La pestaña Vista previa del panel Red ahora imprime los recursos de forma predeterminada cuando detecta que se han minimizado.

Figura 2. La pestaña Vista previa muestra el contenido de analytics.js de forma predeterminada.

Para ver la versión sin minimizar de un recurso, usa la pestaña Response. También puedes imprimir recursos de forma manual desde la pestaña Response con el nuevo botón Format.

Figura 3. Impresión manual del contenido de analytics.js con el botón Formato

Cómo obtener una vista previa del contenido HTML en la pestaña Vista previa

Anteriormente, la pestaña Preview del panel Network mostraba el código de un recurso HTML en ciertas situaciones, mientras que renderizaba una vista previa del HTML en otras. La pestaña Vista previa ahora siempre renderiza el HTML de forma básica. No está diseñado para ser un navegador completo, por lo que es posible que no muestre el código HTML exactamente como esperas. Si quieres ver el código HTML, haz clic en la pestaña Response o haz clic con el botón derecho en un recurso y selecciona Open in Sources panel.

Figura 4. Vista previa del código HTML en la pestaña Vista previa

Ajuste automático del zoom en el modo de dispositivo

Cuando estés en Modo de dispositivo, abre el menú desplegable Zoom y selecciona Ajustar zoom de manera automática para cambiar el tamaño de la ventana de visualización automáticamente cada vez que cambies la orientación del dispositivo.

Las anulaciones locales ahora funcionan con algunos estilos definidos en HTML

Cuando se lanzaron las Invalidaciones locales de las Herramientas para desarrolladores en Chrome 65, una de las limitaciones era que no podían hacer un seguimiento de los cambios en los diseños definidos dentro del HTML. Por ejemplo, en la Figura 7, hay una regla de estilo en el head del documento que declara font-weight: bold para los elementos h1.

Figura 5. Ejemplo de diseños definidos en HTML

En Chrome 65, si cambiabas la declaración de font-weight a través del panel Style de DevTools, Local Overrides no haría un seguimiento del cambio. En otras palabras, en la siguiente recarga, el diseño volvería a font-weight: bold. Sin embargo, en Chrome 66, los cambios como este ahora persisten en las cargas de páginas.

Sugerencia adicional: Ignora las secuencias de comandos del framework para que las interrupciones del objeto de escucha de eventos sean más útiles

Cuando creé el video Cómo comenzar a depurar JavaScript, algunos usuarios comentaron que los puntos de interrupción del objeto de escucha de eventos no son útiles para las apps creadas sobre frameworks, ya que los objetos de escucha de eventos suelen estar envueltos en código de framework. Por ejemplo, en la Figura 8, configuré un breakpoint de click en Herramientas para desarrolladores. Cuando hago clic en el botón de la demostración, DevTools se detiene automáticamente en la primera línea del código del objeto de escucha. En este caso, se detiene en el código de wrapper de Vue.js en la línea 1802, lo que no es tan útil.

Figura 6. El punto de interrupción click se detiene en el código del wrapper de Vue.js

Dado que la secuencia de comandos de Vue.js se encuentra en un archivo separado, puedo ignorar esa secuencia de comandos en el panel Pila de llamadas para que este punto de interrupción click sea más útil.

Figura 7. Cómo ignorar la secuencia de comandos de Vue.js en el panel Pila de llamadas

La próxima vez que haga clic en el botón y active el punto de interrupción click, se ejecutará el código de Vue.js sin detenerse en él y, luego, se detendrá en la primera línea de código del objeto de escucha de mi app, que es donde realmente quería detenerme todo el tiempo.

Figura 8. El punto de interrupción click ahora se detiene en el código del objeto de escucha de la app.

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de versión preliminar te brindan acceso a las funciones más recientes de DevTools, te permiten probar las APIs de vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con Herramientas para desarrolladores.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de Herramientas para desarrolladores con more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Envía un tuit a @ChromeDevTools.
• Deja comentarios en los videos de Novedades de las Herramientas para desarrolladores de YouTube o en los videos de Sugerencias sobre las Herramientas para desarrolladores de YouTube.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de DevTools