Com o Chrome DevTools podemos ver imediatamente os efeitos das modificações no código
Chrome DevTools é um conjunto de ferramentas de depuração e criação de sites integradas ao Google Chrome. Claro, também podemos usá-los em sua versão de código aberto; Cromo.
É possível acessar as ferramentas do Chrome para desenvolvedores pressionando a combinação de teclas Ctrl + Shift + I, também passando o mouse sobre um elemento e clicando com o botão direito do mouse em Inspecionar.
Componentes
Quando abrimos o Chrome DevTools, vemos que você apareceno painel à direita da página em que estamos navegando. Por sua vez, este painel eEstá dividido em guias correspondentes a cada uma das ferramentas. Por sua vez, as ferramentas são divididas em seções.
As seções são:
- Elementos: mostra os diferentes componentes da página.
- Console: permite que você execute diagnósticos durante o desenvolvimento ou interaja com o código Javascript da mesma forma que faria com o terminal Linux.
- Fontes: facilita a depuração do código Javascript e o trabalho com arquivos locais.
- Rede: ajuda a monitorar e melhorar o desempenho da página.
- Linha do tempo: Permite o registro e exploração dos diversos eventos que ocorrem durante a visita a um local.
- Aplicação: investiga todos os recursos que são carregados; entre outros, bancos de dados IndexedDB ou Web SQL, armazenamento local e de sessão, cookies, cache de aplicativo, imagens, fontes e folhas de estilo.
- Segurança: detecta problemas de segurança no código.
Vamos ver o que podemos usar para Chrome DevTools
Conserte o que não funciona
Aconteceu com todo desenvolvedor. Escreva o código, verifique se não há erros e, ainda assim, no momento da verdade a página não funciona como deveria. A ferramenta Console mostra qual erro está ocorrendo em tempo de execução.
Diminuir o tempo de carregamento
Se uma página demora muito para carregar, o usuário se cansa e vai para outro site. Felizmente, a era dos sites em Flash e de suas introduções animadas acabou. De qualquer forma, a guia Redes do Chrome DevTools torna mais fácil descobrir quais elementos estão atrasando o carregamento. Podemos repetir o teste para diferentes velocidades de conexão.
Modifique o código
Na guia Elementos, podemos veja os elementos de uma página, o código html relacionado e as propriedades css. Nós também podemos mudá-los.
Podemos editar o texto de uma página usando o comando
document.designMode = 'on';
Experimente diferentes tamanhos de tela
Tablets, smartphones, TVs inteligentes, computadores desktop. A lista de dispositivos com os quais navegamos na Internet está crescendo. Com o Chrome DevTools podemos teste se uma página fica bem em tamanhos diferentes.
O benchmarking
Em Gestão, o termo benchmarking significa aprender com as melhores práticas de quem faz o mesmo que nós. Com o Chrome DevTolls, se gostarmos do design de um site, podemos veja o código html e as folhas de estilo css e copie-os para o nosso site.
Obter Chrome DevTools
O Chrome DevTools está disponível nos navegadores Google Chrome e Chromium. O Chromium está nos repositórios das principais distribuições. Também pode ser instalado em lojas estalo. Quanto ao Google Chrome, você pode obtenha aqui. em formato DEB e RPM