Novedades de Herramientas para desarrolladores (Chrome 59)

Kayce Basques
Kayce Basques
X GitHub Error

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

Destacadas

Nuevas funciones

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 o ejecutas una página, la pestaña te indica cuánto código se usó y cuánto se usó cargado. Para reducir el tamaño de tus páginas, solo debes enviar el código. que necesitas.

La pestaña Cobertura

Si haces clic en una URL, se mostrará ese archivo en el panel Fuentes 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, un rol ternario expresión como var b = (a > 0) ? a : 0 se colorea rojo y verde.

Sigue estos pasos para abrir la pestaña Cobertura:

  1. Abre el menú de comandos.
  2. 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 el final.

Solicitudes de bloqueo

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

Bloquear URL de solicitud

Omitir el valor de espera asíncrono

Hasta ahora, intentar recorrer el código como el fragmento de abajo era un dolor de cabeza. Estarías en el medio de test(), dando pasos por encima de una línea y, luego, el código setInterval() te interrumpiría. Ahora, cuando analices 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

Menú de comandos unificados

Cuando abras el menú de comandos ahora, observa que tu comando va precedido de un carácter mayor que (>). Esto se debe a que el comando El menú 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 plataformas 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.
  • Informa un problema en Herramientas para desarrolladores con Más opciones   Más > Ayuda > Informa 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.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.