Novedades de Herramientas para desarrolladores (Chrome 73)

Kayce Basques

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

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

Puntos de registro

Usa Logpoints para registrar mensajes en la consola sin desordenar tu código con llamadas a console.log().

Para agregar un punto de registro, sigue estos pasos:

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. Agrega 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 de Logpoint

   Sugerencia: Cuando salgas de una variable (p.ej., TodoApp), une la variable en un objeto (p.ej., {TodoApp}) para salir de su nombre y valor en la Consola. Consulta Cómo registrar objetos siempre y Símbolo de taquigrafía para el valor de la propiedad de objeto para obtener más información sobre esta sintaxis.

4. Presiona Intro o haz clic fuera del Editor de puntos de interrupción para guardarlos. 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, DevTools registrará el resultado de la expresión de Logpoint en Console.

Figura 5. El resultado de la expresión de Logpoint en la consola

Consulta el problema n.o 700519 de Chromium 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 información sobre herramientas expandida que contiene información generalmente importante, como el tamaño de la fuente, el color de la fuente, la relación de contraste y las dimensiones del modelo de cuadro.

Figura 6. Cómo inspeccionar un nodo

Para inspeccionar un nodo, haz lo siguiente:

1. Haz clic en Inspeccionar .

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

2. En la ventana de visualización, coloca el cursor sobre el nodo.

Cómo exportar datos de cobertura de código

Los datos de cobertura de código ahora 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 a h1 { color: #317EFB; }. En otras palabras, se usaron el primer y el último conjunto de reglas, y 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 Control + Mayúsculas + P o Comando + Mayúsculas + P (Mac) para abrir el menú de comandos.

   

   Figura 7. 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 cuánto código 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 de navegadores que mantiene el equipo de DevTools. Consulta Cobertura.

Consulta el problema de Chromium #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 enfocará el último mensaje (o el resultado de una expresión evaluada). Si el mensaje contiene vínculos, primero se destaca el último. 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

Cuando presionas la tecla de flecha hacia arriba, se enfoca el siguiente vínculo.

Figura 12: 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 seguimiento de pila contraído (o un objeto, un array, etcétera).

Figura 14. Cómo expandir un seguimiento de pila colapsado

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

Consulta el problema #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á presente desde Chrome 65.

Figura 15. Línea AA (superior) y línea AAA (inferior)

Los colores entre las 2 líneas representan colores que cumplen con la recomendación de AA, pero que no cumplen con la recomendación de AAA. Cuando un color cumple con la recomendación AAA, todo lo que esté en el mismo lado de ese color también cumple con la recomendación. Por ejemplo, en la Figura 15, todo lo que está debajo de la línea inferior es AAA, y todo lo que está 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 si aumentas la cantidad de texto que cumple con la recomendación de AAA. Si no es posible cumplir con la recomendación AAA por algún motivo, intenta cumplir al menos 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 #879856 de Chromium 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 Control + Mayúsculas + P o Comando + Mayúsculas + P (Mac) para abrir el menú de comandos.

   

   Figura 16: 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 Geolocation, haz clic en Manage. Se abrirá Configuración > Ubicaciones geográficas.

   

   Figura 18: La pestaña Ubicación geográfica en Configuración

4. Haz clic en Agregar ubicación.

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

   

   Figura 19: Cómo agregar una geolocalización personalizada

Consulta el problema #649657 de Chromium 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 doblaron las líneas 54 a 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 Fold .

Consulta el problema #328431 de Chromium para informar errores o sugerir mejoras.

Pestaña Mensajes

El nombre de la pestaña Frames cambió a Messages. Esta pestaña solo está disponible en el panel Red cuando se inspecciona una conexión de socket web.

Figura 21: La pestaña Mensajes

Consulta el problema #802182 de Chromium para informar errores o sugerir mejoras.

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.
• Para informar un problema de Herramientas para desarrolladores, usa more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Twittea a @ChromeDevTools.
• Deja comentarios en los 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.