Трюки в Chrome DevTools / Comments / Habr

helpik94 Sep 19 2017 at 11:24

bustEXZ Sep 19 2017 at 13:05

Кстати, чтобы все время не клацать кнопку очистки кеша, в devtools во вкладке Network есть чекбокс Disable cache.
PS с закрытой консолью кэш будет работать

Raftko Sep 19 2017 at 14:00

alex_blank Sep 20 2017 at 04:38

Делал как-то либу для логгинга, которая умеет ANSI цвета выводить в Chrome DevTools (ну и еще кучу всего):

https://github.com/xpl/ololog

Мб пригодится кому.

fsou11 Sep 19 2017 at 16:14

Дубликат от 03.10.2016: habrahabr.ru/company/infopulse/blog/311582
Источник перевода: hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d

Dreyk Sep 19 2017 at 17:05

есть еще селектор $x(), который работает по XPath

Falstaff Sep 19 2017 at 17:45

Кстати о профилировании, есть удобнейшая подчас штука chrome:tracing — фронтенд трассировщика, встроенный прямо в хром, причём общего назначения, он просто файл на входе принимает. Формат стабильный и хорошо документированный (обычный json), поддерживает штуки вроде счётчиков или асинхронных событий, и не обязательно только в JS разработке использовать. Это так, хозяйке на заметку.

qumo May 11 2023 at 08:57

Не знаю баг это или нет, но когда ставишь в коде,

console.time('test time');
// some code
console.timeEnd('test');

затем вызываем код который тестим на время, и пока он не загрузился, пишем в консоле,

console.clear();

и получаем 0 ms

dmz9 May 11 2023 at 08:57

еще накину парочку
==============
выбраный элемент в дереве — ассоциируется с переменной консоли $0.
имея на странице jQuery можно выбрать сложную форму и исполнить в консоль такое:

$($0).serializeArray().map(x=>console.log(x.name + ':' + x.value))

==============
наведя курсор на колонку Initiator (Network) можно увидеть стек вызова js-функций

==============
тело функции можно быстро найти если известно ее имя.
написав его в консоль и ткнув по телу функции переходим на вкладку Sources

==============
контекстное меню по xhr запросу позволяет его повторить без необходимости кликать по кнопкам на странице — опция Replay XHR. отправляются заново в т.ч. и POST-данные.
а полезность подменю Copy > 9000

==============
настроив Workspace в Settings и смапив на папку в файловой системе можно превратить devtools в неплохой wysiwyg-редактор. (требует разрешения на запись)
все изменения исходников будут сразу сохраняться самим браузером.

==============
продолжая тему верстки на коленке — можно выбирать нужный для редактирования стиля файлик через "+" в правой верхней части вкладки Styles (Elements), зажав на нем лкм. с настроеным Workspace это очень удобно сочетается.
==============
компоновку элементов на странице можно очень просто менять, просто перетаскивая ноды в дереве Elements в другое место (в т.ч. друг в друга)