Отладка JS или его подмена в браузере


Lord Maverik
1183

В общем есть сайт, чужой.

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

Причем код js файлах идет обфусцированный в одну строку.

Мне нужно посмотреть как в определенном месте кода идет выполнение какие значения принимают переменные и какие значения возвращают функции.

Как проще всего это сделать?

Пробовал поставить breakpoint в chrome на clicl и двигаться по шагам. Миллион шагов, код в одну строчку, очень неудобно и непонятно.

Поставил Tampermonkey чтобы он в коде подменил src у js на мой.

Я бы там уже отформатировал скрипт и хотябы поставил alert или console чтобы следить что происходит.

Из серии проверяем все скрипты на странице, если путь совпадает то меняем на свой.

elements .src = «http://mysite.com/script2.js»;
Но что-то не меняется. Я так понимаю по факту chrome загрузил страницу, загрузил скрипты, потом Tamper выполнил замену и толку от нее 0.

Как такая задача решается лучше всего? Никогда раньше такого не нужно было, опыта вообще 0


vandamme

Lord Maverik, так там есть кнопка для придания коду красивого читаемого вида — {}


Lord Maverik

vandamme:
Lord Maverik, так там есть кнопка для придания коду красивого читаемого вида — {}

А как мне остановить выполнение именно внутри нужной функции в нужном JS?


vandamme

ты же сказал что ставил breakpoint

ставь их больше и дальше по F8, а то по другим кнопкам будет внутрь jquery заходить и тд.


Lord Maverik

на onclick

там пока до нужного файла дойдешь с ума сойдешь жать туч step.

а потом и до нужного места еще


vandamme

Lord Maverik,

если поставить пару брекпоинтов и шагать по f8, то сразу на второй брекпоинт прыгнет.


Lord Maverik

Инициируется все по клику, и потом выполняется туева куча кода.

Я не знаю как пропустить все это безобразия и перейти сразу к нужному месту.

Как поставить брекпоинт не на событие мыши например, а сразу внутри нужной функции.


danforth

Lord Maverik, слева рядом с номером строки жмакнуть.


Дикий пионер

В принципе danforth всё верно говорит.

Но для расширения кругозора есть еще способ, есть http-отладчик — fiddler. В нём можно подменять файлы из инета своими по правилам. Т.е. сделать чтобы вместо скрипта из инета грузился локальный файлик уже отформатированный. Может быть полезно в случае, если имя файла генерится каждый раз новое и брейкпойнт в девтулзах уже так просто не поставишь. Так вот, подменяется файл на локальный и в нужном месте ставится debugger; — в этом месте вызовется отладчик. Как-то с cloudflare так боролся. fiddler может сгенерить свой сертификат и можно будет даже https перехватывать.

Но в целом, если файл просто минимизирован — то да, кнопки {} и расстановки брейкпойнтов в отладчике браузера должно хватать с головой.


Lord Maverik

Всем спасибо, все получилось, очень круто и удобно )


ivan-lev

danforth:
Lord Maverik, слева рядом с номером строки жмакнуть.

Ещё в консоли Crome есть удобная штука — monitor(function) —

https://developers.google.com/web/tools/chrome-devtools/console/utilities#monitor

отслеживает вызов заданной функции.

Lord Maverik:
Всем спасибо, все получилось, очень круто и удобно )

А так — да.. сейчас отлаживать в браузере гораздо проще, чем лет *цать назад.. =)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *