Комментарии 26
Для тех, кто только начинает открывать для себя панель дев тулс дальше просмотра html страницы - будет интересно. Сохранил статью в закладках, буду использовать как шпаргалку
Вдогонку:
ctrl+p- открыть файлctrl+shift+p- выполнить <что-то>
Скажите, а есть какой-то вариант внешнего приложения, которое вместо DevTools можно прицепить? Просто от DevTools после Visual Studio аж глаза болят - настолько там все коряво сделано, особенно учитывая невозможность выбрать удобные шрифты
Смотря что необходимо заменить. Не все возможности DevTools можно легко «закрыть» чем-то внешним.
У меня самая большая проблема - дебагинг. Но конкретно дебажить код можно и через VSCode, например. Необходимо только подцепить внешний дебагер на процесс и все.
А остальные функции DevTools мне кажутся прямо очень приятными. Особенно приятные: мониторинг производительности и вкладка сетевых запросов. Главное - это иметь несколько мониторов, чтобы все это раскидать на рабочем месте :)
Открыв окно DevTools, можно для него открыть своё окно DevTools, и там попробовать поиграться и переделать что-то, например, фон, цвет, размер элементов, шрифт и т.д. Если что-то получится изменить, значит, наверняка у кого-то для этого есть готовые сборки или плагины.
P.S. Придумал идею только что, ещё нигде не искал, не проверял.
Открыв окно DevTools, можно для него открыть своё окно DevTools
Не понял, это как делается? в Chrome DevTools открыл по F12, а стоит нажать F12 будучи в DevTools, как они исчезают. И потом, где тут менять шрифты и вооще , кастомизировать UI под удобный вид и поведение возможно? В упор не вижу ничего и близко похожего:
Пробуйте Ctrl+Shift+I нажимать. Так можно и код фронтенда самого DevTools посмотреть, и лишние значки на странице истории браузера убрать (чего не могут расширения)
Вот как-то так у меня получилось "поиграть со шрифтами". Поставил Cascadia Mono в самом тонком начертании, чтобы отличие было явным, ну и цвет подсветки синтаксиса поярче с той же целью.
P.S. Да, я понимаю, это не настоящие настройки, они не сохраняются нажатием одной кнопки, и пропадают при любом обновлении или перезагрузке страницы. Я смог добиться эффекта только заменой значений вручную, запустить код для изменения стиля у меня не вышло. Идею показал просто ради идеи, до этого ни разу ещё таким не занимался.
Также используя брейкпоинты можно модифицировать переменные на лету в чужом коде у себя в браузере.
Был случай, когда нужно было истекший токен подменить на актуальный из другой вкладки, не теряя уже полученные данные - скачанные треки из я.музыки, их было много, ждать загрузки снова не хотелось. А токен на этом сайте хранился в переменной вместо local storage.
Выкрутился следующим образом: в сурсах фронта нашел эту переменную через поиск по Bearer префиксу, далее нашел обращение к ней, поставил на него conditional breakpoint, в условии прописал "token = 'actual token', break;" - и сработало.
Даже скриншот сохранился
Аналогичный прием изредка использую со сторонними java библиотеками в intelij idea, когда нужно оперативно проверить гипотезу (сработает ли X если в эту переменную подставить Y).
и действительно, на этой неделе статьи про девтулзы ещё не было
Любой код в дереве можно редактировать
…а любой элемент – просто таскать мышкой по дереву.
Session Storage очищается при закрытии вкладки
…но будет восстановлено, если вкладку восстановить через Ctrl-Shift-T
…появляется список всех запросов. Каждая строка это отдельный файл или запрос к серверу
Если выбрать Big Request Rows (опция под шестерёнкой), каждый запрос будет в 2 строки с бóльшим количеством подробностей.
5.1. Performance: запись и анализ
Профилировщик ещё можно программно включать/выключать, через console.profile() и console.profileEnd()
Увидев название статьи, думал что-то новое смогу почерпнуть. По факту, неплохое описание функций без лишней воды. Кому нибудь точно будет полезным. Для себя же не нашёл ничего нового. Но это не промах автора - тут скорее заслуга понятного интерфейса. Вообще всё чаще замечаю в зрелом софте, что если какая то функция кажется полезной, то наверняка она уже там есть. К примеру, понадобилось мне следить только за определёнными запросами во вкладке network, посмотрел доку по фильтру и нашёл что фильтровать можно довольно гибко: и по статусу, и по домену и многое другое. Devtools Chrome (и Firefox тоже) отличные инструменты
Для лентяев существует mcp devtools.
Спасибо! Адекватный и компактный справочник с примерами
Статья будет непременно полезна новичкам, если следовать этой короткой выжимке и применять на практике, то можно быстро научиться этим пользоваться на постоянной основе, не думаю, что хотя бы один современный фронтенд напишется без девтулзы)
Прочитать про хромовские девтулы было интересно, но хотелось бы про firefox услышать, тк преимущественно в нем сижу
меня умиляет когда начинают объяснять про то какой клавишей открыть девтулзы, прям напоминает книги, через которые я в детстве читал об интерфейсе компьютера, не имея возможности вживую посмотреть сам компьютер
Еще топ фичи:
Поиск по всем ответам сервера (лупа в Network'е)
Оверрайд исходников (отладка / фиксы на проде)
Performance-панель (отдельная огромная история)
Можно анализировать используемость селекторов CSS
Можно анализировать вычисления
Есть привязка к событиям и Web Vitals
HAR'ы в Network'е (без них никуда в поддержке)
Копирование запросов к серверу (Network)
Скриншоты элементов (Elements)
Логгер-брейкпоинт (лог при прохождении через строку; Sources)
Удаленный отладчик
Очень жаль, что за 30+ лет так и не сделали, чтобы браузер запоминал состояния и положения инструментов разработчика при перезагрузке браузера. Я сам занимаюсь веб-разработкой и много открыто проектов с инструментами разработчика и на каждом проекте инструменты настроены индивидуально!
Я всегда развернутым окном пользуюсь. А если надо выделить элемент, не сворачивая окно, тогда я сдвигаю его на правую половину экрана.
Знаю, что есть утилиты типа DesktopOK и WindowManager, но ни разу пока ими не доводилось пользоваться.
Кстати, вы виртуальными рабочими столами часто пользуетесь? Как раз момент подходящий, интересуюсь для себя :)
3.5. Работа с локальными файлами (Workspaces)
Обычно изменения в DevTools пропадают после обновления. Workspaces позволяет сохранять их в реальные файлы.
Откройте панель Filesystem
Нажмите "Add folder to workspace"
Выберите папку с вашим проектом
Подтвердите доступ
Теперь при сохранении (Ctrl+S) изменения запишутся в файлы на диске.
Это работает только с локальными серверами (localhost). Для обычных сайтов такой возможности нет.
Для обычных сайтов тоже работает. И тоже локальный воркспейс.
Это позволяет оверрайдить логику чужого javascript.
Пруф
Мне этот Chrome DevTools теперь абсолютно понятен