Usamos o Chrome DevTools como
- Editar rapidamente elementos HTML
- Expandir todos os elementos filhos
- Relocação do inspetor
- Pesquisa de elemento DOM
- Paletas
- Vários cursores
- Codificar imagem base64
- Comutação de pseudo-classe
- Seleção de colunas
- Copiar pedido para cURL
- Teclado na tela
- Captura de tela da página inteira
- Emulação de dispositivos de toque
- Recursos úteis
Como o nome indica, o Chrome DevTools, ou inspetor da web, é uma ferramenta projetada para desenvolvedores da Web e pessoas associadas a ele. O inspetor da web permite que você faça o seguinte:
- Inspecione a exatidão do visor.
- Acompanhe a execução de scripts em JavaScript.
- Ver atividades de rede.
Ao escrever este artigo eu usei Canário - versão do Chrome, em que os novos recursos são testados e, em seguida, se enquadram em uma versão estável do Chrome.
Para iniciar o inspetor, você pode clicar com o botão direito do mouse em qualquer lugar da página e selecionar "Visualizar código do item". Você também pode pressionar Ctrl + Shift + C.
Editar rapidamente elementos HTML
Vamos começar com o mais simples: editar elementos.
Como verificar:
- Selecione a guia Elementos.
- Selecione qualquer elemento HTML dentro do painel.
- Clique duas vezes na tag e altere, por exemplo, o nome da tag.
Quando a edição estiver concluída, a tag de fechamento será atualizada automaticamente.
Expandir todos os elementos filhos
Como verificar:
- Vá para o painel Elementos.
- Selecione um elemento e, mantendo pressionada a tecla Alt, clique na seta à esquerda do elemento.
Relocação do inspetor
O painel do inspetor pode ser pressionado na parte inferior da janela do navegador e no lado direito. Por exemplo, a localização do painel à direita é conveniente quando se trabalha em monitores widescreen. Além disso, o painel do inspetor pode ser colocado em uma janela separada e, por exemplo, transferido para outro monitor.
Como verificar:
- Ctrl + Shift + D - alternar localização
Pesquisa de elemento DOM
Provavelmente não são muitos para os quais isso será uma descoberta, mas na guia "Elementos" você pode pesquisar por DOM.
Como verificar:
- Pressione Ctrl + F e insira a consulta de pesquisa proposta.
Paletas
Selecione a cor da paleta A escolha da cor nas versões recentes do Chrome sofreu algumas alterações: adicionamos duas paletas para facilitar a escolha da cor.
Vários cursores
Mova o cursor e, enquanto mantém pressionada a tecla Ctrl, clique na área desejada para adicionar um cursor. Você pode desfazer a ação usando Ctrl + U. Pessoalmente, nunca fui útil.
Codificar imagem base64
Como verificar:
- Alterne para o painel Rede.
- Selecione a imagem
- Clique com o botão direito na imagem e selecione ""
Comutação de pseudo-classe
Pseudo-classes refletem o estado dos elementos e suas posições relativas.
Como verificar:
- Clique com o botão direito do mouse em um elemento no painel Elementos e selecione uma pseudo classe na lista Estado do Elemento de Força.
- Você também pode selecionar uma pseudo-classe no lado direito do painel Elementos.
Seleção de colunas
Como verificar:
- Vá para o painel "Fontes".
- Selecione qualquer arquivo.
- Selecione o texto pressionando Alt.
A seleção de uma coluna também funciona quando o HTML é editado no painel Elementos.
Copiar pedido para cURL
Qualquer solicitação na guia Rede pode ser copiada e colada no terminal para execução usando curl.
Teclado na tela
Se o perfil do Nexus 5X estiver selecionado, você poderá ver a aparência do site quando o teclado na tela estiver ativo.
DevTools do Chrome: teclado virtual
Captura de tela da página inteira
Tirar uma foto da página inteira é muito simples. Só precisa ...
- Abra o inspetor.
- Vá para o console.
- Pressione Ctrl + Shift + P
- Digite "captura de tela"
- Selecione "Capturar captura de tela inteira"
Captura de tela da página inteira Emulação de dispositivos de toque
Você também pode simular alguns sensores:
- Tela sensível ao toque
- Coordenadas para geolocalização
- Acelerômetro
Como tentar:
- Selecione o painel Elementos.
- Pressione "Esc" e selecione "Emulação> Sensores".
Recursos úteis
chaves e valores
As funções de chaves e valores permitem que você emita as chaves ou valores do objeto para o console, respectivamente. 
Exibindo chaves e valores de objeto separadamente
