Novedades de Herramientas para desarrolladores (Chrome 108)

Jecelyn Yeen

Sugerencias para propiedades de 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 aparece junto a ella para comprender por qué la regla no tiene un efecto visible.

Error de Chromium: 1178508

Detecta automáticamente XPath y selectores de texto en el panel de Grabadora

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

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.

Anteriormente, las Herramientas para desarrolladores solo admitían 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 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. 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 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 navegadores de desarrollo predeterminados. 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.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de DevTools con more_vert Más opciones > Ayuda > Informar un problema de DevTools en DevTools.
• Twittea a @ChromeDevTools.
• Deja comentarios en los videos de YouTube sobre las novedades de DevTools o en los videos de YouTube sobre sugerencias de DevTools.

Novedades de DevTools

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