Як налагодити динамічно завантажений JavaScript (за допомогою jQuery) у самому налагоджувачі браузера?

92

Динамічно доданий сценарій не відображається у розділі сценаріїв налагоджувача браузера.

Пояснення:

Мені потрібно використовувати і використовував

if( someCondition == true ){
   $.getScript("myScirpt.js", function() {
       alert('Load Complete');
       myFunction();
   });
}

так що myScript.js можна динамічно завантажувати при дотриманні якоїсь умови ... А myFunction можна викликати лише після завантаження всього сценарію ...

Але браузери не відображають динамічно завантажений myScript.js у розділі сценарію їх налагоджувача.

Чи є інший спосіб обійти всі цілі, які змусять налагодити динамічно завантажений сценарій там, у самому браузері?

— TwiToiT
джерело

Можливий дублікат Можливо налагодити JavaScript для динамічного завантаження за допомогою деяких налагоджувачів, таких як WebKit, FireBug або IE8 Developer Tool?

— GorvGoyl

2

використовувати debugger;для автоматичної зупинки в динамічно завантаженому скрипті, див. javascript.info/debugging-chrome

— yu yang Jian

208

Ви можете дати своєму динамічно завантаженому сценарію ім’я, яке відображатиметься у налагоджувачі JavaScript Chrome / Firefox. Для цього ви розміщуєте коментар в кінці сценарію:

//# sourceURL=filename.js

Потім цей файл відображатиметься на вкладці "Джерела" як filename.js. З мого досвіду ви можете використовувати \ 's в імені, але я отримую дивну поведінку, якщо використовую / s.

Для отримання додаткової інформації див .: Точки зупинки в динамічному припиненні JavaScript // @ sourceurl

— Марка
джерело

19

Зверніть увагу, що його змінено на // #, хоча // @ все ще працює в Chrome. Сценарії у файлах .html також можна називати таким же чином. Будь обережний! Не залишайте порожніх місць до і після знака '='.

— Mert Mertce

11

Для мене файл js відображався у списку джерел у групі під назвою "(без домену)". Можливо, варто згадати, оскільки спочатку я це пропустив!

— JMac

7

Просто підказка. Налагоджувач Chrome передає ці файли псевдо-javascript у елемент вузла "(без домену)" на вкладці "Джерела", принаймні під час налагодження на localhost. Там я їх і знайшов.

— Robert Oschler

1

Також слід бути обережним - це стиль коментування. Це посилання "припинення дії / / @ sourceURL", яке ви дали, згадує як "// # sourceURL =", так і "/ * # sourceURL =". Це тому, що це також можна використовувати для CSS, де вам доведеться використовувати блокові коментарі, оскільки однорядкові коментарі "//" не є дійсними. Мене здивувало те, що ви не можете використовувати "/ * sourceURL =" у javascript. Це просто ігнорується.

— Jools

2

Насправді, більшість мініфайлерів JavaScript видаляють ці рядки зі стадій виробництва, роблячи це марним для діагностики помилок виробництва.

— Lluís Suñol

16

Ви можете використовувати //# sourceURL=і //# sourceMappingURL=в кінці файлу сценарію або тегу сценарію.

ПРИМІТКА: //@ sourceURL і //@ sourceMappingURLзастаріли.

— xRavisher
джерело

Більше інформації про застарілість: developers.google.com/web/updates/2013/06/…

— Pysis

Звичайно, але, як правило, більшість мініфайєрів видалять ці лінії на стадіях виробництва.

— Lluís Suñol

13

Я спробував використати "// # sourceURL = filename.js", який був запропонований в якості обхідного рішення, але він все ще не відображався для мене на панелі "Джерела", якщо він уже не існував на моїх вкладках попереднього разу, коли це дало виняток.

Кодування "налагоджувача;" лінія змусила його зламатись у цьому місці. Потім, як тільки це було на моїх вкладках на панелі Джерела, я міг встановити точки зупинку як звичайні та видалити "налагоджувач;" лінія.

— кевінпо
джерело

6

Він також може відображатися в списку (без домену) на вкладці Джерела.

— Splaktar

1

Мені також потрібно було користуватися debugger;, і DevTools повинен був бути відкритим під час завантаження сценарію.

— Бармар,

2

трохи додаткової інформації: використовуйте browsertools: // як протокол, як у //# sourceURL=browsertools://yourdomaingoeshere.com/action-openuwws.js

— dolbysurnd

6

Зверніть увагу, що вихідний файл, що відображається на вкладці джерел таким чином, з'явиться у групі (без домену), і, якщо ви хочете його налагодити, вам потрібно буде додати debugger;рядок у своєму коді, зробити так, щоб цей рядок був виконаний (зазвичай на початку виконання вихідного файлу), а потім додайте точки зупинку, де завгодно.

Якщо ви виконуєте налагоджувальні етапи виробництва, де у вас, ймовірно, не буде debugger;рядків у коді, ви можете зробити це, виконавши локальну карту з CharlesProxy до вашої "свіжої копії вихідного файлу із вставленим рядком дебюгера".

— Люліс Суньоль
джерело

2

Це мене врятувало! Незалежно від того, що я зробив, файл не відображався, доки я не ввів команду налагоджувача. Після цього він продовжував перезавантажувати сторінки та сеанси налагодження навіть після того, як я видалив команду налагоджувача.

— Mike Devenney

0

При спробі відстежити подібні речі в IE, я відкриваю інструменти розробника (F12), а потім знаходжу, де розмістити точку зупинки, використовуючи такий рядок у консолі:

debugger;myFunction();

Це переходить на вкладку налагоджувача, де ви можете ввійти myFunction()та встановити точку зупинки.

— Алан Самет
джерело