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 exhaustivamente cualquier sitio web nuevo que construyas para asegurarte de que esté lo más libre posible de errores para brindarles a tus 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^(Chrome) le permite probar y probar exhaustivamente 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. 

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?^{(What Is Chrome Developer Mode?)}

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

Estas son herramientas diseñadas para probar, analizar y deliberadamente romper (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 creado un sitio y qué tan bien funciona.

Sin embargo, Google DevTools^{(Google DevTools)} ofrece más que esto. Puede usar el modo de desarrollador de Chrome para cambiar una página después de cargarla, 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 los diseños del sitio según la resolución o el tipo del dispositivo.

Si bien estas herramientas están dirigidas a desarrolladores o evaluadores web profesionales, también es útil para que los usuarios estándar de Chrome conozcan la suite ^(Chrome)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^{(How To Access Google Chrome DevTools Menu)}

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

El método más fácil para hacer esto es desde el menú de Google Chrome . Para hacer esto, haga clic en el ícono de menú de tres puntos^{(three-dots menu icon)} en la esquina superior derecha. En el menú que aparece, haga clic en More Tools > Developer Tools .

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^{(Linux PC)} , abra el navegador Chrome y presione la tecla F12 . También puede presionar las Ctrl + Alt + J o Ctrl + Alt + I en una pestaña o ventana abierta de Chrome .

En macOS, presione F12 o presione las Option + Command + J u Option + Command + I para abrir el menú Chrome DevTools . Esto abrirá la consola de Chrome , con opciones para moverse a otras herramientas de Chrome en la parte superior del menú ^(Chrome)DevTools .

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

Uso de las herramientas de desarrollo de Chrome^{(Using Chrome DevTools)}

Como mencionamos brevemente, puede usar el kit Chrome DevTools para ver el código fuente de un sitio web en la pestaña Elementos . ^(Elements)Le permitirá analizar el código detrás de la página que ha cargado, así como ver los mensajes de error (que indican problemas con la forma en que se ha cargado el sitio) en la consola de Chrome en la pestaña Consola .^(Console)

También puede ver las diferentes fuentes de contenido de un sitio web en la pestaña Fuentes . ^(Sources)Por ejemplo, si un sitio utiliza una red de entrega de contenido (CDN)^{(using a content delivery network (CDN))} , los medios de un sitio se enumerarán aquí como una fuente diferente.

El modo de desarrollador de Chrome^(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 pestaña Red . ^(Network)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, 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 la pestaña Rendimiento^{(Performance )} , 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 se tarda en cargar su sitio para un análisis más detallado.

Google Chrome tiene la reputación de ser duro con la memoria de su PC^{(being hard on your PC memory)} , por lo que puede probar el uso de la memoria de JavaScript de su sitio en la pestaña Memoria . ^(Memory)Aquí se pueden usar diferentes perfiles de prueba de Chrome , con más información sobre esta prueba en la ^{(Different Chrome)}página de documentación de Chrome DevTools^{(Chrome DevTools documentation page)} .

Para un análisis más profundo del contenido de su sitio, así como cualquier almacenamiento del navegador que pueda estar usando (por ejemplo, para registrar datos), puede buscar a través de la pestaña Aplicación . ^{(Application)}Puede ver la información de las cookies del sitio aquí en la sección Cookies , o borrar el almacenamiento que se está utilizando haciendo clic en la opción Borrar almacenamiento .^{(Clear storage)}

Si le preocupa la seguridad de su sitio, puede verificar qué tan bien funciona en la pestaña Seguridad . ^{(Security )}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.^(SSL)

Si desea generar un informe sobre el rendimiento de su sitio, incluso si cumple con los estándares típicos de los usuarios y si el rendimiento del sitio podría estar afectando la optimización del motor de búsqueda, puede hacer clic en la pestaña Lighthouse . Esto ofrece configuraciones que puede marcar o desmarcar para su informe: haga clic en Generar informe^{(Generate report)} para crear el informe para ver.

Esto apenas roza la superficie del potencial que el modo desarrollador de Chrome puede brindarles a los desarrolladores. Si desea obtener más información, la documentación de Chrome DevTools^{(Chrome DevTools documentation)} 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^{(Advanced Google Chrome Tricks)}

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^{(Chrome extensions for web developers)} de terceros para desarrolladores web disponibles para ayudar a probar su sitio aún más.

Si está creando un sitio web básico^{(building a basic website)} , 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^{(struggling with Chrome crashes)} , es posible que primero deba reiniciar o reinstalar su navegador.

What Is Chrome Developer Mode & What Are Its Uses?

No webѕite is built perfectly. Like all products made by humans, code errors are part of the process. That’s why it’s important to thoroughly test any new website you build to make sure that it’ѕ as free of errors as possible to give your users the best possible experience. 

You shouldn’t test a web site without trying Google Chrome’s DevTools kit first. Chrome developer mode allows you to try out and thoroughly test a new site (or an existing one) to find and fix bugs. It can also give you insight into how other sites are run, including viewing the source code. 

Here’s everything you need to know about the Google Chrome browser developer mode, what tools it has, and how to use it effectively.

What Is Chrome Developer Mode?

When we refer to the Chrome developer mode, we’re not talking about the same developer mode that you’ll see on Chromebooks. What we’re referring to is the extensive Chrome development tools (called Google DevTools) that are built into the browser itself.

These are tools designed to test, analyze, and purposely break (if you need to) a web page you’ve loaded in the Google Chrome browser for testing purposes. At a basic level, you can use DevTools to view the source code for a website, letting you peek under the hood to see how a site has been built and how well it runs.

Google DevTools offers more than this, however. You can use Chrome developer mode to change a page after it’s loaded, run Google Chrome console commands to control and manipulate the page, as well as run speed and network tests to monitor web traffic.

You can also emulate other devices, including different operating systems and screen resolutions, in the Chrome DevTools mode. This lets you see if a site has responsive web design, and where site content and layouts will change depending on the device resolution or type.

While these tools are aimed at professional web developers or testers, it’s also handy for standard Chrome users to know their way around the DevTools suite. If you see a problem with a site that you can’t solve, switching to Chrome developer mode can help you see if the problem is with the site or with your browser.

How To Access Google Chrome DevTools Menu

There are a few ways you can access the Google Chrome DevTools menu, depending on the tool you wish to use.

The easiest method to do this is from the Google Chrome menu. To do this, click the three-dots menu icon in the top-right. From the menu that appears, click More Tools > Developer Tools.

This will open the DevTools kit in a new menu on the right-hand side of your open Chrome tab or window.

You can also do this by using keyboard shortcuts. From a Windows or Linux PC, open the Chrome browser and press the F12 key. You can also press the Ctrl + Alt + J or Ctrl + Alt + I keys in an open Chrome tab or window.

On macOS, press F12 or press the Option + Command + J or Option + Command + I keys to open the Chrome DevTools menu instead. This will open the Chrome console, with options to move to other Chrome tools at the top of the DevTools menu.

If you want, you can view the source code for a website (opening the Elements tab of the DevTools menu in the process) on any open web page by right-clicking the and clicking the Inspect option.

Using Chrome DevTools

As we’ve briefly touched upon, you can use the Chrome DevTools kit to see the source code for a website under the Elements tab. It’ll let you analyse the code behind the page you’ve loaded, as well as view error messages (indicating problems with how the site has loaded) in the Chrome console under the Console tab.

You can also view the different sources for content from a website under the Sources tab. For instance, if a site is using a content delivery network (CDN), media from a site would be listed as a different source here.

Chrome developer mode allows you to download that content directly, or perform more complex analysis of the content.

If you want to test how a site is performing, you can monitor and record your network usage under the Network tab. This will show the speed, size, and type of network requests made between your browser and the site.

For instance, when a page first loads, the site will load the page content itself, but it may also request data from third-party databases. For instance, when you sign in, this may query a database which would show up as a network request here.

You can analyse this further under the Performance tab, where you can record your Chrome browser usage in greater depth, including recording screenshots at different points. This will log how long it takes to load your site for further analysis.

Google Chrome has a reputation for being hard on your PC memory, so you can test your site’s JavaScript memory usage under the Memory tab. Different Chrome testing profiles can be used here, with further information about this testing at the Chrome DevTools documentation page.

For more in-depth analysis of your site content, as well as any browser storage it might be using (for instance, to log data), you can search through the Application tab. You can view site cookie information here under the Cookies section, or clear the storage being used by clicking the Clear storage option.

If you’re worried about your site security, you can check how well it performs under the Security tab. This will give you a quick overview of Chrome’s security analysis for a page, including whether or not the page has a correct and trusted SSL certificate.

If you want to generate a report on your site’s performance, including if it meets typical user standards and if the site performance could be affecting search engine optimization, you can click the Lighthouse tab. This offers settings you can check or uncheck for your report—click Generate report to create the report to view.

This barely scratches the surface of the potential that Chrome developer mode can bring to developers. If you want to learn more, the Chrome DevTools documentation should help you with the tools and features on offer, including how to build your own user tests with it. 

Advanced Google Chrome Tricks

Most Chrome users won’t ever know that the Google Chrome DevTools kit exists in their browser, but for power users, it remains an exceptionally useful way to test and analyse websites. There are also third-party Chrome extensions for web developers available to help test your site further.

If you’re building a basic website, switching to Chrome developer mode could help you spot errors with your site that aren’t immediately visible. You can only do this if Chrome is working correctly, so if you’re struggling with Chrome crashes, you may need to reset or reinstall your browser first.

Related posts

• Autocompletar de Google Chrome: una guía completa

• Las 10 mejores extensiones de privacidad para Chrome (2022)

• Use estos 4 complementos de Chrome para cifrar sus mensajes de Gmail

• Configuración de contenido de Google Chrome: una guía completa

• ¿Cuál es el mejor servicio de llamadas de conferencia? Las mejores aplicaciones comparadas

• Los mejores widgets meteorológicos para Windows 10/11

• 4 excelentes herramientas para crear paquetes de Windows Installer

• 9 formas de grabar juegos en tu PC

• Editor de secuencias de comandos de Google Apps: todo lo que necesita saber para comenzar

• 7 formas de abrir un archivo MDB sin Microsoft Access

• HDG explica: ¿Qué es Markdown y cuáles son los conceptos básicos que debo saber?

• Mover, eliminar o copiar archivos automáticamente en Windows

• 5 trucos del símbolo del sistema para hacer que CMD sea más interesante

• 3 herramientas para diagnosticar y solucionar problemas con su monitor

• Las 4 mejores aplicaciones de software de redirección de puertos y cómo usarlas

• Las 5 mejores herramientas de escaneo de IP para Windows, Mac, iOS y Android

• Las mejores utilidades de ajuste de CPU, tarjeta de video y RAM

• Los 5 mejores sitios seguros de descarga de APK para aplicaciones de Android

• Los mejores programas para agregar nuevas funciones a Windows 10

• Pruebas de píxeles muertos para reparar un píxel atascado en su monitor