Web dev tools google - agilizando suas aplicações web

224 visualizações

Publicada em

Palestra na Una barreiro, com objetivo de mostrar os recursos dessa ferramenta que proporciona e agiliza o dia a dia do desenvolvedor.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Web dev tools google - agilizando suas aplicações web

  1. 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. 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. 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. 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. 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. 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. 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. 8. Elements - Edição
  9. 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. 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. 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. 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. 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. 14. Tudo isso não é tão
  15. 15. Ok, vamos praticar

×