Как стать автором
Обновить

Комментарии 9

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

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


https://github.com/xpl/ololog


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

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

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

Не знаю баг это или нет, но когда ставишь в коде,
console.time('test time');
// some code
console.timeEnd('test');

затем вызываем код который тестим на время, и пока он не загрузился, пишем в консоле,
console.clear();

и получаем 0 ms
еще накину парочку
==============
выбраный элемент в дереве — ассоциируется с переменной консоли $0.
имея на странице jQuery можно выбрать сложную форму и исполнить в консоль такое:
$($0).serializeArray().map(x=>console.log(x.name + ':' + x.value))

==============
наведя курсор на колонку Initiator (Network) можно увидеть стек вызова js-функций
image
==============
тело функции можно быстро найти если известно ее имя.
написав его в консоль и ткнув по телу функции переходим на вкладку Sources
image
==============
контекстное меню по xhr запросу позволяет его повторить без необходимости кликать по кнопкам на странице — опция Replay XHR. отправляются заново в т.ч. и POST-данные.
а полезность подменю Copy > 9000
image
==============
настроив Workspace в Settings и смапив на папку в файловой системе можно превратить devtools в неплохой wysiwyg-редактор. (требует разрешения на запись)
все изменения исходников будут сразу сохраняться самим браузером.
image
==============
продолжая тему верстки на коленке — можно выбирать нужный для редактирования стиля файлик через "+" в правой верхней части вкладки Styles (Elements), зажав на нем лкм. с настроеным Workspace это очень удобно сочетается.
==============
компоновку элементов на странице можно очень просто менять, просто перетаскивая ноды в дереве Elements в другое место (в т.ч. друг в друга)
image

Зарегистрируйтесь на Хабре , чтобы оставить комментарий