Não há muito que você não possa fazer com as tecnologias da Web hoje em dia. A plataforma web evoluiu tanto que coisas tão diversas como animar elementos, reproduzir ou gravar mídia, acessar arquivos ou armazenamento, interceptar solicitações de rede e acessar o cache, fazer layouts CSS complexos ou escrever código nativo são possíveis hoje.
Com tanto para aprender e usar, os desenvolvedores da Web precisam de um conjunto completo de ferramentas nas quais possam confiar.
Felizmente, o Microsoft Edge vem com ferramentas de desenvolvimento que possibilitam que os desenvolvedores da Web sejam produtivo com os recursos da web e APIs. Não importa o que você esteja fazendo, provavelmente há uma ferramenta dedicada que pode ajudá-lo.
O outro lado, porém, é que DevTools tendem a ser bastante complicados. Eles contêm mais de 30 ferramentas diferentes, e a interface do usuário cresceu ao longo do tempo para acomodá-los. Além disso, novos recursos estão sendo adicionados o tempo todo em resposta aos comentários que recebemos dos usuários.
Nesta postagem, apresentaremos novos recursos no Microsoft Edge DevTools que ajudam a tornar as ferramentas mais acessível e personalizável, para que você possa começar a enfrentar o desafio de ter tantas ferramentas diferentes à sua disposição. Você também pode saber mais sobre esses recursos no vídeo abaixo.
DevTools estão evoluindo rapidamente nos navegadores – para mantenha-se atualizado com as últimas novidades em outros navegadores, confira meu artigo na Smashing Magazine abrangendo novos recursos do DevTools no Microsoft Edge, Google Chrome, Mozilla Firefox e Safari.
Abrindo, fechando e movendo ferramentas
Embora o DevTools tenha cerca de 30 ferramentas separadas, é improvável que você precisará acessar mais de um punhado delas ao mesmo tempo, muito menos 30. Portanto, é muito importante ter uma maneira de abrir ferramentas facilmente quando precisar delas e fechá-las quando não precisar.
Ao mesmo tempo, pode haver ferramentas que você nunca usou antes e que podem ser muito úteis. Se eles estiverem fechados por padrão, talvez você nunca os descubra.
Adicionamos três recursos DevTools pequenos, mas muito poderosos para resolver isso.
Ferramentas de fechamento
As guias no Microsoft Edge DevTools agora têm um botão Fechar que pode ser usado para esconder os que você não precisa mais. Você pode, portanto, manter uma interface de usuário limpa e simples, e ter apenas as ferramentas que você precisa imediatamente disponíveis.
Observe que algumas ferramentas não têm um botão de fechamento: Elementos, Console e Fontes. Essas ferramentas são usadas muito mais do que todas as outras. Os desenvolvedores da Web precisam deles o tempo todo, e fechá-los não faz muito sentido.
Abrindo ferramentas
Agora há um botão + (mais) no final da barra de guias para abrir qualquer ferramenta que ainda não esteja aberta.
Anteriormente, para descobrir todas as ferramentas disponíveis, você tinha que ir no menu principal (…), e então selecionar Mais ferramentas, ou saber como usar o menu de comando para acessar as ferramentas rapidamente. O botão + facilita muito a descoberta e o acesso a outras ferramentas.
Pode haver duas barras de guias no DevTools: uma na parte superior, que está sempre visível e é onde geralmente estão os painéis Elements e Sources, e uma na parte inferior, a Gaveta, que pode ser alternada pressionando Esc no teclado. O console geralmente fica na gaveta. Ambas as barras de guias têm o botão +, para que você possa abrir novas ferramentas em qualquer um desses dois locais.
Mover ferramentas
Ter a gaveta aberta pode ser muito útil ao depurar algo que requer mais de uma ferramenta ao mesmo tempo.
Por exemplo, você pode querer ter os painéis Fontes e Rede abertos ao mesmo tempo para garantir que as solicitações HTTP corretas sejam enviadas ao depurar algum código JavaScript. Ou você pode querer ter os painéis Elements e 3D View abertos lado a lado para depurar um problema de z-index com um elemento.
Com o Microsoft Edge DevTools, agora você pode mover ferramentas entre a área principal e a gaveta abrindo o menu contextual (clique com o botão direito do mouse) na guia que você deseja mover e selecionando Mover para baixo ou Mover para cima.
Observe que se você selecionar o botão + na gaveta e escolher uma ferramenta da lista que já está aberta na área principal, então esta ferramenta será movida para a gaveta. Essa é outra boa maneira de mover as ferramentas.
Aprender sobre as ferramentas, de dentro das ferramentas
O botão + é ótimo para descobrir facilmente novas ferramentas que você pode não ter usado antes. Mas, às vezes, a interface do usuário de uma ferramenta pode ser esmagadora à primeira vista. Ajuda ter alguma documentação disponível. A documentação do Microsoft Edge DevTools pode ajudá-lo, mas muitas vezes não está ao seu alcance quando você está no meio de uma tarefa.
Recentemente, adicionamos um recurso para facilitar ainda mais o aprendizado contextual sobre uma nova ferramenta: Dicas de ferramentas do DevTools. As dicas de ferramentas do DevTools são uma sobreposição que cobre as ferramentas e fornece documentação contextual sobre elas, com links para saber mais.
Você pode ativar as dicas de ferramentas do DevTools de 3 maneiras diferentes:
Vá para o botão Personalizar e controlar o DevTools (…) > Ajuda > Alternar as dicas de ferramentas do DevTools. Você também pode usar o atalho de teclado Ctrl+Shift+H (Cmd+Shift+H no Mac). Ou use o menu de comando e digite”dicas de ferramentas”.
Uma vez ativado, basta mover o mouse sobre as áreas destacadas para exibir uma dica de ferramenta de informações sobre essa área específica das ferramentas (você também pode usar a tecla Tab para navegar pelas dicas de ferramenta). Algumas das dicas de ferramenta até contêm links para o site de documentação para descobrir ainda mais.
Observe que você também pode acessar outros painéis enquanto as dicas de ferramentas do DevTools estiverem ativas. Dessa forma, você pode navegar pelo DevTools e continuar aprendendo sobre coisas novas sem ter que ativar o recurso desligado e ligado novamente todas as vezes.
Mudando o idioma
Sabemos que os desenvolvedores podem ser mais produtivos quando suas ferramentas correspondem ao idioma preferência de uso. Além disso, outros produtos de desenvolvedor da Microsoft, incluindo o VS Code, podem ser usados em outros idiomas. É por isso que disponibilizamos o DevTools em 11 idiomas diferentes.
Por padrão, o DevTools corresponde ao idioma escolhido para a interface do usuário do navegador, mas você pode configurá-lo independentemente para qualquer um desses outros idiomas.
Para alterar o idioma, navegue até as configurações do DevTools (usando o atalho F1 ou clicando no ícone de engrenagem na barra de ferramentas) e escolha Idioma lista suspensa.
Após recarregar o DevTools, sua interface de usuário aparecerá no idioma de sua escolha, tornando-o mais fácil de usar as ferramentas. Veja como é em francês:
Isso também funciona muito bem com o recurso DevTools Tooltips, já que a documentação contextual também é traduzida, conforme mostrado em russo abaixo.
Desde anunciamos o lançamento experimental do recurso DevTools localizado em 2020, continuamos colaborando com as equipes do Lighthouse e do Chrome no Google por meio do projeto Chromium, e o recurso agora não está disponível apenas para todos os usuários do Microsoft Edge, b ut também para qualquer pessoa que use DevTools em um navegador baseado em Chromium.
Personalizando seu tema de cores
Se você usa o Visual Studio Code (ou outros editores de texto e IDEs), você provavelmente personalizou seu tema de cores para algo visualmente agradável e confortável para trabalhar por longos períodos de tempo.
Até agora, o tema de cores do DevTools podia só pode ser personalizado escolhendo entre seus temas escuros ou claros. No entanto, agora, existem 9 novos temas de cores para escolher. Estes são os mesmos que os pré-instalados do Visual Studio Code e, portanto, devem ser familiares.
Aqui está a lista completa de temas no Microsoft Edge DevTools agora:
Temas existentes: Light+ Dark+ Chromium Light Chromium Dark Novos temas: Quiet Light Solarized Light Solarized Dark Abyss Kimbie Dark Monokai Monokai Dimmed Red Tomorrow Night Blue
Para escolher um novo tema, você pode ir para as Configurações (o ícone de engrenagem na barra de ferramentas ) e use a lista suspensa Tema . Você também pode usar o menu de comando e digitar”tema”para ver a lista completa de temas de cores disponíveis.
Observe que, se você usar o Ferramentas do Microsoft Edge para VS Code, você deve ter visto que o DevTools nem sempre é exibido com o mesmo tema de cores que a própria interface de usuário do VS Code.
Agora, graças ao novo temas de cores no DevTools, isso não acontecerá mais. A partir do Microsoft Edge 95, a IU do DevTools, incorporada no VS Code, corresponderá ao tema de cores selecionado.
Se você não conhece essa extensão, saiba mais sobre isso aqui.
Feedback
O feedback do usuário é como orientamos as prioridades para o trabalho acontecendo no Microsoft Edge DevTools. Se você tiver dúvidas ou comentários sobre esses recursos ou outros, envie-nos algumas palavras e capturas de tela usando o o botão de feedback no DevTools.
Sinta-se à vontade para também fazer perguntas à nossa equipe no Twitter mencionando o @EdgeDevTools.
– Patrick Brosset, gerente de programa sênior, Microsoft Edge
