Descubra como tirar proveito das ferramentas do Chrome DevTools

Descubra como tirar proveito das ferramentas do Chrome DevTools

Descubra como tirar proveito das ferramentas do Chrome DevTools

Descubra como tirar proveito das ferramentas do Chrome DevTools

Inspecionar, depurar e otimizar aplicações web com o Chrome DevTools

Visão Geral

O Chrome Developer Tools (DevTools para abreviar), é um conjunto de ferramentas para criação e depuração de páginas web inseridas no Google Chrome.

O DevTools permite aos desenvolvedores web acesso aprofundado na parte interna do navegador e sua aplicação web.



Esta visão geral do DevTools aponta os recursos mais populares e úteis.

Se você nunca usou o DevTools antes, comece aqui. Mesmo se você for um desenvolvedor web experiente, você pode pegar algumas dicas.

Nota: Se você é um desenvolvedor web e deseja ter a última versão do DevTools, você pode usar Google Chrome Canary.

Como acessar o DevTools

Para acessar o DevTools, abra uma página web ou um aplicativo web no Google Chrome. Em seguida, faça uma das seguintes ações:

  • Clique com o botão direito em qualquer elemento da página e selecione Inspecionar Elemento.

Existem vários atalhos úteis para abrir o DevTools:

  • Use Ctrl+Shift+I (ou Cmd+Opt+I no Mac) para abrir o DevTools.
  • Use Ctrl+Shift+J (ou Cmd+Opt+J no Mac) para abrir o DevTools e trazer o foco para o Console.
  • Use Ctrl+Shift+C (ou Cmd+Shift+C no Mac) para abrir o DevTools em modo Inspecionar Elemento, ou alternar o modo Inspecionar Elemento se o DevTools já estiver aberto.

Para o fluxo de trabalho do dia-a-dia, conheça os atalhos que vão economizar o seu tempo.

A janela DevTools

O DevTools está organizado dentro de grupos de tarefas orientadas na barra de ferramentas no topo da janela.

Cada item da barra de ferramentas e painel correspondente, permitem que você trabalhe com um tipo especifico de informações da página ou aplicativo, incluindo os elementos DOM, recursos e fontes.

Descubra como tirar proveito das ferramentas do Chrome DevTools

Descubra como tirar proveito das ferramentas do Chrome DevTools

Em geral, há oito grupos principais de ferramentas disponíveis vistas no DevTools: Elements, Resources, Network, Sources, Timeline, Profiles, Audits, Console e Storage.

Você pode usar as teclas de atalho Ctrl+[ e Ctrl+] para mover-se entre os painéis.

Inspecionando o DOM e estilos

O painel Elements permite que você veja tudo em uma árvore DOM, e permite inspeção e edição em tempo real de elementos DOM. Muitas vezes você vai visitar a aba Elements quando você precisar identificar trechos HTML para algum aspecto da página. Por exemplo, você pode estar curioso se uma imagem tem um atributo HTML id, e qual qual é o valor deste atributo.

Descubra como tirar proveito das ferramentas do Chrome DevTools

Descubra como tirar proveito das ferramentas do Chrome DevTools

Trabalhando com o Console do DevTools

O Console JavaScipt fornece duas funções principais para desenvolvedores testarem páginas web e aplicações.

  • Um lugar para registrar informações de diagnóstico usando métodos fornecidos pela API do Console, como console.log(), ou console.profile().
  • Uma janela de comandos onde você pode inserir comandos e interagir com o documento e o Chrome DevTools. Você pode avaliar expressões diretamente no Console, e também pode usar métodos fornecidos pela API de Linha de Comando, como o $() comando para selecionar elementos, ou profile() para iniciar o CPU de gerador de perfil.
Descubra como tirar proveito das ferramentas do Chrome DevTools

Descubra como tirar proveito das ferramentas do Chrome DevTools

Depurando JavaScript

Com o aumento da complexidade de aplicações JavaScript, desenvolvedores precisam de uma poderosa ferramenta de depuração poderosa para ajudar a descobrir rapidamente a causa de um problema e corrigi-lo de forma eficiente.

