Novedades de Herramientas para desarrolladores (Chrome 66)

Kayce Basques

Entre las nuevas funciones y los cambios importantes que llegarán a Herramientas para desarrolladores en Chrome 66, se incluyen los siguientes:

• Ignorar secuencia de comandos en el panel Red
• Ajuste automático del zoom en el Modo de dispositivo
• Impresión con formato estilístico en las pestañas Vista previa y Respuesta
• Obtén una 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 que aparecen a continuación.

Ignorar secuencia de comandos en el panel Red

En la columna Initiator del panel Network, se indica por qué se solicitó un recurso. Para ejemplo, si JavaScript provoca que se obtenga una imagen, la columna Initiator te muestra la línea de Código JavaScript que causó la solicitud.

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

En esta situación, lo que deseas es ver el código de la aplicación que genera la solicitud. Eso ahora es posible:

1. Coloca el cursor sobre la columna Initiator. 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 de los resultados del iniciador.
3. Selecciona Agregar secuencia de comandos a la lista de elementos ignorados. La columna Initiator ahora oculta todas las llamadas de la secuencia de comandos que ignoraste.

Figura 1. Ignorando requests.js

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

Consulte 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 estilístico 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 se redujeron esos recursos.

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

Para ver la versión sin reducir de un recurso, usa la pestaña Respuesta. También puedes Previsualizar recursos desde la pestaña Respuesta mediante el nuevo botón Formato

Figura 3. Imprimir manualmente el contenido de analytics.js con el botón Formato

Obtener una vista previa del contenido HTML en la pestaña Vista previa

Anteriormente, la pestaña Vista previa del panel Red mostraba el código de un recurso HTML en en situaciones particulares y, en otras, proporciona una vista previa del código HTML. La pestaña Vista previa ahora siempre realiza una renderización básica del HTML. No se diseñó para ser un navegador completo, por lo que es posible que no se muestre HTML exactamente como esperas. Si deseas ver el código HTML, haz clic en la pestaña Respuesta. haz clic con el botón derecho en un recurso y selecciona Abrir en el panel de fuentes.

Figura 4. Vista previa de HTML en la pestaña Vista previa

Ajuste automático del zoom en el Modo de dispositivo

En Device Mode, abre el menú desplegable Zoom y selecciona Ajustar zoom automáticamente para cambiar el tamaño del viewport automáticamente cada vez que cambies la orientación del dispositivo

Las anulaciones locales ahora funcionan con algunos estilos definidos en HTML

Cuando las Herramientas para desarrolladores iniciaron anulaciones locales en Chrome 65, una limitación era que no pudo realizar el seguimiento de los cambios en los estilos definidos en HTML. Por ejemplo, en la Figura 7, hay un estilo en el head del documento que declara font-weight: bold para los elementos h1.

Figura 5. Ejemplo de estilos definidos en HTML

En Chrome 65, si se cambiaba la declaración font-weight a través del panel Style de Herramientas para desarrolladores, selecciona Local Las anulaciones no harían un seguimiento del cambio. En otras palabras, la próxima vez que se vuelva a cargar, el estilo se revertiría volver a font-weight: bold. Sin embargo, en Chrome 66, los cambios como este ahora persisten en todas las cargas de página.

Sugerencia adicional: Ignora las secuencias de comandos del framework para que los puntos de interrupción del objeto de escucha de eventos sean más útiles

Cuando creé el video Get Started with Debugging JavaScript, algunos usuarios comentaron que los puntos de interrupción del objeto de escucha de eventos no son útiles para las apps compiladas sobre frameworks, ya que el evento los objetos de escucha están incluidos en el código del framework. Por ejemplo, en la figura 8, configuré un click punto de interrupción en Herramientas para desarrolladores. Cuando hago clic en el botón de la demostración, Herramientas para desarrolladores 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 del wrapper de Vue.js en la línea 1802, no es muy útil.

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

Como la secuencia de comandos de Vue.js está en un archivo independiente, puedo ignorarla desde la 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 desde 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 Vue.js sin pausar, y luego se detiene en la primera línea de código del objeto de escucha de mi app, que se siempre quise hacer una pausa.

Figura 8. El punto de interrupción click ahora se pausa 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 navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataformas web de vanguardia y detectan problemas en tu sitio antes que los usuarios.

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

• Para enviarnos sugerencias o comentarios, accede a crbug.com.
• Informa un problema en Herramientas para desarrolladores con Más opciones   > Ayuda > Informa problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Twittea a @ChromeDevTools.
• Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.