Cómo usar las herramientas de desarrollo del navegador web

2024 Autor: Abigail Brown | [email protected]. Última modificación: 2024-01-07 19:02

Además de que la mayoría de los fabricantes de navegadores se enfocan en el usuario cotidiano que busca navegar por la web, también atienden a los desarrolladores web, diseñadores y profesionales de control de calidad que ayudan a crear las aplicaciones y los sitios a los que acceden esos usuarios mediante la integración de potentes herramientas directamente en los propios navegadores.

Ya pasaron los días en los que las únicas herramientas de programación y prueba que se encontraban dentro de un navegador le permitían ver el código fuente de una página y nada más. Los navegadores de hoy en día le permiten realizar una inmersión mucho más profunda haciendo cosas como ejecutar y depurar fragmentos de JavaScript, inspeccionar y editar elementos DOM, monitorear el tráfico de red en tiempo real a medida que su aplicación o página se carga para identificar cuellos de botella, analizar el rendimiento de CSS, garantizar que su código sea no utilizar demasiada memoria o demasiados ciclos de CPU, y mucho más.

Desde una perspectiva de prueba, puede reproducir cómo se representará una aplicación o una página web en diferentes navegadores, así como en diferentes dispositivos y plataformas a través de la magia del diseño receptivo y los simuladores integrados. ¡La mejor parte es que puedes hacer todo esto sin tener que salir de tu navegador!

Los tutoriales a continuación lo guiarán a través de cómo acceder a estas herramientas de desarrollo en varios navegadores web populares.

Google Chrome

Las herramientas de desarrollo de Chrome le permiten editar y depurar código, auditar componentes individuales para exponer problemas de rendimiento, simular diferentes pantallas de dispositivos, incluidas las que ejecutan Android o iOS, y realizar otras funciones útiles.

1. Seleccione el menú principal de Chrome, marcado con tres líneas horizontales y ubicado en la esquina superior derecha del navegador.

2. Cuando aparezca el menú desplegable, pase el cursor del mouse sobre la opción Más herramientas.

   

3. Ahora debería aparecer un submenú. Seleccione la opción etiquetada Herramientas de desarrollo. También puede usar el siguiente método abreviado de teclado en lugar de este elemento de menú: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +COMANDO+I)

   

4. Ahora debería mostrarse la interfaz de Chrome Developer Tools, como se muestra en esta captura de pantalla de ejemplo. Dependiendo de su versión de Chrome, el diseño inicial que ve puede ser ligeramente diferente al que se presenta aquí. El centro principal de las herramientas para desarrolladores, que normalmente se encuentra en la parte inferior o en el lado derecho de la pantalla, contiene las siguientes pestañas.

5. Además de estas secciones, también puede acceder a las siguientes herramientas a través del icono >>, ubicado a la derecha de Rendimiento pestaña.

   • Memory: supervisa y registra el uso de la memoria en una página web. Puede ver qué tan pesado es el JavaScript en su sitio.
   • Seguridad: Res alta problemas de certificados y otros problemas relacionados con la seguridad con la página o aplicación activa.
   • Application: inspeccionar los recursos que utiliza una aplicación web. Obtenga un desglose completo de lo que se está utilizando.
   • Auditorías: ofrece formas de optimizar el tiempo de carga y el rendimiento general de una página o aplicación.

   

6. Device Mode le permite ver la página activa en un simulador que la representa casi exactamente como aparecería en uno de más de una docena de dispositivos, incluidos varios Android conocidos. y modelos de iOS como iPad, iPhone y Samsung Galaxy. También tiene la capacidad de emular resoluciones de pantalla personalizadas para adaptarse a sus necesidades particulares de desarrollo o prueba.

   Para activar y desactivar el Modo dispositivo, seleccione el ícono de teléfono móvil ubicado directamente a la izquierda de Elementos pestaña.

   

7. También puede personalizar la apariencia de sus herramientas de desarrollador seleccionando primero el botón de menú representado por tres puntos colocados verticalmente y ubicado en el extremo derecho de las pestañas antes mencionadas.

   Desde este menú desplegable, puede cambiar la posición de la base, mostrar u ocultar diferentes herramientas, así como iniciar elementos más avanzados, como un inspector de dispositivos. Descubrirá que la interfaz de herramientas de desarrollo en sí misma es altamente personalizable a través de la configuración que se encuentra en esta sección.

   

MozillaFirefox

La sección de desarrollo web de Firefox incluye herramientas para diseñadores, desarrolladores y probadores, como un editor de estilo y un cuentagotas de selección de píxeles.

1. Seleccione el menú principal de Firefox, representado por tres líneas horizontales y ubicado en la esquina superior derecha de la ventana del navegador.

2. Cuando aparezca el menú desplegable, seleccione Desarrollador web.

   

3. El Menú de desarrollador web Debería aparecer ahora, con las siguientes opciones. Notarás que la mayoría de los elementos del menú tienen atajos de teclado asociados.

   • Toggle Tools: muestra u oculta la interfaz de herramientas de desarrollo, que normalmente se encuentra en la parte inferior de la ventana del navegador. Método abreviado de teclado: Mac OS X (ALT(OPCIÓN)+COMANDO+I), Windows (CTRL+SHIFT+I)
   • Inspector: Le permite inspeccionar y/o modificar el código CSS y HTML en la página activa, así como en un dispositivo portátil a través de la depuración remota. Método abreviado de teclado: Mac OS X (ALT(OPCIÓN)+COMANDO+C), Windows (CTRL+MAYÚS+C)
   • Web Console: le permite ejecutar expresiones de JavaScript dentro de la página activa, así como revisar un conjunto diverso de datos registrados, incluidas advertencias de seguridad, solicitudes de red, mensajes CSS y más. Método abreviado de teclado: Mac OS X (ALT(OPCIÓN)+COMANDO+K), Windows (CTRL+MAYÚS+K)
   • Debugger: el depurador de JavaScript le permite identificar y corregir defectos mediante el establecimiento de puntos de interrupción, la inspección de nodos DOM, fuentes externas de caja negra y mucho más. Como es el caso del Inspector, esta función también admite la depuración remota. Método abreviado de teclado: Mac OS X (ALT(OPCIÓN)+COMANDO+S), Windows (CTRL+MAYÚS+S)
   • Editor de estilo: le permite crear nuevas hojas de estilo e incorporarlas a la página web activa, o editar hojas existentes y probar cómo se procesan sus cambios en un navegador con solo un clic. Método abreviado de teclado: Mac OS X, Windows (SHIFT+F7)
   • Performance: proporciona un desglose detallado del rendimiento de la red de la página activa, los datos de velocidad de fotogramas, el tiempo y el estado de ejecución de JavaScript, el flasheo de pintura y mucho más. Método abreviado de teclado: Mac OS X, Windows (SHIFT+F5)
   • Network: enumera cada solicitud de red iniciada por el navegador junto con el método correspondiente, el dominio de origen, el tipo, el tamaño y el tiempo transcurrido. Método abreviado de teclado: Mac OS X (ALT(OPCIÓN)+COMANDO+Q), Windows (CTRL+MAYÚS+Q)
   • Storage Inspector: observe la memoria caché y las cookies almacenadas por un sitio web. Método abreviado de teclado: (MAYÚS+F9)
   • Developer Toolbar: abre un intérprete de línea de comandos interactivo. Introduzca ayuda en el intérprete para obtener una lista de todos los comandos disponibles y su sintaxis adecuada. Atajo de teclado: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Brinda la capacidad de crear y ejecutar aplicaciones web a través de un dispositivo real que ejecuta Firefox OS o mediante el simulador de Firefox OS. Método abreviado de teclado: Mac OS X, Windows (SHIFT+F8)
   • Browser Console: Proporciona la misma funcionalidad que Web Console (ver arriba). Sin embargo, todos los datos devueltos son para toda la aplicación Firefox (incluidas las extensiones y las funciones a nivel de navegador) en lugar de solo la página web activa. Atajo de teclado: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Responsive Design View: le permite ver instantáneamente una página web en diferentes resoluciones, diseños y tamaños de pantalla para imitar varios dispositivos, incluidas tabletas y teléfonos inteligentes. Método abreviado de teclado: Mac OS X (ALT(OPCIÓN)+COMANDO+M), Windows (CTRL+MAYÚS+M)
   • Eyedropper: Muestra el código de color hexadecimal para los píxeles seleccionados individualmente.
   • Scratchpad: Scratchpad te permite escribir, editar, integrar y ejecutar fragmentos de código JavaScript desde una ventana emergente de Firefox. Abra un documento JavaScript interactivo que le permita escribir código y probarlo en un sitio web. Método abreviado de teclado: (MAYÚS+F4)
   • Service Workers: Depure los service workers de su aplicación web. Obtenga información detallada sobre su rendimiento y errores.
   • Fuente de la página: la herramienta de desarrollo original basada en navegador, esta opción simplemente muestra el código fuente disponible para la página activa. Método abreviado de teclado: Mac OS X (COMANDO+U), Windows (CTRL+U)
   • Get More Tools: Abre la colección Web Developer's Toolbox en el sitio oficial de complementos de Mozilla, que incluye una docena de extensiones populares como como Firebug y Greasemonkey.

   

