Nenhum site é construído perfeitamente. Como todos os produtos feitos por humanos, erros de código fazem parte do processo. É por isso que é importante testar minuciosamente qualquer novo site que você criar para garantir que ele esteja o mais livre de erros possível para oferecer aos usuários a melhor experiência possível. 

Você não deve testar um site sem primeiro experimentar o kit DevTools do Google Chrome . O modo de desenvolvedor do Chrome^(Chrome) permite que você experimente e teste completamente um novo site (ou um existente) para encontrar e corrigir bugs. Ele também pode fornecer informações sobre como outros sites são executados, incluindo a visualização do código-fonte. 

Aqui está tudo o que você precisa saber sobre o modo de desenvolvedor do navegador Google Chrome , quais ferramentas ele possui e como usá-lo de forma eficaz.

O que é o modo de desenvolvedor do Chrome?^{(What Is Chrome Developer Mode?)}

Quando nos referimos ao modo de desenvolvedor do Chrome , não estamos falando do mesmo modo de desenvolvedor^{(same developer mode)} que você verá nos Chromebooks . Estamos nos referindo às extensas ferramentas de desenvolvimento do Chrome (chamadas ^(Chrome)Google DevTools ) que são incorporadas ao próprio navegador.

Essas são ferramentas projetadas para testar, analisar e interromper propositalmente (se necessário) uma página da Web que você carregou no navegador Google Chrome para fins de teste. Em um nível básico, você pode usar o DevTools para visualizar o código-fonte de um site, permitindo que você espie por baixo do capô para ver como um site foi construído e como ele funciona.

O Google DevTools^{(Google DevTools)} oferece mais do que isso, no entanto. Você pode usar o modo de desenvolvedor do Chrome para alterar uma página depois de carregada, executar comandos do console do Google Chrome para controlar e manipular a página, bem como executar testes de velocidade e rede para monitorar o tráfego da web.

Você também pode emular outros dispositivos, incluindo diferentes sistemas operacionais e resoluções de tela, no modo Chrome DevTools . Isso permite que você veja se um site tem um design da Web responsivo e onde o conteúdo e os layouts do site serão alterados dependendo da resolução ou do tipo do dispositivo.

Embora essas ferramentas sejam destinadas a desenvolvedores ou testadores profissionais da Web, também é útil para usuários padrão do Chrome conhecerem o pacote DevTools . Se você encontrar um problema com um site que não consegue resolver, alternar para o modo de desenvolvedor do Chrome pode ajudar a ver se o problema está no site ou no navegador.

Como acessar o menu do Google Chrome DevTools^{(How To Access Google Chrome DevTools Menu)}

Existem algumas maneiras de acessar o menu do Google Chrome DevTools , dependendo da ferramenta que você deseja usar.

O método mais fácil de fazer isso é no menu do Google Chrome . Para fazer isso, clique no ícone do menu de três pontos^{(three-dots menu icon)} no canto superior direito. No menu exibido, clique em More Tools > Developer Tools .

Isso abrirá o kit DevTools em um novo menu no lado direito da guia ou janela aberta do Chrome .

Você também pode fazer isso usando atalhos de teclado. Em um PC Windows ou Linux^{(Linux PC)} , abra o navegador Chrome e pressione a tecla F12 . Você também pode pressionar as Ctrl + Alt + J ou Ctrl + Alt + I em uma guia ou janela aberta do Chrome .

No macOS, pressione F12 ou pressione as teclas Option + Command + J ou Option + Command + I para abrir o menu Chrome DevTools . Isso abrirá o console do Chrome , com opções para mover para outras ferramentas do Chrome na parte superior do menu ^(Chrome)DevTools .

Se desejar, você pode visualizar o código-fonte de um site (abrindo a guia Elementos do menu ^(Elements)DevTools no processo) em qualquer página da Web aberta clicando com o botão direito do mouse e clicando na opção Inspecionar^{(Inspect )} .

Como usar o Chrome DevTools^{(Using Chrome DevTools)}

Como mencionamos brevemente, você pode usar o kit Chrome DevTools para ver o código-fonte de um site na guia Elementos . ^(Elements)Ele permitirá que você analise o código por trás da página que você carregou, bem como visualize mensagens de erro (indicando problemas com o carregamento do site) no console do Chrome na guia Console .

Você também pode visualizar as diferentes fontes de conteúdo de um site na guia Fontes . ^(Sources)Por exemplo, se um site estiver usando uma rede de entrega de conteúdo (CDN)^{(using a content delivery network (CDN))} , a mídia de um site será listada como uma fonte diferente aqui.

O modo de desenvolvedor do Chrome^(Chrome) permite que você baixe esse conteúdo diretamente ou execute uma análise mais complexa do conteúdo.

Se quiser testar o desempenho de um site, você pode monitorar e registrar o uso da rede na guia Rede . ^(Network)Isso mostrará a velocidade, o tamanho e o tipo de solicitações de rede feitas entre seu navegador e o site.

Por exemplo, quando uma página é carregada pela primeira vez, o próprio site carrega o conteúdo da página, mas também pode solicitar dados de bancos de dados de terceiros. Por exemplo, quando você entra, isso pode consultar um banco de dados que apareceria como uma solicitação de rede aqui.

Você pode analisar isso ainda mais na guia Desempenho^{(Performance )} , onde você pode registrar o uso do navegador Chrome com maior profundidade, incluindo a gravação de capturas de tela em diferentes pontos. Isso registrará quanto tempo leva para carregar seu site para análise posterior.

O Google Chrome tem a reputação de ser difícil para a memória do seu PC^{(being hard on your PC memory)} , então você pode testar o uso de memória JavaScript do seu site na guia Memória . ^(Memory)Diferentes^{(Different Chrome)} perfis de teste do Chrome podem ser usados ​​aqui, com mais informações sobre esse teste na página de documentação do Chrome DevTools^{(Chrome DevTools documentation page)} .

Para uma análise mais aprofundada do conteúdo do seu site, bem como de qualquer armazenamento do navegador que ele possa estar usando (por exemplo, para registrar dados), você pode pesquisar na guia Aplicativo . ^{(Application)}Você pode visualizar as informações de cookies do site aqui na seção Cookies ou limpar o armazenamento que está sendo usado clicando na opção Limpar armazenamento^{(Clear storage)} .

Se estiver preocupado com a segurança do seu site, verifique o desempenho dele na guia Segurança . ^{(Security )}Isso fornecerá uma visão geral rápida da análise de segurança do Chrome para uma página, incluindo se a página tem ou não um certificado SSL correto e confiável.^(SSL)

Se você deseja gerar um relatório sobre o desempenho do seu site, incluindo se ele atende aos padrões típicos do usuário e se o desempenho do site pode estar afetando a otimização do mecanismo de pesquisa, clique na guia Lighthouse . Isso oferece configurações que você pode marcar ou desmarcar para seu relatório — clique em Gerar relatório^{(Generate report)} para criar o relatório a ser exibido.

Isso mal arranha a superfície do potencial que o modo de desenvolvedor do Chrome pode trazer para os desenvolvedores. Se você quiser saber mais, a documentação do Chrome DevTools^{(Chrome DevTools documentation)} deve ajudá-lo com as ferramentas e recursos oferecidos, incluindo como criar seus próprios testes de usuário com ele. 

Truques avançados do Google Chrome^{(Advanced Google Chrome Tricks)}

A maioria dos usuários do Chrome nunca saberá que o kit Google Chrome DevTools existe em seu navegador, mas para usuários avançados, continua sendo uma maneira excepcionalmente útil de testar e analisar sites. Há também extensões do Chrome^{(Chrome extensions for web developers)} de terceiros para desenvolvedores da Web disponíveis para ajudar a testar seu site ainda mais.

Se você estiver criando um site básico^{(building a basic website)} , alternar para o modo de desenvolvedor do Chrome pode ajudar a identificar erros no site que não são visíveis imediatamente. Você só pode fazer isso se o Chrome estiver funcionando corretamente. Portanto, se estiver enfrentando problemas com falhas do Chrome^{(struggling with Chrome crashes)} , talvez seja necessário redefinir ou reinstalar seu navegador primeiro.

What Is Chrome Developer Mode & What Are Its Uses?

No websіte is built perfectly. Like all products made by humans, code errors are part of the proceѕs. That’s why it’s important to thoroughly test any new website you build to make ѕure that it’s as free of errors as possible to giνe your users the best possible experiencе. 

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

• Preenchimento automático do Google Chrome: um guia completo

• As 10 melhores extensões de privacidade para Chrome (2022)

• Use estes 4 plug-ins do Chrome para criptografar suas mensagens do Gmail

• Configurações de conteúdo do Google Chrome: um guia completo

• Qual é o melhor serviço de teleconferência - os melhores aplicativos comparados

• Melhores widgets meteorológicos para Windows 10/11

• Testes de pixel morto para corrigir um pixel preso no seu monitor

• Como o aplicativo Signal Desktop pode ajudar a proteger sua privacidade

• 3 ferramentas para diagnosticar e solucionar problemas com seu monitor

• Os 5 melhores aplicativos de filtro de luz azul para Windows, Mac e Linux

• Coisas a considerar antes de criar seu próprio Wiki

• Mover, excluir ou copiar arquivos automaticamente no Windows

• Como usar um gerenciador de pacotes do Windows para instalar programas do Windows

• Um tutorial do Microsoft Planner: tudo o que você precisa saber

• O analisador de e-mail Zapier: 3 maneiras criativas de usá-lo

• 5 alternativas do Windows para o comando sudo do Linux

• Editor de scripts do Google Apps: tudo o que você precisa saber para começar

• Os melhores aplicativos para monitorar o uso da Internet

• Como os sites funcionam: saiba o que está por baixo do capô

• 5 melhores programas de software para gerenciar monitores duplos