Памятка по работе с Chrome DevTools
CTRL + SHIFT + I — открытие панели с инструментами разработчика.
CTRL + SHIFT + F — поиск во всех загруженных на странице файлах:
CTRL + G — переход к указанной строке:
Если ввести в консоли document.designMode = 'on', активируется возможность редактировать элементы страницы, имеющие текстовой контент:
Введя $0 в консоли, вы получите ссылку на выделенную в панели элементов DOM ноду. Если вы используете jQuery, то для получения ссылки можно ввести jQuery($0):
В редакторе стилей можно кликнуть по образцу цвета и появится окно выбора цвета. Когда это окно открыто указатель мыши превращается в увеличительную лупу выбора цвета на странице:
Симуляция различных состояний DOM элемента (:hover, :focus, :visited):
Интересные материалы по работе с Chrome DevTools: