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 parte de las notas de la versión de Herramientas para desarrolladores. Mira el siguiente video o sigue leyendo para ver las novedades de las Herramientas para desarrolladores de Chrome en Chrome 59.

Funciones nuevas

Cobertura del código CSS y JS

Encuentra código CSS y JS que no se usa 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 enviando solo el código que necesitas.

La pestaña Cobertura

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

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

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

Si la luz es verde continua, significa que se ejecutó la línea de código.
Si la luz es roja continua, significa que 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 un color rojo y verde.

Sigue estos pasos para abrir la pestaña Cobertura:

Abre el menú de comandos.
Comienza a escribir Coverage y selecciona Mostrar cobertura.

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 u otro recurso en particular no está disponible? Haz clic con el botón derecho en la solicitud en el panel Red y selecciona Bloquear URL de solicitud. Aparece una nueva pestaña Bloqueo de solicitudes en el panel lateral, que te permite administrar las solicitudes bloqueadas.

Bloquear URL de solicitud

Omitir el valor de espera asíncrono

Hasta ahora, intentar recorrer código como el fragmento de abajo era un dolor de cabeza. Estarías en el medio de test(), caminando sobre una línea y, luego, el código setInterval() te interrumpiría. Ahora, cuando atraviesas el código asíncrono como test(), las Herramientas para desarrolladores pasan 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? Echa un vistazo a estos documentos novedosos:

Cambios

Cuando abras el menú de comandos ahora, observa que tu 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 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.