▷▷ 2021 ▷ ¿Qué es el modo desarrollador de Chrome y para qué sirve?


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

Se recomienda el modo de desarrollador de Chrome

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 nos referimos al mismo modo de desarrollador que ves en los Chromebooks. Estamos hablando de las extensas herramientas de desarrollo de Chrome (llamadas DevTools de Google) que están integrados en el propio navegador.

Estas son herramientas para probar, analizar y pausar deliberadamente (si es necesario) una página web que haya cargado en el navegador Google Chrome con fines de prueba. Básicamente, puede usar DevTools para ver el código fuente de un sitio web para que pueda echar un vistazo debajo del capó para ver cómo se creó un sitio web y qué tan bien funciona.

Código de Chrome

Sin embargo, Google DevTools ofrece aún más. 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 editar la página y 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. De esta manera, puede ver si un sitio tiene un diseño web receptivo y dónde el contenido y el diseño del sitio cambian según la resolución o el tipo de dispositivo.

Si bien estas herramientas están dirigidas a probadores o desarrolladores web profesionales, a los usuarios estándar de Chrome también les resulta útil conocer la suite DevTools completa. Si encuentra un problema con un sitio web que no puede solucionar, puede cambiar Chrome al modo de desarrollador para ver si el problema está en el sitio web o en su navegador.

Cómo acceder al menú de herramientas para desarrolladores de Google Chrome

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

La forma más sencilla de hacerlo es a través del menú de Google Chrome. Para hacer esto, haga clic en el Icono de menú con menú de tres puntos parte superior derecha. En el menú que aparece, haga clic en Más herramientas> Herramientas para desarrolladores.

Menú de Chrome DevTools

Esto abrirá el kit de DevTools en un nuevo menú en el lado derecho de la ventana o pestaña 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 el F12 Clave. También puede utilizar el Ctrl + Alt + J o Ctrl + Alt + I Teclas en una ventana o pestaña de Chrome abierta.

En macOS, presione F12 o presione el Opción + Comando + J o Opción + Comando + I Botones para abrir el menú Chrome DevTools en su lugar. Esto abrirá la consola de Chrome con opciones para cambiar 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 proceso) en una página web abierta haciendo clic con el botón derecho y luego haciendo clic en Inspeccionar Posibilidad.

Utilice Chrome DevTools

Como mencionamos brevemente, puede usar el kit Chrome DevTools para obtener el código fuente de un sitio web en el elementos Tab. Puede analizar el código detrás de la página cargada y los mensajes de error (que indican problemas al cargar el sitio web) en la consola de Chrome debajo. Show consola Pestaña.

Código fuente de Chrome

También puede ver las diversas fuentes de contenido de un sitio web en la hinchar Tab. Por ejemplo, si un sitio utiliza una Red de entrega de contenido (CDN), los medios de un sitio aparecerán aquí como una fuente diferente.

En el modo de desarrollador de Chrome, puede descargar este contenido directamente o realizar un análisis de contenido más complejo.

Fuentes de Chrome

Si desea probar el rendimiento de un sitio, puede monitorear y registrar el uso de su red en el sitio. la red Tab. Muestra la velocidad, el tamaño y el tipo de solicitudes de red entre su navegador y el sitio.

Por ejemplo, cuando se carga una página por primera vez, el …



▷▷ 2021 ▷ ¿Qué es el modo desarrollador de Chrome y para qué sirve?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *