Cómo utilizar las herramientas de desarrollo del navegador web

Además de que la mayoría de los fabricantes de navegadores se centran en los usuarios cotidianos que buscan 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 sitios a los que acceden esos usuarios al integrar herramientas poderosas directamente en los navegadores. sí mismos.

Se acabaron los días en que las únicas herramientas de programación y prueba encontradas en un navegador le permitieron ver el código fuente de una página y nada más. Los navegadores de hoy le permiten realizar una inmersión mucho más profunda haciendo cosas como ejecutar y depurar fragmentos de código 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 y garantizar que su código es 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 página web en diferentes navegadores, así como en diferentes dispositivos y plataformas a través de la magia del diseño responsivo y los simuladores integrados. ¡La mejor parte es que puedes hacer todo esto sin tener que abandonar tu navegador!

Los tutoriales a continuación le explican cómo acceder a estas herramientas para desarrolladores 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. Haga clic en el botón del 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, coloque el cursor del mouse sobre la Más herramientas opción.
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 del menú: Chrome OS / Windows ( CTRL + MAYÚS + I ), Mac OS X ( ALT (OPCION) + 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 del que se presenta aquí. El centro principal de las herramientas de desarrollo, que generalmente se encuentra en la parte inferior o en el lado derecho de la pantalla, contiene las siguientes pestañas.Elementos: Ofrece la capacidad de inspeccionar código CSS y HTML, así como editar CSS sobre la marcha, viendo los efectos de sus cambios en tiempo real.Consola: La consola de JavaScript de Chrome permite la entrada directa de comandos, así como la depuración de diagnóstico.Fuentes: Le permite depurar el código JavaScript a través de una interfaz gráfica potente.Red: Clasifica y muestra información detallada sobre cada operación relacionada en la aplicación o página activa, incluidos los encabezados de solicitud y respuesta completos, así como las métricas de tiempo avanzadas.Línea de tiempo: Permite un análisis en profundidad de cada actividad que tiene lugar dentro del navegador tan pronto como se inicia una solicitud de carga de página o aplicación.
5. Además de estas secciones, también puede acceder a las siguientes herramientas a través de >> icono, situado a la derecha de la Línea de tiempo lengüeta.Perfil: Desglosado en Perfilador de CPU y Generador de perfiles Secciones, proporciona un uso integral de la memoria y el tiempo total de ejecución de la aplicación o página activa.Seguridad: Resalta problemas de certificados y otros problemas relacionados con la seguridad con la página o aplicación activa.Recursos: Aquí es donde puede inspeccionar las cookies, el almacenamiento local, el caché de la aplicación y otras fuentes de datos locales que utiliza la página web o la aplicación actual.Auditorias Ofrece formas de optimizar el tiempo de carga y el rendimiento general de una página o aplicación.
6. Modo de dispositivo le permite ver la página activa en un simulador que lo presenta casi exactamente como aparecería en uno de más de una docena de dispositivos, incluidos varios modelos conocidos de Android e iOS como el 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 alternar Modo de dispositivo encendido y apagado, seleccione el icono del teléfono móvil ubicado directamente a la izquierda de la Elementos lengüeta.
7. También puede personalizar la apariencia de sus herramientas de desarrollador haciendo clic primero en 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 reposicionar la base, mostrar u ocultar diferentes herramientas, así como lanzar elementos más avanzados, como un inspector de dispositivos. Encontrará que la propia interfaz de las herramientas de desarrollo es altamente personalizable a través de la configuración que se encuentra en esta sección.

Mozilla Firefox

La sección de desarrolladores web de Firefox incluye herramientas para diseñadores, desarrolladores y evaluadores, como un editor de estilos y un cuentagotas que se enfoca en los píxeles.

Lectura recomendada de Lifewire:Los 25 mejores scripts de usuario de Greasemonkey y Tampermonkey

1. Haga clic en el botón del 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 el icono etiquetado Desarrollador . los Desarrollador web Ahora debería mostrarse el menú, que contiene las siguientes opciones.Notarás que la mayoría de los elementos del menú tienen atajos de teclado asociados con ellos.Herramientas de alternar: Muestra u oculta la interfaz de las herramientas del desarrollador, que normalmente se encuentra en la parte inferior de la ventana del navegador. Método abreviado de teclado: Mac OS X ( ALT (OPCION) + COMANDO + I ), Windows ( CTRL + MAYÚS + 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 (OPCION) + COMANDO + C ), Windows ( CTRL + MAYÚS + C )Consola Web: Le permite ejecutar expresiones de JavaScript dentro de la página activa, así como revisar un conjunto diverso de datos registrados que incluyen advertencias de seguridad, solicitudes de red, mensajes CSS y más. Método abreviado de teclado: Mac OS X ( ALT (OPCION) + COMANDO + K ), Windows ( CTRL + MAYÚS + K )Depurador: los Depurador de JavaScript le permite localizar y corregir defectos estableciendo puntos de interrupción, inspeccionando nodos DOM, fuentes externas de boxeo negro y mucho más. Como es el caso con el Inspector , esta característica también soporta la depuración remota. Método abreviado de teclado: Mac OS X ( ALT (OPCION) + 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 las hojas existentes y probar cómo se representan los cambios en un navegador con un solo clic. Atajo de teclado: Mac OS X, Windows ( MAYÚS + F7 )Actuación: Proporciona un desglose detallado del rendimiento de la red de la página activa, datos de velocidad de cuadros, tiempo y estado de ejecución de JavaScript, pintura intermitente y mucho más. Atajo de teclado: Mac OS X, Windows ( MAYÚS + F5 )Red: 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 (OPCION) + COMANDO + Q ), Windows ( CTRL + MAYÚS + Q )Barra de herramientas del desarrollador: Abre un intérprete de línea de comandos interactivo. Entrar 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 ( MAYÚS + 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. Atajo de teclado: Mac OS X, Windows ( MAYÚS + F8 )Consola del navegador: Proporciona la misma funcionalidad que la Consola web (véase más arriba). Sin embargo, todos los datos devueltos corresponden a la aplicación completa de Firefox (incluidas las extensiones y las funciones de nivel del navegador), en lugar de solo la página web activa. Método abreviado de teclado: Mac OS X ( MAYÚS + COMANDO + J ), Windows ( CTRL + MAYÚS + J )Vista de diseño responsivo: Le permite ver instantáneamente una página web en diferentes resoluciones, diseños y tamaños de pantalla para imitar múltiples dispositivos, incluyendo tabletas y teléfonos inteligentes. Método abreviado de teclado: Mac OS X ( ALT (OPCION) + COMANDO + M ), Windows ( CTRL + MAYÚS + M )Cuentagotas Muestra el código de color hexadecimal para píxeles seleccionados individualmente.Bloc de notas: Le permite escribir, editar, integrar y ejecutar fragmentos de código JavaScript desde una ventana emergente de Firefox. Atajo de teclado: Mac OS X, Windows ( MAYÚS + F4 )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 )Consigue más herramientas: Abre el Caja de herramientas del desarrollador web colección en el sitio oficial de complementos de Mozilla, que cuenta con una docena de extensiones populares como Firebug y Greasemonkey.

Microsoft Edge / Internet Explorer

Comúnmente conocido como el F12 Herramientas de desarrollo , un homenaje al método abreviado de teclado que ha lanzado la interfaz desde versiones anteriores de Internet Explorer, el conjunto de herramientas dev en IE11 y Microsoft Edge ha recorrido un largo camino desde su inicio al ofrecer un grupo muy útil de monitores, depuradores, emuladores y compiladores de la mosca.

1. Haga clic en el Mas acciones menú, representado por tres puntos y ubicado en la esquina superior derecha de la ventana del navegador. Cuando aparezca el menú desplegable, seleccione la opción etiquetada F12 Herramientas de desarrollo . Como ya mencioné, también puede acceder a las herramientas a través de F12 atajo de teclado.
2. Ahora debería mostrarse la interfaz de desarrollo, normalmente en la parte inferior de la ventana del navegador. Las siguientes herramientas están disponibles, cada una de ellas accesible haciendo clic en el encabezado de la pestaña respectiva o utilizando el método abreviado de teclado que lo acompaña.DOM Explorer: Le permite editar hojas de estilo y HTML en la página activa, mostrando los resultados modificados a medida que avanza. Utiliza la funcionalidad de IntelliSense para autocompletar el código cuando sea aplicable. Atajo de teclado: (CTRL + 1) Consola: Ofrece la posibilidad de enviar información de depuración, incluidos contadores, temporizadores, rastreos 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) Depurador: 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) Red: 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) Actuación: Detalla la velocidad de cuadros, 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) Memoria: Lo ayuda a aislar y corregir posibles pérdidas de memoria en la página web actual al mostrar una línea de tiempo de uso de la 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 smartphones, tabletas y otros dispositivos. También ofrece la posibilidad 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)
3. Para visualizar el Consola Mientras esté dentro de cualquiera de las otras herramientas, haga clic en el botón cuadrado con un corchete derecho dentro, ubicado en la esquina superior derecha de la interfaz de herramientas de desarrollo.
4. Para desacoplar, la interfaz de las herramientas del desarrollador se convierte en una ventana separada, haga clic en el botón representado por 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.

