Novedades de Herramientas para desarrolladores (Chrome 59)

Kayce Basques
Kayce Basques
X GitHub Error

Te damos la bienvenida a otra entrega de las notas de la versión de DevTools. Mira el video de abajo o sigue leyendo para ver las novedades de las Herramientas para desarrolladores de Chrome en Chrome 59.

Destacadas

Nuevas funciones

Cobertura de código CSS y JS

Encuentra el código CSS y JS sin usar con la nueva pestaña Cobertura. Cuando cargas o ejecutas una página, la pestaña te indica cuánto código se usó en comparación con la cantidad que se cargó. Para reducir el tamaño de tus páginas, envía solo el código que necesitas.

La pestaña Cobertura

Si haces clic en una URL, se mostrará ese archivo en el panel Sources con un desglose de las líneas de código que se ejecutaron.

Un desglose de la cobertura de código en el panel de fuentes

Cada línea de código tiene un código de color:

  • El verde continuo significa que se ejecutó esa línea de código.
  • El color rojo continuo significa que no se ejecutó.
  • Una línea de código que es roja y verde, como la línea 3 de la captura de pantalla anterior, significa que solo se ejecutó parte del código de esa línea. Por ejemplo, una expresión ternaria como var b = (a > 0) ? a : 0 tiene los colores rojo y verde.

Para abrir la pestaña Cobertura, haz lo siguiente:

  1. Abre el menú de comandos.
  2. Comienza a escribir Coverage y selecciona Show Coverage.

Capturas de pantalla de una página completa

Mira el siguiente video para aprender a tomar una captura de pantalla desde la parte superior de la página hasta la parte inferior.

Cómo bloquear solicitudes

¿Quieres ver cómo se comporta tu página cuando no está disponible una secuencia de comandos, una hoja de estilo o algún otro recurso en particular? Haz clic con el botón derecho en la solicitud del panel Red y selecciona Bloquear URL de solicitud. Aparecerá una nueva pestaña Bloqueo de solicitudes en el panel lateral, que te permitirá administrar las solicitudes bloqueadas.

Bloquear la URL de solicitud

Omite la espera asíncrona

Hasta ahora, intentar analizar el código como el siguiente fragmento era un dolor de cabeza. Estarías en medio de test(), pasando por una línea y, luego, el código setInterval() te interrumpiría. Ahora, cuando analizas el código asíncrono como test(), DevTools pasa de la primera a la última línea con coherencia.

  function wait(ms) {
    return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }

  // do some work in background.
  setInterval(() => 42, 200);

  async function test() {
    debugger;
    const hello = "world";
    const response = await fetch('index.html');
    const tmp = await wait(1000);
    console.log(tmp);
    return hello;
  }

  async function runTest() {
    let result = await test();
    console.log(result);
  }

P.D.: ¿Quieres mejorar tus habilidades de depuración? Consulta estos documentos nuevos:

Cambios

Menú de comandos unificado

Cuando abras el menú de comandos ahora, observa que el comando se antepone con un carácter mayor que (>). Esto se debe a que el menú de comandos se unificó con el menú Open File, que es Comando + O (Mac) o Control + O (Windows, Linux).

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 plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

Comunícate con el equipo de Chrome DevTools

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

Novedades de DevTools

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