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


90

З мого останнього запитання , я вже створив деяку функцію JavaScript для динамічного завантаження часткового перегляду. Отже, я не можу налагодити будь-яке динамічне завантаження JavaScript. Оскільки весь завантажений JavaScript буде оцінюватися функцією "eval".

Однак я знайшов якийсь спосіб створити новий JavaScript, використовуючи наступний сценарій для динамічного створення сценарію в заголовку поточного документа. Усі завантажені сценарії відображатимуться у HTML DOM (щоб знайти його за допомогою будь-якого налагоджувача).

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.text = "alert('Test!');";

document.getElementsByTagName('head')[0].appendChild(script);

До речі, більшість налагоджувачів (IE8 Developer Toolbar, Firebug та Google Chrome) не можуть встановити точку зупинки в жодному динамічному сценарії. Оскільки налагоджуваний сценарій повинен бути завантажений у перший раз після завантаження сторінки.

У вас є ідея для налагодження динамічного вмісту скрипта чи файлу?

Оновлення 1 - Додайте вихідний код для тестування

Ви можете використовувати наступний файл xhtml для спроби налагодити значення someVariable.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>    
    <title>Dynamic Loading Script Testing</title>
    <script type="text/javascript">
    function page_load()
    {       
        var script = document.createElement('script')
        script.setAttribute("id", "dynamicLoadingScript");
        script.setAttribute("type","text/javascript");
        script.text =   "var someVariable = 0;\n" +
                        "someVariable = window.outerWidth;\n" +
                        "alert(someVariable);";

        document.getElementsByTagName('head')[0].appendChild(script);
    }
    </script>
</head>
<body onload="page_load();">
</body>
</html>

З відповіді я просто перевіряю це у FireBug. Результат повинен відображатися, як показано на малюнках нижче.

текст заміщення

Будь ласка, подивіться на скрипт "dynamicLoadingScript", який додається після завантаження сторінки.

текст заміщення

Але його немає на вкладці сценарію FireBug

Оновлення 2 - Створіть точку зупинки налагодження у сценарії динамічного завантаження

текст заміщення

текст заміщення

Обидва наведені вище зображення показують вставку "налагоджувача;" оператор у якомусь рядку сценарію може викликати точку зупинку в сценарії динамічного завантаження. Однак обидва налагоджувачі не показують жодного коду в точці зупинки. Тому марно це робити.

Дякую,


Ви випадково знаходили рішення для цього? Я тут з тією ж проблемою.
adamJLev

Спробуйте завантажити окремий файл динамічно, тобто див. Тут запит на реалізацію. 2011/2011/11/11/a-lightweight-script-loader - я знаходжу налагоджувачі набагато легше.
Джеймс Вестгейт,

@infinity, перевір моє рішення
Molecular Man

3
2014, а ваші зображення все ще мертві - чи можете ви їх повторно зробити?
TheGeekZn

У мене є подібне запитання, але я не можу сказати, оскільки зображення розбиті. Чи можете ви їх оновити?
Ерік,

Відповіді:


117

Також можна використовувати хром для того ж. Chrome має функцію, за допомогою якої ви можете вказати атрибут синтаксичного аналізатора і зробити так, щоб фрагмент динамічного JS відображався як файл, який потім можна переглядати та встановлювати точки розриву.

атрибут, який потрібно встановити, є

//# sourceURL=dynamicScript.js

де dynamicScript.js - це назва файлу, який повинен відображатися у браузері файлів скриптів.

Більше інформації тут

Пол Ірландський також коротко розповідає про це у своїй чудовій доповіді Інструментарій та стек розробки Webapp


5
Якщо у когось виникають проблеми з MVC3 / Razor, не забудьте уникнути символу @, так що щось на зразок // @@ sourceURL = dynamiccript.js І просто fyi, вищезазначене працює також у firebug.
parsh

1
Ви можете використовувати цю функцію і для динамічних вбудованих javascripts. Але якщо у вас є якийсь виняток із цього сценарію, ви не побачите його у списку джерел.
Роман Снітко

4
Зверніть увагу, що новим синтаксисом є "// # sourceURL = dynamicScript.js" зміна з @ на #
Cekk

3
оновлене посилання на розділ інструментів розробника chrome на вихідних картах - developer.chrome.com/devtools/docs/…
chrismarx

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

21

Спробуйте додати "налагоджувач;" в JavaScript, який ви додаєте динамічно. Це має призвести до зупинки на цій лінії незалежно від налаштувань точки зупинки.


Я можу знайти лише це: code.google.com/p/fbug/issues/detail?id=1259 . До речі, я використовую тег скрипта, що додається до голови, для динамічного завантаження скриптів (але за допомогою атрибута src), і доданий таким чином код для мене налагоджується у всіх браузерах, навіть якщо він не завантажується разом з початковою сторінкою.
Joeri Sebrechts,

Який саме код ви використовуєте для додавання тегу сценарію? У мене така ж проблема, як і у OP, що унеможливлює налагодження динамічно завантажених файлів JS у Chrome. Дякую!
adamJLev

var loaderNode = document.createElement ("сценарій"); loaderNode.setAttribute ("тип", "текст / javascript"); loaderNode.setAttribute ("src", url); document.getElementsByTagName ("голова") [0] .appendChild (loaderNode);
Joeri Sebrechts,

18

Так, (зараз) можливо налагоджувати динамічно завантажений JavaScript за допомогою Google Chrome!

Не потрібно додавати додатковий debugger;або будь-який інший атрибут для динамічно завантаженого файлу JS. Просто виконайте наведені нижче дії для налагодження:

Спосіб 1:

Мій технічний керівник щойно продемонстрував надзвичайно простий спосіб налагодження динамічно завантажених методів Javascript.

  1. Відкрийте консоль chrome і напишіть назву методу та натисніть Enter.
    У моєму випадку, це GetAdvancedSearchConditonRowNew
    якщо метод JS завантажився, тоді він покаже визначення методу.

введіть тут опис зображення


  1. Клацніть на визначення методу, і весь файл JS буде відкритий для налагодження :)

введіть тут опис зображення


Спосіб 2:

Як приклад, я завантажую файл JS, коли натискаю кнопку за допомогою ajaxвиклику.

  1. Відкрити networkвкладку в google chrome dev tools
  2. Клацніть на елемент керування (наприклад, кнопку), який завантажує певний файл javascript і викликає деяку функцію javascript.
  3. перегляньте вкладку мережі та знайдіть цю функцію JS (у моєму випадку вона є RetrieveAllTags?_=1451974716935)
  4. Наведіть курсор на його, initiaterі ви знайдете ваш динамічно завантажений файл JS (із префіксом VM*).

налагоджувати динамічне завантаження JavaScript у chrome -1


  1. Клацніть на цей VM*файл, щоб відкрити.
  2. Помістіть налагоджувач куди завгодно у цей файл: D

налагоджувати динамічне завантаження JavaScript у chrome -1



Ганьба Google, що зробила це настільки тупим. 1 / Сором = Похвала (зворотна ганьба) вам за те, що
витягнули

16

Для цього я використовую Google Chrome.

У chrome на вкладці сценаріїв ви можете ввімкнути "паузу у всіх винятках"

введіть тут опис зображення

А потім помістіть десь у свій рядок коду try{throw ''} catch(e){}. Chrome зупинить виконання, коли досягне цього рядка.

EDIT: змінене зображення, щоб було зрозуміліше, про що я говорю.


Для розробки в Google Chrome слід вставити текст, який вказує назву поточного динамічного сценарію, коли jQuery або будь-який інший сценарій завантаження додає сценарій до DOM, як я повідомляв команді jQuery. Але я не маю часу над цим працювати. bugs.jquery.com/ticket/8292
Soul_Master

@Soul_Master, але використовуючи мій метод, вам не потрібно вставляти текст. Ви вставляєте в свій динамічний рядок сценарію, try{throw ''} catch(e){}а потім вмикаєте режим `` призупинити всі винятки '', і chrome зупинить виконання, коли буде виконано виняток. Я перевіряв це багато разів. Я завантажив ще одне зображення. Там зрозуміліше, про що я говорю.
Molecular Man

У chrome ви можете використовувати оператор "налагоджувач;", щоб зламати оператор, коли панель налагоджувача відкрита. Chrome просто проігнорує це, якщо панель відладчика закрита.
dinesh ygv

@dineshygv, ти можеш ... зараз. Але ви не могли 3 роки тому. debuggerтоді не працював би в динамічно створеному сценарії.
Molecular Man

10

Я думаю, вам може знадобитися дати коду eval'd таке "ім'я", як це:

http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/

Якщо ви це зробите, я думаю, що, ймовірно, debuggerпідхід з "оновлення 2" тоді повинен спрацювати.


Так. Я бачу це. Я вже давно повідомляв про цю помилку команді jQuery. bugs.jquery.com/ticket/8292
Soul_Master

1
Увага! описана методика викликає помилку в IE7, тому не залишайте її //@ sourceURL=blahу виробництві.
Джетро Ларсон,

це, мабуть, debuggerчастина, яка викликає проблеми, а не коментар джерела (який, безсумнівно, ігнорується JS)
Кайл Сімпсон

Це може спричинити проблеми з умовною компіляцією. наприклад: javascriptkit.com/javatutors/conditionalcompile.shtml
Джетро Ларсон

5

ОНОВЛЕННЯ : синтаксис для sourceUrl змінено (@ замінено на #), щоб уникнути помилок у непідтримуваних браузерах (читайте: IE). Деталі


2

Використання Chrome (12.0.742.112) із наданим вами кодом, а також такий налагоджувач

    script.text =   "debugger;var someVariable = 0;\n" +
    "someVariable = window.outerWidth;\n" +
    "alert(someVariable);";

chrome_debugger

працює для мене.

Мені потрібно змінити деякий JavaScript (обмежуючи область дії всього селектора jQuery до поточного часткового> перегляду div) перед його виконанням.

Нехай це стане більш відчутним, якщо ви прив’яжете селектор до події у вашому частковому поданні, замість того, щоб створювати елементи сценарію в тілі html (не відчуває себе добре).

Ви могли б зробити щось подібне

   (function(j)(
      var limiting_selector = '';
      j(".partial_views").bind('focusin over',function(e){
         limiting_selector = j(this).attr('someattr') // or j(this).data('limiting-selector')
      }).bind('focusout out',function(e){
         limiting_selector = '';
      });
      // And then go on with
      // j(limiting_selector+' .someclass')
   ))(jQuery)

Цей код завжди додавав би обмежувальний селектор для всіх операцій вибору jQuery, виконуваних, коли миша знаходиться в певному елементі, враховуючи, що HTML не зіпсований.

(Все ще здається хакерським, можливо, хтось має краще рішення)

ура


1

У Firebug ви зможете побачити цей сценарій після завантаження сторінки та введення сценарію. Коли ви це зробите, ви можете встановити точку зупинки у відповідному місці, і вона буде збережена, коли ви оновите сторінку.


Ти маєш рацію. Це не працює. Я спробував це за допомогою eval (), і Firebug дозволить вам встановити точку зупинки, коли ви це використовуєте. Чи є причина, по якій ви не можете використовувати eval () і потрібно встановити тег сценарію? Навіть загальніше, чи є причина, чому ви не можете обслуговувати цей динамічний javascript як окремий файл .js на своєму сервері? Яку проблему ви намагаєтесь вирішити?
Moishe Lettvin

Мені потрібно змінити деякий JavaScript (обмежуючи область дії селектора jQuery до поточного часткового перегляду div) перед його виконанням. Або у вас є ідея вирішити моє недавнє запитання. Для отримання додаткової інформації, будь ласка, перегляньте моє останнє запитання.
Soul_Master

1

Динамічно завантажений Javascript все ще повинен бути проаналізований браузером, тут знаходиться WebKit або налагоджувач FireBug, тому він підпорядковується налагоджувачеві, незважаючи ні на що, я думаю, це те ж саме для інструментів розробника в IE8,

Отже, ваш код підлягає налагодженню, тому там, де ваша проблема виникає, не буде у цьому файлі або тексті, якщо він не помилиться

Інша річ - script.text = "alert('Test!');";недійсна, тому вона не працює у всіх браузерах, що ви хочетеscript.innerHTML = "alert('Test!');";

навіть незважаючи на те, що його innerHTML це означає код всередині тегів HTML, а не HTML всередині, просто люди, які використовують це для цього, тому це пояснюється неправильно

ВИДАЛЕНО ДЛЯ ОНОВЛЕННЯ ДВОХ

І під час другого оновлення за допомогою Chrome я зробив це

перейдіть до about: blank Відкрийте консоль вгору та пройдіть у

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.innerHTML = "alert('Test!');debugger;";

document.getElementsByTagName('head')[0].appendChild(script);

тоді він зламається і відкриє вкладку сценарію з приблизно: показаним пустим (нічого не видно)

Потім праворуч покажіть список стеків викликів, потім натисніть на другий (анонімна функція), і він покаже вам.

Отже, у вашому файлі у вас буде (анонімна функція), який є кодом, який ви запускаєте, і ви побачите там точку зупинки. щоб ви знали своє в потрібному.


0

За допомогою Google Chrome (або Safari ) Developer Tool ви можете запускати JavaScript рядок за рядком. Сценарії

інструменту розробника Виберіть, який скрипт ви хочете налагодити, знак призупинення праворуч Або встановіть точки зупинки, клацнувши номер рядка>>>


0

Один із варіантів, який мені подобається використовувати, додаючи в свій код оператор console.log (''). Після появи цього виразу в консолі номер рядка зв’язується з ним. Ви можете натиснути це число, щоб перейти до місця у джерелі та встановити точку зупинки. Недоліком цього підходу є те, що точки зупинку не зберігаються при перезавантаженні сторінок, і перед додаванням налагоджувача вам доведеться пройти код.


0

Для поточного браузера Google Chrome або інших сучасних браузерів ви можете легко шукати будь-який оцінений код за допомогою інструменту розробника, як наведених нижче зображень.

  1. Імітуйте якийсь файл динамічного завантаження.

введіть тут опис зображення

  1. Натисніть Ctrl + Shift + F в вкладці джерела та знайдіть вищевказану функцію.

введіть тут опис зображення

Створіть деяку точку зупинки та виконайте функцію, щоб перевірити її.

введіть тут опис зображення

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.