📹 🤦🏿 🐶 Minhas ferramentas de desenvolvedor do Chrome favoritas 🌔 👩‍🌾 👢

Bom dia amigos

O Chrome Developer Tools é um kit de ferramentas muito poderoso para o desenvolvimento de aplicativos da web. Usando essas ferramentas, podemos navegar pelo DOM, verificar solicitações do servidor, ajustar o desempenho do aplicativo etc.

Entre os muitos recursos disponíveis, existem vários realmente interessantes. Esses "recursos" ajudam a diminuir um ou dois cliques - não é por isso que nos reunimos aqui?

Estilo JQuery para acessar o DOM

O jQuery é uma biblioteca incrível. Ela gerencia a web há uma era inteira. Segundo alguns relatos, mais de 70% dos sites mais populares do mundo usam essa ou aquela versão do jQuery. Esta é uma conquista incrível para uma biblioteca escrita em 2006.

A API mais popular fornecida pelo jQuery é $, usada para selecionar elementos DOM. No console da ferramenta de desenvolvedor do Chrome (a seguir denominado console), é possível usar o seletor $, que é um alias de document.querySelector ().

Por exemplo, para clicar em um botão, você precisa fazer o seguinte:

$$ é um sinônimo de document.querySelectorAll ():

Existem mais alguns truques para trabalhar com $. Às vezes, o seletor é muito complexo para digitar manualmente, ou simplesmente não podemos determinar a especificidade suficiente do seletor. Se selecionarmos um elemento na guia "Elementos", podemos encontrá-lo no console usando a variável $ 0:

Na verdade, o console permite acessar os últimos 5 elementos selecionados. Esses elementos estão disponíveis através das variáveis $ 0- $ 4, respectivamente:

Copiar propriedades do item

A guia Elementos é muito útil. Ele armazena a árvore DOM do nosso site, permite visualizar os estilos de elementos e fazer alterações neles rapidamente.

A coisa realmente legal que descobri é a capacidade de copiar as propriedades de um elemento (e não apenas) usando o menu de contexto.

Por exemplo, você pode copiar um seletor de elemento:

Esse seletor pode não ser específico o suficiente ou muito específico, mas ajuda na depuração do código de qualquer maneira.

Como você pode ver, também podemos copiar estilos de elementos, o "caminho" JS (document.querySelector (SELECTOR)) ou XPath.

Filtragem de Solicitações de Rede

Às vezes, temos que trabalhar com uma página enviando muitas solicitações ao servidor. Quero dizer, muitos pedidos.

Vadear por essas florestas em busca de um pedido específico não é uma ocupação agradável. Felizmente, você pode filtrar as consultas.

Um conjunto de filtros permite exibir consultas por tipo, por exemplo, XHR / Buscar, folhas de estilo, scripts JS, imagens etc.:

Você também pode especificar seus próprios critérios no campo de entrada localizado acima dos filtros:

Emulando diferentes velocidades de conexão de rede

Usando a guia "Rede", podemos testar nosso site em condições de diferentes velocidades de conexão. O padrão é definido como online, no qual você desfruta totalmente da largura de banda da sua conexão.

Além do online, estão disponíveis “predefinições” como 3G rápido, 3G lento e offline, que diferem na velocidade de carregamento da página, velocidade de download de arquivos e atraso de tempo. Se você precisar emular outra coisa, use o botão Adicionar ... para adicionar seu próprio perfil:

Usando expressões ao vivo no console

O que são expressões ao vivo?

Expressões ativas são expressões que são constantemente "avaliadas" no console. Suponha que você queira rastrear o valor de uma variável. Você pode inseri-lo repetidamente:

graças ao Live Expressions, você pode se concentrar no código e permitir que o Chrome monitore independentemente as alterações:

esse recurso está disponível para as variáveis declaradas no console e as variáveis declaradas no script.

Emule vários dispositivos

Aqueles que trabalham com aplicativos responsivos estão familiarizados com a sensação que você sente quando trabalha duro e por muito tempo com a beleza do layout da página, apenas para ver como tudo se desfaz no dispositivo com uma resolução diferente.

Não estou aqui para falar sobre consultas de mídia, mas para mostrar uma maneira de testar seu trabalho.

Se você clicar no botão que se parece com um tablet e um telefone, verá como a área de visualização do navegador muda de acordo com os tamanhos de vários dispositivos.

Você pode selecionar um dispositivo na lista de predefinições que contêm dispositivos populares, como iPhone X, iPad Pro, Pixel 2, Pixel 2 XL, etc. Essa lista está longe de ser completa (não muito relevante), mas é suficiente para resolver a maioria dos problemas.

Se o dispositivo necessário não estiver listado, você poderá definir a resolução manualmente. Como você pode ver, defino minha própria permissão para emular o OnePlus 6 (meu gadget diário):

Alterar estado do item

Você já se deparou com uma situação em que deseja brincar com os estilos aplicados a um elemento ao passar o mouse sobre ele (: passar o mouse), mas toda vez que você move o cursor para a guia Estilos, o elemento perde o foco.

As ferramentas do desenvolvedor permitem corrigir o estado de um elemento. Podemos facilmente ativar / desativar estados como: ativo,: pairar,: foco,: foco interno e: visitado:

Aqui estão minhas ferramentas favoritas do desenvolvedor do Chrome. Obrigado pela atenção.

Feliz codificação!

Minhas ferramentas de desenvolvedor do Chrome favoritas