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