Microsoft Edge/Internet Explorer

Comúnmente conocido como F12 Developer Tools, un homenaje al atajo de teclado que ha lanzado la interfaz desde versiones anteriores de Internet Explorer, el conjunto de herramientas de desarrollo en IE11 y Microsoft Edge ha recorrido un largo camino desde sus inicios al ofrecer un grupo muy útil de monitores, depuradores, emuladores y compiladores sobre la marcha.

Microsoft ya no es compatible con Internet Explorer y recomienda que actualice al navegador Edge más reciente. Dirígete a su sitio para descargar la versión más reciente.

1. Seleccione Más acciones, representado por tres puntos y ubicado en la esquina superior derecha de la ventana del navegador.

   

2. Cuando aparezca el menú desplegable, seleccione la opción etiquetada Herramientas para desarrolladores.

   

3. Ahora debería mostrarse la interfaz de desarrollo, normalmente en la parte inferior de la ventana del navegador. Las siguientes herramientas están disponibles, a cada una de las cuales se puede acceder haciendo clic en el encabezado de su pestaña respectiva o usando el atajo de teclado adjunto.

   

   • DOM Explorer: Le permite editar hojas de estilo y HTML en la página activa, mostrando los resultados modificados sobre la marcha. Utiliza la funcionalidad de IntelliSense para completar automáticamente el código cuando corresponda. Atajo de teclado: (CTRL+1)
   • Console: proporciona la capacidad de enviar información de depuración, incluidos contadores, temporizadores, seguimientos y mensajes personalizados a través de una API integrada. Además, le permite inyectar código en una página web activa y modificar los valores asignados a variables individuales en tiempo real. Atajo de teclado: (CTRL+2)
   • Debugger: Le permite establecer puntos de interrupción y depurar su código mientras se ejecuta, línea por línea si es necesario. Atajo de teclado: (CTRL+3)
   • Network: enumera cada solicitud de red iniciada por el navegador durante la carga y ejecución de la página, incluidos los detalles del protocolo, el tipo de contenido, el uso del ancho de banda y mucho más. Atajo de teclado: (CTRL+4)
   • Rendimiento: detalla las velocidades de fotogramas, la utilización de la CPU y otras métricas relacionadas con el rendimiento para ayudarlo a acelerar los tiempos de carga de la página y otras actividades. Atajo de teclado: (CTRL+5)
   • Memory: lo ayuda a aislar y corregir posibles fugas de memoria en la página web actual al mostrar una línea de tiempo de uso de memoria junto con instantáneas de diferentes intervalos de tiempo. Atajo de teclado: (CTRL+6)
   • Emulación: le muestra cómo se representaría la página activa en varias resoluciones y tamaños de pantalla, emulando teléfonos inteligentes, tabletas y otros dispositivos. También proporciona la capacidad de modificar el agente de usuario y la orientación de la página, así como simular diferentes geolocalizaciones ingresando una latitud y longitud. Atajo de teclado: (CTRL+7)

4. Para mostrar la Consola mientras está dentro de cualquiera de las otras herramientas, presione el botón cuadrado con un corchete derecho dentro, ubicado en la esquina superior derecha de la interfaz de herramientas de desarrollo.

   

5. Para desacoplar la interfaz de herramientas de desarrollo para que se convierta en una ventana separada, seleccione los dos rectángulos en cascada o use el siguiente método abreviado de teclado: CTRL+P. Puede volver a colocar las herramientas en su ubicación original presionando CTRL+P por segunda vez.

   

Safari de Apple (solo Mac)

El diverso conjunto de herramientas de desarrollo de Safari refleja la gran comunidad de desarrolladores que utiliza una Mac para sus necesidades de diseño y programación. Además de una consola potente y funciones tradicionales de registro y depuración, también se proporciona un modo de diseño receptivo fácil de usar y una herramienta para crear sus propias extensiones de navegador.

