Tutorial de herramientas para desarrolladores de navegadores: más de 10 trucos que debes conocer

Si aún no está familiarizado con las herramientas para desarrolladores de navegadores, son una de las cosas más útiles para cualquiera que juegue con sitios web, ya sea como propietario, entusiasta, desarrollador permanente o cualquier otra cosa.

Las herramientas para desarrolladores pueden brindarte mucha información sobre cualquier sitio web, como errores de JavaScript y marcado CSS. Además, te permiten probar cambios en el frontend, verificar el rendimiento de tu sitioDiseño responsivo, e incluso optimizar su rendimiento.

Además, son completamente gratuitas y están integradas en todos los navegadores principales. Si estás listo para aprender sobre su utilidad, este tutorial de herramientas para desarrolladores de navegadores es el lugar indicado para ti.

Cómo abrir las herramientas para desarrolladores del navegador

Para aprovechar las ventajas que ofrece el conjunto de herramientas, primero debe saber cómo acceder a él. A continuación, le indicamos cómo hacerlo en diferentes navegadores y sistemas operativos:

• Cromo— Dentro del menú, haga clic enMás herramientas Herramientas para desarrolladoresTambién puede hacer clic derecho en la página y elegirInspeccionarPor último, están los atajos del teclado.Cmd+Opción+Ien Mac yCtrl+Mayús+Ien sistemas Windows.
• Safari— Habilitar herramientas de desarrollo web enPreferencias Avanzadas Mostrar menú de desarrollo en la barra de menúLuego ve aDesarrollar Mostrar inspector webo presioneCmd+Opción+I.
• Firefox— En el menú, accedaDesarrollador web Herramientas de ToogleTambién puede inspeccionar elementos haciendo clic derecho oCtrl+Mayús+I/Cmd+Opción+I.

En todos los casos, abrirán un conjunto de menús dentro de la ventana del navegador. Suelen estar en la parte inferior, pero también pueden aparecer en el lateral, según tu configuración. También podrás moverlos a una nueva ventana.

¿Qué contienen las herramientas de desarrollo?

Esto es lo que puede esperar encontrar como parte de sus herramientas de desarrollo del navegador:

• Un árbol HTML con elementos DOM y sus propiedades como estilos CSS
• Una forma de monitorear las entradas y salidasSolicitudes HTTPde una página web
• La capacidad de inspeccionar y depurar archivos y scripts que se ejecutan en la página o recursos que guarda en la computadora.
• Una forma de ver los registros de JavaScript y probar comandos en la página
• Herramientas para monitorear el rendimiento de su sitio web con el fin deaumentar la velocidad de carga
• La capacidad de cambiar a una vista móvil de su sitio web para probar el diseño responsivo

Tenga en cuenta que no todas las herramientas para desarrolladores son exactamente iguales, por lo que algunas funciones podrían estar ubicadas en otro lugar o faltar.

Cómo utilizar las herramientas para desarrolladores de navegadores

Bien, ahora que conoces los conceptos básicos sobre cómo acceder a las herramientas de desarrollo de tu navegador y qué esperar, ¿cómo te ayuda eso? A continuación, te daremos una mirada en profundidad sobre lo que las diferentes funciones de la herramienta pueden hacer por ti.

Para este ejemplo, utilizaremos las herramientas de desarrollo de Chrome, ya que es el navegador con mayor participación de mercado. Sin embargo, su experiencia debería ser similar si utiliza otro navegador.

1. Inspeccione el HTML de la página

Lo primero que verá al abrir cualquier herramienta de desarrollo suele ser una representación de la estructura de la página en HTML.

Esto le permite ver los elementos de la página, susclases e id, cómo se anidan entre sí, así como los scripts, hojas de estilo y otros recursos cargados en la sección de encabezado y pie de página.

Cuando pasa el cursor sobre cualquier elemento, el navegador también lo resaltará en la página junto con cualquier propiedad de diseño CSS, como el margen o el relleno.

Si no está visible actualmente, haga clic derecho en cualquier elemento y seleccioneDesplazarse hacia la vistaTambién puede utilizar la herramienta de selección (en la esquina superior izquierda de la ventana de herramientas de desarrollo oCtrl+Mayús+C) para seleccionar cualquier elemento de la página y verlo en el código del sitio. Haga clic derecho Inspeccionartiene el mismo efecto.

También puede navegar por el árbol HTML con el teclado. Desplácese hacia arriba y hacia abajo y utilice los botones izquierdo y derecho para contraer o desplegar elementos. Por último, un campo de búsqueda en la parte superior le permite filtrar por cadenas, clases y todo lo demás.

2. Manipular elementos HTML

