¿Qué es el modo de desarrollador de Chrome? ¿Cuáles son sus usos?

Hola geek ! Aquí Gabriel con un nuevo artículo para ustedes !
Espero que les guste y nos vemos en la próxima

Ningún sitio web está construido a la perfección. Como todos los productos hechos por humanos, los errores de código son parte del proceso. Por eso es importante probar minuciosamente 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 DevTools de Google Chrome. El modo de desarrollador de Chrome le permite probar y probar a fondo un nuevo sitio (o uno existente) para encontrar y corregir errores. También puede brindarle información sobre cómo se ejecutan otros sitios, incluida la visualización del código fuente.

Aquí encontrará 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 de desarrollador de Chrome?

Cuando nos referimos al modo de desarrollador de Chrome, no estamos hablando del mismo modo de desarrollador que verá en los Chromebooks. A lo que nos referimos es a las amplias herramientas de desarrollo de Chrome (llamadas DevTools de Google) que están integrados en el propio navegador.

Estas son herramientas diseñadas para probar, analizar y romper intencionalmente (si es necesario) 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, lo que le permite echar un vistazo debajo del capó para ver cómo se ha construido un sitio y qué tan bien funciona.

Sin embargo, Google DevTools ofrece más que esto. Puede usar el modo de desarrollador de Chrome para cambiar 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, así como ejecutar pruebas de velocidad y de red para monitorear el tráfico web.

También puede emular otros dispositivos, incluidos diferentes sistemas operativos y resoluciones de pantalla, en el modo Chrome DevTools. Esto le permite ver si un sitio tiene un diseño web receptivo y dónde cambiarán el contenido y el diseño del sitio según la resolución o el tipo de dispositivo.

Si bien estas herramientas están destinadas a probadores o desarrolladores web profesionales, también es útil para los usuarios estándar de Chrome conocer el conjunto de DevTools. Si ves un problema con un sitio que no puedes resolver, cambiar al modo de desarrollador de Chrome puede ayudarte a ver si el problema está en el sitio o en tu navegador.

Cómo acceder al menú de herramientas de desarrollo de Google Chrome

Hay varias formas de acceder al menú de DevTools de Google Chrome, según la herramienta que desee utilizar.

El método más sencillo para hacer esto es desde el menú de Google Chrome. Para hacer esto, haga clic en el icono de menú de tres puntos en la parte superior derecha. En el menú que aparece, haga clic en Más herramientas> Herramientas para desarrolladores.

Esto abrirá el kit de DevTools en un nuevo menú en el lado derecho de la pestaña o ventana de Chrome abierta.

También puede hacer esto usando atajos de teclado. Desde una PC con Windows o Linux, abra el navegador Chrome y presione el F12 llave. También puede pulsar el Ctrl + Alt + J o Ctrl + Alt + I teclas en una pestaña o ventana abierta de Chrome.

En macOS, presione F12 o presione el Opción + Comando + J o Opción + Comando + I teclas para abrir el menú Chrome DevTools en su lugar. Esto abrirá la consola de Chrome, con opciones para moverse a otras herramientas de Chrome en la parte superior del menú DevTools.

Si lo desea, puede ver el código fuente de un sitio web (abriendo el Elementos pestaña del menú DevTools en el proceso) en cualquier página web abierta haciendo clic con el botón derecho y haciendo clic en el Inspeccionar opción.

Usando Chrome DevTools

Como hemos mencionado brevemente, puede utilizar el kit Chrome DevTools para ver el código fuente de un sitio web en la Elementos lengüeta. Le permitirá analizar el código detrás de la página que ha cargado, así como ver mensajes de error (que indican problemas con la carga del sitio) en la consola de Chrome debajo de Consola lengüeta.

También puede ver las diferentes fuentes de contenido de un sitio web en la Fuentes lengüeta. Por ejemplo, si un sitio está usando una red de entrega de contenido (CDN), los medios de un sitio aparecerían como una fuente diferente aquí.

El modo de desarrollador de Chrome le permite descargar ese contenido directamente o realizar un análisis más complejo del contenido.

Si desea probar el rendimiento de un sitio, puede monitorear y registrar el uso de su red en la Red lengüeta. Esto mostrará la velocidad, el tamaño y el tipo de solicitudes de red realizadas entre su navegador y el sitio.

Por ejemplo, cuando se carga una página por primera vez, el sitio cargará el contenido de la página por sí mismo, pero también puede solicitar datos de bases de datos de terceros. Por ejemplo, cuando inicia sesión, esto puede consultar una base de datos que aparecería como una solicitud de red aquí.

Puede analizar esto más a fondo en el Actuación pestaña, donde puede registrar el uso de su navegador Chrome con mayor profundidad, incluida la grabación de capturas de pantalla en diferentes puntos. Esto registrará cuánto tiempo lleva cargar su sitio para un análisis más detallado.

Google Chrome tiene fama de ser duro con la memoria de su PC, para que pueda probar el uso de memoria JavaScript de su sitio en la Memoria lengüeta. Aquí se pueden utilizar diferentes perfiles de prueba de Chrome, con más información sobre estas pruebas en el Página de documentación de Chrome DevTools.

Para un análisis más profundo del contenido de su sitio, así como de cualquier almacenamiento del navegador que pueda estar usando (por ejemplo, para registrar datos), puede buscar en el Solicitud lengüeta. Puede ver la información de las cookies del sitio aquí en el Galletas sección, o borre el almacenamiento que se está utilizando haciendo clic en el Almacenaje vacío opción.

Si le preocupa la seguridad de su sitio, puede comprobar qué tan bien funciona bajo Seguridad lengüeta. Esto le dará una descripción general rápida del análisis de seguridad de Chrome para una página, incluido si la página tiene o no un certificado SSL correcto y confiable.

Si desea generar un informe sobre el rendimiento de su sitio, incluso si cumple con los estándares de usuario típicos y si el rendimiento del sitio podría estar afectando la optimización del motor de búsqueda, puede hacer clic en el Faro lengüeta. Esto ofrece configuraciones que puede marcar o desmarcar para su informe; haga clic en Generar informe para crear el informe para ver.

Esto apenas rasca la superficie del potencial que el modo de desarrollador de Chrome puede brindar a los desarrolladores. Si desea obtener más información, 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 él.

Trucos avanzados de Google Chrome

La mayoría de los usuarios de Chrome nunca sabrán que el kit Google Chrome DevTools existe en su navegador, pero para los usuarios avanzados, sigue siendo una forma excepcionalmente útil de probar y analizar sitios web. También hay terceros Extensiones de Chrome para desarrolladores web disponible para ayudar a probar su sitio más a fondo.

Si tu eres construyendo un sitio web básico, cambiar al modo de desarrollador de Chrome podría ayudarlo a detectar errores en su sitio que no son visibles de inmediato. Solo puede hacer esto si Chrome funciona correctamente, por lo que si tiene problemas con los bloqueos de Chrome, es posible que primero deba restablecer o reinstalar su navegador.

Deja un comentario