Além da maioria dos criadores de navegadores focados no usuário comum que procura navegar na Web, eles também atendem aos desenvolvedores Web, designers e profissionais de garantia de qualidade que ajudam a criar os aplicativos e sites que esses usuários acessam integrando ferramentas poderosas diretamente aos navegadores. si mesmos.
Já se foram os dias em que as únicas ferramentas de programação e teste encontradas em um navegador permitiam que você visualizasse o código-fonte de uma página e nada mais. Os navegadores atuais permitem que você mergulhe muito mais fundo, executando e depurando snippets JavaScript, inspecionando e editando elementos DOM, monitorando o tráfego de rede em tempo real que o aplicativo ou a página carrega para identificar gargalos, analisando o desempenho do CSS, garantindo que seu código seja não utilizando muita memória ou muitos ciclos de CPU e muito mais. A partir de uma perspectiva de teste, você pode reproduzir como um aplicativo ou uma página da Web será renderizada em diferentes navegadores, bem como em diferentes dispositivos e plataformas por meio da mágica do design responsivo e dos simuladores incorporados. A melhor parte é que você pode fazer tudo isso sem ter que sair do seu navegador!
Os tutoriais abaixo mostram como acessar essas ferramentas de desenvolvedor em vários navegadores da Web populares.
Google Chrome
As ferramentas de desenvolvedor do Chrome permitem editar e depurar códigos, auditar componentes individuais para expor problemas de desempenho, simular diferentes telas de dispositivos, incluindo aquelas que executam o Android ou o iOS, e executar várias outras funções úteis.
- Clique no botão do menu principal do Chrome, marcado com três linhas horizontais e localizado no canto superior direito do navegador.
- Quando o menu suspenso aparecer, passe o cursor do mouse sobre o Mais ferramentas opção.
- Um submenu deve aparecer agora. Selecione a opção rotulada Ferramentas de desenvolvimento . 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) + COMMAND + I )
- A interface das Ferramentas do desenvolvedor do Google Chrome 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, geralmente localizado na parte inferior ou direita da tela, contém as seguintes guias.Elementos: Fornece a capacidade de inspecionar CSS e código HTML, bem como editar CSS on-the-fly, vendo os efeitos de suas alterações em tempo real.Console: O console JavaScript do Chrome permite a entrada direta de comandos, bem como a depuração de diagnóstico.Fontes: Permite que você depure o código JavaScript através de uma poderosa interface gráfica.Rede: Categoriza e exibe informações detalhadas sobre cada operação relacionada no aplicativo ou na página ativa, incluindo cabeçalhos completos de solicitação e resposta, além de métricas de tempo avançadas.Timeline: Permite a análise aprofundada de todas as atividades que ocorrem no navegador, assim que uma solicitação de carregamento de página ou de aplicativo é iniciada.
- Além dessas seções, você também pode acessar as seguintes ferramentas através do >> ícone, localizado à direita da Timeline aba.Perfil: Dividido em Perfilador de CPU e Perfilador de heap seções, fornece uso abrangente de memória e tempo de execução geral do aplicativo ou da página ativa.Segurança: Destaca problemas de certificados e outros problemas relacionados à segurança com a página ou aplicativo ativo.Recursos: É aqui que você pode inspecionar cookies, armazenamento local, cache de aplicativos e outras fontes de dados locais usadas pela página ou aplicativo da Web atual.Auditorias Oferece maneiras de otimizar o tempo de carregamento e o desempenho geral de uma página ou aplicativo.
- Modo de dispositivo permite visualizar a página ativa em um simulador que renderiza quase exatamente como apareceria em mais de uma dúzia de dispositivos, incluindo vários modelos Android e iOS conhecidos, como o 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 alternar Modo de dispositivo ligado e desligado, selecione o ícone do celular localizado diretamente à esquerda do Elementos aba.
- Você também pode personalizar a aparência das suas ferramentas de desenvolvedor clicando primeiro no botão de menu representado por três pontos posicionados verticalmente e localizados no lado direito das guias acima mencionadas. A partir desse menu suspenso, você pode reposicionar o encaixe, mostrar ou ocultar diferentes ferramentas, além de ativar 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 do desenvolvedor da Web do Firefox inclui ferramentas para designers, desenvolvedores e testadores, como um editor de estilo e um conta-gotas de segmentação por pixel.
Leitura Recomendada da Lifewire:Os 25 principais scripts de usuário do Greasemonkey e do Tampermonkey
- Clique no botão do menu principal do Firefox, representado por três linhas horizontais e localizado no canto superior direito da janela do navegador.
- Quando o menu suspenso for exibido, selecione o ícone Desenvolvedor . o Desenvolvedor Web menu agora deve ser exibido, contendo as seguintes opções.Você notará que a maioria dos itens de menu tem atalhos de teclado associados a eles.Alternar Ferramentas: 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 ), Janelas ( CTRL + SHIFT + I )Inspetor: Permite que você inspecione e / ou ajuste 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 ), Janelas ( CTRL + SHIFT + C )Console da Web: Permite que você execute expressões JavaScript dentro da página ativa, bem como revise 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) + COMANDO + K ), Janelas ( CTRL + SHIFT + K )Depurador: o Depurador JavaScript permite identificar e corrigir defeitos definindo pontos de interrupção, inspecionando nós DOM, fontes externas de black boxing e muito mais. Como é o caso com o Inspetor , esse recurso também suporta depuração remota. Atalho de teclado: Mac OS X ( ALT (OPTION) + COMMAND + S ), Janelas ( CTRL + SHIFT + S Editor de estilo: Permite criar novas folhas de estilo e incorporá-las à página da Web ativa ou editar folhas existentes e testar como as alterações são processadas em um navegador com apenas um clique. Atalho de teclado: Mac OS X, Windows ( SHIFT + F7 )Atuação: Fornece uma análise detalhada do desempenho da rede da página ativa, dados de taxa de quadros, tempo e estado de execução de JavaScript, pintura intermitente e muito mais. Atalho de teclado: Mac OS X, Windows ( SHIFT + F5 )Rede: Lista cada solicitação de rede iniciada pelo navegador, juntamente com o método correspondente, o domínio de origem, o tipo, o tamanho e o tempo decorrido. Atalho de teclado: Mac OS X ( ALT (OPÇÃO) + COMANDO + Q ), Janelas ( CTRL + SHIFT + Q )Barra de ferramentas do desenvolvedor: Abre um interpretador de linha de comando interativo. Entrar Socorro no interpretador para obter uma lista de todos os comandos disponíveis e sua sintaxe apropriada. Atalho de teclado: Mac OS X, Windows ( SHIFT + F2 )WebIDE: Fornece a capacidade de criar e executar aplicativos da Web através 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 que o 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), em vez de apenas a página da Web ativa. Atalho de teclado: Mac OS X ( SHIFT + COMMAND + J ), Janelas ( CTRL + SHIFT + J )Visualização de design responsivo: Permite que você visualize 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 ), Janelas ( CTRL + SHIFT + M )Conta-gotas: Exibe o código de cores hexadecimais para pixels selecionados individualmente.Caderno de Rabiscos: Permite escrever, editar, integrar e executar trechos de código JavaScript a partir de uma janela pop-up do Firefox. Atalho de teclado: Mac OS X, Windows ( SHIFT + F4 )Fonte da página: 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 ( COMANDO + U ), Janelas ( CTRL + U )Obtenha mais ferramentas: Abre o Caixa de ferramentas do desenvolvedor da Web coleção no site de complementos oficiais da Mozilla, apresentando cerca de uma dúzia de extensões populares como Firebug e Greasemonkey.
Microsoft Edge / Internet Explorer
Comumente referido como o Ferramentas para desenvolvedores F12 , uma homenagem ao atalho de teclado que lançou a interface desde versões anteriores do Internet Explorer, o conjunto de ferramentas de desenvolvimento no IE11 e no Microsoft Edge já percorreu um longo caminho desde sua criação, oferecendo um grupo muito útil de monitores, depuradores, emuladores e Compiladores
- Clique no Mais ações menu, representado por três pontos e localizado no canto superior direito da janela do navegador. Quando o menu suspenso for exibido, selecione a opção Ferramentas para desenvolvedores F12 . Como já mencionei, você também pode acessar as ferramentas através do F12 atalho de teclado.
- A interface de desenvolvimento deve agora ser exibida, normalmente na parte inferior da janela do navegador. As seguintes ferramentas estão disponíveis, cada uma acessível ao clicar no cabeçalho de sua respectiva guia ou usando o atalho de teclado que a acompanha.DOM Explorer: Permite que você edite folhas de estilo e HTML na página ativa, renderizando os resultados modificados conforme você avança. Utiliza a funcionalidade IntelliSense para preencher automaticamente o código, quando aplicável. Atalho de teclado: (CTRL + 1) Console: Fornece a capacidade de enviar informações de depuração, incluindo contadores, timers, 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) Depurador: 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) Rede: Lista cada solicitação de rede iniciada pelo navegador durante o carregamento e a 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) Atuação: Detalhes das taxas de quadros, utilização da CPU e outras métricas relacionadas ao desempenho para ajudar você a acelerar os tempos de carregamento da página e outras atividades. Atalho de teclado: (CTRL + 5) Memória: 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) Emulação: Mostra como a página ativa seria renderizada em várias resoluções e tamanhos de tela, emulando smartphones, tablets e outros dispositivos. Também fornece a capacidade de modificar o agente do usuário e a orientação da página, bem como simular diferentes localizações, inserindo uma latitude e longitude. Atalho de teclado: (CTRL + 7)
- Para exibir o Console enquanto dentro de qualquer uma das outras ferramentas, clique no botão quadrado com um colchete direito dentro dele, localizado no canto superior direito da interface das ferramentas de desenvolvimento.
- Para desencaixar, a interface das ferramentas do desenvolvedor torna-se uma janela separada, clique no botão representado por dois retângulos em cascata ou use o seguinte atalho de teclado: CTRL + P . Você pode colocar as ferramentas de volta no local original pressionando CTRL + P uma segunda vez.
Apple Safari (apenas OS X)
O conjunto de ferramentas de desenvolvimento diverso do Safari reflete a grande comunidade de desenvolvedores que utiliza um Mac para suas necessidades de design e programação. Além de um poderoso console e recursos tradicionais de registro e depuração, um modo de design responsivo fácil de usar e uma ferramenta para criar suas próprias extensões de navegador também são fornecidos.
- Clique em Safári no menu do navegador, localizado na parte superior da tela. Quando o menu suspenso aparecer, selecione Preferências . Você também pode usar o seguinte atalho de teclado no lugar deste item de menu: COMANDO + COMMA (,)
- Safari Preferências A interface deve agora ser exibida, sobrepondo a janela do navegador. Clique no Avançado ícone, localizado no lado direito do cabeçalho.
- o Avançado as preferências agora devem estar visíveis. Na parte inferior desta tela há uma opção marcada Mostrar o menu Desenvolver na barra de menus , acompanhado 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á.
- Feche o Preferências interface clicando no 'x' vermelho encontrado no canto superior esquerdo.
- Agora você deve notar uma nova opção no menu do navegador chamado desenvolve , localizado entre Favoritos e Janela . Clique neste item de menu. Um menu drop-down deve agora ser exibido, contendo as seguintes opções.Abrir página com: Permite que você abra a página da Web ativa em um dos outros navegadores instalados no seu Mac.Agente de usuário: Permite selecionar mais de uma dúzia de valores de agente do usuário predefinidos, incluindo várias versões do Chrome, Firefox e Internet Explorer, além de definir sua própria sequência personalizada.Entre no modo de design responsivo: Processa a página atual como ela apareceria em vários dispositivos e em diferentes resoluções de tela.Mostrar o Web Inspector: Lança a interface principal para as ferramentas de desenvolvimento do Safari, normalmente colocada na parte inferior da tela do seu navegador e contendo as seguintes seções: Elementos , Rede , Recursos , Linhas do tempo , Depurador , Armazenamento , Console .Mostrar o Console de Erros: Também lança a interface das ferramentas de desenvolvimento, diretamente para o Console guia que exibe erros, avisos e outros dados de registro pesquisáveis.Mostrar a origem da página: Abre o Recursos guia, que exibe o código-fonte da página ativa categorizada por documento.Mostrar recursos da página: Executa a mesma função que o Mostrar a origem da página opção.Mostrar editor de trechos: Abre uma nova janela onde você pode inserir código CSS e HTML, visualizando sua saída on-the-fly.Mostrar criador de extensões: Fornece a capacidade de criar ou editar extensões do Safari com CSS, HTML e JavaScript.Mostrar gravação da linha de tempo: Abre o Linhas do tempo e começa a exibir solicitações de rede, informações de layout e renderização, bem como a execução de JavaScript em tempo real.Caches vazios: Exclui todo o cache atualmente armazenado no seu disco rígido.Desativar caches: Impede que o Safari seja armazenado em cache para que todo o conteúdo seja recuperado do servidor em cada carregamento de página.Desativar Imagens: 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 do 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 tiver sido modificado para lidar explicitamente com problemas específicos da página da Web ativa, essa opção bloqueará essas alterações para que a página seja carregada como antes de essas 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 colocadas por padrão para evitar XSS e outros perigos potenciais. No entanto, eles geralmente precisam ser temporariamente desativados 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ço.Trate os Certificados SHA-1 como Inseguros: Certificados SSL usando o algoritmo SHA-1 são amplamente considerados desatualizados e vulneráveis.
