Alguns recursos do DevTools entre navegadores que você talvez não conheça

Alguns recursos do DevTools entre navegadores que você talvez não conheça

Registro de data e hora: 22 de março de 2023, 4:22

Passo muito tempo no DevTools e tenho certeza que você também. Às vezes, até pulo entre eles, especialmente quando estou depurando problemas entre navegadores. O DevTools é muito parecido com os próprios navegadores — nem todos os recursos no DevTools de um navegador serão os mesmos ou suportados no DevTools de outro navegador.

Mas existem alguns recursos do DevTools que são interoperáveis, mesmo alguns menos conhecidos que estou prestes a compartilhar com você.

Por uma questão de brevidade, uso “Chromium” para me referir a todos os navegadores baseados em Chromium, como Chrome, Edge e Opera, no artigo. Muitos dos DevTools neles oferecem exatamente os mesmos recursos e capacidades uns dos outros, portanto, este é apenas meu atalho para me referir a todos eles de uma vez.

Pesquisar nós na árvore DOM

Às vezes, a árvore DOM está cheia de nós aninhados em nós que estão aninhados em outros nós e assim por diante. Isso torna muito difícil encontrar exatamente o que você está procurando, mas você pode pesquisar rapidamente na árvore DOM usando Cmd + F (macOS) ou Ctrl + F (Janelas).

Além disso, você também pode pesquisar usando um seletor CSS válido, como .red, ou usando um XPath, como //div/h1.

Capturas de tela do DevTools dos três navegadores.
Pesquisa de texto no Chrome DevTools (à esquerda), seletores no Firefox DevTools (centro) e XPath no Safari DevTools (à direita)

Nos navegadores Chromium, o foco salta automaticamente para o nó que corresponde aos critérios de pesquisa conforme você digita, o que pode ser irritante se você estiver trabalhando com consultas de pesquisa mais longas ou uma grande árvore DOM. Felizmente, você pode desativar esse comportamento indo para Configurações (F1) → Preferencias → Global → Pesquise enquanto você digita → Desabilitar.

Depois de localizar o nó na árvore DOM, você pode rolar a página para trazer o nó para a janela de visualização clicando com o botão direito do mouse no nó e selecionando “Scroll into view”.

Mostrando um nó realçado em uma página da web com um menu contextual aberto para rolar para exibição
Alguns recursos do DevTools entre navegadores que você talvez não conheça

Acessar nós do console

O DevTools fornece muitas maneiras diferentes de acessar um nó DOM diretamente do console.

Por exemplo, você pode usar $0 para acessar o nó atualmente selecionado na árvore DOM. Os navegadores Chromium dão um passo adiante, permitindo que você acesse os nós selecionados na ordem cronológica inversa da seleção histórica usando, $1, $2, $3, etc.

Nó atualmente selecionado acessado a partir do Console no Edge DevTools
Alguns recursos do DevTools entre navegadores que você talvez não conheça

Outra coisa que os navegadores Chromium permitem fazer é copiar o caminho do nó como uma expressão JavaScript na forma de document.querySelector clicando com o botão direito do mouse no nó e selecionando Copiar → Copiar caminho JS, que pode então ser usado para acessar o nó no console.

Aqui está outra maneira de acessar um nó DOM diretamente do console: como uma variável temporária. Esta opção está disponível clicando com o botão direito do mouse no nó e selecionando uma opção. Essa opção é rotulada de forma diferente no DevTools de cada navegador:

  • crômio: Clique com o botão direito do mouse → “Armazenar como variável global”
  • Firefox: Clique com o botão direito do mouse → “Usar no console”
  • Safári: Clique com o botão direito → “Log Element”
Captura de tela dos menus contextuais do DevTools nos três navegadores.
Acesse um nó como uma variável temporária no console, conforme mostrado no Chrome (esquerda), Firefox (centro) e Safari (direita)

Visualize elementos com emblemas

O DevTools pode ajudar a visualizar elementos que correspondem a determinadas propriedades exibindo um emblema ao lado do nó. Os crachás são clicáveis ​​e diferentes navegadores oferecem uma variedade de crachás diferentes.

In Safári, há um botão de emblema na barra de ferramentas do painel Elementos que pode ser usado para alternar a visibilidade de emblemas específicos. Por exemplo, se um nó tiver um display: grid or display: inline-grid declaração CSS aplicada a ele, um grid crachá é exibido ao lado dele. Clicar no emblema destacará áreas de grade, tamanhos de trilha, números de linha e muito mais na página.

Uma sobreposição de grade visualizada no topo de uma grade de três por três.
Sobreposição de grade com emblemas no Safari DevTools

Os emblemas atualmente suportados em Firefox's DevTools estão listados no Firefox documentos de origem. Por exemplo, um scroll badge indica um elemento rolável. Clicar no emblema destaca o elemento que está causando o estouro com um overflow distintivo ao lado.

Distintivo de estouro no Firefox DevTools localizado no painel HTML
Alguns recursos do DevTools entre navegadores que você talvez não conheça

In crômio navegadores, você pode clicar com o botão direito do mouse em qualquer nó e selecionar “Configurações do selo…” para abrir um contêiner que lista todos os emblemas disponíveis. Por exemplo, elementos com scroll-snap-type terá um scroll-snap crachá ao lado dele, que ao clicar, alternará o scroll-snap sobreposição nesse elemento.

Alguns recursos do DevTools entre navegadores que você talvez não conheça PlatoBlockchain Data Intelligence. Pesquisa vertical. Ai.
Alguns recursos do DevTools entre navegadores que você talvez não conheça

Tirando screenshots

Já faz algum tempo que conseguimos tirar screenshots de alguns DevTools, mas agora está disponível em todos eles e inclui novas maneiras de tirar fotos de página inteira.

O processo começa clicando com o botão direito do mouse no nó DOM que você deseja capturar. Em seguida, selecione a opção para capturar o nó, que é rotulado de forma diferente dependendo de qual DevTools você está usando.

Captura de tela do DevTools nos três navegadores.
Chrome (esquerda), Safari (meio) e Firefox (direita)

Repita os mesmos passos no html node para fazer uma captura de tela de página inteira. Ao fazer isso, porém, vale a pena notar que o Safari retém a transparência da cor de fundo do elemento - o Chromium e o Firefox irão capturá-lo como um fundo branco.

Duas capturas de tela do mesmo elemento, uma com fundo e outra sem.
Comparando capturas de tela no Safari (esquerda) e Chromium (direita)

Há outra opção! Você pode tirar uma captura de tela “responsiva” da página, o que permite capturar a página em uma largura específica da janela de visualização. Como você pode esperar, cada navegador tem maneiras diferentes de chegar lá.

  • crômio: Cmd + Shift + M (macOS) ou Ctrl + Shift + M (Janelas). Ou clique no ícone “Dispositivos” ao lado do ícone “Inspecionar”.
  • Firefox: Ferramentas → Ferramentas do navegador → “Modo de design responsivo”
  • Safári: Desenvolver → “Entrar no modo de design responsivo”
Insira as opções do modo responsivo no DevTools para todos os três navegadores.
Iniciando o modo de design responsivo no Safari (esquerda), Firefox (direita) e Chromium (parte inferior)

Dica do Chrome: inspecione a camada superior

O Chrome permite visualizar e inspecionar elementos da camada superior, como uma caixa de diálogo, alerta ou modal. Quando um elemento é adicionado ao #top-layer, ganha um top-layer crachá ao lado dele, que ao clicar, leva você para o contêiner da camada superior localizado logo após o </html> tag.

A ordem dos elementos no top-layer contêiner segue a ordem de empilhamento, o que significa que o último está no topo. Clique no reveal badge para voltar ao nó.

Dica do Firefox: Ir para ID

O Firefox vincula o elemento que faz referência ao atributo ID ao seu elemento de destino no mesmo DOM e o destaca com um sublinhado. Usar CMD + Click (macOS) ou CTRL + Click (Windows)) para pular para o elemento de destino com o identificador.

Resumindo

Bastante coisas, certo? É incrível que existam alguns recursos incrivelmente úteis do DevTools compatíveis com Chromium, Firefox e Safari. Existem outros recursos menos conhecidos suportados por todos os três que você gosta?

Existem alguns recursos que mantenho por perto para ficar por dentro das novidades. Eu pensei em compartilhá-los com aqui:

Carimbo de hora:

Mais de Truques CSS