Locaweb Edição 89

chrome devtools 51 REVISTA LOCAWEB 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 CoreBiz Com 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 TI Como 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