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 rapidamente um elemento, acionar um determinado estado, como :active ou :hover, ou editar o HTML dele. Se você estiver em um trackpad e não quiser clicar com o botão direito do mouse, clique nos três pontinhos 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.
Não mais! Agora é possível depurar service workers do domínio atual diretamente no painel "Resources". Ainda é um trabalho 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 que você coloque 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).
Ele foi movido para as Configurações. Faça um teste:
Os melhores
- Não tem acesso aos alternadores de renderização? As configurações de renderização foram movidas para o menu principal do DevTools (em "Mais ferramentas"). Além dos suspeitos habituais (como o medidor de QPS), também movemos a opção "Emular mídia de impressão".
- Cansou de digitar chrome://inspect na omnibox? Agora, a opção Inspecionar dispositivos também pode ser encontrada no novo menu principal em "Mais ferramentas".
- Fechou acidentalmente uma dessas guias fecháveis da gaveta, como "Rendering" ou "Search"? Agora você pode reabrir esses itens 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