Novedades de Herramientas para desarrolladores (Chrome 73)

Kayce Basques
Kayce Basques
X GitHub Error

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 la consola sin desordenar tu código con console.log(). llamadas.

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 la 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. Aparece el Editor de puntos de interrupción.

    Editor de puntos de interrupción

    Figura 2. 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 Punto de registro

    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 Registrar objetos siempre y Consulta la sección Herramienta abreviada del valor de propiedad del 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 guardar. La insignia naranja sobre el número de línea representa el punto de registro.

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

    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 el de Cloud.

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 información 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:

  1. Haz clic en Inspect Inspecciona un nodo.

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

  2. 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 lo siguiente: 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 45 a 67 corresponde a h1 { color: #317EFB; }. En otras palabras, se usaron el primer y el último conjunto de reglas y la del medio no.

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ús + P (Mac) para abrir el menú de comandos.

    Menú de comandos

    Figura 7. 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 datos como un archivo JSON.

La cobertura de código también está disponible en Puppeteer, una herramienta de automatización de navegadores mantenida por Herramientas para desarrolladores equipo. 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. A continuación, se muestra un ejemplo.

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

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 relación de contraste AAA. recomendación. 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 AAA. recomendación. 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, cualquier cosa 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, puedes mejorar la legibilidad de tus páginas aumentando la cantidad de texto que cumpla con la recomendación de AAA. Si, en algunos casos, no es posible cumplir con la recomendación de la AAA una buena razón, 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.

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

    Menú de comandos

    Figura 16: Menú de comandos

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

    La pestaña Sensores

    Figura 17: La pestaña Sensores

  3. En la sección Geolocation, haz clic en Manage. Configuración > Se abrirá Geolocations.

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

    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.

    Agrega una ubicación geográfica personalizada

    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:

  1. Presiona F1 para abrir la Configuración.
  2. En Configuración > Preferencias > Las fuentes habilitan el plegado del código.

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

  1. Coloca el cursor del mouse sobre el número de la línea donde comienza el bloque.
  2. Haz clic en Plegar 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 plataformas 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.
  • Informa un problema en Herramientas para desarrolladores con Más opciones   Más > Ayuda > Informa 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.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.