O Chrome DevTools inclui uma série de ferramentas úteis para ajudar a fazer a depuração do JavaScript de forma menos dolorosa.

Descubra como tirar proveito das ferramentas do Chrome DevTools

Descubra como tirar proveito das ferramentas do Chrome DevTools

Melhorando o desempenho da rede com o DevTools

O painel Network fornece insights sobre os recursos solicitados e baixados pela rede em tempo real. Identificar e tratar as solicitações levando mais tempo do que o esperado é um passo essencial na otimização de sua página.

Descubra como tirar proveito das ferramentas do Chrome DevTools

Descubra como tirar proveito das ferramentas do Chrome DevTools

Audits

O painel Audit pode analizar uma página como ela carrega e fornecer sugestões e otimizações para diminuir o tempo de carregamento da página e aumentar a percepção (e real) de resposta.

Para uma visão mais aprofundada, recomendamos também a instalação da extensão PageSpeed.

Melhorando o desempenho de renderização

O painel Timeline oferece uma visão completa sobre onde o tempo é gasto quando sua página ou aplicativo web estão sendo usados ou carregados.

Todos os eventos, desde o carregamento de recursos para análise do JavaScript, cálculo de estilos, e redesenho são plotados em uma linha do tempo.

Descubra como tirar proveito das ferramentas do Chrome DevTools

Descubra como tirar proveito das ferramentas do Chrome DevTools

Desempenho de JavaScript e CSS

O painel Profiles permite traçar o perfil de tempo execução e uso de memória da página web ou aplicativo web. O painel Profiles inclui alguns perfis: um perfil CPU, um perfil JavaScript e um perfil Heap. Eles ajudam você a entender onde os recursos estão sendo gastos, e assim ajudá-lo a otimizar o seu código:

  • O perfil CPU mostra onde o tempo de execução é gasto em funções de JavaScript da sua página.
  • O perfil Heap mostra a distribuição de memória por objetos JavaScript da sua página e nós DOM relacionados.
  • O perfil JavaScript mostra onde o tempo de execução é gasto em seus scripts
Descubra como tirar proveito das ferramentas do Chrome DevTools

Descubra como tirar proveito das ferramentas do Chrome DevTools

Inspeção de armazenamento

O painel Resources permite que você inspecione os recursos que são carregados na página inspecionada. Ele permite que você interaja com o HTML5 Database, Armazenamento Local, Cookies, App Cache, etc.

Descubra como tirar proveito das ferramentas do Chrome DevTools

Descubra como tirar proveito das ferramentas do Chrome DevTools

Fonte: Google Developer e fernandofreela.wordpress.com

Artigos Relacionados

Desconfiado, homem usa drone para flagrar traição da esposa

Desconfiado, homem usa drone para flagrar traição da esposa

Compartilhe isso via FacebookCompartilhe isso via TwitterCompartilhe isso via Google+Compartilhe isso via LinkedinCompartilhe isso via Pinterest Desconfiado, homem usa drone para flagrar traição da esposa O Drone foi usado para obter imagens aereas e pegar a esposa infiel no flagra! 😛 Um Norte-Americano usou um drone para flagrar suposta traição de sua esposa e colocar fim […]

HUMOR ÁCIDO: QUAIS OS TIPOS DE COMPUTEIROS?

HUMOR ÁCIDO: QUAIS OS TIPOS DE COMPUTEIROS?

Compartilhe isso via FacebookCompartilhe isso via TwitterCompartilhe isso via Google+Compartilhe isso via LinkedinCompartilhe isso via Pinterest O QUE É UM COMPUTEIRO? QUAIS OS TIPOS DE COMPUTEIROS? Define-se como computeiro o estudante universitário ou qualquer outro tipo de desocupado que tem como área mais importante de atuação a computação. Ainda pode-se atribuir a alcunha “com o […]

NewsLetter

Receba nossas novidades por email!