ESSA SÉRIE DE POSTS SERÁ CONTINUADA NO BLOG SEJA LIVRE, NO CURSO DE JAVASCRIPT

Já faz um bom tempo que eu não posto nada por aqui, mas estou voltando com uma nova série de posts. Vou apresentar o conjunto de Ferramentas do desenvolvedor do Google Chrome/Chromium. Quem trabalha com desenvolvimento Web muito provavelmente já conhece todas as ferramentas (pelo menos deveria). Alguns preferem utilizar a extensão Firebug (originalmente para Firefox, mas disponível também para Chrome). Eu particularmente não gosto muito, mas cada usa o que achar melhor ;)

Para começar, vejamos como abrir esse conjunto de ferramentas:

Ctrl + Shift + I

Mais fácil impossível, né? OK, e agora? Vejamos o que é possível fazer com todas essas ferramentas

Cabeçalho do Console

  • Elements: aqui é possível editar a página dinamicamente sem alterar os arquivos originais nem recarregar a página. É muito útil para testar, por exemplo, estilos CSS para encontrar a melhor combinação.
  • Resources: permite acesso aos recursos utilizados pela sua aplicação web (itens carregados na página, armazenamento local HTML 5, cookies, cache, etc.).
  • Network: exibe as requisições da página como, por exemplo, imagens e scripts externos, permitindo analisar o uso de tráfego gerado pela sua aplicação.
  • Scripts: seção específica para manipular os scripts (externos ou não) carregados pela página.
  • Timeline: como o nome diz, permite analisar o uso do tempo feito pela página, quanto tempo foi necessário para ser carregada e exibida na tela, enfim, informações úteis para otimizar sua aplicação.
  • Profiles: analisa o uso de CPU da sua página. É bom garantir que sua página não vai travar o sistema de quem tentar exibi-la (principalmente se o usuário estiver usando Windows).
  • Audits: também exibe informações para otimizar sua página, mas principalmente relacionado a padrões de código HTML que pode melhorar o desempenho da página.
  • Console: console JavaScript. Exibe erros e informações dos scripts executados e permite interagir com a página executando rapidamente qualquer linha de código JavaScript.

Nos próximos post vou mostrar detalhadamente o uso de cada uma dessas ferramentas, então fique ligado :D

Com as tags → 
Plataforma Wordpress Latest (GPLv2)
Tema PageLines Lite Improved (GPLv3)
Hospedado por OpenShift by RedHat
Domínio registrado pela Neep Host
Creative Commons Attribution-ShareAlike License
Copyleft © 2016 Eduardo Weiland
Utilize um leitor de QR Code para acessar o blog no seu celular:
21
%d blogueiros gostam disto: