Novedades de Herramientas para desarrolladores (Chrome 73)

Kayce Basques

Estas son las novedades de las Herramientas para desarrolladores en Chrome 73.

Versión en video de estas notas de la versión

Puntos de registro

Usa puntos de registro para registrar mensajes en la consola sin saturar tu código con llamadas a console.log().

Para agregar un punto de registro, haz lo siguiente:

1. Haz clic con el botón derecho en el número de línea en el que deseas agregar el punto de registro.

   

   Figura 1. Cómo agregar un punto de registro

2. Selecciona Agregar punto de registro. Aparecerá el Editor de puntos de interrupción.

   

   Figura 2. El editor de puntos de interrupción

3. En el Editor de puntos de interrupción, ingresa la expresión que deseas registrar en la consola.

   

   Figura 3. Cómo escribir la expresión del punto de registro

   Sugerencia: Cuando registres una variable (p.ej., TodoApp), envuélvela en un objeto (p.ej., {TodoApp}) para registrar su nombre y valor en la consola. Consulta Always Log Objects y Object Property Value Shorthand para obtener más información sobre esta sintaxis.

4. Presiona Intro o haz clic fuera del Editor de puntos de interrupción para guardar los cambios. La insignia naranja sobre el número de línea representa el punto de registro.

   

   Figura 4. Una insignia de Logpoint naranja en la línea 174

La próxima vez que se ejecute la línea, Herramientas para desarrolladores registrará el resultado de la expresión del punto de registro en la consola.

Figura 5. El resultado de la expresión del punto de registro en la consola

Consulta el problema de Chromium núm. 700519 para informar errores o sugerir mejoras.

Información sobre herramientas detallada en el modo de inspección

Cuando inspeccionas un nodo, DevTools ahora muestra una sugerencia expandida que contiene información importante habitual, como el tamaño y el color de la fuente, la relación de contraste y las dimensiones del modelo de caja.

Figura 6. Cómo inspeccionar un nodo

Para inspeccionar un nodo, haz lo siguiente:

1. Haz clic en Inspeccionar .

   Sugerencia: Coloca el cursor sobre Inspeccionar para ver su combinación de teclas.

2. En tu viewport, coloca el cursor sobre el nodo.

Cómo exportar datos de cobertura de código

Ahora, los datos de cobertura de código se pueden exportar como un archivo JSON. El JSON se ve de la siguiente manera:

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

url es la URL del archivo CSS o JavaScript que analizó DevTools. ranges describe las partes del código que se usaron. start es el desplazamiento inicial de un rango que se usó. end es el desplazamiento final. text es el texto completo del archivo.

