@xxxzsx

Как подключить WebStorm отладчик к сайту открытому в браузере?

Как прицепить сессию отладки к уже открытой веб-странице (к разработке которой я не имею отношения)? Chrome DevTools позволяет? Либо нужно локально скачивать страницу с джаваскриптом и запускать как проект в WebStorm?
Инструментов DevTools не хватает и IDE удобнее.
Если посоветуете какие-то другие инструменты или расширения для хрома для динамического анализа работы JavaScript в браузере, скажу большое спасибо! Особенно не могу ничем улавливать события, в DevTools такого нет, чтоб понять кто виноват в изменении какой-то части страницы, очень нужен event log и call stack. Статический анализ занимает много времени, а исходники иногда обфусцированы.
  • Вопрос задан
  • 314 просмотров
Решения вопроса 3
JRK_DV
@JRK_DV
Рецепты https://codepen.io/jrkdv/full/LKLXdq
может быть не совсем по вопросу, но сами браузеры дают не плохую поддержку для отладки

1. как сказали ответом рядом, можно поставить бряк на DOM, через контекстное меню Dev tools -> Break on

2. можно посмотреть какие у элемента есть подписчики на события
скрин
604d525d25e41924839638.png

3. можно подменять функции на свои.
пример

(все примеры для вставки в консоль браузера, использую оперу)

тут есть jQuery, попробуем подменить функцию hasClass:
let origHasClass = jQuery.fn.hasClass;
jQuery.fn.hasClass = function(...arg) {
  let r = origHasClass.call(this, ...arg); // Выполняем оригинальную функцию, запоминаем результат
  console.log('PARAMS: ', ...arg, ' | RET: ', r, ' | CTX: ', this); // Выводим лог
  return r; // Возвращаем результат, чтобы не нарушить логику у остальных скриптов
}


после выполнения скрипта, если нажать на элемент\кнопку сайта, то должен выводиться лог вызова функции hasClass и сам контекст выполнения.
при подменах не забываем возвращать результат работы оригинальной функции, чтобы восстановить логику у исследуемого скрипта
за место "console.log()" можно воспользоваться "console.trace()" \ "debugger;"

если нужно выполнить свой код, ещё до загрузки сторонних скриптов, то можно попытаться так:
let w = window.open('https://qna.habr.com/q/954123');
let s = w.document.createElement('script');
s.innerHTML = 'let origOpen = XMLHttpRequest.prototype.open; XMLHttpRequest.prototype.open = function(...arg) { console.log("XMLHttpRequest:",...arg,this); return origOpen.call(this, ...arg) }';
w.document.head.prepend(s);

в консоль, на открытой странице, должны выводиться логи xhr запросов
Ответ написан
@Fenix957
Помимо того что сказали можно через браузер переопределять загружаемые файлы и рефакторить файлы там где вам удобно.
Откройте dev tools F12
604d6e556df31321981318.png

Два раза нажмите на файл который вам нужен
604d6e932d0f7735056850.png

Теперь нажмите на две стрелочки ниже на скрине
И выберите overides
604d6edca5032558679156.png
Добавляете любую пустую папку
604d6f250911b351791282.png

Теперь файл который вы открывали в самом начале нажимаете правой кнопкой на него
604d6fc23016b893048321.png

Открываете ту папку в WebStorm
Рефакторите вносите изменения добавляете свой код)
604d706bb74ad978460811.png
Сохраняете и обновляете страницу

604d70fd4d9d5785109177.png

В результате получаете код который берется локально а не с удаленного сервера и можете как угодно им манипулировать для отладки)
Я здесь вы можете посмотреть какое событие было до этого и т д
604d7f5114c9b872401780.png
Ответ написан
sHinE
@sHinE
веб-разработчик, php/js/mysql и сопутствующее
DevTools такого нет, чтоб понять кто виноват в изменении какой-то части страницы

Вообще есть - в elements выбираете элемент и по нему правой кнопкой. Там раздел "break on" - в нём можно выбрать, когда отладчик будет приостанавливать скрипт.
604ce50df197a735169622.jpeg
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
09 мая 2021, в 09:26
30000 руб./за проект
09 мая 2021, в 08:58
3000 руб./за проект
09 мая 2021, в 07:57
1000 руб./за проект