Saiba como o DevTools está começando a trabalhar em dispositivos móveis com um Device Mode novo e simplificado que está sempre ativado. Use os botões de cor para adicionar cores rapidamente aos seus seletores e descubra o que será lançado no DevTools em breve.
Um vislumbre do futuro da autoria
Estamos voltando da Chrome Dev Summit, onde mostramos como é trabalhar com o DevTools hoje e no futuro. Geralmente, não menciono nenhum recurso que ainda seja experimentos ou trabalhos pesados de progresso neste resumo, mas estou fazendo uma exceção desta vez. Se você não tiver tempo para assistir toda a palestra, aqui está a essência:
Versão 2 do Device Mode
Ainda estamos trabalhando nessa nova e arrojada iteração do Device Mode, mas quisemos que todos tivessem a oportunidade de testá-la. Por isso, ela foi ativada no Canary hoje. Com as mudanças, estamos levando o DevTools para um futuro que prioriza dispositivos móveis, em que o desenvolvimento para dispositivos móveis é o padrão, e o desenvolvimento para computadores é o "complemento". Espere mais iterações nas próximas semanas com uma postagem estendida do blog quando estiver tudo pronto.
Inspeção avançada de animação
O trabalho em andamento Inspeção de animação oferece uma imagem completa e detalhada sobre o que está acontecendo em qualquer movimento. Em vez de mostrar uma transição em um elemento de cada vez, adicionamos heurísticas que agrupam animações complexas para que você possa se concentrar em tudo o que está vendo. Assista ao vídeo. Ofereceremos uma postagem do blog maior e independente quando o lançamento for concluído.
Modo de layout (prévia)
Ainda não está pronto para o horário nobre, mas muito promissor é o novo Modo de layout, um recurso que mal posso esperar para ver totalmente desenvolvido. O Modo de layout adiciona recursos de edição WYSIWYG ao DevTools para qualquer elemento na página. Até agora, altura, largura, preenchimentos e margens podem ser editados no contexto. Vai levar um pouco mais de tempo até estarmos prontos para tentar, mas vamos enviar atualizações a você.
Criação de perfis de desempenho com o painel atualizado da linha do tempo
Como parte de uma iniciativa cada vez maior de apresentar o novo modelo de desempenho RAIL, foram feitas centenas de mudanças menores e maiores no painel "Timeline" e, juntas, elas transformam e melhoram bastante a criação de perfis de desempenho. Então, em vez de mostrar cada mudança individual isoladamente, nosso próprio Paul Ireland nos mostrou como depurar corretamente o desempenho de um site (neste caso, o site para dispositivos móveis do Hotel Tonight) ao vivo no palco. Entre os recursos recém-anunciados estão as tiras de filme de carregamento e desempenho, a hierarquia de rede incluída, o resumo do treeview e a capacidade de visualizar custos de desempenho por domínio e arquivo.
Adicione facilmente cores de primeiro e segundo plano a qualquer elemento
Sempre que você quisesse adicionar uma propriedade de cor do plano de fundo ou de cor ao elemento, não era possível simplesmente abrir o seletor de cores. Em vez disso, a maioria das pessoas digita algo como “plano de fundo: vermelho;” toda vez para que o ícone do seletor de cores apareça e, em seguida, escolhe a cor real que você quer.
Pensamos que poderíamos simplificar isso. Adicionamos dois botões que aparecem ao passar o cursor sobre o canto inferior direito de um seletor, permitindo que você adicione uma cor e abra o seletor com um único clique:
O melhor de todos
- Perdemos muito espaço no painel "Estilo" mostrando tipos de mídia genéricos. Agora, ocultamos essas informações antes dos seletores, caso não sejam incomuns.
- Agora você pode passar o cursor sobre um seletor de CSS no painel "Estilo" para ver em quantos elementos ele se aplica na página.
- Ainda não desistiu da impressão? A emulação de mídia impressa ainda está disponível para conferir a aparência da página quando for impressa. Acabamos de movê-la para "Configurações de renderização".
- Ao escolher um elemento para ser inspecionado, agora expandimos e fechamos automaticamente a subárvore do DOM relevante. Difícil de explicar, ver para acreditar.
Como sempre, envie sua opinião pelo Twitter ou use os comentários abaixo e envie bugs para crbug.com/new.
Até o próximo mês!
Paul Bakaus e a equipe do DevTools