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, Herramientas para desarrolladores aplica un fundido de salida para 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.

Problema de Chromium: 1178508

Detecta automáticamente XPath y selectores de texto en el panel de 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.

Problemas de Chromium: 1327206,1327209

Recorre las expresiones separadas por comas

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

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

Como se indica en el siguiente código,

function foo() {}

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

Los transpiladores y 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 pasos es diferente entre el código minificado y el creado. 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.

Problema de Chromium: 1370200

Configuración mejorada de la lista de elementos ignorados

Ve a Configuración > Lista de elementos ignorados. Las Herramientas para desarrolladores mejoran el diseño para ayudarte a configurar las reglas a fin de ignorar una sola secuencia de comandos o un solo patrón de secuencias de comandos.

Problema de Chromium: 1356517

Otros aspectos destacados

Estas son algunas correcciones notables en esta versión:

• Autocomplete el nombre de la propiedad de CSS en el panel Styles cuando presionas la barra espaciadora. (1343316).
• Quita el desplazamiento automático de la 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 vista previa te brindan acceso a las funciones más recientes de DevTools, te permiten probar las APIs de plataforma web de vanguardia y encontrar problemas en tu sitio antes que tus 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 de Herramientas para desarrolladores con Más opciones     > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Twittea a @ChromeDevTools.
• Deja comentarios en nuestros videos de YouTube sobre las novedades de las Herramientas para desarrolladores o en los videos de YouTube con sugerencias de Herramientas para desarrolladores.

Novedades de DevTools

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