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

Novedades de Herramientas para desarrolladores (Chrome 59)

Kayce Basques

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

Aspectos destacados

Cobertura de código CSS y JS. Encuentra CSS y JS sin usar con la nueva pestaña Cobertura.
Capturas de pantalla de página completa. Haz una captura de pantalla de toda la página, desde la parte superior del viewport hasta la parte inferior.
Bloquea solicitudes. Inhabilita manualmente las solicitudes individuales en el panel de Network.
Paso de async await. Desplázate por las funciones asíncronas de manera predecible.
Menú de comandos unificados. Ejecuta comandos y abre archivos desde el Menú de comandos recién unificado.

Funciones nuevas

Cobertura de código CSS y JS

Encuentra códigos CSS y JS sin usar en la nueva pestaña Cobertura. Cuando cargas o ejecutas una página, la pestaña te indica cuánto código se usó y 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

Cuando se hace clic en una URL, se muestra ese archivo en el panel Sources con un desglose de las líneas de código ejecutadas.

Desglose de la cobertura de código en el panel Sources

Cada línea de código tiene un código de color que indica lo siguiente:

Si la luz es verde continua, se ejecutó esa línea de código.
Si la luz es roja continua, no se ejecutó.
Una línea de código roja y verde, como la línea 3 en 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 color rojo y verde.

Sigue estos pasos para abrir la pestaña Cobertura:

Abre el Menú de comandos.
Comienza a escribir Coverage y selecciona Show Coverage.

Capturas de pantalla de 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.

Solicitudes de bloqueo

¿Deseas ver cómo se comporta tu página cuando una secuencia de comandos, una hoja de estilo o algún otro recurso en particular no están disponibles? Haz clic con el botón derecho en la solicitud en el panel Network y selecciona Block Request URL. Aparece una nueva pestaña de Solicitar bloqueo en el panel lateral, que te permite administrar las solicitudes bloqueadas.

Bloquear URL de solicitud

Saltar a async await

Hasta ahora, intentar revisar un código como el siguiente fragmento era un dolor de cabeza. Estarías en medio de test(), pasando por una línea, y, luego, te interrumpiría el código setInterval(). Ahora, cuando recorres 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? Echa un vistazo a estos documentos novedosos:

Cambios

Cuando abras el Menú de comandos, observa que el comando tiene un carácter mayor que (>). 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 y Linux).

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