Además de ver el código HTML de la página, también puedes realizar cambios en ella. Solo tienes que hacer doble clic en casi cualquier parte del código para modificarlo.

De esa manera, puedes cambiaretiquetas de encabezadoDe H3 a H2, elimine o modifique nombres de clases, agregue estilos en línea, cambie texto en la página u oculte y elimine elementos completos del DOM. También puede arrastrar y soltar elementos de un lugar a otro con el mouse.

Además, haga clic derecho en Estado de fuerzale permite establecer de forma permanente elementos para que permanezcan flotando, enfocados, activos, visitados, etc.La ventana de su navegador le mostrará lo que hace en la página.

3. Experimente con CSS

Lo siguiente que notarás es que el CSS asociado de cada elemento aparece a la derecha del HTML.

De esa manera, puedes entender el estilo y el diseño de la página. Es una excelente manera de aprender cómo se logra un diseño que te puede gustar en otro sitio web.

Además, puedes cambiarlo en tiempo real para depurar el CSS que no funciona o probar tus ideas de diseño. Simplemente haz clic en la propiedad CSS de cualquier clase o ID a la derecha para modificarla.

En el ejemplo siguiente, aumentamos la font-sizepropiedad. Este es el efecto en la página:

De la misma manera, puedes eliminar propiedades CSS, agregar otras completamente nuevas y modificar o agregar selectores. Al igual que HTML, tiene una barra de búsqueda en la parte superior para ayudarte a buscar algo específico.

También puedes agregar nuevas reglas de estilo a través del ícono más en la parte superior derecha (o haz clic derecho Nueva reglaen algunos navegadores). Incluso puedes agregar clases desde aquí sin modificar el árbol HTML a través de.clsEn la esquina superior derecha, ingrese un nombre de clase y se aplicará automáticamente al elemento.

Finalmente, bajo:hovEn el mismo lugar, puedes forzar diferentes estados en un elemento para realizar cambios en su apariencia. Ten en cuenta que todo esto solo es visible para ti, no para el público en general. Para que los cambios sean permanentes, simplemente marca y copia las reglas CSS modificadas y pégalas en la hoja de estilo de tu tema.

4. Utilice el modelo de caja

Una última cosa sobre CSS: como parte de laEstiloEn esta sección encontrará una representación de lamodelo de caja.

Aquí, puedes ver la altura, el ancho, el relleno, el grosor del borde y el margen del elemento de un vistazo. Al pasar el cursor sobre cualquiera de las propiedades, también se mostrarán en el DOM.

Además, puedes cambiar cualquiera de las propiedades con solo hacer doble clic en cualquier parte y escribir un número. Por lo tanto, si deseas cambiar el margen inferior, puedes hacerlo y ver los efectos en la página.

5. Depurar JavaScript

Además de HTML y CSS,JavaScriptes otro lenguaje de programación importante para el diseño de sitios web. Afortunadamente, las herramientas para desarrolladores de navegadores también tienen herramientas para eso, la primera de las cuales puede encontrar en elFuentespanel.

Aquí puede explorar archivos del sitio, leer y editar código, así como utilizar herramientas de depuración integradas. Sin embargo, una de las cosas más importantes que puede hacer aquí esInsertar puntos de interrupciónEsto, por ejemplo, le permite pausar la ejecución del código durante ciertos eventos para ver si ocurre un error.

Luego, puede recorrer el código línea por línea mediante los íconos en la esquina superior derecha hasta encontrar el problema. También puede cambiar el código directamente dentro de las herramientas del navegador y luego reanudar o volver a cargar el script para ver si eso lo solucionó. Más sobre todo esoaquí.

6. Registrar y ejecutar JavaScript

Otra herramienta importante para trabajar con JavaScript es la consola.

Aquí encontrará todos los mensajes enviados al registro con JavaScript en su sitio (a través deconsola.log). Esto le permite ver si el código se está ejecutando en el orden correcto o generando errores.

Además, de forma similar a CSS, puedes experimentar con JavaScript dentro de la consola. Por ejemplo, puedes ejecutar instrucciones para ver cómo funcionan en tu página. Hazlas permanentes mediante copy y page si tiene sentido.

Además, la consola también funciona como un patio de juegos para experimentar con JavaScript que no tiene nada que ver con tu página y te permiteEncuentra JS y CSS sin usar.

7. Analizar el rendimiento del sitio

Otra cosa que puedes hacer con las herramientas del navegador Chrome es analizarVelocidad del sitio webEn realidad tenemos un todoTutorial sobre pruebas de velocidadTodo esto se trata de herramientas de terceros, pero también puedes hacerlo dentro de las herramientas del navegador. Para ello, ve a laAuditoríapestaña.

