Novedades de Herramientas para desarrolladores (Chrome 108)

Jecelyn Yeen

Sugerencias para propiedades CSS inactivas

DevTools ahora identifica los estilos CSS que son válidos, pero que no tienen un efecto visible. En el panel Styles, DevTools atenúa las propiedades inactivas. Coloca el cursor sobre el ícono que se encuentra junto a ella para comprender por qué la regla no tiene un efecto visible.

Sugerencias para propiedades CSS inactivas.

Error de Chromium: 1178508

Detección automática de selectores de texto y XPath en el panel de la grabadora

El panel Grabadora ahora admite selectores XPath y de texto. Comienza a grabar un flujo de usuarios y la grabadora elegirá automáticamente el XPath y el texto único más corto de un elemento como selector, si está disponible.

Selectores de XPath y texto en el panel de la grabadora

Problemas de Chromium: 1327206,1327209

Cómo recorrer expresiones separadas por comas

Ahora puedes recorrer expresiones separadas por comas durante la depuración. Esto mejora la capacidad de depuración del código reducido.

Explora las expresiones separadas por comas.

Anteriormente, DevTools solo admitía el paso por expresiones separadas por punto y coma.

Dado el siguiente código,

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

Los transpiladores y los minificadores pueden convertirlos en expresiones separadas por comas.

function bar(){return foo(),foo(),42}

Esto genera confusión durante la depuración porque el comportamiento de los pasos es diferente entre el código reducido y el código creado por el autor. Es aún más confuso cuando se usan mapas de origen para depurar el código minificado en términos del código original, ya que el desarrollador observa puntos y comas (que la cadena de herramientas convirtió en comas), pero el depurador no se detiene en ellos.

Error de Chromium: 1370200

Configuración mejorada de la lista de elementos ignorados

Ve a Configuración > Lista de elementos ignorados. DevTools mejora el diseño para ayudarte a configurar las reglas para ignorar una sola secuencia de comandos o un patrón de secuencias de comandos.

La pestaña Lista de elementos ignorados

Error de Chromium: 1356517

Otros aspectos destacados

Estas son algunas correcciones importantes de esta versión:

  • Completa automáticamente el nombre de la propiedad CSS en el panel Estilos cuando presionas la barra espaciadora. (1343316).
  • Se quitó el desplazamiento automático en el panel de ruta de navegación del panel Elemento. (1369734).

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.