Ningún sitio web está construido a la perfección. Al igual que con todos los productos hechos por el hombre, los errores de código son parte del proceso. Debido a esto, es importante probar exhaustivamente cualquier sitio web nuevo que cree para asegurarse de que esté lo más libre de errores posible para brindar a sus usuarios la mejor experiencia posible.
No debe probar un sitio web sin probar primero el kit de Google Chrome DevTools. El modo de desarrollador de Chrome le permite probar y probar exhaustivamente un sitio web nuevo (o existente) para encontrar y corregir errores. También puede proporcionar información sobre el funcionamiento de otros sitios web, incluida la visualización del código fuente.
Aquí está todo lo que necesita saber sobre el modo de desarrollador del navegador Google Chrome, qué herramientas tiene y cómo usarlo de manera efectiva.
¿Qué es el modo desarrollador de Chrome?
Cuando nos referimos al modo de desarrollador de Chrome, no estamos hablando del mismo modo de desarrollador que ves en las Chromebooks. Nos referimos a las amplias herramientas de desarrollo de Chrome (llamadas Google DevTools) integradas en el propio navegador.
Estas son herramientas diseñadas para probar, analizar y (si es necesario) detener intencionalmente una página web que ha cargado en el navegador Google Chrome con fines de prueba. En un nivel básico, puede usar DevTools para ver el código fuente de un sitio web para que pueda mirar debajo del capó para ver cómo se creó un sitio web y cómo funciona.
Pero Google DevTools ofrece más que eso. Puede usar el modo de desarrollador de Chrome para editar una página después de que se cargue, ejecutar los comandos de la consola de Google Chrome para controlar y manipular la página, y ejecutar pruebas de red y velocidad para monitorear el tráfico web.
También puede emular otros dispositivos en el modo Chrome DevTools, incluidos diferentes sistemas operativos y resoluciones de pantalla. Esto le permite ver si un sitio web tiene un diseño web receptivo y dónde cambia el contenido y el diseño del sitio web según la resolución o el tipo de dispositivo.
Aunque estas herramientas están destinadas a desarrolladores web o evaluadores profesionales, también es útil para los usuarios estándar de Chrome aprender sobre la suite DevTools. Si ve un problema con un sitio web que no puede solucionar, puede poner Chrome en modo de desarrollador para ver si el problema está en el sitio web o en su navegador.
Según la herramienta que desee utilizar, existen varias formas de acceder al menú Google Chrome DevTools.
La forma más fácil de hacerlo es a través del menú de Google Chrome. Para hacer esto, haga clic en el icono de menú de tres puntos en la esquina superior derecha. En el menú que aparece, haga clic en Más herramientas > Herramientas para desarrolladores.
Esto abrirá el kit DevTools en un nuevo menú en el lado derecho de la pestaña o ventana abierta de Chrome.
También puede hacer esto con atajos de teclado. En una PC con Windows o Linux, abra el navegador Chrome y presione la tecla F12. También puede presionar Ctrl + Alt + J o Ctrl + Alt + I en una pestaña o ventana abierta de Chrome.
En macOS, presione F12 u Option+Command+J u Option+Command+I para abrir el menú Chrome DevTools. Se abre la consola de Chrome, con opciones para cambiar a otras herramientas de Chrome en la parte superior del menú DevTools.
Si lo desea, puede inspeccionar el código fuente de un sitio web (abriendo la pestaña Elementos del menú DevTools) en cualquier página web abierta haciendo clic derecho y haciendo clic en la opción “Inspeccionar”.
Uso de las herramientas de desarrollo de Chrome
Como se mencionó brevemente, puede usar el kit Chrome DevTools para ver el código fuente de un sitio web en la pestaña Elementos. Le permite analizar el código detrás de la página que está cargando y ver mensajes de error (que indican problemas al cargar el sitio web) en la consola de Chrome, pestaña Consola.
También puede ver las diferentes fuentes de contenido de un sitio en la pestaña Fuentes. Por ejemplo, si un sitio web utiliza una red de entrega de contenido (CDN), los archivos multimedia de un sitio web aparecerán aquí como una fuente diferente.
En el modo desarrollador de Chrome, puede descargar este contenido directamente o realizar un análisis de contenido más complejo.
Si desea probar el rendimiento de un sitio, puede monitorear y registrar el uso de la red en la pestaña Red para ver la velocidad, el tamaño y el tipo de solicitudes de red entre su navegador y el sitio.
Por ejemplo, cuando una página se carga por primera vez, el sitio carga el contenido de la página, pero también puede solicitar datos de bases de datos de terceros. Por ejemplo, iniciar sesión podría consultar una base de datos, que se muestra aquí como una consulta de red.
Puede analizar esto con más detalle en la pestaña Rendimiento, donde puede registrar el uso del navegador Chrome con más detalle, incluida la captura de capturas de pantalla en varios puntos. Esto registrará el tiempo que tarda en cargar su sitio web para su posterior análisis.
Google Chrome tiene la reputación de acaparar la memoria de su PC , por lo que puede probar el uso de la memoria de JavaScript de su sitio en la pestaña Memoria. Aquí se pueden utilizar varios perfiles de prueba de Chrome. Para obtener más información sobre estas pruebas, consulte la página de documentación de Chrome DevTools .
Para un análisis más profundo del contenido de su sitio web y el espacio del navegador que puede estar utilizando (por ejemplo, para registrar datos), puede consultar la pestaña “Solicitudes”. Puede consultar información sobre las cookies del sitio web aquí en la sección Cookies o borrar la memoria utilizada haciendo clic en la opción Borrar memoria.
Si te preocupa la seguridad de tu sitio web, puedes comprobar cómo funciona en la pestaña Seguridad. Esto le brinda una descripción general rápida del análisis de seguridad de Chrome para un sitio, incluso si el sitio tiene un certificado SSL correcto y confiable.
Si desea generar un informe sobre el rendimiento de su sitio web, incluso si cumple con los estándares típicos de los usuarios y si el rendimiento de su sitio web podría afectar la optimización del motor de búsqueda, puede hacer clic en la pestaña Balizas. Esto proporciona configuraciones que puede habilitar o deshabilitar para su informe; Haga clic en Generar informe para generar el informe para ver.
Esto apenas araña la superficie del potencial que pueden ofrecer los desarrolladores del modo desarrollador de Chrome. Si desea obtener más información, la documentación de Chrome DevTools debería ayudarlo con las herramientas y funciones que se ofrecen, incluido cómo crear sus propias pruebas de usuario con ellas.
Trucos avanzados de Google Chrome
La mayoría de los usuarios de Chrome nunca sabrán que Google Chrome DevTools Kit está presente en su navegador, pero para los usuarios avanzados sigue siendo una forma extremadamente útil de probar y analizar sitios web. También hay extensiones de Chrome de terceros para que los desarrolladores web prueben su sitio más a fondo.
Si está creando un sitio web simple
