Use o novo menu de contexto do painel DOM para editar nós de maneira eficiente. Depurar workers de serviços diretamente no painel "Resources". Escolha entre todas as tonalidades do Material Design no seletor de cores. Bibliotecas JS de caixa preta com mais facilidade.
O novo menu de contexto aprimorado do painel DOM
Analisamos as ações mais usadas no painel DOM e concluímos que o menu de contexto do botão direito do mouse precisa ser organizado e simplificado.
Agora ficou muito mais fácil ocultar ou excluir um elemento rapidamente, acionar um determinado estado, como :active ou :hover, ou editar o HTML dele. Se você estiver usando um trackpad e não quiser clicar com o botão direito do mouse, clique nos três pontos ao lado do elemento selecionado.
Depurar service workers pelo painel "Resources"
Os service workers são fantásticos depois de configurados, mas podem ser difíceis de entender no início. Isso ficou ainda pior porque a depuração exigia sair do DevTools e abrir chrome://serviceworker-internals/ em uma nova janela do navegador.
Agora não mais. Agora é possível depurar service workers do domínio atual diretamente no painel "Resources". O trabalho ainda está em andamento, mas já é uma grande melhoria em relação ao status quo anterior.
Todas as cores: tons do Material Design no seletor de cores
Há algumas semanas, adicionamos a paleta do Material Design ao seletor de cores para oferecer cores primárias e negritadas prontas para uso. Para projetar uma página completa, é necessário ter acesso total a todas as tonalidades do Material Design.
Para mostrar as tonalidades, toque e mantenha pressionada uma das cores primárias e clique em uma tonalidade.
Bibliotecas JavaScript de caixa preta com mais facilidade nas configurações
O JavaScript Blackboxing já existe há algum tempo, mas não era muito fácil de descobrir. É um recurso que permite colocar um script em uma página em modo de caixa preta para se concentrar apenas no código criado (e ocultar todo o código de união).
Agora ele foi movido para "Configurações". Faça um teste:
O melhor do resto
- Não tem acesso aos alternadores de renderização? As Configurações de renderização foram movidas para o menu principal das Ferramentas do desenvolvedor (em "Mais ferramentas"). Além dos suspeitos de sempre (ou seja, o medidor de QPS), também movemos a opção "Emulador de mídia de impressão".
- Cansou de digitar chrome://inspect na omnibox? Agora, Inspecionar dispositivos também pode ser encontrado no novo menu principal em "Mais ferramentas".
- Fechou acidentalmente uma das guias fecháveis da gaveta, como "Rendering" ou "Search"? Agora você pode reabrir esses apps com o novo menu à esquerda.
Como sempre, deixe sua opinião no Twitter ou nos comentários abaixo e envie bugs para crbug.com/new.
Até o próximo mês!
Paul Bakaus e a equipe do DevTools