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 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

Nota: Verifica qué versión de Chrome ejecutas en chrome://version. Si ejecutas una versión anterior, estas características no existirán. Si estás ejecutando 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.

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. Por ejemplo, si JavaScript genera la recuperación de una imagen, la columna Initiator te mostrará 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 era 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. Ahora 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 cualquier llamada de la secuencia de comandos que ignoraste.

Ignorando "requests.js".

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 Network ahora imprime los recursos de forma predeterminada cuando detecta que se redujeron esos recursos.

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

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 imprimir manualmente los recursos desde la pestaña Respuesta mediante el nuevo botón Formato.

Imprimir manualmente el contenido de analytics.js con el 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 situaciones particulares, mientras que en otras se mostraba una vista previa del HTML. Ahora, la pestaña Vista previa siempre realiza una renderización básica del HTML. No se diseñó para ser un navegador completo, por lo que es posible 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

Ajuste automático del zoom en el Modo de dispositivo

En Device Mode, abre el menú desplegable Zoom y selecciona Ajuste automático de zoom 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 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 el head del documento que declara font-weight: bold para los elementos h1.

Ejemplo de estilos definidos en HTML

Figura 5. Ejemplo de estilos definidos en HTML

En Chrome 65, si se cambiaba la declaración font-weight mediante el panel Style de Herramientas para desarrolladores, LocalOverrides no realizaría un seguimiento del cambio. En otras palabras, la próxima vez que se vuelva a cargar, el diseño se revertirá 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 los objetos de escucha de eventos a menudo se unen 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, las Herramientas para desarrolladores se pausan 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 detiene en el código del wrapper de Vue.js.

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

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

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 detenerse 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 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 plataforma 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.
Para informar un problema de Herramientas para desarrolladores, use Más opciones > Ayuda > Informar 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.