O Chrome DevTools é um dos maiores motivos pelos quais os desenvolvedores se recusam a tocar em qualquer outro navegador.
Mas a maioria de nós usa apenas um punhado de recursos, permanecendo alheio a muitos outros recursos alucinantes que são lançados silenciosamente.
Vamos descobrir algumas dessas joias escondidas!
Todo mundo tem seu sistema operacional favorito, plataforma de hardware, tipo de dispositivo, fator de forma do dispositivo, etc. Mas uma coisa é comum a todos – eles estão executando o navegador Chrome e apenas o navegador Chrome! Acho que é seguro dizer que a guerra dos navegadores acabou e o Chrome venceu de forma convincente.
Os usuários do Windows usam o navegador padrão apenas para baixar o Chrome e, posteriormente, usam o Chrome, ignorando todas as “recomendações” do Windows. O mesmo vale para os dispositivos da Apple (especialmente MacBooks e dispositivos de tela maior), onde os usuários e desenvolvedores evitam o Safari, apesar das muitas reivindicações fortes e táticas de conversão da Apple.
E se um dispositivo não estiver executando o Chrome, as chances são altas de que esteja executando um derivado compatível com o Chrome, como Corajoso ou Vivaldi. Sim, eu sei, tecnicamente, esses navegadores não são baseados no Chrome, mas isso é outra discussão. O usuário médio pode estar usando esses outros navegadores por motivos ideológicos ou especiais, mas quando se trata de desenvolvedores, não há outro navegador à vista, exceto o Chrome.
Até o fato de ser um monstro comedor de memória é ignorado. A razão é simples: Chrome DevTools.
Fonte da imagem: Documentos oficiais do Chrome DevTools
Agora, se você está lendo este artigo, é seguro presumir que você é um usuário avançado, um consertador, um desenvolvedor da Web ou algo parecido. Como tal, nenhum de nós precisa de uma introdução ao DevTools, como abri-lo, seus vários recursos, etc.
Em vez disso, sem perder tempo, vamos mergulhar direto em alguns dos recursos menos conhecidos, mas surpreendentemente úteis, do Chrome DevTools.
últimas postagens
Modo de design
Uma das coisas que os desenvolvedores fazem rotineiramente é inspecionar um elemento na página e, em seguida, modificar seu HTML para visualizar algo ou testar o efeito de uma alteração.
No entanto, trabalhar com HTML diretamente no DevTools não é a coisa mais fácil de todas – vasculhar a sopa de tags, forçar os olhos tentando encontrar o colchete de abertura/fechamento correto e lidar com uma quantidade ridícula de espaço em branco ao editar o texto (espaço em branco que está claramente ausente do documento que você está vendo), são alguns dos problemas com os quais você pode lidar. É ainda pior se você for um designer e não quiser mexer na bagunça.
Aqui está uma captura de tela de uma das páginas deste mesmo site (etechpt.com):
O HTML profundamente aninhado e as classes CSS misteriosas e confusas são típicos de qualquer site não trivial hoje, que é onde a experiência com o DevTools é abaixo do ideal, para dizer o mínimo. 🤭
Mas existe um recurso do DevTools chamado Design Mode, que pode diminuir a dor em muitos casos. Usando o Design Mode (a propósito, esse não é o nome oficial; é apenas o que as pessoas o chamam por causa de como ele é ativado e o que faz – não se preocupe, veremos em breve!), alterações no página pode ser feita visualmente e ao vivo, assim como editar uma planilha ou editor de texto! O único problema é que esse recurso não está ativado por padrão e ativá-lo é uma dor de cabeça, especialmente para não desenvolvedores.
De qualquer forma, fazer isso é bastante simples; tudo que você precisa fazer é seguir as instruções abaixo. Dependendo de onde você se encontra na curva de sofisticação do usuário, isso pode ser ridiculamente fácil ou moderadamente difícil. Veja o que fazer:
- Certifique-se de que a página da Web que deseja editar esteja carregada e de que você a está visualizando (ou seja, a guia em questão é a ativa).
- Abra o painel DevTools da maneira que você costuma fazer (atalho de teclado, cliques do mouse, o que for). Gosto de usar atalhos de teclado e, no Mac, Opt + Cmd + I faz o trabalho.
- Agora, com o DevTools aberto, vá até a aba chamada “Console”. Alguns de vocês podem estar revirando os olhos com o quão bobo e óbvio tudo isso parece, mas ei, vamos também pensar nas (centenas de?) milhares de pessoas por aí que lutam enquanto trabalham com o console do navegador e JavaScript (por qualquer motivo ).
- Clique na primeira linha ao lado do cursor, que apresentará um prompt de digitação e agora você pode escrever o código JavaScript lá (veja a captura de tela um pouco mais abaixo).
- Agora precisamos escrever algum código JavaScript. Não se preocupe, pois o que você precisa escrever/digitar é muito curto e direto: document.designMode = “on”. Você também pode copiar e colar o código desta página (se fizer isso, certifique-se de que a formatação não seja copiada — precisamos apenas de texto simples) ou, se estiver confiante, digite-o.
- Pressione Enter/Return.
“É isso??!”
Sim, isso é tudo!
Agora você pode editar livremente a página como se fosse um documento. Confira este vídeo de exemplo em que edito ao vivo o site do Spotify usando o Modo Design:
O recurso Design Mode, por mais empolgante que seja, não é uma bala de prata; você não pode, por exemplo, facilmente copiar e colar botões, alterar sua aparência e assim por diante. O número real de coisas que ele pode fazer em comparação com um editor visual de página da Web dos sonhos é muito baixo; no entanto, ele resolve casos de uso em que o conteúdo precisa ser alterado visualmente e em tempo real.
Dito isso, não é exagero afirmar que o pessoal do Chrome está testando o quão bem esse recurso é recebido; se encontrar uma boa recepção e um caso de uso forte, é razoável esperar que recursos de edição mais poderosos o sigam em breve! 🤞🏻🤞🏻
Simulando condições de rede
A guia Rede no Chrome DevTools talvez seja a mais usada (não tenho dados sobre ela, é claro, mas como desenvolvedor da Web, costumo usar a guia Console talvez 20 a 30% do tempo, e a guia guia Rede o resto do tempo). Ele nos fornece todos os tipos de informações sobre as solicitações feitas na página, seu tipo, metadados/cabeçalhos, status, andamento do download de recursos (imagens, folhas de estilo, etc.), tempos de carregamento e assim por diante. Com uma utilidade tão incrível, não é à toa que a aba Rede é a mais comum.
E, no entanto, é fácil perder o recurso que estamos discutindo; você pode não ter notado um menu suspenso inofensivo que afirma o óbvio: Online.
Se você clicar aqui, verá uma lista suspensa com várias opções que permitem limitar a velocidade da rede: Fast 3G, Slow 3G, Offline, etc. Embora possa haver vários casos de uso para esta opção, o mais comum é testar o site desempenho em redes lentas ou comportamento de aplicativo da web quando offline (assumindo que tais recursos foram adicionados).
Vamos dar uma volta. Vou definir a rede como “3G lento” e recarregar a mesma página da captura de tela anterior. Antes de fazer isso, observe na captura de tela anterior como na minha conexão de rede atual (uma banda larga de 40 Mbps), a maioria dos ativos está sendo baixada em menos de 100 milissegundos.
E agora, é hora de ver o que o lento 3G faz com ele.
Que diferença!
Observe que o tempo de carregamento dos recursos agora está na faixa de 5 a 10 segundos. Além disso, o site foi totalmente carregado em 17,25 segundos! Sim, eu sei o que você está pensando, mas você deve considerar que em uma rede 3G lenta, qualquer site moderno levará vários segundos para carregar. Se você deseja carregamento rápido em redes lentas é outra coisa, embora, no geral, deva ser uma decisão de negócios em que os ganhos justifiquem o esforço.
Na captura de tela acima, observe o ícone de aviso na guia Rede. Essa é a maneira do Chrome de lembrá-lo de que você fez alguma alteração persistente não padrão e, a menos que saiba o que está fazendo, talvez deva redefini-la.
Seletor de cores interativo
Inspecionar elementos DOM no DevTools é algo que todos nós fazemos praticamente todos os dias. Também estamos acostumados com a seção de detalhes do CSS mostrada ao lado e sabemos que podemos editá-la e ver os resultados imediatamente.
Uma pequena conveniência escondida em meio a tudo isso é que, se você clicar em uma propriedade de cor CSS, uma interface de seletor de cores familiar aparecerá!
Observe que não é um seletor de cores básico e básico. Ele permite que você controle a transparência, altere os sistemas de cores usados, escolha uma cor diretamente da página e muito mais.
Então, da próxima vez que você estiver experimentando as cores de destaque de um site, por exemplo, você não precisa calcular ou adivinhar o valor certo para a tonalidade que você tem em mente! Na verdade, muitas pessoas gostam de criar sites diretamente no navegador; para eles, recursos como esses são uma dádiva de Deus! 🙂
Monitorando elementos on-page de eventos
Freqüentemente, estamos em uma situação em que desejamos saber o que está acontecendo com aquele elemento específico no qual estamos interessados. Isso é especialmente verdadeiro ao usar jQuery em uma base de código não trivial — seja sua ou de outros; manipuladores de eventos e lógica estão espalhados por todo o lugar, e rastrear um bug pode ser um pesadelo.
Felizmente, o Chrome DevTools tem um recurso bacana para isso. Ele observará o elemento indicado para você e registrará os eventos no console. Mas há um pouco de decepção: esse recurso não possui recursos de seleção de elemento com base em nomes de classe CSS. Portanto, o modo jQuery de $(“#email”) não está disponível. 🙂
Com isso dito, vamos ver como fazê-lo funcionar. Começamos fazendo um simples “elemento de inspeção” usando o inspetor DevTools. Sim, é a mesma ferramenta de inspeção que usamos todos os dias.
Na captura de tela abaixo, usei a ferramenta Inspetor para destacar a entrada de texto. Por “destacar” não quero dizer que o elemento na página é destacado (não é, como você pode ver); em vez disso, o cursor do inspetor foi clicado na entrada de texto e o código HTML correspondente no DevTools é destacado.
Isso visa o elemento atualmente inspecionado para monitoramento de eventos, o que torna o elemento acessível como uma variável JavaScript especial chamada $0. Em seguida, certificando-me de não clicar em outro lugar na janela do navegador descuidadamente (especialmente na parte do código HTML), clico no Console e anexei um ouvinte de evento para essa entrada de texto. Para isso, tudo que preciso é de uma única linha de código: monitorEvents($0, ‘mouse’). A parte “mouse” aqui informa ao Chrome que só estou interessado em observar eventos baseados em mouse.
Assim que pressiono Enter/Return, o monitoramento é ativado e, se eu passar o mouse ou clicar na entrada de texto, esses eventos serão registrados no console como objetos JavaScript:
Como você pode ver na captura de tela, vários tipos de eventos de mouse foram capturados quando eu cliquei no elemento, digitei meu nome e depois movi o mouse (os eventos de digitação, sendo eventos de teclado, não foram registrados). Os eventos são os próprios objetos JavaScript, como fica claro na captura de tela; cada objeto de evento contém uma enorme quantidade de informações. Por exemplo, expandi o objeto de evento “clique” e o número de propriedades não caberia em uma única captura de tela!
Recomendo fortemente que você experimente esse recurso imediatamente, pois com certeza evitará muitas dores de cabeça em seus próximos projetos!
Relatórios de desempenho do site
Hoje em dia, o desempenho do site faz ou quebra um negócio/site. Mesmo um pequeno aumento no desempenho se traduz em ganhos maciços de SEO, bem como na satisfação do usuário. Mas como você sabe quais partes do seu site precisam de atenção e quais já estão boas?
Você precisa contratar uma equipe de especialistas e esperar pacientemente por alguns dias?
Bem, há casos em que isso precisa ser feito, mas, felizmente, o Chrome DevTools cobre o resto de nós. Nas versões mais recentes do Chrome (final de 2020), você encontrará uma guia Lighthouse no DevTools. Alguns meses atrás, chamava-se Audits e, por incrível que pareça, esse é o nome que você encontrará nos documentos oficiais até o momento. De qualquer forma, o ponto é que o Lighthouse costumava ser um site da moda para verificar o desempenho do site gratuitamente, mas o Google o derrubou (nenhum motivo foi fornecido). Felizmente, a mesma funcionalidade poderosa ressurgiu posteriormente no DevTools.
Para gerar um relatório de desempenho, tudo o que você precisa fazer é apertar um único botão após o carregamento da página de seu interesse:
Como você pode ver no lado direito da captura de tela, existem algumas opções para controlar quanta informação você deseja (e, é claro, o que deseja testar). Quando estiver satisfeito com as configurações, aperte o grande botão azul, sente-se e relaxe. Alguns segundos depois, você terá um relatório útil parecido com este:
Os números que você vê na captura de tela acima mostram a pontuação geral de cada categoria. A categoria de Progressive Web Apps (PWAs) está esmaecida, provavelmente porque este site não tem recursos de PWA. Além disso, como você pode ver pelo tamanho da barra de rolagem na captura de tela (à direita), é um relatório longo.
Aqui está a aparência de uma parte da seção sobre desempenho:
Não vou afirmar que o Lighthouse e suas sugestões são o santo graal do desempenho do site, mas são extremamente úteis; isso ocorre porque os proprietários e desenvolvedores de sites raramente têm ideia de quais problemas existem e como resolvê-los exatamente.
Honestamente, até eu me sinto perdido como desenvolvedor web, já que desempenho e testes tendem a ser uma espécie de especialização. Como tal, o Lighthouse é uma ferramenta pouco conhecida e subestimada, agora parte do Chrome DevTools, que é de grande utilidade para proprietários de empresas e desenvolvedores/administradores de sistema.
Proeza de edição de código
A aba Sources no DevTools nos permite acessar vários arquivos carregados pelo site. Ele também possui recursos como edição de código, salvamento de trechos, etc. Isso não deveria ser surpresa para os desenvolvedores da web. No entanto, o DevTools também possui algumas conveniências integradas que facilitam a vida dos desenvolvedores acostumados com seus IDEs de código favoritos.
O DevTools usa alguns atalhos de teclado conhecidos que economizarão seu tempo e minimizarão a frustração na disputa de código. Por exemplo, Ctrl + D (ou Cmd + D no Mac) pode ser usado para destacar várias ocorrências de uma palavra. Da mesma forma, segurar Ctrl (ou Cmd no Mac) e clicar em vários locais no código fornece vários cursores. Dá uma olhada no vídeo abaixo para ter uma ideia melhor:
Se você acha isso legal, certifique-se de mergulhar nos documentos oficiais para aproveitar todos os recursos de edição de código que o DevTools tem a oferecer.
Controlar o estado do elemento DOM
Às vezes, estamos testando ou depurando algo, mas o comportamento que estamos perseguindo só está disponível em um determinado estado de elemento. Dependendo do estado em que estiver, você pode acabar passando por momentos terríveis; para mim, é o estado “hover”, pois me lembro de perder incontáveis minutos tentando cronometrar a ação de passar o mouse ou adicionar CSS temporário adicional, etc.
Felizmente, o Chrome DevTools tem uma maneira fácil de alterar o estado de um elemento inspecionado. Além do mais, a opção para fazer isso está ali se clicarmos com o botão direito do mouse no elemento (na guia Elementos), mas dado o número de recursos e as pressões de um dia de trabalho, é fácil ignorar isso:
Sim, é realmente tão simples!
Agora, você não precisa criar lógica de teste condicional em seu código, escrever CSS adicional ou passar por alguns outros obstáculos ao observar um elemento em um estado diferente.
painel de ferramentas
Por último, mas definitivamente não menos importante nesta lista, está o painel Ferramentas. É outro daqueles recursos incrivelmente úteis que ficam bem escondidos e só podem ser vistos usando atalhos de teclado. Como o nome sugere, o painel Tools não é uma ferramenta única, mas uma espécie de painel onde quase todas as funções do DevTool estão disponíveis. Como existem muitas funções que oferecem a funcionalidade geral do DevTools, uma barra de pesquisa está disponível na parte superior.
Para ativar o painel Tools, verifique se você está no painel DevTools e pressione Ctrl + Shift + P (ou Cmd + Shift + P para usuários de Mac):
O painel Ferramentas está cheio de recursos e surpresas. Por exemplo, você sabia que pode tirar uma captura de tela diretamente do DevTools?
Aposto que não, porque você teria que abrir o painel Ferramentas e digitar “captura de tela” na barra de pesquisa para descobrir que:
Você também notará várias opções para tirar screenshots, incluindo uma para o nó DOM selecionado! Explore mais o painel Ferramentas e garanto que você não ficará desapontado!
Se você precisar fazer uma captura de tela de qualquer página da Web remotamente, confira a ferramenta etechpt.com Screenshot.
Conclusão
O próprio navegador Chrome é rico em recursos, mas onde ele realmente brilha é a oferta do DevTools. Como vimos neste artigo, existem alguns recursos bem ocultos – e outros ocultos à vista – que a grande maioria dos usuários não conhece. Por que esses recursos estão ocultos?
Eu acho que alguns deles são muito experimentais (como o Modo de design), e os desenvolvedores do Chrome querem tornar difícil para os usuários comuns encontrar esses recursos. Para o restante dos muitos recursos, acredito que seja simplesmente um caso de sobrecarga de informações: se houver, digamos, 120 recursos, alguns deles com sub-recursos e assim por diante, é praticamente impossível projetar a interface do usuário correta para tais um cenário. Além disso, o Google historicamente não fez um bom trabalho com o UX de seus produtos, então é isso. 🤷🏻♂️
Independentemente disso, espero que você tenha achado alguns desses recursos úteis. Mas, mais importante, espero que este artigo tenha lhe dado uma noção do que está escondido onde, para que da próxima vez que você quiser explorar ou procurar por algo específico, você saiba onde ir para “cavar fundo”. 😆