O autor da postagem que estamos traduzindo usa as ferramentas de desenvolvedor do Chrome quase todos os dias. Aqui ele quer falar sobre os recursos pouco conhecidos dessas ferramentas. Ele diz que se ele soubesse deles antes, eles definitivamente seriam úteis para ele.
1. Uma maneira simples de obter um link para qualquer elemento em estudo
As ferramentas de desenvolvedor do Chrome permitem que você obtenha um link para qualquer elemento sob investigação no console. Para fazer isso, trabalhando no painel
Elements , clique com o botão direito do mouse em um elemento e selecione
Store as global variable no menu suspenso.
Uma maneira simples de obter um link para qualquer elemento sob investigação2. Criando expressões interativas conectadas ao console
Nas ferramentas do desenvolvedor, você pode criar expressões interativas anexadas à parte superior do console, cujos valores são constantemente atualizados. O procedimento para criar essas expressões é mostrado na figura a seguir. Se você sabe que determinados elementos da página devem ser atualizados, esse recurso pode ser muito útil para observá-los.
Expressões interativas no Chrome3. Simule conexões lentas com a Internet
A guia
Network das Ferramentas do desenvolvedor do Chrome permite simular uma conexão do navegador com várias redes. Esse recurso pode ser extremamente útil para avaliar o comportamento de uma página em uma situação em que leva alguns segundos para carregar.
Explorando uma página simulando várias maneiras de conectar-se à Internet4. Desativando o cache, salvando logs ao alternar entre páginas
Eu tive que enfrentar muitos problemas que, como se viu, não eram erros. Sua causa foi o carregamento incorreto do código em cache. Para se livrar desses problemas, você pode desativar completamente o cache usando os recursos da guia
Network . Esta é uma
Disable cache seleção
Disable cache . Observe que o cache não funciona apenas quando a barra de ferramentas do desenvolvedor está aberta.
Salvar logs é outro recurso útil, devido ao qual o console não é limpo quando a página sob investigação é recarregada. Habilita esse recurso caixa de seleção
Preserve log na guia
Network .
Desativando o cache e salvando logs5. Fazendo screenshots
As Ferramentas do desenvolvedor do Chrome incluem uma ferramenta de captura de tela incorporada. Para usá-lo, você precisa, com a janela da ferramenta aberta, aplicar a combinação de
Ctrl+Shift+P e, em seguida, insira a
screenshot da palavra-chave no campo que aparece e selecione o método desejado para criar uma captura de tela.
Criando uma captura de tela na barra de ferramentas do desenvolvedor6. O comando console.log () está longe de ser a única maneira de registrar algo no console
Todo mundo usa o comando
console.log() para registrar dados de depuração. No entanto, esse comando não esgota os recursos de log. Em particular, os comandos
console.warn() e
console.error() estão à disposição do desenvolvedor.
Esses comandos exibem mensagens de diferentes níveis de log no console - são, respectivamente, avisos e mensagens de erro. Eles são destacados em diferentes cores e ícones. As mensagens exibidas no console por diferentes comandos podem ser filtradas.
Console.warn () e console.error ()Você pode usar o comando
console.table() para exibir alguns dados estruturados convenientemente formatados em um formato de tabela.
Comando console.table ()As possibilidades de trabalhar com o console não se limitam a esses comandos. Por exemplo, também existem comandos como
console.assert() e
console.group() .
Aqui você pode encontrar uma história detalhada sobre essas equipes.
7. A construção $ _ retorna a expressão computada mais recente
A construção
$_ pode ser usada para retornar o valor de uma operação anterior executada no console.
Usando a construção $ _8. O comando $ () é uma abreviação de document.querySelector ()
Você pode usar o comando
$() no console para selecionar rapidamente um item. A propósito, os recursos do jQuery aqui não são aplicados, embora à primeira vista possa parecer que não seja assim.
Da mesma forma, o comando
$$() é uma abreviação de
document.querySelectorAll() .
Usando $ ()9. Ativar estados do elemento, como foco ou foco, no painel Estilos
Se durante o estudo de um elemento for necessário estudar seu comportamento no estado de
hover , isso pode ser uma tarefa assustadora, pois para converter um elemento nesse estado, seria necessário um ponteiro do mouse sobre ele. A solução para esse problema pode ser facilitada aproveitando os recursos do painel
Styles . Aqui você pode forçar a transferência de elementos para estados como
hover ou
focus hover .
Forçar item a declarar10. A combinação de pressionar a tecla Ctrl e clicar no mouse ajuda a encontrar uma definição de regra CSS
Você já precisou saber onde uma regra CSS é descrita? Essa tarefa é muito fácil de resolver, pressionando a tecla
Ctrl e clicando na regra de seu interesse. O MacOS usa
Cmd vez de
Ctrl .
Ctrl + clique - procure o local da definição de regra CSSCaros leitores! O que você adicionaria à lista de recursos pouco conhecidos das ferramentas de desenvolvedor do Chrome aqui?
