Chrome DevTools: 10 dicas e truques úteis

Trabalho com o Chrome há mais de uma década, muito antes de a Mozilla conseguir corrigir seus problemas de vazamento de memória. E, como alguém que faz desenvolvimento front-end diariamente, também sou um ávido usuário do Chrome DevTools. Seja para fazer a forma mais básica de inspecionar CSS ou fazer testes de performance, o DevTools é parte indispensável da minha rotina como desenvolvedor.

E ao longo dos anos eu aprendi, mas também coletei várias dicas e truques, alguns dos quais não são exatamente claros. Se você quiser uma atualização sobre tudo o que o DevTools pode fazer, recomendo consultar a documentação oficial. Mas, mais importante, a página O que há de novo no DevTools, pois é onde você obterá todos os novos recursos e ferramentas rapidamente.

A melhor maneira de navegar neste recurso é CTRL+F e procurar por “palavras-chave” que lhe interessam ou você também pode alternar o Índice acima e pular para um exemplo específico diretamente. Tenho certeza de que esta página crescerá com o tempo à medida que aprendo coisas novas, portanto, sinta-se à vontade para marcar esta página para referência futura. Vamos começar com algo prático, mas muito útil.

Bloqueie recursos para renderizar site sem CSS/JavaScript

Consideramos o JavaScript como garantido, mas há muitas pessoas que bloqueiam o JS em seus navegadores, a maioria fazendo isso por motivos relacionados à acessibilidade, privacidade e segurança.

E você também deve considerar os casos em que o JS/CSS pode não estar acessível devido a problemas de rede ou o navegador não consegue buscar um recurso específico. Então, como é o seu site quando um arquivo/biblioteca específico é bloqueado?

• Abra o DevTools e vá para a guia Rede .
• Recarregue a página em que você está para buscar todos os recursos.
• Clique em qualquer recurso e selecione Bloquear URL do recurso .
• Atualize a página novamente para ver o resultado.

Acredito que isso também funcione nas ferramentas de desenvolvedor do Firefox e Edge.

Mudanças CSS em resumo (com Exportação)

Você já se empolgou com a alteração do CSS do DevTools apenas para perceber que agora precisa voltar para 10 propriedades diferentes para salvar essas alterações? Sim. Estive lá, fiz isso.

Felizmente, existe uma maneira melhor de resolver esse problema.

• Vá para Personalizar e controlar DevTools -> Mais ferramentas .
• Selecione Alterações .
• Uma guia permanente aparecerá dentro do DevTools mostrando as alterações de código que você fez.

O painel Alterações também pode ser acessado por meio dos atalhos CTRL/CMD+Shift+P e digitando Alterações no console Executar. Na parte inferior da interface de Alterações, você tem um botão Copiar , que pode ser usado para exportar diretamente todas as alterações feitas naquela sessão.

Alterar estrutura de layout Grid e Flexbox

Recentemente escrevi um artigo sobre alguns dos melhores geradores de layout CSS, então esta próxima dica vai de mãos dadas com esse artigo. Primeiro, inspecione qualquer contêiner que seja suportado por Grid ou Flexbox e, em seguida, procure a propriedade alocada que possui display: flex; ou vice-versa.

Ao lado da propriedade, você verá um pequeno ícone clicável (o editor) - clicar nele abrirá um painel de dentro do qual você pode usar as propriedades de posicionamento conforme especificado em Grid ou Flexbox.

Esse recurso é útil quando você deseja testar um novo alinhamento de layout em tempo real. Há também uma coisa chamada CSS Grid Inspector, para a qual a equipe de desenvolvimento do Chrome fez um artigo.

Depuração de acessibilidade com ferramentas integradas

Acessibilidade é um tópico muito importante nos círculos de desenvolvedores front-end. Tanto que a maioria das bibliotecas de componentes e kits de interface do usuário vêm pré-construídos com as melhores práticas de acessibilidade. Plataformas CMS como o WordPress também adotaram a acessibilidade e começaram a implementar recursos que priorizam a inclusão do design. E o DevTools não é exceção à regra.

» Ativando a árvore de acessibilidade no Chrome DevTools

Depois de marcar a caixa de seleção habilitar , você precisará recarregar seu DevTools. Nesta fase, você terá um ícone de acessibilidade no canto superior direito da janela Elementos. Clicar neste ícone revelará toda a estrutura do site em uma visualização em árvore do DOM. Em seguida, você pode inspecionar seções e elementos individuais do site e ver se eles tiveram um rótulo ARIA atribuído a eles.

» Visualizador de pedidos de origem

No mesmo painel mostrado no GIF acima, há outra caixa de seleção. E essa caixa de seleção é chamada Mostrar ordem de origem . O que isso faz – uma vez ativado – é permitir que você veja a ordem em que os elementos aparecem para os visitantes que podem visitar suas páginas usando ferramentas assistivas.

Uma vez ativado, você pode selecionar qualquer área da sua página e ver a ordem em que os itens aparecerão.

Isso é particularmente útil ao trabalhar com Grid ou Flexbox, ambos com propriedades para reorganizar a ordem de exibição dos itens. Por exemplo order: 1;

