Qué hay de nuevo en DevTools (Chrome 107)

Published on

Translated to: English, Português, 한국어, 中文, Pусский, 日本語

Gracias por la traducción Miguel Ángel y por la revisión Carlos Caballero.

¿Tienes interés en mejorar DevTools? Regístrate para participar en la Google User Research aquí.

Personaliza atajos de teclado en DevTools

Ahora puedes personalizar los atajos de teclado para tus comandos favoritos en DevTools.

Ve a Configuración > Combinaciones de teclas, pasa el cursor sobre un comando y haz clic en el botón Editar (ícono de pluma) para personalizar el atajo de teclado. También puedes crear acordes (también conocidos como atajos de varias teclas).

Personaliza atajos de teclado en DevTools

Chromium issues: 1335274, 174309

Alternar temas claro y oscuro con atajo de teclado

Configura un atajo de teclado para alternar temas claro y oscuro de forma conveniente. Por defecto, la acción no está asociada a ningún atajo de teclado.

Alterna temas claro y oscuro con un atajo de teclado

Chromium issues: 1280398, 1226363

Resalta objetos C/C++ en el Inspector de Memoria

El Inspector de Memoria resalta todos los bytes de un objeto de memoria C/C++.

Reconocer los bytes de un objeto entre la memoria WebAssembly era un dolor de cabeza. Tienes que saber el tamaño del objeto y contar los bytes desde el inicio del objeto.

Esta función te ayuda a distinguirlos de la memoria que lo rodea. Consulta Extender el Inspector de Memoria para depuración C/C++ para obtener más información sobre los cambios.

Resalta objetos C/C++ en el Inspector de Memoria

Chromium issue: 1336568

Soporte para información completa del iniciador al importar HAR

Ahora está disponible la información completa del Iniciador al importar HAR. Anteriormente, el panel Red solo mostraba información parcial del iniciador durante la importación.

La información del iniciador ayuda a los desarrolladores a rastrear el origen de una solicitud de red e identificar problemas relacionados con la red.

Soporte para información completa del iniciador al importar HAR

Chromium issue: 1343185

Iniciar búsqueda de DOM al presionar Enter

Ahora puede deshabilitar la configuración Buscar mientras escribes para iniciar siempre la búsqueda de DOM al presionar Enter.

En el panel de Elementos, cambia la barra de búsqueda con Control o Command + F. A medida que escribe una consulta en el cuadro de búsqueda, el árbol DOM saltará al primer elemento coincidente y lo resaltará por defecto.

Para usuarios, especialmente testers que siempre trabajan con consultas de búsqueda extensas, este comportamiento no es ideal. El árbol DOM podía saltar varias veces mientras escribe una consulta de búsqueda extensa (por ejemplo, //div[@id="example"]). Este comportamiento crea un movimiento innecesario.

Búsqueda en el DOM

Vaya a Configuración > Preferencias, desactive Buscar mientras escribe. Con este cambio, la búsqueda comenzará solo después de presionar Enter.

Opción Buscar mientras escribe

Chromium issue: 1344526

Mostrar iconos start y end para las propiedades CSS flexbox align-content

En el panel de Estilos, edita las propiedades align-content en una clase CSS con display: flex o display: inline-flex. Los iconos start y end se muestran en el menú desplegable de auto-completado.

Propiedades flexbox de align-content

Chromium issue: 1139945

## Otros detalles destacados

  • Muestra el número correcto de mensajes en la barra lateral de Consola. Anteriormente, los recuentos no se actualizaban al borrar los mensajes de la consola. (1343311)

Descarga de los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo por defecto. Estos canales de prueba te dan acceso a las últimas funcionalidades de DevTools, probar innovadoras APIs de la plataforma web y encontrar errores en tus sitios antes que tus usuarios lo hagan.

Ponerse en contacto con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre nuevas funcionalidades y cambios en el artículo o cuaquier cosa relacionada con DevTools.

  • Envía una sugerencia u opinión a través de crbug.com.
  • Reporta un problema con DevTools usando Más opciones   Más   > Ayuda > Reportar un problema con DevTools in DevTools.
  • Haz un Tweet a @ChromeDevTools.
  • Deja un comentario en los vídeos de YouTube sobre Qué hay de nuevo en DevTools.

Más características de DevTools

Por favor, revisa la versión en inglés de What's New In DevTools para una lista completa de las características lanzadas. Debajo tienes más contenido que ha sido traducido al castellano.

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.