Como usar as ferramentas do desenvolvedor do navegador da Web

2024 Autor: Abigail Brown | [email protected]. Última modificação: 2024-01-07 19:05

Além de a maioria dos fabricantes de navegadores se concentrar no usuário comum que procura navegar na web, eles também atendem aos desenvolvedores da web, designers e profissionais de garantia de qualidade que ajudam a criar os aplicativos e sites que esses usuários estão acessando, integrando poderosos ferramentas diretamente nos próprios navegadores.

Já se foram os dias em que as únicas ferramentas de programação e teste encontradas em um navegador permitiam visualizar o código-fonte de uma página e nada mais. Os navegadores atuais permitem que você se aprofunde muito mais, executando e depurando trechos de JavaScript, inspecionando e editando elementos DOM, monitorando o tráfego de rede em tempo real enquanto seu aplicativo ou página carrega para identificar gargalos, analisando o desempenho de CSS, garantindo que seu código seja não utilizar muita memória ou muitos ciclos de CPU e muito mais.

De uma perspectiva de teste, você pode reproduzir como um aplicativo ou página da Web será renderizado em diferentes navegadores, bem como em diferentes dispositivos e plataformas por meio da magia do design responsivo e dos simuladores integrados. A melhor parte é que você pode fazer tudo isso sem precisar sair do seu navegador!

Os tutoriais abaixo orientam você sobre como acessar essas ferramentas de desenvolvedor em vários navegadores populares.

Google Chrome

As ferramentas de desenvolvedor do Chrome permitem que você edite e depure código, audite componentes individuais para expor problemas de desempenho, simule diferentes telas de dispositivos, incluindo aqueles que executam Android ou iOS, e execute várias outras funções úteis.

1. Selecione o menu principal do Chrome, marcado com três linhas horizontais e localizado no canto superior direito do navegador.

2. Quando o menu suspenso aparecer, passe o cursor do mouse sobre a opção Mais ferramentas.

   

3. Um submenu deve aparecer agora. Selecione a opção rotulada Ferramentas do desenvolvedor. Você também pode usar o seguinte atalho de teclado no lugar deste item de menu: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +COMANDO+I)

   

4. A interface do Chrome Developer Tools agora deve ser exibida, conforme mostrado nesta captura de tela de exemplo. Dependendo da sua versão do Chrome, o layout inicial que você vê pode ser um pouco diferente do apresentado aqui. O hub principal das ferramentas do desenvolvedor, normalmente localizado na parte inferior ou no lado direito da tela, contém as seguintes guias.

5. Além dessas seções, você também pode acessar as seguintes ferramentas através do ícone >>, localizado à direita do ícone Performance tab.

   • Memory: Monitore e registre o uso de memória em uma página web. Você pode ver o quão pesado é o JavaScript em seu site.
   • Security: Destaca problemas de certificado e outros problemas relacionados à segurança com a página ou aplicativo ativo.
   • Application: Inspecione os recursos que estão sendo usados por um aplicativo da web. Obtenha um detalhamento completo do que está sendo usado.
   • Audits: Oferece maneiras de otimizar o tempo de carregamento e o desempenho geral de uma página ou aplicativo.

   

6. Device Mode permite visualizar a página ativa em um simulador que a renderiza quase exatamente como apareceria em mais de uma dúzia de dispositivos, incluindo vários conhecidos Android e modelos iOS, como iPad, iPhone e Samsung Galaxy. Você também tem a capacidade de emular resoluções de tela personalizadas para atender às suas necessidades específicas de desenvolvimento ou teste.

   Para ativar e desativar Device Mode, selecione o ícone do celular localizado diretamente à esquerda do Elementos tab.

   

7. Você também pode personalizar a aparência de suas ferramentas de desenvolvedor selecionando primeiro o botão de menu representado por três pontos colocados verticalmente e localizado no lado direito das guias mencionadas.

   A partir deste menu suspenso, você pode reposicionar o dock, mostrar ou ocultar diferentes ferramentas, bem como iniciar itens mais avançados, como um inspetor de dispositivos. Você verá que a própria interface das ferramentas de desenvolvimento é altamente personalizável através das configurações encontradas nesta seção.

   

