Use o novo menu de contexto do painel DOM para editar nós com eficiência. Depure os service workers diretamente pelo painel "Resources". Escolha entre todas as tonalidades do Material Design no seletor de cores. Oculte as bibliotecas JS com mais facilidade.
O novo e aprimorado menu de contexto do painel DOM
Analisamos as ações mais usadas no painel DOM e concluímos que o menu de contexto do clique com o botão direito do mouse deve ser organizado e reorganizado.
Agora é muito mais fácil ocultar ou excluir rapidamente um elemento, acionar um determinado estado, como :active ou :passar ou editar o HTML. 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 no painel "Recursos"
Os service workers são fantásticos quando você os configura, mas pode ser complicado de entender bem no início. Isso piorou 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 para o domínio atual diretamente no painel Recursos. 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 ousadas prontas para uso. Para criar uma página inteira, é inevitável ter acesso total a todas as cores do Material Design. Por isso, elas foram integradas.
Para exibir as cores, toque e mantenha pressionada uma das cores primárias e clique em uma tonalidade.
Oculte as bibliotecas JavaScript com mais facilidade nas configurações
O JavaScript Blackboxing existe há algum tempo, mas não era extremamente fácil de descobrir. Com esse recurso, você oculta um script em uma página para se concentrar apenas no código criado (e ocultar todo o código de wrapper).
Agora movemos essa opção para "Configurações". Faça um teste:
Os outros melhores
- Não tem acesso às alternâncias de renderização? As Configurações de renderização foram movidas para o menu principal do DevTools (em "Mais ferramentas"). Além das suspeitas comuns (por exemplo, medidor de QPS), também movemos "Emular mídia de impressão".
- Cansou de digitar chrome://inspect na omnibox? Agora a opção Inspecionar dispositivos também está disponível no novo menu principal, em "Mais ferramentas".
- Fechou acidentalmente uma destas guias da gaveta que podem ser fechadas, como "Renderização" ou "Pesquisa"? Agora é possível reabrir com o novo menu à esquerda.
Como sempre, dê sua opinião pelo Twitter ou pelos comentários abaixo e envie bugs para crbug.com/new.
Até o próximo mês!
Paul Bakaus e a equipe do DevTools