Inicio top 10 ¿Qué es el modo de desarrollador de Chrome y cuáles son sus usos?

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

POR admin
0 comentario

Ningún sitio web está construido a la perfección. Como todos los productos fabricados 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 sitio nuevo (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.

Chrome Developer Mode Featured

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 bajo el capó para ver cómo se ha construido un sitio y qué tan bien funciona.

Chrome Code

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 dirigidas a probadores o desarrolladores web profesionales, también es útil para los usuarios estándar de Chrome conocer el conjunto de DevTools. Si ve un problema con un sitio que no puede resolver, cambiar al modo de desarrollador de Chrome puede ayudarlo a ver si el problema está en el sitio o en su navegador.

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

Hay varias formas de acceder al menú de herramientas de desarrollo 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.

Chrome DevTools Menu

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 usando atajos de teclado. Desde una PC con Windows o Linux, abra el navegador Chrome y presione el F12 clave. 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 pasar 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 usar el kit Chrome DevTools para ver el código fuente de un sitio web en la Elementos pestaña. 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 pestaña.

Chrome Source Code

También puede ver las diferentes fuentes de contenido de un sitio web en la Fuentes pestaña. Por ejemplo, si un sitio está utilizando 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.

Chrome Sources

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

Por ejemplo, cuando una página se carga 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 se mostraría como una solicitud de red aquí.

Chrome Network

Puede analizar esto más a fondo en el Rendimiento 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.

Chrome Performance

Google Chrome tiene la reputación de ser duro con la memoria de su PC, por lo que puede probar el uso de la memoria JavaScript de su sitio en la Memoria pestaña. Aquí se pueden utilizar diferentes perfiles de prueba de Chrome, con más información sobre estas pruebas en la página de documentación de Chrome DevTools.

Chrome Memory

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 pestaña. 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.

Chrome Application

Si está preocupado por la seguridad de su sitio, puede verificar qué tan bien funciona bajo la Seguridad pestaña. 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.

Chrome Security

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 pestaña. Esto ofrece configuraciones que puede marcar o desmarcar para su informe; haga clic en Generar informe para crear el informe para ver.

Chrome Lighthouse

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, 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 ella.

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 extensiones de Chrome de terceros para desarrolladores web disponibles para ayudar a probar su sitio más a fondo.

Si está creando 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.

ENTRADAS RELACIONADAS

Dejar un comentario

Este sitio web utiliza cookies para mejorar su experiencia. Asumiremos que está de acuerdo con esto, pero puede optar por no participar si lo desea. Aceptar Leer más