Se usó la API de Cloud Translation para traducir esta página.

Novedades de Herramientas para desarrolladores (Chrome 66)

Kayce Basques

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

Ignorar la secuencia de comandos en el panel Red
Ajuste automático del zoom en Device Mode
Impresión con formato estilístico en las pestañas Vista previa y Respuesta
Obtener una vista previa del contenido HTML en la pestaña Vista previa
Anulaciones locales con estilos dentro de HTML

Nota: Verifica qué versión de Chrome se ejecuta en chrome://version. Si ejecutas una versión anterior, estas funciones no existirán. Si ejecutas una versión posterior, es posible que estas funciones hayan cambiado. Chrome se actualiza automáticamente a una nueva versión principal cada 6 semanas aproximadamente.

Continúa 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 de red

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

Anteriormente, si el 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 de wrapper.

Lo que realmente quieres en esta situación es ver el código de la aplicación que causa la solicitud. Ahora, eso es posible:

Coloca el cursor sobre la columna Initiator. La pila de llamadas que causó la solicitud aparece en una ventana emergente.
Haz clic con el botón derecho en la llamada que quieras ocultar de los resultados del iniciador.
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.

Ignorando “requests.js”.

Figura 1: Ignorando requests.js

Administra tus 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 diseños en las pestañas Vista previa y Respuesta

En la pestaña Vista previa del panel Red, ahora se imprimen los recursos de forma predeterminada cuando detecta que se redujeron esos recursos.

En la pestaña Vista previa, se imprime el contenido de analytics.js de forma predeterminada.

Figura 2. En la pestaña Vista previa, se imprime con formato el contenido de analytics.js de forma predeterminada.

Para ver la versión no reducida de un recurso, usa la pestaña Respuesta. También puedes imprimir recursos con diseño estilístico de forma manual desde la pestaña Respuesta (Response) mediante el nuevo botón Formato (Format).

Imprime manualmente el contenido de analytics.js con el botón Formato.

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

Vista previa del contenido HTML en la pestaña Vista previa

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

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

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

Ajustar automáticamente el zoom en el Modo de dispositivo

Cuando estés en Device Mode, abre el menú desplegable Zoom y selecciona Ajustar zoom automáticamente para cambiar automáticamente el tamaño del viewport 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 lanzaron Anulaciones locales en Chrome 65, una limitación era que no podía hacer un seguimiento de los cambios en los estilos definidos en HTML. Por ejemplo, en la Figura 7, hay una regla de estilo en la head del documento que declara font-weight: bold para los elementos h1.

Un ejemplo de estilos definidos en HTML

Figura 5. Un ejemplo de estilos definidos en HTML

En Chrome 65, si cambias la declaración font-weight mediante el panel Style de Herramientas para desarrolladores, las Anulaciones locales no realizarían un seguimiento del cambio. En otras palabras, la próxima vez que se vuelva a cargar, el diseño volverá a ser font-weight: bold. Sin embargo, en Chrome 66, este tipo de cambios persisten entre las cargas de páginas.

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 apps compiladas sobre frameworks, ya que los objetos de escucha de eventos a menudo se incluyen en el código del framework. Por ejemplo, en la Figura 8, configuré un punto de interrupción click 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, lo que no es muy útil.

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

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

Como la secuencia de comandos de Vue.js está en un archivo independiente, puedo ignorarla desde el panel Call Stack para que este punto de interrupción click sea más útil.

Ignora la secuencia de comandos de Vue.js desde el panel de la pila de llamadas.

Figura 7: Ignora la secuencia de comandos de Vue.js desde el panel Call Stack

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 pausarse 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 hacer una pausa.

El punto de interrupción de clics ahora se pausa en el código del objeto de escucha de la app.

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 Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

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

Envíanos tus sugerencias o comentarios a través de crbug.com.
Informa un problema en Herramientas para desarrolladores mediante Más opciones > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
Envía un tweet a @ChromeDevTools.
Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).