Как делать отладку JS, который подгружается динамически?

Question

В Yii2 есть ассеты (с css и js), их можно подключить в отдельных представлениях. Бывают ситуации, когда представление подгружается через ajax. а вместе с ним и ассеты со скриптами. В итоге в браузере в панели разработчика на вкладке Sources их просто нет и возможности поставить breakpoint нет.

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

Есть вариант писать слово debugger; каждый раз. Но не сильно хочется.

UPD: Кажется судя по Network в браузере - Yii подтягивает ajax'ом подтягивает скрипты из папок -

Answer 1

Я не знаком с Yii2 и не знаю как там устроены ассеты, но в теории есть только два способа динамически создать js - eval и new Function. Думаю Yii2 использует один их них. Для обеих способов можно указать параметр sourceURL с помощью которого браузер сможет отображать код и запоминать брекпоинты даже после перезагрузки страницы.

Вот пример кода с new Function

var foo = new Function(`console.log("called foo"); 
                       //# sourceURL=my-foo1.js`);
document.body.addEventListener("click", foo);

И вот пример кода с eval

var script = `function foo() {
               console.log('called foo');
             }
             //# sourceURL=my-foo2.js`;
eval(script);
document.body.addEventListener("click", foo, false);

После выполнения такого кода в дереве с доменами добавится группа (no domain) в которой будут функции доступны для отладки.
Вот видео как это все выглядит:
https://drive.google.com/file/d/1f7m0drdLfi8KyCJtOGwr2dGB1MScG5Zn/view
https://drive.google.com/file/d/1vEVT-lN4HDcwHkIOYJykWBY6xDPtMUEj/view

ps: также посмотрите в сторону Workspaces и Local Overrides, они очень удобные и возможно помогут в вашем вопросе.

БЛОГ НА HUSL

Как делать отладку JS, который подгружается динамически?

Ответы (1 шт):