chromedevtools
Trata-se de uma
ferramenta bem
didática, que traz
diversas informações
sobre seu site, sem
esforço, oferecendo
insights sobre
melhorias que podem
ser executadas
Fernanda Cristina Olimpio, chapter
leader front-end da CoreBizCom o console, é possível
testar um trecho pequeno de
código JavaScript para ver se ele
está funcionando como deveria.
A função é muito importante,
porque a maioria das páginas da
web usam ao menos um pouco
de JavaScript.
“Já o depurador de JavaScript
permite ‘limpar’, linha a linha,
todos os scripts, com a visualização
de variáveis, contextos e pilha de
chamadas das funções. Inclusive,
podemos usar o console em
conjunto com um ponto de parada
de depuração, para ver como está
o contexto da aplicação naquele
determinado ponto”, comenta o
professor da Impacta.
Yuri também destaca
a necessidade de usar o
rastreamento de rede, que
permite enxergar todas as
requisições que o navegador
faz ao carregar uma página,
desde arquivos estáticos, como
fotos, CSS e JavaScript, até as
requisições assíncronas. Com
isso, é possível verificar os dados
enviados e recebidos a cada
requisição HTTP.
Depois de checar os itens
citados acima, vale a pena tirar
um tempinho para explorar
o modo device, que permite
visualizar o site em diversos tipos
de telas de dispositivos móveis.
A dica é experimentar muito
e aproveitar todas as outras
funções do Chrome DevTools
para deixar a sua página cada vez
mais eficiente.Sistema pode ser
usado não só por
programadores,
mas também
por quem não
tem tanta
familiaridade
com TIComo
acessar o
Chrome
DevTools
O Chrome DevTools pode
ser acessado rapidamente
por qualquer pessoa que
tenha o Google Chrome
instalado no computador.
Para abrir o recurso, basta
apertar a tecla F12 ou
CTRL+SHIFT+I. Além disso,
é possível abrir a solução
pelo menu do navegador. É
só selecionar a opção “Mais
ferramentas” e depois
clicar em “Ferramentas
do desenvolvedor”.
Chrome DevTools
na prática
As funções do Chrome
DevTools podem ser separadas
em módulos. Atualmente, ele
conta com nove abas internas,
que oferecem diferentes
possibilidades. Yuri afirma
que as mais usadas são o
inspecionador de elementos,
o console, o depurador de
JavaScript, o rastreamento de
rede e o modo device.
O inspecionador de HTML,
JavaScript e CSS é muito
importante para verificar
se o layout da página está
funcionando corretamente.
Guilherme explica que, com ele,
é possível ver o código-fonte que
gerou a página e as regras de CSS
aplicadas a cada elemento. Além
disso, dá para checar as funções
e os objetos JavaScript que estão
codificados na página.Shutterstock.com