O que há de novo no DevTools: Cross-Browser Edition

As ferramentas do desenvolvedor do navegador continuam evoluindo, com recursos novos e aprimorados adicionados o tempo todo. É difícil acompanhar, especialmente ao usar mais de um navegador. Com tanta oferta, não é de surpreender que nos sintamos sobrecarregados e usemos os recursos que já conhecemos em vez de acompanhar o que há de novo.

É uma pena, porém, pois alguns deles podem nos tornar muito mais produtivos.

Portanto, meu objetivo com este artigo é aumentar a conscientização sobre alguns dos recursos mais recentes do Chrome, Microsoft Edge, Firefox e Safari. Felizmente, isso fará com que você queira experimentá-los e talvez o ajude a ficar mais confortável na próxima vez que precisar depurar um problema específico do navegador.

Dito isso, vamos direto ao assunto.

Chrome DevTools

A equipe do Chrome DevTools tem trabalhado arduamente para modernizar sua base de código (agora com 13 anos). Eles estão ocupados melhorando o sistema de compilação, migrando para o TypeScript, introduzindo novos WebComponents, reconstruindo sua infraestrutura de temas e muito mais. Como resultado, as ferramentas agora são mais fáceis de estender e alterar.

Mas além desse trabalho menos voltado para o usuário, a equipe também enviou muitos recursos. Deixe-me ver alguns deles aqui, relacionados à depuração de CSS.

Encaixe de rolagem

O encaixe de rolagem CSS oferece aos desenvolvedores da Web uma maneira de controlar a posição na qual um contêiner rolável para de rolar. É um recurso útil para, por exemplo, longas listas de fotos em que você deseja que o navegador posicione cada foto ordenadamente dentro de seu contêiner rolável automaticamente para você.

Se você quiser saber mais sobre o snap de rolagem, leia esta documentação do MDN e dê uma olhada nas demos de Adam Argyle aqui.

As principais propriedades do snap de rolagem são:

• scroll-snap-type , que informa ao navegador a direção em que o encaixe acontece e como isso acontece;
• scroll-snap-align , que informa ao navegador onde encaixar.

O Chrome DevTools introduziu novos recursos que ajudam a depurar estas propriedades principais:

• se um elemento define scroll-snap usando scroll-snap-type , o painel Elementos mostra um emblema próximo a ele.

• Você pode clicar no emblema de rolagem para ativar uma nova sobreposição. Ao fazer isso, várias coisas são destacadas na página:
  • o recipiente de rolagem,
  • os itens que rolam dentro do contêiner,
  • a posição onde os itens estão alinhados (marcado por um ponto azul).

Essa sobreposição facilita entender se e como as coisas se encaixam depois de rolar. Isso pode ser muito útil quando, por exemplo, seus itens não têm um plano de fundo e os limites entre eles são difíceis de ver.

Embora o encaixe de rolagem não seja um novo recurso CSS, a adoção é bastante baixa (menos de 4% de acordo com chromestatus.com) e, como a especificação mudou, nem todos os navegadores o suportam da mesma maneira.

Espero que esse recurso do DevTools faça as pessoas quererem brincar mais com ele e, finalmente, adotá-lo em seus sites.

Consultas de contêiner

Se você fez algum tipo de desenvolvimento web nos últimos anos, provavelmente já ouviu falar de consultas de contêiner. Tem sido um dos recursos CSS mais solicitados há muito tempo e tem sido um problema muito complexo para os fabricantes de navegadores e escritores de especificações resolverem.

Se você não sabe o que são consultas de contêiner, sugiro primeiro ler o artigo Primer On CSS Container Queries de Stephanie Eckles.

Em poucas palavras, eles são uma maneira de os desenvolvedores definirem o layout e o estilo dos elementos dependendo do tamanho do contêiner. Essa capacidade é uma grande vantagem ao criar componentes reutilizáveis, pois podemos adaptá-los ao local em que são usados ​​(em vez de apenas se adaptar ao tamanho da janela de exibição para o qual as consultas de mídia são boas).

Felizmente, as coisas estão se movendo neste espaço e o Chromium agora oferece suporte a consultas de contêiner e a equipe do Chrome DevTools começou a adicionar ferramentas que facilitam o início com elas.

As consultas de contêiner ainda não estão habilitadas por padrão no Chromium (para habilitá-las, vá para chrome://flags e procure por "consultas de contêiner"), e ainda pode demorar um pouco para que sejam. Além disso, o trabalho do DevTools para depurá-los ainda está em seus primeiros dias. Mas alguns recursos iniciais já chegaram.

• Ao selecionar um elemento no DevTools que tem estilos provenientes de uma regra @container , essa regra aparece na barra lateral Estilos do painel Elementos. Isso é semelhante à forma como os estilos de consulta de mídia são apresentados no DevTools e tornará simples saber de onde um determinado estilo está vindo.

Como mostra a captura de tela acima, a barra lateral Estilos exibe 2 regras que se aplicam ao elemento atual. O inferior se aplica ao elemento .media em todos os momentos e fornece seu estilo padrão. E o superior está aninhado em uma consulta de contêiner @container (max-width:300px) que só entra em vigor quando o contêiner é mais estreito que 300px.

• Além disso, logo acima do @container at-rule, o painel Estilos exibe um link para o elemento para o qual a regra resolve e, ao passar o mouse sobre ele, exibe informações extras sobre seu tamanho. Dessa forma, você sabe exatamente por que a consulta do contêiner correspondeu.

A equipe do Chrome DevTools está trabalhando ativamente nesse recurso e você pode esperar muito mais no futuro.

Colaboração do cromo

Antes de entrar nos recursos que outros navegadores possuem, vamos falar um pouco sobre o Chromium. O Chromium é um projeto de código aberto no qual Chrome, Edge, Brave e outros navegadores são construídos. Isso significa que todos esses navegadores têm acesso aos recursos do Chromium.

Dois dos contribuidores mais ativos para este projeto são Google e Microsoft e, quando se trata de DevTools, eles colaboraram em alguns recursos interessantes que eu gostaria de analisar agora.

Ferramentas de depuração de layout CSS

Há alguns anos, o Firefox inovou nesse espaço e lançou os primeiros inspetores de grade e flexbox. Os navegadores baseados em Chromium agora também possibilitam aos desenvolvedores da Web depurar facilmente a grade e o flexbox.

Este projeto colaborativo envolveu engenheiros, gerentes de produto e designers da Microsoft e do Google, trabalhando em prol de um objetivo compartilhado (saiba mais sobre o projeto em minha palestra no BlinkOn).

Entre outras coisas, o DevTools agora possui os seguintes recursos de depuração de layout:

• Realce vários layouts de grade e flexíveis na página e personalize se quiser ver nomes ou números de linhas de grade, áreas de grade e assim por diante.

• Editores flexíveis e de grade para brincar visualmente com as várias propriedades.

• Ícones de alinhamento no preenchimento automático de CSS facilitam a escolha de propriedades e valores.

• Destaque ao passar o mouse sobre a propriedade para entender a quais partes da página uma propriedade se aplica.

Você pode ler mais informações sobre isso nos sites de documentação da Microsoft e do Google.

Localização

Este foi mais um projeto colaborativo envolvendo Microsoft e Google que, agora, possibilita que todos os DevTools baseados em Chromium sejam traduzidos em outros idiomas além do inglês.

Originalmente, nunca houve um plano para localizar o DevTools, o que significa que foi um grande esforço. Envolvia percorrer toda a base de código e tornar as strings da interface do usuário localizáveis.

Mas o resultado valeu a pena. Se o inglês não for seu primeiro idioma e você se sentir mais confortável usando o DevTools em um idioma diferente, vá para Configurações ( F1 ) e encontre o menu suspenso de idiomas.

Aqui está uma captura de tela do que parece no Chrome DevTools:

E aqui está como o Edge fica em japonês:

Edge DevTools

A Microsoft mudou para o Chromium para desenvolver o Edge há mais de 2 anos. Embora, na época, tenha causado muitas discussões na comunidade da web, pouco foi escrito ou dito sobre isso desde então. As pessoas que trabalham no Edge (incluindo suas DevTools) estão ocupadas, e o navegador tem muitos recursos exclusivos agora.

Ser baseado no projeto de código aberto Chromium significa que o Edge se beneficia de todos os seus recursos e correções de bugs. Praticamente falando, a equipe do Edge ingere as alterações feitas no repositório do Chromium em seu próprio repositório.

Mas, no ano passado, a equipe começou a criar funcionalidades específicas do Edge com base nas necessidades e comentários dos usuários do Edge. O Edge DevTools agora tem uma série de recursos exclusivos que irei abordar.

Ferramentas de abertura, fechamento e movimentação

Com quase 30 painéis diferentes, o DevTools é um software realmente complicado em qualquer navegador. Mas, você nunca realmente precisa de acesso a todas as ferramentas ao mesmo tempo. Na verdade, ao iniciar o DevTools pela primeira vez, apenas alguns painéis ficam visíveis e você pode adicionar mais posteriormente.

Por outro lado, é difícil descobrir os painéis que não são exibidos por padrão, mesmo que possam ser realmente úteis para você.

O Edge adicionou 3 recursos pequenos, mas poderosos, para resolver isso:

• um botão Fechar nas guias para fechar as ferramentas que você não precisa mais,
• um botão + (mais) no final da barra de guias para abrir qualquer ferramenta,
• uma opção de menu de contexto para mover as ferramentas.

O GIF a seguir mostra como as ferramentas de fechamento e abertura nas áreas principal e de gaveta podem ser feitas no Edge.

Você também pode mover ferramentas entre a área principal e a área da gaveta:

• clicar com o botão direito do mouse em uma guia na parte superior mostra um item “Mover para baixo” e
• clicar com o botão direito do mouse em uma guia na gaveta mostra um item “Mover para o topo”.

Obtendo ajuda contextual com as dicas de ferramentas do DevTools

É difícil para iniciantes e desenvolvedores experientes saber tudo sobre DevTools. Como mencionei antes, há tantos painéis que é improvável que você conheça todos eles.

Para resolver isso, o Edge adicionou uma maneira de ir diretamente das ferramentas para sua documentação no site da Microsoft.

Esse novo recurso de dicas de ferramentas funciona como uma sobreposição alternável que cobre as ferramentas. Quando ativado, os painéis são destacados e a ajuda contextual é fornecida para cada um deles, com links para a documentação.

Você pode iniciar as dicas de ferramentas de 3 maneiras diferentes:

• usando o atalho de teclado Ctrl + Shift + H no Windows/Linux ( Cmd + Shift + H no Mac);
• indo para o menu principal ( ... ), depois indo para Ajuda e selecionando “Alternar as dicas de ferramentas do DevTools”;
• usando o menu de comando e digitando “Dicas de ferramentas”.

Personalizando cores

Em ambientes de edição de código, os desenvolvedores adoram personalizar seus temas de cores para tornar o código mais fácil de ler e mais agradável de se ver. Como os desenvolvedores da Web também gastam uma quantidade considerável de tempo no DevTools, faz sentido que ele também tenha cores personalizáveis.

O Edge acabou de adicionar vários novos temas ao DevTools, além dos temas escuros e claros já disponíveis. Um total de 9 novos temas foram adicionados. Eles vêm do VS Code e, portanto, serão familiares para as pessoas que usam este editor.

Você pode selecionar o tema que deseja usar acessando as configurações (usando F1 ou o ícone de engrenagem no canto superior direito) ou usando o menu de comandos e digitando theme .

Firefox DevTools

Semelhante à equipe do Chrome DevTools, o pessoal que trabalha no Firefox DevTools está ocupado com uma grande atualização de arquitetura destinada a modernizar sua base de código. Além disso, sua equipe é um pouco menor hoje em dia, pois a Mozilla teve que se reorientar nos últimos tempos. Mas, mesmo que isso signifique que eles tiveram menos tempo para adicionar novos recursos, eles ainda conseguiram lançar alguns realmente interessantes que eu vou falar agora.

Depurando barras de rolagem indesejadas

Você já se perguntou: “de onde vem essa barra de rolagem?” Eu sei que sim, e agora o Firefox tem uma ferramenta para depurar esse problema.

No painel Inspetor, todos os elementos que rolam têm um emblema de scroll próximo a eles, o que já é útil ao lidar com árvores DOM profundamente aninhadas. Além disso, você pode clicar neste emblema para revelar o elemento (ou elementos) que fez a barra de rolagem aparecer.

Você pode encontrar mais documentação sobre isso aqui.

Visualizando a ordem de tabulação

Navegar em uma página da Web com o teclado requer o uso da tecla tab para percorrer os elementos focalizáveis ​​um por um. A ordem em que os elementos focalizáveis ​​são focados ao usar a tab é um aspecto importante da acessibilidade do seu site e uma ordem incorreta pode confundir os usuários. É especialmente importante prestar atenção a isso, pois as técnicas modernas de layout CSS permitem que os desenvolvedores da Web reorganizem elementos em uma página com muita facilidade.

O Firefox tem um painel útil do Inspetor de Acessibilidade que fornece informações sobre a árvore de acessibilidade, localiza e relata vários problemas de acessibilidade automaticamente e permite simular diferentes deficiências de visão de cores.

Além desses recursos, o painel agora fornece uma nova sobreposição de página que exibe a ordem de tabulação para elementos focalizáveis.

Para habilitá-lo, use a caixa de seleção “Show Tabbing Order” na barra de ferramentas.

Você pode encontrar mais documentação sobre isso aqui.

Uma nova ferramenta de desempenho

Poucas áreas de desenvolvimento web dependem de ferramentas tanto quanto a otimização de desempenho. Nesse domínio, o painel Desempenho do Chrome DevTools é o melhor da categoria.

Nos últimos anos, os engenheiros do Firefox têm se concentrado em melhorar o desempenho do próprio navegador e, para ajudá-los a fazer isso, eles construíram uma ferramenta de perfil de desempenho. A ferramenta foi originalmente criada para otimizar o código nativo do mecanismo, mas também suportava a análise do desempenho do JavaScript desde o início.

Hoje, essa nova ferramenta de desempenho substitui o antigo painel de desempenho do Firefox DevTools nas versões de pré-lançamento (Nightly e Developer Edition). Dê uma volta quando tiver a chance.

Entre outras coisas, o novo criador de perfil do Firefox suporta o compartilhamento de perfis com outras pessoas para que possam ajudá-lo a melhorar o desempenho do seu caso de uso gravado.

Você pode ler a documentação sobre isso aqui e saber mais sobre o projeto em seu repositório GitHub.

Inspetor da Web do Safari

Por último, mas não menos importante, vamos analisar alguns dos recursos recentes do Safari.

A pequena equipe da Apple tem se mantido muito ocupada com uma ampla gama de melhorias e correções nas ferramentas. Aprender mais sobre o Safari Web Inspector pode ajudá-lo a ser mais produtivo ao depurar seus sites em dispositivos iOS ou tvOS. Além disso, ele possui vários recursos que outros DevTools não possuem e que poucas pessoas conhecem.

Depuração de grade CSS

Com Firefox, Chrome e Edge (e todos os navegadores baseados em Chromium) tendo ferramentas dedicadas para visualizar e depurar grades CSS, o Safari foi o último grande navegador a não ter isso. Bem, agora ele faz!

Fundamentalmente, o Safari agora tem os mesmos recursos que o DevTools de outros navegadores nesta área. Isso é ótimo, pois significa que é fácil ir de um navegador para outro e ainda ser produtivo.

• Os emblemas de grade são exibidos no painel Elementos para encontrar grades rapidamente.
• Clicar no emblema alterna a sobreposição de visualização na página.
• Um novo painel Layout agora é exibido na barra lateral. Ele permite que você configure a sobreposição de grade, veja a lista de todas as grades na página e alterne a sobreposição para elas.

O que é interessante sobre a implementação do Safari é que eles realmente acertaram no aspecto de desempenho da ferramenta. Você pode habilitar muitas sobreposições diferentes de uma só vez e rolar pela página sem causar nenhum problema de desempenho.

A outra coisa interessante é que o Safari introduziu um painel Elements de 3 painéis, assim como o Firefox, que permite ver o DOM, as regras CSS para o elemento selecionado e o painel Layout de uma só vez.

Saiba mais sobre o CSS Grid Inspector nesta postagem do blog do WebKit.

Uma série de melhorias no depurador

O Safari costumava ter um painel separado de Recursos e Depurador. Eles os mesclaram em um único painel Sources que facilita encontrar tudo o que você precisa ao depurar seu código. Além disso, isso torna a ferramenta mais consistente com o Chromium, com o qual muitas pessoas estão acostumadas.

A consistência para tarefas comuns é importante em um mundo com vários navegadores. Os desenvolvedores da Web já precisam testar em vários navegadores, portanto, se eles precisarem aprender um paradigma totalmente novo ao usar DevTools de outro navegador, isso pode tornar as coisas mais difíceis do que precisam.

Mas o Safari também se concentrou recentemente em adicionar recursos inovadores ao seu depurador que outros DevTools não possuem.

Script de inicialização:
O Safari permite escrever código JavaScript que é garantido para ser executado antes de qualquer um dos scripts na página. Isso é muito útil para instrumentar funções internas para adicionar instruções de debugger ou log, por exemplo.

Novas configurações de ponto de interrupção:
Todos os navegadores oferecem suporte a vários tipos de pontos de interrupção, como pontos de interrupção condicionais, pontos de interrupção do DOM, pontos de interrupção de eventos e muito mais.

O Safari recentemente melhorou todo o seu conjunto de tipos de ponto de interrupção, oferecendo a todos uma maneira de configurá-los extensivamente. Com este novo recurso de ponto de interrupção, você pode decidir:

• se você quiser que um ponto de interrupção seja atingido apenas quando uma determinada condição for verdadeira,
• se você quiser que o ponto de interrupção pause a execução ou apenas execute algum código,
• ou até mesmo reproduzir um bipe de áudio para saber que alguma linha de código foi executada.

funções do console queryInstances e queryHolders :
Essas duas funções são realmente úteis quando seu site começa a usar muitos objetos JavaScript. Em algumas situações, pode ser difícil acompanhar as dependências entre esses objetos e vazamentos de memória também podem começar a aparecer.

O Safari tem uma ferramenta de memória que pode ajudar a resolver esses problemas, permitindo que você explore instantâneos de heap de memória. Mas às vezes você já sabe qual classe ou objeto está causando o problema e deseja descobrir quais instâncias existem ou o que se refere a ela.

Se Animal for uma classe JavaScript em seu aplicativo, queryInstances(Animal) retornará uma matriz de todas as suas instâncias.

Se foo for um objeto em seu aplicativo, queryHolders(foo) retornará uma matriz de todos os outros objetos que têm referências a foo .

Considerações finais

Espero que esses recursos sejam úteis para você. Só posso recomendar o uso de vários navegadores e a familiarização com o DevTools. Estar mais familiarizado com outras DevTools pode ser útil quando você precisa depurar um problema em um navegador que não usa regularmente.

Saiba que todas as empresas que fabricam navegadores têm equipes trabalhando ativamente no DevTools. Eles investem em torná-los melhores, menos problemáticos e mais poderosos. Essas equipes dependem do seu feedback para construir as coisas certas. Sem ouvir sobre quais problemas você está enfrentando ou quais recursos faltam, é mais difícil para eles tomarem as decisões corretas sobre o que construir.

Relatar bugs para uma equipe do DevTools não apenas ajudará você quando a correção chegar, mas também poderá ajudar muitas outras pessoas que estão enfrentando o mesmo problema.

Vale a pena saber que as equipes de DevTools da Microsoft, Mozilla, Apple e Google geralmente são bastante pequenas e recebem muitos comentários, portanto, relatar um problema não significa que ele será corrigido rapidamente, mas ajuda, e essas equipes estão ouvindo .

Aqui estão algumas maneiras de relatar bugs, fazer perguntas ou solicitar recursos:

• Firefox DevTools
  • O Firefox usa o Bugzilla como seu rastreador público de bugs e qualquer pessoa pode relatar bugs ou solicitar novos recursos criando uma nova entrada lá. Tudo o que você precisa é de uma conta do GitHub para fazer login.
  • Entrar em contato com a equipe pode ser feito no Twitter usando a conta @FirefoxDevTools ou entrando no chat da Mozilla (encontre a documentação sobre o chat aqui).
• Inspetor da Web do Safari
  • O Safari também usa o rastreamento público de bugs para seus bugs do WebKit. Aqui está a documentação sobre como procurar bugs e relatar novos.
  • Você também pode entrar em contato com a equipe no Twitter com @webkit.
  • Por fim, você também pode sinalizar bugs sobre o Safari e o Safari Web Inspector usando o assistente de feedback.
• Edge DevTools
  • A maneira mais fácil de relatar um problema ou solicitar um recurso é usando o botão de feedback no DevTools (o pequeno boneco no canto superior direito das ferramentas).
  • Fazer perguntas para a equipe funciona melhor no Twitter mencionando a conta @EdgeDevTools.
• Chrome DevTools
  • A equipe ouve comentários na lista de discussão devtools-dev, bem como no twitter em @ChromeDevTools.
• Cromo
  • Como o Chromium é o projeto de código aberto que alimenta o Google Chrome e o Microsoft Edge (e outros), você também pode relatar problemas no rastreador de bugs do Chromium.

Com isso, obrigado por ler!