Qué hay de nuevo en DevTools (Chrome 102)

Published on Updated on

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

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

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

Función de vista previa: nuevo panel de información de rendimiento

Use el panel Performance Insights para obtener información procesable y basada en casos de uso sobre el rendimiento de su sitio web.

Abra el panel e inicie una nueva grabación según su caso de uso. Por ejemplo, midamos la carga de la página de esta página de demostración.

Nuevo panel de información sobre el rendimiento

Una vez que se completa la grabación, se obtiene información sobre el rendimiento en el panel Insights. Haga clic en cada elemento de información (por ejemplo, solicitudes de red que bloquean el renderizado, cambio de diseño) para comprender el problema y las posibles soluciones.

Vaya al panel de Perspectivas de rendimiento documentación para obtener más información con el tutorial paso a paso.

Esta es una función de vista previa para ayudar a los desarrolladores web (especialmente a los expertos en rendimiento) a identificar y solucionar posibles problemas de rendimiento. Nuestro equipo está trabajando activamente en esta función y esperamos sus comentarios para realizar más mejoras.

Chromium issue: 1270700

Nuevos atajos para emular temas claros y oscuros

Ahora puede emular los temas claros y oscuros rápidamente (característica multimedia CSS prefiere-color-scheme) con los nuevos accesos directos en el panel Estilos.

Anteriormente, se necesitaban más pasos para emular temas en la pestaña Rendering.

Nuevos atajos para emular temas claros y oscuros

Chromium issue: 1314299

Seguridad mejorada en la pestaña Vista previa de la red

DevTools ahora aplica la Política de seguridad de contenido (CSP) en la pestaña Vista previa en el panel Red.

Por ejemplo, la primera captura de pantalla muestra una página que contiene contenido mixto. La página se carga a través de una conexión HTTPS segura, pero la hoja de estilo se carga a través de una conexión HTTP no segura.

El navegador bloqueó la solicitud de la hoja de estilo de forma predeterminada. Sin embargo, cuando abrió la página a través de la pestaña Vista previa en el panel Red, la hoja de estilo no estaba bloqueada previamente (por lo tanto, el fondo se volvió rojo). Este está bloqueado como era de esperar (segunda captura de pantalla).

v

Chromium issue: 833147

Recarga mejorada en el punto de interrupción

El depurador finaliza la ejecución del script cuando se recarga en el punto de interrupción.

Por ejemplo, el script entró en un bucle infinito cuando se configuraba y recargaba en el punto de ruptura de ReactDOM en esta [demo de React] (https://react-stuck.glitch.me/). El panel de Fuentes se rompió debido al bucle infinito.

Continuar ejecutando JavaScript está causando muchos problemas a los desarrolladores y podría dejar el renderizador en un estado defectuoso. Este cambio alinea el comportamiento de depuración con otros navegadores como Firefox.

Recarga mejorada en el punto de interrupción

Chromium issues: 1014415, 1004038, 1112863, 1134899

Actualizaciones de la consola

Manejar errores de ejecución de scripts en la Consola

Los errores durante la evaluación del script en la consola ahora generan eventos de error adecuados que activan el controlador window.onerror y se distribuyen como eventos "error" en el objeto de la ventana.

Manejar errores de ejecución de scripts en la Consola

Chromium issue: 1295750

Confirmar expresión en vivo con Enter

Una vez que termine de escribir una expresión en vivo, puede hacer clic en 'Enter' para confirmarla. Anteriormente, al presionar Enter se agregaban nuevas líneas. Esto es inconsistente con otras partes de DevTools.

Para agregar una nueva línea en el editor de expresiones en vivo, use Shift + Enter.

Confirmar expresión en vivo con Enter

Chromium issue: 1260744

Cancelar registro de flujo de usuario al inicio

Puede cancelar la grabación durante el inicio de la grabación del flujo de usuario. Anteriormente, no había opción para cancelar la grabación.

Cancelar registro de flujo de usuario al inicio

Chromium issue: 1257499

Mostrar pseudoelementos resaltados heredados en el panel Estilos

Vea los pseudoelementos heredados resaltados (por ejemplo, ::selection, ::spelling-error, ::grammar-error y ::highlight) en el panel Estilos. Anteriormente, estas reglas no se mostraban.

Como se menciona en la especificación, cuando varios estilos entran en conflicto, la cascada determina el estilo ganador. Esta nueva función ayuda a comprender la herencia y la prioridad de las reglas.

Por el momento, debe ejecutar Chrome con el flag --enable-blink-features=HighlightInheritance para habilitar esta función.

Mostrar pseudoelementos heredados resaltados en el panel Estilos

Chromium issue: 1024156

Destacados varios

Estas son algunas correcciones notables en esta versión:

  • El panel Propiedades ahora muestra las propiedades del accesor con valor de forma predeterminada. Anteriormente se ocultó por error. (1309087)
  • El panel Estilos ahora muestra correctamente las reglas anuladas de @support como tachadas. Anteriormente, las reglas no estaban tachadas. (1298025)
  • Se corrigió la lógica de formato de CSS en el panel Fuentes que causaba múltiples líneas en blanco al editar CSS. (1309588)
  • Limitación en la opción Expandir recursivamente de un objeto en la Consola a un máximo de 100 para evitar bucles innfinitos en los objetos circulares. (1272450)

[Experimental] Copiar cambios de CSS

Para habilitar el experimento, marque Sincronizar cambios de CSS en el panel Estilos en Configuración > Experimentos.

Con este experimento, el panel Estilos resalta sus cambios de CSS en verde. Puede pasar el cursor sobre las reglas modificadas y hacer clic en el nuevo botón de copia junto a él para copiarlo.

Aparte de eso, puede copiar todos los cambios de CSS en las declaraciones haciendo clic derecho en cualquier regla y seleccionando Copiar todos los cambios de CSS.

¡También se agregó un nuevo botón Copiar a la pestaña Cambios para ayudarlo a realizar un seguimiento y copiar sus cambios de CSS con facilidad!

Copiar cambios de CSS

Chromium issue: 1268754

[Experimental] Selección de color fuera del navegador

Para habilitar el experimento, marque Habilitar selección de color fuera de la ventana del navegador en Configuración > Experimentos.

Habilite este experimento para elegir un color fuera del navegador con el selector de color. Anteriormente, solo podía elegir un color dentro del navegador.

En el panel Estilos, haga clic en cualquier vista previa de color para abrir el selector de color. Usa el cuentagotas para elegir el color de cualquier lugar.

Elegir color fuera del navegador

Chromium issue: 1245191

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 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Last updated: Improve article

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