Aquí puedes ejecutar todo tipo de auditorías en tu sitio. Por ahora, solo nos interesa el rendimiento, así que desmarca todo lo demás.

Después de eso, elija si desea medir el rendimiento del sitio para dispositivos móviles o de escritorio. Luego, haga clic enGenerar informey espera hasta que veas algo similar a lo que aparece a continuación.

Los veteranos sabrán que estos son los mismos datos que se obtienen al utilizarInformación de Google PageSpeedTe brinda mucha información sobre lo que está y no está optimizado en tu página, así como sobre cómo mejorarla. Si quieres obtener detalles sobre cómo trabajar con estos resultados, consulta nuestra publicación sobre pruebas de velocidad mencionada anteriormente.

Lo bueno es que, con las herramientas para desarrolladores, también puedes experimentar con cambios en tu sitio, como buscar y deshabilitar scripts que bloquean la visualización para ver qué marcará la mayor diferencia. Sin embargo, eso es demasiado para este tutorial, así que consultaLa documentaciónPara eso.

8. Simular dispositivos móviles

Probablemente no tenga que decirles que el tráfico móvil se ha vuelto muy importante y queMás personas navegan por Internet en sus teléfonos que en computadoras de escritorio.

Por esa razón, es sumamente importante que sepasCómo hacer que su sitio web sea compatible con dispositivos móvilesEsta es otra área en la que las herramientas para desarrolladores de navegadores pueden ayudarlo, permitiéndole simular la experiencia de ver su sitio con un dispositivo móvil, directamente dentro de su navegador.

Puedes acceder a esto a través deCtrl+Mayús+MCon las herramientas de desarrollo abiertas o el pequeño icono del dispositivo móvil en la esquina superior izquierda, la página se verá así:

Arrastre y suelte los lados del marco para ver cómo se ve su sitio en pantallas más pequeñas. Alternativamente, ingrese las dimensiones numéricamente en la barra superior. En el mismo lugar, también puede usar el menú desplegable para elegir dispositivos específicos para obtener las dimensiones exactas de la pantalla. Agregue más o ingrese sus propios dispositivos a través delEditarbotón.

Utilice el icono de la derecha para cambiar entre el modo vertical y horizontal. El porcentaje le permite ajustar el nivel de zoom.

Al hacer clic en el botón con tres puntos, puede activarMostrar consultas de medios.

Esto habilitará los puntos de interrupción incluidos en su CSS (más sobre esto en nuestra guía sobreCómo hacer que los temas de WordPress sean responsivos). Haga clic en ellos para cambiar automáticamente el tamaño de la ventana gráfica a ese tamaño.

Por último, el menú desplegable que diceEn líneaPermite simular distintas velocidades de conexión (ya que los teléfonos móviles no siempre tienen wifi). De esta forma, se puede tener una mejor idea de cómo es la experiencia para las personas que usan redes 3G rápidas y lentas.

Si la ubicación es importante para su sitio, también puede anular la geolocalización si la activa en la configuración. Más informaciónaquí.

10. Otras opciones

Arriba hemos enumerado las cosas más importantes que puedes hacer en las herramientas para desarrolladores del navegador, sin embargo, hay más cosas para las que te daremos una descripción general rápida:

• Red— Vea si se están cargando o descargando recursos y cómo lo hacen. Verifique las propiedades de recursos y archivos individuales, vea un diagrama de cascada y simule distintas velocidades de conexión de red.
• Inspeccionar animaciones— Si tiene animaciones en su página, puede ralentizarlas, inspeccionar el código fuente ymás.
• Accesibilidad— Al igual que con la velocidad de la página, puedes ejecutar una auditoría enaccesibilidadVea cómo le va de manera similar a un árbol DOM, veaAtributos ARIAy examine el contraste de la pantalla.

¡Para obtener más consejos sobre sus herramientas de desarrollo de navegador favoritas, consulte su documentación!

Últimas reflexiones sobre las herramientas para desarrolladores de navegadores

En el tutorial sobre herramientas para desarrolladores de navegadores mencionado anteriormente, obtendrá una visión detallada de cómo pueden ayudarlo a mejorar su sitio y aprender más sobre los sitios web en general.

Ahora ya conoce las aplicaciones más básicas, como inspeccionar y manipular HTML, CSS y JavaScript, analizar el rendimiento del sitio y comprobar su compatibilidad con dispositivos móviles. Además, todavía queda mucho por descubrir.

Si bien no todo lo incluido en esta guía se aplicará a su navegador elegido, la funcionalidad básica es siempre la misma, ¡así que aprovéchela!

¿Cuál es tu característica favorita de las herramientas para desarrolladores de navegadores? ¿Tienes algo que añadir a lo anterior? ¡Cuéntanoslo en la sección de comentarios a continuación!