En el ejemplo anterior, el rango de 0 a 21 corresponde a body { margin: 1em; } y el rango de 45 a 67 corresponde a h1 { color: #317EFB; }. En otras palabras, se usaron el primer y el último conjunto de reglas, pero no el del medio.

Para analizar la cantidad de código que se usa en la carga de la página y exportar los datos, haz lo siguiente:

1. Presiona Ctrl + Mayúsculas + P o Cmd + Mayúsculas + P (Mac) para abrir el menú de comandos.

   

   Figura 7. El menú de comandos

2. Comienza a escribir coverage, selecciona Show Coverage y, luego, presiona Intro.

   

   Figura 8. Mostrar cobertura

   Se abrirá la pestaña Cobertura.

   

   Figura 9. La pestaña Cobertura

3. Haz clic en Volver a cargar . DevTools vuelve a cargar la página y registra la cantidad de código que se usa en comparación con la cantidad que se envía.

4. Haz clic en Exportar para exportar los datos como un archivo JSON.

La cobertura de código también está disponible en Puppeteer, una herramienta de automatización del navegador que mantiene el equipo de Herramientas para desarrolladores. Consulta Cobertura.

Consulta el problema de Chromium núm. 717195 para informar errores o sugerir mejoras.

Navega por la consola con el teclado

Ahora puedes usar el teclado para navegar por la consola. A continuación, se muestra un ejemplo.

Si presionas Mayúsculas + Tab, se enfoca el último mensaje (o el resultado de una expresión evaluada). Si el mensaje contiene vínculos, el último vínculo se destaca primero. Si presionas Intro, se abrirá el vínculo en una pestaña nueva. Si presionas la tecla de flecha hacia la izquierda, se destaca todo el mensaje (consulta la figura 13).

Figura 11: Cómo enfocar un vínculo

Si presionas la tecla de flecha hacia arriba, se enfocará el siguiente vínculo.

Figura 12: Cómo enfocar otro vínculo

Si vuelves a presionar la tecla de flecha hacia arriba, se enfocará todo el mensaje.

Figura 13: Cómo enfocar un mensaje completo

Si presionas la tecla de flecha hacia la derecha, se expande un registro de seguimiento contraído (o un objeto, un array, etcétera).

Figura 14. Cómo expandir un seguimiento de pila contraído

Si presionas la tecla de flecha hacia la izquierda, se contrae un mensaje o resultado expandido.

Consulta el problema núm. 865674 de Chromium para informar errores o sugerir mejoras.

Línea de proporción de contraste AAA en el selector de color

El selector de color ahora muestra una segunda línea para indicar qué colores cumplen con la recomendación de proporción de contraste AAA. La línea AA está disponible desde Chrome 65.

Figura 15. La línea AA (arriba) y la línea AAA (abajo)

Los colores entre las 2 líneas representan los colores que cumplen con la recomendación AA, pero no con la recomendación AAA. Cuando un color cumple con la recomendación AAA, todo lo que se encuentre del mismo lado de ese color también cumple con la recomendación. Por ejemplo, en la figura 15, todo lo que se encuentra debajo de la línea inferior es AAA, y todo lo que se encuentra por encima de la línea superior ni siquiera cumple con la recomendación de AA.

Sugerencia: En general, puedes mejorar la legibilidad de tus páginas aumentando la cantidad de texto que cumple con la recomendación AAA. Si no es posible cumplir con la recomendación AAA por algún motivo, intenta al menos cumplir con la recomendación AA.

Consulta Proporción de contraste en el selector de color para obtener información sobre cómo acceder a esta función.

Consulta el problema de Chromium núm. 879856 para informar errores o sugerir mejoras.

Cómo guardar anulaciones de ubicación geográfica personalizadas

La pestaña Sensores ahora te permite guardar anulaciones de geolocalización personalizadas.

1. Presiona Ctrl + Mayúsculas + P o Cmd + Mayúsculas + P (Mac) para abrir el menú de comandos.

   

   Figura 16: El menú de comandos

2. Escribe sensors, selecciona Show Sensors y presiona Intro. Se abrirá la pestaña Sensores.

   

   Figura 17: La pestaña Sensores

3. En la sección Ubicación geográfica, haz clic en Administrar. Se abrirá Configuración > Ubicaciones geográficas.

   

   Figura 18: La pestaña Geolocations en Configuración

4. Haz clic en Agregar ubicación.

5. Ingresa un nombre de ubicación, la latitud y la longitud, y, luego, haz clic en Agregar.

   

   Figura 19. Cómo agregar una ubicación geográfica personalizada

Consulta el problema de Chromium núm. 649657 para informar errores o sugerir mejoras.

Plegado de código

Los paneles Sources y Network ahora admiten el plegado de código.

Figura 20: Se plegaron las líneas de la 54 a la 65

Para habilitar el plegado de código, haz lo siguiente:

1. Presiona F1 para abrir Configuración.
2. En Configuración > Preferencias > Fuentes, habilita Plegado de código.

Para plegar un bloque de código, haz lo siguiente:

1. Coloca el cursor del mouse sobre el número de línea en el que comienza el bloque.
2. Haz clic en Plegar .

Consulta el problema núm. 328431 de Chromium para informar errores o sugerir mejoras.

Pestaña Mensajes

Se cambió el nombre de la pestaña Frames a Mensajes. Esta pestaña solo está disponible en el panel Red cuando se inspecciona una conexión de WebSocket.

Figura 21. La pestaña Mensajes

Consulta el problema núm. 802182 de Chromium para informar errores o sugerir mejoras.

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 vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con Herramientas para desarrolladores.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de Herramientas para desarrolladores con more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Envía un tuit a @ChromeDevTools.
• Deja comentarios en los videos de Novedades de las Herramientas para desarrolladores de YouTube o en los videos de Sugerencias sobre las Herramientas para desarrolladores de YouTube.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de DevTools