Novedades de Herramientas para desarrolladores (Chrome 73)

Kayce Basques
Kayce Basques
X GitHub Error

Estas son las novedades de DevTools en 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.

    Agrega un punto de registro

    Figura 1. Agrega un punto de registro

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

    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.

    Cómo escribir la expresión de Logpoint

    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.

    Una insignia de Logpoint naranja en la línea 174

    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 la Console.

El resultado de la expresión de Logpoint en la consola

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

Consulta el problema #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 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.

Cómo inspeccionar un nodo

Figura 6. Cómo inspeccionar un nodo

Para inspeccionar un nodo, haz lo siguiente:

  1. Haz clic en Inspeccionar Cómo inspeccionar un nodo.

    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 corresponde 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.

    El menú de comandos

    Figura 7. El menú de comandos

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

    Mostrar cobertura

    Figura 8. Mostrar cobertura

    Se abrirá la pestaña Cobertura.

    La pestaña Cobertura

    Figura 9. La pestaña Cobertura

  3. Haz clic en Volver a cargar 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 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 #717195 de Chromium 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).

Cómo enfocar un vínculo

Figura 11: Cómo enfocar un vínculo

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

Cómo enfocar otro 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.

Cómo enfocar un mensaje completo

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).

Cómo expandir un seguimiento de pila colapsado

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.

Línea AA (superior) y línea AAA (inferior)

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 AA, pero no con la recomendación 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.

    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.

    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.

    La pestaña Ubicaciones geográficas en Configuración

    Figura 18: La pestaña Ubicaciones geográficas en Configuración

  4. Haz clic en Agregar ubicación.

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

    Cómo agregar una geolocalización personalizada

    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.

Se doblaron las líneas 54 a 65

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 Settings > Preferences > Sources, habilita Code folding.

Para contraer 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 Doblar Plegar.

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

Pestaña Mensajes

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

La pestaña Mensajes

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 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 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.

Novedades de DevTools

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