Apple Safari (solo OS X)

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 sensible y fácil de usar y una herramienta para crear sus propias extensiones de navegador.

1. Haga clic en Safari en el menú del navegador, ubicado en la parte superior de su pantalla. Cuando aparezca el menú desplegable, seleccione Preferencias . También puede usar el siguiente método abreviado de teclado en lugar de este elemento del menú: COMANDO + COMMA (,)
2. Safari Preferencias La interfaz ahora debería mostrarse, superponiendo la ventana de su navegador. Haga clic en el Avanzado icono, ubicado en el extremo derecho de la cabecera.
3. los Avanzado Las preferencias ahora deberían ser visibles. En la parte inferior de esta pantalla hay una opción etiquetada Mostrar el menú de desarrollo en la barra de menú , acompañado de una casilla de verificación. Si no aparece una marca de verificación en la casilla, haga clic en ella una vez para colocar una allí.
4. Cierra el Preferencias interfaz haciendo clic en la 'x' roja que se encuentra en la esquina superior izquierda.
5. Ahora debería notar una nueva opción en el menú del navegador llamado Desarrollar , ubicado entre Marcadores y Ventana . Haga clic en este elemento del menú. Ahora debería aparecer 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 instalados actualmente 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 propia cadena personalizada.Ingrese al modo de diseño responsivo: Representa la página actual como aparecería en varios dispositivos y en diferentes resoluciones de pantalla.Mostrar inspector web: Inicia la interfaz principal para las herramientas de desarrollo de Safari, que normalmente se encuentran en la parte inferior de la pantalla de su navegador y contienen las siguientes secciones: Elementos , Red , Recursos , Líneas de tiempo , Depurador , Almacenamiento , Consola .Mostrar consola de errores: También lanza la interfaz de herramientas dev, directamente a la Consola pestaña que muestra errores, advertencias y otros datos de registro con capacidad de búsqueda.Mostrar fuente de página: Abre el Recursos pestaña, que muestra el código fuente de la página activa categorizada por documento.Mostrar recursos de la página: Realiza la misma función que la Mostrar fuente de página opción.Mostrar editor de fragmentos: Abre una nueva ventana donde puede ingresar código CSS y HTML, previsualizando 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 línea de tiempo: Abre el Líneas de tiempo y comienza a mostrar las solicitudes de red, la información de diseño y representación, así como la ejecución de JavaScript en tiempo real.Cachés vacíos: Elimina toda la memoria caché que se almacena actualmente 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 representen en todas las páginas web.Deshabilitar estilos: Ignora las propiedades CSS cuando se carga una página.Desactivar JavaScript: Restringe la ejecución de JavaScript en todas las páginas.Desactivar extensiones: Prohíbe que todas las extensiones instaladas se ejecuten dentro del navegador.Deshabilitar Hacks específicos del sitio: Si Safari se ha modificado para tratar explícitamente los problemas específicos de la página web activa, esta opción bloqueará esos cambios para que la página se cargue como lo haría antes de que se introduzcan estas modificaciones.Deshabilitar las restricciones de archivos locales: Permite que el navegador tenga acceso a los archivos en sus discos locales, una acción que está restringida por defecto por razones de seguridad.Deshabilitar las restricciones de origen cruzado: Estas restricciones se aplican de forma predeterminada para evitar XSS y otros peligros potenciales. Sin embargo, a menudo necesitan ser deshabilitados temporalmente para propósitos de desarrollo.Permitir JavaScript desde el campo de búsqueda inteligente: Cuando está habilitado, ofrece la posibilidad de ingresar URL con javascript: incorporado directamente en la barra de direcciones.Tratar los certificados SHA-1 como inseguros: Los certificados SSL que utilizan el algoritmo SHA-1 se consideran en general como obsoletos y vulnerables.