Se usó la API de Cloud Translation para traducir esta página.

Novedades de Herramientas para desarrolladores (Chrome 73)

Kayce Basques

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

Versión de 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 console.log().

Para agregar un punto de registro, haz lo siguiente:

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

Figura 1: Agregar un punto de registro
Selecciona Agregar punto de registro. Aparecerá Breakpoint Editor.

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

Figura 3. Escribir la expresión del punto de registro

Sugerencia: Cuando salgas de una variable (p.ej., TodoApp), une la variable a un objeto (p.ej., {TodoApp}) para registrar su nombre y valor en Console. Consulta Objetos de registro siempre y Abreviatura del valor de propiedad del objeto para obtener más información sobre esta sintaxis.
Presiona Intro o haz clic fuera del Editor de puntos de interrupción para guardar. La insignia naranja sobre el número de línea representa el punto de registro.

Figura 4. Una insignia naranja de Logpoint 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.

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 error #700519 de Chromium para informar errores o sugerir mejoras.

Información detallada sobre la herramienta en el modo de inspección

Cuando inspeccionas un nodo, Herramientas para desarrolladores ahora muestra un cuadro de información expandido que contiene información que suele ser importante, como el tamaño y el color de la fuente, la proporción de contraste y las dimensiones del modelo de caja.

Inspecciona un nodo

Figura 6. Inspecciona un nodo

Para inspeccionar un nodo, haz lo siguiente:

Haz clic en Inspect .

Sugerencia: Coloca el cursor sobre Inspect para ver la combinación de teclas.
En el viewport, 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ó Herramientas para desarrolladores. 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 el del medio no.

Para analizar cuánto código se usa cuando se carga la página y exportar los datos, haz lo siguiente:

Presiona Control + Mayúsculas + P o Comando + Mayúsculas + P (Mac) para abrir el menú de comandos.

Figura 7: El menú Comandos
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
Haz clic en Volver a cargar . Herramientas para desarrolladores vuelve a cargar la página y registra cuánto código se usa en comparación con cuánto se envía.
Haz clic en Export 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 Herramientas para desarrolladores. Consulta Cobertura.

Consulta el error #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. Este es un ejemplo.

Cuando presionas Mayúsculas + Tab, se enfoca el último mensaje (o el resultado de una expresión evaluada). Si el mensaje contiene vínculos, se destacará el último vínculo primero. Si presionas Intro, se abre el vínculo en una pestaña nueva. Si presionas la tecla de flecha Izquierda, se destacará 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 hacia arriba, se enfoca el siguiente vínculo.

Enfocar otro vínculo

Figura 12: Enfocar otro vínculo

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

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

Cómo expandir un seguimiento de pila contraído

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

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

Consulta el error #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 de la AAA. La línea AA funciona desde Chrome 65.

La línea AA (arriba) y AAA (inferior)

Figura 15: La línea AA (arriba) y AAA (inferior)

Los colores entre las 2 líneas representan los colores que cumplen con la recomendación de AAA, pero que no lo hacen. Cuando un color cumple con la recomendación de AAA, todo lo que se encuentre en el mismo lado de ese color también cumple con la recomendación. Por ejemplo, en la Figura 15, todo lo que esté por 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 de AAA por algún motivo, intenta cumplir al menos con la recomendación de AA.

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

Consulta el error #879856 de Chromium para informar errores o sugerir mejoras.

Guardar anulaciones de ubicación geográfica personalizada

La pestaña Sensores ahora te permite guardar anulaciones personalizadas de la ubicación geográfica.

Presiona Control + Mayúsculas + P o Comando + Mayúsculas + P (Mac) para abrir el menú de comandos.

Figura 16: El menú Comandos
Escribe sensors, selecciona Mostrar sensores y presiona Intro. Se abrirá la pestaña Sensors.

Figura 17: La pestaña Sensores
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
Haz clic en Agregar ubicación.
Ingresa el nombre, la latitud y la longitud de una ubicación y, luego, haz clic en Agregar.

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

Consulta el error #649657 de Chromium para informar errores o sugerir mejoras.

Plegado de código

Los paneles Fuentes y Red 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:

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

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

Coloca el cursor sobre el número de línea donde comienza el bloque.
Haz clic en Plegar .

Consulta el error #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 inspeccionas una conexión de socket web.

La pestaña Mensajes

Figura 21: La pestaña Mensajes

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

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

Envíanos tus sugerencias o comentarios a través de crbug.com.
Informa un problema en Herramientas para desarrolladores mediante Más opciones > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
Envía un tweet a @ChromeDevTools.
Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).