1. Seleccione Safari en el menú del navegador, ubicado en la parte superior de la pantalla. Cuando aparezca el menú desplegable, seleccione Preferencias. También puede usar el siguiente método abreviado de teclado en lugar de este elemento de menú: COMMAND+COMMA(,)

   

2. La interfaz de

   Safari Preferences debería mostrarse ahora, superpuesta a la ventana de su navegador. Seleccione el icono Avanzado, ubicado en el extremo derecho del encabezado.

   

3. Las preferencias Avanzado ahora deberían estar visibles. En la parte inferior de esta pantalla hay una opción etiquetada como Mostrar menú de desarrollo en la barra de menú, acompañada de una casilla de verificación. Si no se muestra una marca de verificación en el cuadro, haga clic en ella una vez para colocar una allí.

   

4. Cerrar la interfaz de Preferencias.

5. Ahora debería notar una nueva opción en el menú del navegador llamada Desarrollar, ubicada entre Marcadores y Ventana. Haga clic en este elemento del menú. Ahora debería mostrarse un menú desplegable que contiene las siguientes opciones.

   • Abrir página con: Le permite abrir la página web activa en uno de los otros navegadores actualmente instalados en su Mac.
   • Agente de usuario: le permite seleccionar entre más de una docena de valores de agente de usuario predefinidos, incluidas varias versiones de Chrome, Firefox e Internet Explorer, así como definir su propio cadena.
   • Ingrese al modo de diseño receptivo: Muestra la página actual tal como aparecería en varios dispositivos y con diferentes resoluciones de pantalla.
   • Mostrar Web Inspector: inicia la interfaz principal para las herramientas de desarrollo de Safari, normalmente ubicada en la parte inferior de la pantalla del navegador y que contiene las siguientes secciones: Elementos, Red, Recursos, Líneas de tiempo, Depurador, Almacenamiento, Consola.
   • Mostrar consola de errores: también inicia la interfaz de herramientas de desarrollo, directamente a la pestaña Consola que muestra errores, advertencias y otros elementos de búsqueda. datos de registro.
   • Mostrar código fuente de la página: abre la pestaña Recursos, que muestra el código fuente de la página activa categorizada por el documento.
   • Mostrar recursos de página: realiza la misma función que la opción Mostrar fuente de página.
   • Mostrar editor de fragmentos: abre una nueva ventana en la que puede introducir código CSS y HTML y obtener una vista previa de su salida sobre la marcha.
   • Mostrar generador de extensiones: ofrece la posibilidad de crear o editar extensiones de Safari con CSS, HTML y JavaScript.
   • Mostrar grabación de la línea de tiempo: abre la pestaña Líneas de tiempo y comienza a mostrar las solicitudes de red, el diseño y la información de representación, así como la ejecución de JavaScript en tiempo real.
   • Vaciar cachés: elimina todo el caché que se encuentra actualmente almacenado en su disco duro.
   • Desactivar cachés: evita que Safari almacene en caché para que todo el contenido se recupere del servidor cada vez que se carga una página.
   • Desactivar imágenes: evita que las imágenes se reproduzcan en todas las páginas web.
   • Desactivar estilos: Ignora las propiedades CSS cuando se carga una página.
   • Deshabilitar JavaScript: restringe la ejecución de JavaScript en todas las páginas.
   • Disable Extensions: prohíbe que todas las extensiones instaladas se ejecuten dentro del navegador.
   • Deshabilitar hacks específicos del sitio: si Safari se ha modificado para manejar explícitamente problemas específicos de la página web activa, esta opción bloqueará esos cambios para que la página carga como lo habría hecho antes de que se introdujeran estas modificaciones.
   • Desactivar restricciones de archivos locales: permite que el navegador tenga acceso a los archivos de sus discos locales, una acción que está restringida de forma predeterminada por razones de seguridad.
   • Deshabilitar restricciones de origen cruzado: estas restricciones se implementan de forma predeterminada para evitar XSS y otros peligros potenciales. Sin embargo, a menudo es necesario deshabilitarlos temporalmente para fines de desarrollo.
   • Permitir JavaScript desde el campo de búsqueda inteligente: cuando está habilitado, brinda la posibilidad de ingresar URL con javascript: incorporado directamente en la barra de direcciones.
   • Trate los certificados SHA-1 como inseguros: los certificados SSL que utilizan el algoritmo SHA-1 se consideran desactualizados y vulnerables.