O documento apresenta as ferramentas de desenvolvimento (DevTools) do Google Chrome, que auxiliam no desenvolvimento de aplicações web. Ele descreve como inspecionar e editar elementos de uma página, otimizar códigos e registrar atividades de rede. Além disso, aborda painéis específicos, como Elements, Network, Resources e Console, que facilitam a depuração e o monitoramento de desempenho das aplicações.

1. WebDev Tools Google
Agilizando suas aplicações Web
Thiago Alvernaz
Analista BI Financeiro Sênior
AlmaViva do Brasil
.div-links{
GitHub : github.com/ThiagoAlvernaz;
Facebook : fb.com/ThiagoAlvernaz;
Twitter: @thiagoalvernaz;
Slides: slideshare.net/ThiagoAlvernaz;
}

2. Conhecendo o DevTools
É um conjunto de ferramentas incorporada no Google Chrome, com
objetivo de agilizar o desenvolvimento web.
Fornece aos desenvolvedores acesso das partes internas do navegador e
de sua aplicação web. Através dele é possível alterar o layout de, depurar
códigos JavaScript e otimização do código.

3. Acessando
Abra uma página web ou aplicativo web no Google Chrome.
Selecione o menu do Chrome no canto superior direito da janela do
navegador, selecione Ferramentas > Ferramentas de Desenvolvimento ou clique com
o botão direito do mouse sobre qualquer elemento da página e selecionar Inspect
Element .
Atalhos

4. A Janela
Os DevTools são organizados em grupos orientados para cada tarefa localizado na
barra de ferramentas na parte superior da janela. Cada item da barra de
ferramentas e painel correspondente permitem trabalhar com um tipo específico de
página ou informações de aplicativos, incluindo elementos DOM, recursos e fontes.

5. Elements
Permite que você visualize informações estruturadas sobre a página web
ou aplicativo possibilitando:
• Inspecionar o HTML e CSS de uma página web.
• Teste diferentes layouts.
• Editar o CSS.

6. Elements - Inspecionar
Existem várias maneiras para inspecionar um elemento:
• Clique com o botão direito do mouse em qualquer elemento na página da
página e selecionar Inspect Element .
• Você pode usar os atalhos Ctrl+SHIFT+ C (ou Cmd+SHIFT+ C no mac) para abrir
o DevTools em modo Inspect Element.
• Use a inspect() método no console,
Ex: inspect (document.body) .

7. Elements - Edição
O painel Elements permite modificar o DOM:
• Editar um nó DOM como HTML.
• Adicionar e remover nós DOM individuais.
• Editar nomes de atributos e valores.
• Mover elementos DOM

8. Elements - Edição

9. Elements - Styles
O painel Styles mostra as regras de CSS que se aplicam ao elemento
selecionado, da mais alta prioridade para a menor. Através dele você pode:
• Editar um nome de propriedade ou o valor existente.
• Adicione uma nova declaração de propriedade.
• Adicionar uma nova regra CSS.
• Definir um estado (active, hover, focus, visited) de um elemento.

10. Network
O painel network automaticamente registra toda a atividade de rede
enquanto o DevTools estiver aberto. A primeira vez que você abrir o painel
pode estar vazio. Recarregar a página para iniciar a gravação, ou
simplesmente esperar que alguma atividade de rede para registrar dados.

11. Resources
O painel resources permite que você inspecione recursos que são
carregados na página inspecionados. Ele permite que você interagir com
HTML 5 banco de dados, armazenamento local, Cookies, AppCache, etc.

12. Timeline
O painel Timeline permite gravar e analisar toda a atividade em seu
aplicativo como ele é executado. É o melhor lugar para começar a
investigar problemas de desempenho percebido em sua aplicação.

13. Console
Tenha informações de log de diagnóstico para ajudar a depurar sua página
da web ou aplicativo. E execute comandos javascript e interaja com o
DevTools.

14. Tudo isso não é tão

15. Ok, vamos praticar