» Sugestões de cores para texto de baixo contraste

O contraste de cores é um dos principais problemas de acessibilidade, mesmo para pessoas que não sofrem necessariamente de deficiências visuais graves. Eu tive casos em que minha visão estava começando a piorar e eu precisava obter uma nova receita para meus óculos, e o que deu foi cores de baixo / alto contraste, deixando meus olhos cansados. Branco no vermelho, verde no azul, etc.

A equipe do web.dev fez um artigo completo sobre como o método a seguir funciona.

Esse método funciona para qualquer elemento na página. Mesmo se você achar que o contraste está bom, o algoritmo da taxa de contraste pode fazer sugestões sutis para melhorar a visibilidade geral do contraste.

Formate JavaScript/CSS minificado em código legível

Leva apenas alguns segundos para importar o código minificado para o VS Code e depois aplicar o Prettier, mas por que se preocupar quando você pode formatar (desminificar) diretamente do console do DevTools.

Para fazer isso funcionar:

• Abra o painel Sources dentro do DevTools.
• Abra qualquer arquivo que tenha sido minificado.
• Clique no ícone {} na parte inferior do console.
• O código agora está formatado.

Editando (texto) e removendo elementos com designMode

designMode faz parte da especificação da API da Web e permite editar diretamente elementos na página, embora com algumas limitações. Por exemplo, apenas o texto pode ser editado, mas qualquer outro elemento pode ser removido completamente. Tenha em mente que este não é um recurso “oficial”, mas ainda assim é útil ao trabalhar com coisas como funções matemáticas CSS e outras propriedades específicas de texto.

Para experimentar você mesmo:

• Abra o console do DevTools.
• Digite document.designMode="on" e envie.
• Volte para a página e comece a editar.

A propriedade off também é aplicável quando você deseja desabilitar designMode. E caso você não tenha notado no GIF, isso funciona muito bem para fazer verificações ortográficas do seu conteúdo na página também.

Capture capturas de tela do emulador de dispositivo

Esta é uma característica que me iludiu por muito tempo. Meu fluxo de trabalho usual para tirar screenshots é a extensão Snip ou Awesome Screenshot. Acontece que você pode capturar capturas de tela de celular/tablet e outras resoluções diretamente do emulador de dispositivo.

Mas essa não é a única razão pela qual esse recurso é útil. Na verdade, você pode capturar capturas de tela, incluindo o quadro do dispositivo . Antes de entrar em mais detalhes, aqui está um exemplo:

Então, como você habilita o quadro do dispositivo para capturas de tela de celular/tablet?

• Abra o DevTools.
• Clique no ícone Alternar na barra de ferramentas do dispositivo .
• Navegue até o ícone do menu superior direito (três pontos).
• Selecione Mostrar quadro do dispositivo .

Aqui está uma prévia visual:

O problema é que, mesmo se você clicar no botão, o quadro do dispositivo não é exibido. E isso ocorre porque apenas alguns dispositivos exibem o quadro. Na verdade, você precisará habilitar manualmente esses dispositivos no menu disponível em Dimensões -> Editar . Esses tipos de dispositivos têm um quadro:

• iPhone 5/SE
• iPhone 6/7/8 e mais
• Nexus 5 e 5x
• Nexus 6P
• iPad

Obrigado ao usuário do StackOverflow, RoCk RoCk, pelo esclarecimento.

Selecione cores de fora do navegador

Este é um dos recursos mais recentes adicionados ao DevTools. Supondo que você já esteja familiarizado com o Color Picker – agora é possível escolher cores que não estão dentro do navegador. Em outras palavras, você pode selecionar cores diretamente da sua área de trabalho, seja uma imagem ou um ícone específico.

Agora você pode pegar as cores de suas fotos favoritas ainda mais rápido.

Use copy() como um pseudo-raspador

A função copy() pode ser usada para buscar objetos em massa encontrados na página. Para mim, esta é a maneira mais rápida de raspar rapidamente todos os URLs encontrados em uma página.

No seu tipo de console :

 copy($$('a').map(a => a.href).join('\n'))

E o resultado é:

A função JavaScript alternativa ficaria assim:

 var link_array = [], l = document.links; for(var i=0; i<l.length; i++) { link_array.push(l[i].href); } console.log(link_array)

Como alterar o tema de cores do Chrome DevTools

Eu me pergunto quantos desenvolvedores mudaram o tema do navegador Chrome para escuro, mas não perceberam que você precisa fazer isso separadamente para o DevTools. Tenho certeza de que foram poucos.

Com o DevTools aberto, você pode pressionar F1 para abrir as configurações. Isso abrirá o painel de Preferências padrão, onde você pode escolher entre o tema Claro ou Escuro ou usar as Preferências do Sistema.

Um vislumbre dentro de uma potência de desenvolvimento

Esta não é de forma alguma uma lista exaustiva de tudo o que o DevTools pode fazer. E com o tempo espero adicionar truques mais interessantes que encontrar. Espero que pelo menos uma ou duas dessas dicas tenham sido interessantes o suficiente para você adicionar às suas anotações. E se não, volte mais tarde!