Teech

Uma lista de dicas e truques interessantes do DevTools do Chrome

Devtools

O Chrome DevTools fornece um conjunto incrível de ferramentas para ajudá-lo a desenvolver na Web. Aqui estão algumas dicas que você talvez ainda não saiba:

Arraste e solte no painel Elementos
No painel Elementos, você pode arrastar e soltar qualquer elemento HTML e alterar sua posição na página

Faça referência ao elemento atualmente selecionado no console
Selecione um nó no painel Elements e digite $0 no console para fazer referência a ele.

Use o valor da última operação no console
Use $_ para referenciar o valor de retorno da operação anterior executada no console

Captura de tela de um único elemento
Selecione um elemento e pressione cmd-shift-p (ou ctrl-shift-p no Windows) para abrir o Menu de Comando e selecione Capture node screenshot.

Debugar modificações no DOM
Clique com o botão direito do mouse em um elemento e ative a opção Break on -> Subtree Modifications: sempre que um script percorrer esse filho filho e modificá-lo, o debugger para automaticamente para permitir que você inspecione o que está acontecendo.

Fonte: flaviocopes

Exit mobile version