Mozilla Firefox

A seção de desenvolvedor web do Firefox inclui ferramentas para designers, desenvolvedores e testadores, como um editor de estilo e um conta-gotas de segmentação de pixels.

1. Selecione o menu principal do Firefox, representado por três linhas horizontais e localizado no canto superior direito da janela do navegador.

2. Quando o menu suspenso aparecer, selecione Web Developer.

   

3. O menu Web Developer deve agora ser exibido, contendo as seguintes opções. Você notará que a maioria dos itens de menu tem atalhos de teclado associados a eles.

   • Toggle Tools: Exibe ou oculta a interface de ferramentas do desenvolvedor, normalmente posicionada na parte inferior da janela do navegador. Atalho de teclado: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: Permite inspecionar e/ou ajustar o código CSS e HTML na página ativa, bem como em um dispositivo portátil via depuração remota. Atalho de teclado: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Web Console: Permite executar expressões JavaScript na página ativa, bem como revisar um conjunto diversificado de dados registrados, incluindo avisos de segurança, solicitações de rede, mensagens CSS e muito mais. Atalho de teclado: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: O JavaScript Debugger permite identificar e corrigir defeitos definindo pontos de interrupção, inspecionando nós DOM, fontes externas de caixa preta e muito mais. Como é o caso do Inspector, esse recurso também oferece suporte à depuração remota. Atalho de teclado: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Style Editor: Permite criar novas folhas de estilo e incorporá-las à página da web ativa, ou editar planilhas existentes e testar como suas alterações são renderizadas em um navegador com apenas um clique. Atalho de teclado: Mac OS X, Windows (SHIFT+F7)
   • Performance: Fornece uma análise detalhada do desempenho de rede da página ativa, dados de taxa de quadros, tempo e estado de execução do JavaScript, flashes de pintura e muito mais. Atalho de teclado: Mac OS X, Windows (SHIFT+F5)
   • Network: Lista cada solicitação de rede iniciada pelo navegador junto com o método correspondente, domínio de origem, tipo, tamanho e tempo decorrido. Atalho de teclado: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Storage Inspector: Dê uma olhada no cache e cookies sendo armazenados por um site. Atalho de teclado: (SHIFT+F9)
   • Barra de ferramentas do desenvolvedor: Abre um interpretador de linha de comando interativo. Digite help no interpretador para obter uma lista de todos os comandos disponíveis e sua sintaxe adequada. Atalho de teclado: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Fornece a capacidade de criar e executar aplicativos da web por meio de um dispositivo real executando o Firefox OS ou através do Firefox OS Simulator. Atalho de teclado: Mac OS X, Windows (SHIFT+F8)
   • Console do navegador: Fornece a mesma funcionalidade do Console da Web (veja acima). No entanto, todos os dados retornados são para todo o aplicativo Firefox (incluindo extensões e funções no nível do navegador), e não apenas para a página da Web ativa. Atalho de teclado: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Responsive Design View: Permite visualizar instantaneamente uma página da web em diferentes resoluções, layouts e tamanhos de tela para imitar vários dispositivos, incluindo tablets e smartphones. Atalho de teclado: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Eyedropper: Exibe o código de cor hexadecimal para pixels selecionados individualmente.
   • Scratchpad: O Scratchpad permite escrever, editar, integrar e executar trechos de código JavaScript a partir de uma janela pop-out do Firefox. Abra um documento JavaScript interativo que permite escrever código e testá-lo em um site. Atalho de teclado: (SHIFT+F4)
   • Service Workers: Depure os service workers da sua aplicação web. Obtenha informações detalhadas sobre seu desempenho e erros.
   • Page Source: A ferramenta de desenvolvedor original baseada em navegador, esta opção simplesmente exibe o código-fonte disponível para a página ativa. Atalho de teclado: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Obter mais ferramentas: Abre a coleção Web Developer's Toolbox no site oficial de complementos da Mozilla, apresentando cerca de uma dúzia de extensões populares como como Firebug e Greasemonkey.

   

Microsoft Edge/Internet Explorer

Comumente chamado de Ferramentas do desenvolvedor F12, uma homenagem ao atalho de teclado que lançou a interface desde versões anteriores do Internet Explorer, o conjunto de ferramentas dev no IE11 e Microsoft Edge percorreu um longo caminho desde a sua criação, oferecendo um grupo muito útil de monitores, depuradores, emuladores e compiladores on-the-fly.

A Microsoft não suporta mais o Internet Explorer e recomenda que você atualize para o navegador Edge mais recente. Vá ao site deles para baixar a versão mais recente.

1. Selecione Mais ações, representada por três pontos e localizada no canto superior direito da janela do navegador.

   

2. Quando o menu suspenso aparecer, selecione a opção Ferramentas do desenvolvedor.

   

3. A interface de desenvolvimento agora deve ser exibida, normalmente na parte inferior da janela do navegador. As ferramentas a seguir estão disponíveis, cada uma acessível clicando em seu respectivo título de guia ou usando o atalho de teclado que acompanha.

   

   • DOM Explorer: Permite editar folhas de estilo e HTML na página ativa, renderizando os resultados modificados à medida que avança. Utiliza a funcionalidade IntelliSense para autocompletar código quando aplicável. Atalho de teclado: (CTRL+1)
   • Console: Fornece a capacidade de enviar informações de depuração, incluindo contadores, temporizadores, rastreamentos e mensagens personalizadas por meio de uma API integrada. Além disso, permite injetar código em uma página da Web ativa e modificar os valores atribuídos a variáveis individuais em tempo real. Atalho de teclado: (CTRL+2)
   • Debugger: Permite definir pontos de interrupção e depurar seu código enquanto ele é executado, linha por linha, se necessário. Atalho de teclado: (CTRL+3)
   • Network: Lista cada solicitação de rede iniciada pelo navegador durante o carregamento e execução da página, incluindo detalhes do protocolo, tipo de conteúdo, uso da largura de banda e muito mais. Atalho de teclado: (CTRL+4)
   • Desempenho: detalha as taxas de quadros, a utilização da CPU e outras métricas relacionadas ao desempenho para ajudá-lo a acelerar os tempos de carregamento da página e outras atividades. Atalho de teclado: (CTRL+5)
   • Memory: Ajuda a isolar e corrigir possíveis vazamentos de memória na página da Web atual exibindo uma linha de tempo de uso de memória junto com instantâneos de diferentes intervalos de tempo. Atalho de teclado: (CTRL+6)
   • Emulation: Mostra como a página ativa seria renderizada em várias resoluções e tamanhos de tela, emulando smartphones, tablets e outros dispositivos. Ele também oferece a capacidade de modificar o agente do usuário e a orientação da página, bem como simular diferentes geolocalizações inserindo uma latitude e longitude. Atalho de teclado: (CTRL+7)

4. Para exibir o Console enquanto dentro de qualquer uma das outras ferramentas, pressione o botão quadrado com um colchete direito dentro dele, localizado em no canto superior direito da interface das ferramentas de desenvolvimento.

   

5. Para desencaixar a interface de ferramentas do desenvolvedor para que se torne uma janela separada, selecione os dois retângulos em cascata ou use o seguinte atalho de teclado: CTRL+P. Você pode colocar as ferramentas de volta em seu local original pressionando CTRL+P uma segunda vez.

   

Apple Safari (somente Mac)

O conjunto de ferramentas de desenvolvimento diversificado do Safari reflete a grande comunidade de desenvolvedores que utiliza um Mac para suas necessidades de design e programação. Além de um console poderoso e recursos tradicionais de registro e depuração, também são fornecidos um modo de design responsivo fácil de usar e uma ferramenta para criar suas próprias extensões de navegador.

1. Selecione Safari no menu do navegador, localizado na parte superior da tela. Quando o menu suspenso aparecer, selecione Preferences. Você também pode usar o seguinte atalho de teclado no lugar deste item de menu: COMMAND+COMMA(,)

   

2. A interface Preferences do Safari agora deve ser exibida, sobrepondo a janela do seu navegador. Selecione o ícone Advanced, localizado no lado direito do cabeçalho.

   

3. As preferências Advanced agora devem estar visíveis. Na parte inferior desta tela há uma opção chamada Show Develop menu na barra de menus, acompanhada por uma caixa de seleção. Se não houver uma marca de seleção na caixa, clique nela uma vez para colocar uma lá.

   

4. Feche a interface Preferences.

5. Agora você deve notar uma nova opção no menu do navegador chamada Desenvolver, localizada entre Bookmarks e Window. Clique neste item de menu. Um menu suspenso agora deve ser exibido, contendo as seguintes opções.

   • Abrir página com: Permite abrir a página da web ativa em um dos outros navegadores atualmente instalados em seu Mac.
   • User Agent: Permite selecionar entre mais de uma dúzia de valores predefinidos de user agent, incluindo várias versões do Chrome, Firefox e Internet Explorer, bem como definir seu próprio string.
   • Entrar no modo de design responsivo: Renderiza a página atual como ela apareceria em vários dispositivos e em diferentes resoluções de tela.
   • Show Web Inspector: Inicia a interface principal das ferramentas de desenvolvimento do Safari, normalmente localizadas na parte inferior da tela do navegador e contendo as seguintes seções: Elements, Network, Resources, Timelines, Depurador, Armazenamento, Console.
   • Show Error Console: Também inicia a interface de ferramentas de desenvolvimento, diretamente para a guia Console que exibe erros, avisos e outros pesquisáveis dados de registro.
   • Mostrar fonte da página: Abre a guia Recursos, que exibe o código-fonte da página ativa categorizada pelo documento.
   • Show Page Resources: Executa a mesma função que a opção Show Page Source.
   • Show Snippet Editor: Abre uma nova janela onde você pode inserir o código CSS e HTML, visualizando sua saída rapidamente.
   • Show Extension Builder: Fornece a capacidade de criar ou editar extensões do Safari com CSS, HTML e JavaScript.
   • Show Timeline Recording: Abre a guia Timelines e começa a exibir solicitações de rede, layout e informações de renderização, bem como a execução de JavaScript em tempo real.
   • Empty Caches: Exclui todo o cache atualmente armazenado em seu disco rígido.
   • Desativar caches: Impede o cache do Safari para que todo o conteúdo seja recuperado do servidor a cada carregamento de página.
   • Disable Images: Impede que as imagens sejam renderizadas em todas as páginas da web.
   • Desativar estilos: Ignora as propriedades CSS quando uma página é carregada.
   • Desativar JavaScript: Restringe a execução de JavaScript em todas as páginas.
   • Desativar Extensões: Proíbe que todas as extensões instaladas sejam executadas no navegador.
   • Desativar hacks específicos do site: Se o Safari foi modificado para lidar explicitamente com problemas específicos da página ativa, esta opção bloqueará essas alterações para que a página carrega como teria antes dessas modificações serem introduzidas.
   • Desativar Restrições de Arquivos Locais: Permite que o navegador tenha acesso a arquivos em seus discos locais, uma ação que é restrita por padrão por motivos de segurança.
   • Desativar restrições de origem cruzada: Essas restrições são implementadas por padrão para evitar XSS e outros perigos potenciais. No entanto, eles geralmente precisam ser desativados temporariamente para fins de desenvolvimento.
   • Permitir JavaScript do Campo de Pesquisa Inteligente: Quando ativado, fornece a capacidade de inserir URLs com javascript: incorporado diretamente na barra de endereços.
   • Trate os certificados SHA-1 como inseguros: Os certificados SSL que usam o algoritmo SHA-1 são amplamente considerados desatualizados e vulneráveis.