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

12
Lord Maverik
На сайте с 15.04.2003
Offline
471
1270

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

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

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

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

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

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

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

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

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

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

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

RedMall.Ru (https://redmall.ru) - Товары из Китая (Таобао, Tmall) с проверкой качества, скидка для форумчан 7% Партнерская программа 2 уровня: 5% + 5%. Подробнее. (https://redmall.ru/about/partner/)
vandamme
На сайте с 30.11.2008
Offline
672
#1

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

Lord Maverik
На сайте с 15.04.2003
Offline
471
#2
vandamme:
Lord Maverik, так там есть кнопка для придания коду красивого читаемого вида - {}

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

vandamme
На сайте с 30.11.2008
Offline
672
#3

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

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

Lord Maverik
На сайте с 15.04.2003
Offline
471
#4

на onclick

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

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

vandamme
На сайте с 30.11.2008
Offline
672
#5

Lord Maverik,

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

Lord Maverik
На сайте с 15.04.2003
Offline
471
#6

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

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

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

danforth
На сайте с 18.12.2015
Offline
153
#7

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

Junior Web Developer
ДП
На сайте с 23.11.2009
Offline
203
#8

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

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

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

Lord Maverik
На сайте с 15.04.2003
Offline
471
#9

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

IL
На сайте с 20.04.2007
Offline
435
#10
danforth:
Lord Maverik, слева рядом с номером строки жмакнуть.

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

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

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

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

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

... :) Облачные серверы от RegRu - промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий