O que há de novo no DevTools?

Em setembro do ano passado, escrevi sobre algumas das atualizações mais recentes em nossas queridas DevTools, no Firefox, Chrome, Safari e Edge. Quatro meses já se passaram desde então, e as diferentes equipes que trabalham no DevTools estão ocupadas! Nesses quatro meses, eles construíram muitas coisas novas para nós usarmos. De poderosas melhorias de produtividade a painéis totalmente novos, eles continuam a fechar a lacuna de paridade e inovar com novos meios de depuração e melhoria de nossas experiências na web.

Isso significa que é hora de outra atualização do DevTools, então vamos direto ao assunto!

• cromada
• Borda
• Safári
• Raposa de fogo

cromada

A equipe do Chrome acaba de lançar um novo painel que torna muito simples gravar e reproduzir fluxos de usuários: o painel Gravador.

Grave, reproduza e avalie os fluxos do usuário

Se você já teve que repetir as mesmas etapas de navegação várias vezes em um aplicativo da Web para investigar um bug, isso pode mudar sua vida!

Mas há mais! Depois que as etapas forem gravadas, você poderá reproduzi-las enquanto mede o desempenho. Dessa forma, você pode trabalhar na otimização do seu código, tendo certeza de sempre executar o mesmo cenário toda vez que testar.

Você pode saber mais sobre o Gravador aqui. E se você tiver comentários sobre essa ferramenta, a equipe ficará muito feliz em ouvir seus pensamentos sobre esse problema de cromo.

Navegue pela árvore de acessibilidade

Renderizar páginas na tela não é a única coisa que os navegadores fazem. Eles também usam a árvore DOM que constroem no processo para criar outra árvore: a árvore de acessibilidade. A árvore de acessibilidade é outra representação da página atual que pode ser usada por tecnologias assistivas, como leitores de tela.

Como desenvolvedor web, é muito útil ter acesso a esta árvore de acessibilidade. Isso ajuda a entender como a marcação escolhida influencia a maneira como os leitores de tela interpretam a página.

O Chrome DevTools tem um painel de acessibilidade há algum tempo na barra lateral do painel Elements que contém a árvore de acessibilidade. Recentemente, porém, a equipe vem experimentando exibir a acessibilidade e a árvore DOM no mesmo local, permitindo que os desenvolvedores alternem entre os dois.

Para habilitar este experimento, acesse o painel da barra lateral Acessibilidade e marque a opção “Ativar árvore de acessibilidade de página inteira”. Você terá então um novo botão exibido no canto superior direito da árvore DOM que permite alternar entre as árvores DOM e de acessibilidade.

Saiba mais aqui e dê seu feedback à equipe.

A visão geral do CSS agora está ativada por padrão

O painel de visão geral do CSS não é novo, mas com tantos painéis para escolher, talvez você nunca o tenha usado. Tem sido um experimento há muito tempo, o que significa que você precisava entrar nas configurações do DevTools para habilitá-lo antes de poder usá-lo.

Isso não é mais necessário. O painel CSS Overview é apenas um recurso normal agora, e você pode abri-lo acessando … > More tools > CSS Overview .

Se você nunca usou, experimente, pois é uma ferramenta muito útil para identificar possíveis melhorias de CSS, como problemas de contraste ou declarações CSS não utilizadas.

Enquanto estiver no menu More tools , dê uma olhada. O Chrome DevTools tem mais de 30 painéis individuais! Isso é muito, mas lembre-se de que todos estão aqui por um motivo específico. Pode haver aspectos do seu aplicativo da Web com os quais determinados painéis possam ajudá-lo. Seja curioso e, se você não tem ideia do que uma coisa faz, lembre-se de que existem documentos que você pode ler.

Borda

Embora a equipe de navegadores da Microsoft continue sendo um colaborador ativo do projeto Chromium, eles também estão gastando mais tempo em recursos novos e exclusivos que apenas o Edge possui. Vamos rever dois deles aqui.

Depurar vazamentos de memória DOM com o painel de elementos desanexados

O Edge acaba de lançar uma ferramenta de investigação de vazamento de memória, as ferramentas Detached Elements, que podem ser muito úteis para investigar vazamentos em aplicativos de longa duração.

Uma das várias razões pelas quais as páginas da Web vazam memória são os elementos DOM desanexados: elementos que podem ter sido necessários em algum momento, mas foram removidos do DOM e nunca reanexados. Quando uma base de código cresce em complexidade, é mais fácil cometer erros e esquecer de limpar esses elementos desanexados.

Se você achar que seu aplicativo continua precisando de mais e mais memória ao longo do tempo à medida que você o usa, experimente os Elementos desanexados. Pode muito rapidamente apontar você na direção certa.

Saiba mais sobre isso na postagem do blog de anúncio e nos documentos.

Uma nova interface de usuário para DevTools com modo de foco

Nossas DevTools têm a mesma aparência desde os primeiros dias do Firebug. Claro, a interface do usuário evoluiu um pouco ao longo do tempo, com mais ferramentas adicionadas e as coisas reorganizadas, mas em alto nível, ainda é basicamente a mesma.

A equipe do Edge realizou experimentos e estudos de usuários que indicam que o DevTools pode ser muito esmagador (eu disse que o DevTools já tinha mais de 30 painéis?). Embora os novos desenvolvedores da Web não tenham uma ideia clara de por onde começar e como explorar e usar as ferramentas, os desenvolvedores mais experientes tendem a se encontrar em apenas um ou dois fluxos de trabalho familiares.

Com base nisso, a equipe do Edge lançou um novo recurso experimental que facilita o aprendizado e o uso do DevTools: Focus Mode .

Focus Mode tem uma nova barra de atividades, uma maneira fácil de adicionar e remover ferramentas, uma gaveta de visualização rápida e menus redesenhados.

Para experimentar o Focus Mode , ative-o primeiro acessando Settings > Experiments > Focus Mode .

Você pode aprender mais sobre Focus Mode neste documento explicativo do Edge.

Safári

Embora o próprio Safari seja atualizado aproximadamente duas vezes por ano (com uma versão principal no outono com novos recursos e outra na primavera), é possível obter atualizações mais frequentes e acesso a recursos iniciais usando o canal Safari Technology Preview. Esta versão do navegador se atualiza aproximadamente a cada 2 a 3 semanas.

Você pode não querer usar o canal Technology Preview para todos os seus testes, pois seus clientes provavelmente só terão a versão regular do Safari instalada, mas ainda é um navegador muito interessante para usar de vez em quando. Ao fazer isso, você terá acesso a novos recursos mais cedo e verificará o que está chegando ao Safari em breve.

Aqui estão algumas das atualizações mais recentes do Safari Web Inspector disponíveis no canal Technology Preview que tornam o trabalho com CSS muito melhor.

Preenchimento automático difuso para CSS no painel de estilos

Alterar o CSS é uma das coisas que mais fazemos no DevTools, e o Safari tornou isso muito mais rápido para todos nós.

Agora, o preenchimento automático para CSS suporta correspondência difusa, o que significa que você pode digitar coisas como "pat" para corresponder ao padding-top ou "bob" para corresponder ao border-bottom.

Se você usar o VS Code ou outro editor de texto que suporte o preenchimento automático difuso, você se sentirá em casa.

Agrupamento de variáveis ​​CSS por tipos no painel calculado

Variáveis ​​CSS (também conhecidas como Propriedades Personalizadas) agora são suportadas em todos os principais navegadores há anos, e proprietários de sites, sistemas de design e bibliotecas realmente começaram a fazer uso extensivo delas. Por boas razões, eles são ótimos!

Mas com esse aumento no uso, os painéis Styles e Computed de nossas DevTools estão começando a parecer um pouco lotados.

O Safari lançou um recurso que ajuda um pouco nisso. O painel Computed agora lista todas as variáveis ​​CSS cuidadosamente colocadas dentro de uma seção recolhível e agrupadas por tipos de valor também. Como exemplo, todas as variáveis ​​de cor são agrupadas.

Alinhar e justificar visualmente linhas flexíveis e trilhos de grade

Não muito tempo atrás, o Chrome e o Edge conseguiram editores de alinhamento muito bons para layouts de flexbox e grade em seu painel de Styles . Eles tornam o trabalho com propriedades de alinhamento complexas, como justify-content ou align-items , mais visual e, portanto, muito mais fácil de entender.

O Safari agora tem um editor visual semelhante para as propriedades CSS align-content/items/self e justify-content/items/self . É muito simples de usar, basta clicar no ícone ao lado de um valor de alinhamento no painel Estilos para abrir o editor. Você pode então escolher o tipo de alinhamento para suas linhas flexíveis e trilhas de grade.

Raposa de fogo

A equipe do Firefox DevTools estava em uma jornada para rearquitetar a base de código do DevTools há algum tempo e, embora isso tenha resultado em menos recursos sendo enviados durante esse período, esse projeto agora está completo. Isso significa que a equipe está de volta com muitas melhorias muito legais.

Escolha seu contexto de execução

Às vezes, você precisa lidar com vários contextos em seu site, sejam eles de vários iframes ou de web workers. Como o navegador executa essas coisas em vários processos diferentes, nem sempre é possível acessá-las facilmente no DevTools.

Para ajudar nessa situação, o Firefox acabou de adicionar um seletor de contexto no Console que você pode usar para escolher onde o código digitado será executado. Por exemplo, se você deseja saber o valor de alguma variável global em um iframe, pode usar o seletor para alternar para o iframe.

Suporte para hwb() no Inspetor

A função de cor CSS hwb() faz parte da especificação CSS Color Module 4 e é um método muito intuitivo para especificar cores. As cores HWB usam 3 valores: o primeiro é o matiz, que é o ponto de partida para a cor. O segundo e terceiro valores são a quantidade de branco e a quantidade de preto que deve ser misturada para criar a cor final.

A função hwb é atualmente suportada no Safari e Firefox, e a equipe do Firefox DevTools acaba de lançar suporte para ela no Inspector. Agora a função hwb é reconhecida corretamente, e como um bônus adicional, incrementar e decrementar os valores W e B com o teclado os mantém automaticamente entre 0% e 100% .

Selecionar elementos não selecionáveis

Curiosamente, a seleção de elementos do DevTools está sujeita à propriedade CSS pointer-events. Ou seja, se um elemento for especificado para não receber nenhum evento de ponteiro (com pointer-events:none ), você não poderá selecioná-lo usando o seletor de elemento no DevTools, pois requer interação do mouse.

Bem, no Chrome e no Edge, há um truque especial que poucas pessoas conhecem. Se você mantiver a tecla Shift enquanto estiver usando o seletor de elementos, até mesmo os elementos pointer-events:none se tornarão selecionáveis.

A boa notícia é que o Firefox também implementou o mesmo recurso. A paridade de recursos em diferentes DevTools é sempre uma ótima notícia para os usuários, pois facilita muito o teste e a depuração de sites em vários navegadores.

Enquanto estamos no tópico de paridade, vale a pena mencionar também que o Firefox acaba de lançar uma maneira de desabilitar ouvintes de eventos individuais também.

No painel Inspetor, você pode listar ouvintes de eventos anexados a elementos clicando nos emblemas [env] próximos a eles. Agora, a lista de ouvintes de eventos também contém caixas de seleção para alternar os ouvintes.

Ignorar linhas únicas de código no depurador

Se você gastar tempo depurando JavaScript no DevTools em uma grande base de código que usa estruturas e bibliotecas, talvez já esteja familiarizado com como ignorar arquivos de origem. Esse recurso permite marcar arquivos inteiros como ignorados para que o depurador pause dentro deles.

Isso significa que você pode marcar um arquivo de pacote de estrutura como ignorado, por exemplo, e depurar seu próprio código sem medo de entrar no código da estrutura.

Enquanto outros navegadores também suportam esse recurso, o Firefox está inovando com uma evolução muito legal: a capacidade de ignorar intervalos de linhas dentro de um arquivo! Imagine, você tem uma função utilitária em um arquivo que é chamado o tempo todo. Pode ser útil marcar apenas esta função como ignorada e ainda ser capaz de depurar todo o resto nesse arquivo normalmente. Também pode ser útil ao usar um empacotador que agrupa todo o seu código-fonte e bibliotecas no mesmo arquivo.

Este recurso é, no momento da escrita, ainda experimental. Você precisará definir o booleano devtools.debugger.features.blackbox-lines como true na página about:config primeiro.

Uma vez ativado, você pode clicar com o botão direito do mouse em qualquer linha do seu código-fonte e escolher Ignore line .

É isso por enquanto!

Espero que você tenha gostado dessas atualizações e que elas sejam úteis ao fazer desenvolvimento web. Como sempre, se você tiver comentários, bugs para relatar ou novas ideias de recursos para o DevTools, faça-se ouvir! É impressionante ver até que ponto os recursos de depuração da plataforma web chegaram, e todos nós podemos ajudar a torná-lo ainda melhor!