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 de Chrome 73.

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

Puntos de registro

Usa puntos de registro para registrar mensajes en Console 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: Agrega un punto de registro
Selecciona Agregar punto de registro. Aparece el Editor de puntos de interrupción.

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. Cómo escribir la expresión Punto de registro

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 Console. Consulta Registra siempre los objetos 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 en la parte superior del número de línea representa el punto de registro.

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

La próxima vez que se ejecute la línea, las 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 Console

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

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

Cuadros de información detallados en el modo de inspección

Cuando se inspecciona un nodo, las Herramientas para desarrolladores ahora muestran un cuadro de información expandido que contiene información de importancia común, como el tamaño y el color, 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 Inspeccionar para ver la combinación de teclas.
En el viewport, coloca el cursor sobre el nodo.

Exporta 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 analizaron las 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 a h1 { color: #317EFB; }. En otras palabras, se usó 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:

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

Figura 7: Menú de 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 . Las Herramientas para desarrolladores vuelven a cargar la página y registran la cantidad de código que se usa en comparación con la cantidad que se envía.
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 Herramientas para desarrolladores. Consulta Cobertura.

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

Cómo navegar por la consola con el teclado

Ahora puedes usar el teclado para navegar por la consola. Este es 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, se destacará primero el último vínculo. Si presionas Intro, se abre el vínculo en una pestaña nueva. Cuando se presiona la tecla de flecha izquierda, se destaca todo el mensaje (consulta la Figura 13).

Enfocar un vínculo

Figura 11: Enfocar un vínculo

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

Enfocar otro vínculo

Figura 12: Enfocar otro vínculo

Vuelve a presionar la flecha hacia arriba para enfocar todo el mensaje.

Enfocar un mensaje completo

Figura 13: Enfocar un mensaje completo

Cuando se presiona la 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 contraído

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

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

Consulta el problema de Chromium #865674 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 relación de contraste AAA. La línea AA existe desde Chrome 65.

Línea AA (arriba) y línea AAA (abajo)

Figura 15: Línea AA (arriba) y línea AAA (abajo)

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 de AAA, cualquier elemento del 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 cualquier cosa por encima de la línea superior ni siquiera cumple con la recomendación de AA.

Sugerencia: En general, para mejorar la legibilidad de tus páginas, puedes aumentar la cantidad de texto que cumpla con la recomendación de AAA. Si por alguna razón no es posible cumplir con la recomendación de la AAA, intenta al menos cumplir con la recomendación de 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 #879856 para informar errores o sugerir mejoras.

Guardar anulaciones de ubicación geográfica personalizadas

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

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

Figura 16: Menú de comandos
Escribe sensors, selecciona Mostrar sensores y presiona Intro. Se abrirá la pestaña Sensores.

Figura 17: La pestaña Sensores
En la sección Geolocation, haz clic en Manage. Se abrirá Configuración > Ubicación geográfica.

Figura 18: La pestaña Ubicación geográfica en Configuración
Haz clic en Agregar ubicación.
Ingresa el nombre, la latitud y la longitud de la ubicación y, luego, haz clic en Agregar.

Figura 19: Agrega una ubicación geográfica personalizada

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

Plegado de código

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

Se plegaron las líneas 54 a 65

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

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

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

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

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

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 Network cuando se inspecciona una conexión de socket web.

La pestaña Mensajes

Figura 21: La pestaña Mensajes

Consulta el problema de Chromium #802182 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 vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataforma web de vanguardia y detectan problemas en tu sitio antes que los usuarios.

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

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

Para enviarnos sugerencias o comentarios, accede a crbug.com.
Para informar un problema de Herramientas para desarrolladores, use Más opciones > Ayuda > Informar problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
Twittea a @ChromeDevTools.
Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.