O Chrome DevTools é, para muitos desenvolvedores, a principal razão para não considerarem outro navegador.
Contudo, a maioria de nós utiliza apenas uma pequena fração dos seus recursos, desconhecendo muitas funcionalidades incríveis que são implementadas de forma discreta.
Vamos explorar algumas dessas joias escondidas!
Cada pessoa tem seu sistema operacional predileto, plataforma de hardware, tipo de dispositivo, formato de tela, etc. Mas algo que é comum a todos é o uso do navegador Chrome – e apenas o Chrome! Penso que é seguro afirmar que a disputa entre navegadores terminou e o Chrome venceu de forma convincente.
Usuários do Windows frequentemente utilizam o navegador padrão apenas para fazer o download do Chrome, e depois usam este último, ignorando as “recomendações” do Windows. O mesmo acontece com os dispositivos da Apple (principalmente MacBooks e dispositivos com telas maiores), onde usuários e desenvolvedores evitam o Safari, apesar das tentativas de persuasão da Apple.
E se um dispositivo não está executando o Chrome, é bem provável que esteja executando um navegador derivado compatível, como o Brave ou Vivaldi. Sim, sei que tecnicamente esses navegadores não são baseados no Chrome, mas isso é um tema para outra discussão. O usuário comum pode optar por esses outros navegadores por motivos ideológicos ou específicos, mas quando se trata de desenvolvedores, não há outro navegador em vista além do Chrome.
Até mesmo o fato de ser um “comedor de memória” é ignorado. A razão é simples: Chrome DevTools.
Fonte da imagem: Documentação oficial do Chrome DevTools
Se você está lendo este artigo, é provável que seja um usuário avançado, alguém que gosta de “mexer”, um desenvolvedor web ou algo similar. Portanto, ninguém aqui precisa de uma introdução ao DevTools, como abri-lo, suas diversas funcionalidades, etc.
Em vez disso, vamos direto ao assunto e explorar alguns recursos menos conhecidos, mas surpreendentemente úteis do Chrome DevTools.
Modo de Design
Uma das ações rotineiras de desenvolvedores é inspecionar um elemento em uma página e, em seguida, modificar o seu HTML para visualizar algo ou testar o resultado de uma alteração.
No entanto, trabalhar com HTML diretamente no DevTools não é a coisa mais simples do mundo – navegar pela complexidade das tags, esforçar a visão para encontrar o delimitador de abertura/fechamento correto e lidar com uma quantidade excessiva de espaços em branco ao editar o texto (espaços que não existem no documento visualizado), são alguns dos problemas que enfrentamos. A situação é ainda pior se você for um designer e não quiser “sujar as mãos” com o código.
Aqui está uma captura de tela de uma página deste mesmo site (etechpt.com):
O HTML profundamente aninhado e as classes CSS obscuras e confusas são comuns em qualquer site complexo atualmente, o que torna a experiência no DevTools menos que ideal. 🤭
Mas existe um recurso do DevTools chamado Modo de Design, que pode aliviar essa dor em muitos casos. Usando o Modo de Design (que não é o nome oficial, mas o que as pessoas usam devido à forma como é ativado e o que faz – não se preocupe, veremos isso em breve!), as alterações na página podem ser feitas visualmente e em tempo real, como se estivesse editando uma planilha ou um documento de texto! O único problema é que esse recurso não está ativado por padrão e ativá-lo pode ser complicado, principalmente para quem não é desenvolvedor.
No entanto, o processo é bastante simples; basta seguir as instruções abaixo. Dependendo do seu nível de familiaridade, pode ser extremamente fácil ou um pouco difícil. Veja o que fazer:
- Verifique se a página que você deseja editar está carregada e visível (ou seja, a guia em questão está ativa).
- Abra o painel DevTools da maneira que você está acostumado (atalho de teclado, cliques do mouse, etc.). Eu prefiro usar atalhos de teclado, e no Mac, Opt + Cmd + I funciona.
- Com o DevTools aberto, vá até a aba chamada “Console”. Alguns de vocês podem estar achando tudo isso muito óbvio, mas vamos pensar nas milhares de pessoas que têm dificuldades ao trabalhar com o console do navegador e JavaScript (por qualquer razão).
- Clique na primeira linha ao lado do cursor, onde será apresentado um prompt para digitação. Aqui você poderá escrever código JavaScript (veja a captura de tela abaixo).
- Agora precisamos escrever algum código JavaScript. Não se preocupe, pois o que precisa ser escrito é bem curto e direto: document.designMode = “on”. Você pode copiar e colar o código desta página (se fizer isso, verifique se a formatação não é copiada – precisamos apenas de texto simples) ou, se estiver confiante, digite-o.
- Pressione Enter/Return.
“É só isso??!”
Sim, é tudo!
Agora você pode editar a página livremente como se fosse um documento. Veja este vídeo de exemplo onde edito o site do Spotify ao vivo usando o Modo de Design:
O recurso Modo de Design, apesar de empolgante, não é uma solução mágica; você não pode, por exemplo, copiar e colar botões, alterar suas aparências, etc. O número de coisas que ele realmente pode fazer é pequeno comparado a um editor visual de páginas ideal; no entanto, ele resolve casos onde o conteúdo precisa ser alterado visualmente e em tempo real.
Dito isso, não é exagero afirmar que a equipe do Chrome está testando a aceitação desse recurso; se ele for bem recebido e tiver uma aplicação forte, é razoável esperar que mais funcionalidades de edição sejam adicionadas em breve! 🤞🏻🤞🏻
Simulando Condições de Rede
A aba Rede no Chrome DevTools talvez seja a mais usada (não tenho dados sobre isso, claro, mas como desenvolvedor web, costumo usar a aba Console talvez 20 a 30% do tempo, e a aba Rede no restante do tempo). Ela nos oferece todos os tipos de informações sobre as requisições feitas na página, seu tipo, metadados/cabeçalhos, status, progresso do download de recursos (imagens, folhas de estilo, etc.), tempos de carregamento e muito mais. Com tanta utilidade, não é de se admirar que a aba Rede seja tão popular.
E, no entanto, é fácil ignorar o recurso que estamos discutindo; talvez você não tenha reparado em um menu suspenso discreto que afirma o óbvio: Online.
Ao clicar aqui, você verá uma lista suspensa com várias opções que permitem limitar a velocidade da rede: Fast 3G, Slow 3G, Offline, etc. Embora existam diversos casos de uso para essa opção, o mais comum é testar o desempenho do site em redes lentas ou o comportamento de um aplicativo web quando offline (se tais recursos foram implementados).
Vamos fazer um teste. Vou configurar a rede para “Slow 3G” e recarregar a mesma página da captura de tela anterior. Antes de fazer isso, observe na imagem 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.
Agora, vamos ver o que o 3G lento causa.
Que diferença!
Observe que o tempo de carregamento dos recursos está agora na faixa de 5 a 10 segundos. Além disso, o site foi totalmente carregado em 17,25 segundos! Sim, sei o que você está pensando, mas é preciso 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 questão, embora, no geral, deva ser uma decisão de negócio onde os ganhos justificam o esforço.
Na imagem acima, observe o ícone de aviso na aba Rede. Essa é a forma do Chrome lembrá-lo de que você fez alguma alteração persistente não padrão e, a menos que saiba o que está fazendo, talvez seja melhor redefini-la.
Seletor de Cores Interativo
Inspecionar elementos DOM no DevTools é algo que todos nós fazemos quase que diariamente. Também estamos acostumados com a seção de detalhes do CSS exibida ao lado, e sabemos que podemos editá-la e ver os resultados imediatamente.
Uma pequena conveniência escondida nesse contexto é que, ao clicar em uma propriedade de cor CSS, uma interface de seletor de cores familiar aparece!
Note que não é um seletor de cores básico. Ele permite controlar a transparência, alterar os sistemas de cores usados, escolher uma cor diretamente da página e muito mais.
Portanto, da próxima vez que você estiver ajustando as cores de destaque de um site, por exemplo, não precisa calcular ou adivinhar o valor exato da tonalidade que deseja! De fato, muitos gostam de criar sites diretamente no navegador; para eles, recursos como este são um presente! 🙂
Monitorando Eventos em Elementos da Página
Frequentemente, nos encontramos em situações onde desejamos saber o que está acontecendo com um elemento específico que nos interessa. Isso é particularmente verdade quando se usa jQuery em bases de código complexas — sejam elas suas ou de terceiros; os manipuladores de eventos e a lógica estão espalhados por toda parte, e encontrar um bug pode ser um pesadelo.
Felizmente, o Chrome DevTools tem um recurso interessante para isso. Ele monitorará o elemento indicado e registrará os eventos no console. No entanto, existe uma pequena desvantagem: esse recurso não permite a seleção de elementos baseada em nomes de classe CSS. Portanto, o método jQuery $(“#email”) não está disponível. 🙂
Dito isso, vamos ver como colocá-lo em prática. Começamos fazendo um simples “inspecionar elemento” usando o inspetor do DevTools. Sim, é a mesma ferramenta de inspeção que usamos diariamente.
Na imagem abaixo, usei a ferramenta Inspetor para destacar a caixa de texto. Por “destacar”, não quero dizer que o elemento na página esteja destacado (não está, como você pode ver); em vez disso, o cursor do inspetor foi clicado na caixa de texto e o código HTML correspondente no DevTools está destacado.
Isso define o elemento atualmente inspecionado para monitoramento de eventos, tornando-o 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 (especialmente na parte do código HTML), clico no Console e adiciono um listener de evento para essa caixa de texto. Para isso, preciso de apenas uma linha de código: monitorEvents($0, ‘mouse’). A parte “mouse” aqui informa ao Chrome que só estou interessado em observar eventos de mouse.
Assim que pressiono Enter/Return, o monitoramento é ativado e, se eu passar o mouse ou clicar na caixa de texto, esses eventos serão registrados no console como objetos JavaScript:
Como você pode ver na imagem, vários tipos de eventos de mouse foram capturados quando cliquei no elemento, digitei meu nome e depois movi o mouse (os eventos de digitação, que são eventos de teclado, não foram registrados). Os eventos são objetos JavaScript, como fica claro na imagem; 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 imagem!
Recomendo que você experimente esse recurso imediatamente, pois ele certamente evitará muitas dores de cabeça em seus próximos projetos!
Relatórios de Desempenho do Site
Atualmente, o desempenho do site é crucial para o sucesso de um negócio/site. Mesmo um pequeno aumento no desempenho resulta em ganhos significativos em SEO, bem como na satisfação do usuário. Mas como você identifica 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 nos ajuda no restante dos casos. Nas versões mais recentes do Chrome (final de 2020), você encontrará uma aba Lighthouse no DevTools. Alguns meses atrás, ela se chamava Audits, e por incrível que pareça, esse é o nome que você encontrará nos documentos oficiais atualmente. Enfim, a questão é que o Lighthouse era um site popular para verificar o desempenho do site gratuitamente, mas o Google o desativou (sem dar razões). Felizmente, a mesma funcionalidade poderosa reapareceu posteriormente no DevTools.
Para gerar um relatório de desempenho, basta apertar um único botão após o carregamento da página que você deseja analisar:
Como você pode ver na imagem à direita, existem algumas opções para controlar a quantidade de informações que você deseja (e, claro, o que você quer 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 como este:
Os números que você vê na imagem 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 imagem (à direita), é um relatório longo.
Aqui está uma parte da seção sobre desempenho:
Não vou afirmar que o Lighthouse e suas sugestões são a solução para todos os problemas de desempenho do site, mas eles são extremamente úteis; isso porque os proprietários e desenvolvedores de sites raramente sabem quais problemas existem e como resolvê-los.
Honestamente, até eu me sinto perdido como desenvolvedor web, já que desempenho e testes tendem a ser uma espécie de especialização. Portanto, 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.
Habilidade de Edição de Código
A aba Sources no DevTools permite acessar vários arquivos carregados pelo site. Ela também possui recursos como edição de código, salvamento de trechos, etc. Isso não deve ser surpresa para desenvolvedores web. No entanto, o DevTools também oferece algumas conveniências 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 ao lidar com 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, manter Ctrl (ou Cmd no Mac) e clicar em vários locais no código fornece vários cursores. Veja o vídeo abaixo para ter uma ideia melhor:
Se você achou isso interessante, mergulhe na documentação oficial para aproveitar todos os recursos de edição de código que o DevTools tem a oferecer.
Controlando o Estado de um Elemento DOM
Às vezes, estamos testando ou depurando algo, mas o comportamento que estamos procurando só está disponível em um determinado estado do elemento. Dependendo do estado, podemos ter dificuldades; para mim, o estado “hover” é um problema, já que me lembro de perder muito tempo tentando acertar o tempo de passar o mouse ou adicionando CSS temporário, etc.
Felizmente, o Chrome DevTools oferece uma forma fácil de alterar o estado de um elemento inspecionado. Além disso, a opção para fazer isso aparece ao clicar com o botão direito do mouse no elemento (na aba Elementos), mas devido à quantidade de recursos e à pressão do dia a dia, é fácil ignorar isso:
Sim, é realmente simples assim!
Agora, você não precisa criar lógica de teste condicional em seu código, escrever CSS adicional ou lidar com outros problemas ao observar um elemento em um estado diferente.
Painel de Ferramentas
Por último, mas não menos importante, está o painel Ferramentas. É outro recurso incrivelmente útil que fica bem escondido e só pode ser acessado com atalhos de teclado. Como o nome sugere, o painel Ferramentas 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 funcionalidades gerais do DevTools, uma barra de pesquisa está disponível na parte superior.
Para ativar o painel Ferramentas, 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ê precisaria abrir o painel Ferramentas e digitar “captura de tela” na barra de pesquisa para descobrir:
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á decepcionado!
Se você precisar fazer uma captura de tela de qualquer página da web remotamente, confira a ferramenta etechpt.com Screenshot.
Conclusão
O navegador Chrome em si é rico em recursos, mas onde ele realmente se destaca é na oferta do DevTools. Como vimos neste artigo, existem alguns recursos bem escondidos – e outros que estão à vista – que a grande maioria dos usuários não conhece. Por que esses recursos estão ocultos?
Acredito que alguns deles são muito experimentais (como o Modo de Design), e os desenvolvedores do Chrome querem tornar difícil para usuários comuns encontrá-los. Quanto ao restante dos recursos, acredito que seja simplesmente um problema de sobrecarga de informações: se existem, digamos, 120 recursos, alguns com sub-recursos e assim por diante, é quase impossível projetar a interface de usuário correta para tal cenário. Além disso, o Google historicamente não tem sido muito bom no design da experiência do usuário de seus produtos, então é isso. 🤷🏻♂️
De qualquer forma, espero que você tenha achado alguns desses recursos úteis. Mas, mais importante, espero que este artigo tenha lhe dado uma ideia do que está escondido onde, para que da próxima vez que quiser explorar ou procurar por algo específico, saiba onde “cavar fundo”. 😆