Novedades de Herramientas para desarrolladores (Chrome 59)

Kayce Basques
Kayce Basques
X GitHub

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

Destacados

Nuevas funciones

Cobertura de código CSS y JS

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

La pestaña Cobertura

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

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

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

  • El color verde sólido 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 en la captura de pantalla anterior, significa que solo se ejecutó parte del código en esa línea. Por ejemplo, una expresión ternaria como var b = (a > 0) ? a : 0 se colorea en 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 páginas completas

Mira el siguiente video para saber cómo tomar una captura de pantalla desde la parte superior hasta la parte inferior de la página.

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 Network y selecciona Block Request URL. En el panel, aparecerá una nueva pestaña Request blocking, que te permitirá administrar las solicitudes bloqueadas.

Bloquear la URL de solicitud

Omitir async/await

Hasta ahora, intentar depurar 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 ejecutas paso a paso código asíncrono como test(), Herramientas para desarrolladores avanza de la primera a la última línea de manera coherente.

  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, notarás que tu comando tiene un carácter mayor que (>) antepuesto. Esto se debe a que el menú de comandos se unificó con el menú Abrir archivo, 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 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 analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores