Chrome DevTools tips and tricks

• $0 в консоли - ссылка на на текущий выбранный элемент в панели элементов (Elements)
• $_ в консоли - ссылка на последний вычисленный в консоли результат
• Ctrl-click (Cmd-click в MacOS) по правилу CSS в панели элементов - Chrome DevTools откроет определение этого стиля в панели Sources
• Ctrl-Shift-P (Cmd-Shift-P в MacOS) - быстрый поиск команд
• Chrome умеет делать скриншоты: Ctrl-Shift-P - набрать screenshot - есть команды Capture screenshot, Capture node screenshot, Capture full size screenshot
• Поиск в панели элементов (Ctrl-F) можно вести по строке, CSS-селектору или XPath
• Ctrl-Shift-O - навигация по списку имён в текущем файле (классы, функции и т.п.)
• Ctrl-O (Cmd-O, Cmd-P) в панели Sources - универсальная навигация: по списку всех загруженных файлов, по номерам строк в текущем файле, по символам в текущем файле, по командам DevTools
• Alt-click в MacOS (Alt- или Ctrl-Alt-click в Windows) по треугольнику слева от элемента в панели элементов - развернуть элемент и все вложенные в него элементы
• Ctrl-Shift-D - изменение docking mode (расположения) DevTools - сбоку, снизу или в отдельном окне
• Выделение мышкой с нажатой Alt в панелях Elements и Sources - выделение вертикального блока (Esc - вернуться к обычному одиночному курсору)
• Если навести мышку на селектор в стилях в панели элементов и подождать - Chrome подсветит на странице все элементы с таким селектором
• В контекстном меню для каждого запроса в панели Network есть пункты Copy as fetch, Copy as cURL - в буфер будет скопирована команда JavaScript или команда curl с правильными параметрами
• В контекстном меню для каждого запроса в панели Network есть возможность заблокировать загрузку данного ресурса
• Ctrl-Shift-F (Cmd-Alt-F) в консоли - поиск строки сразу во всех доступных файлах
• copy(object) в консоли копирует переданный объект как строку в буфер обмена
• queryObjects(Array) в консоли покажет все объекты, созданные конструктором Array