Возможно ли отладить динамическую загрузку JavaScript с помощью какого-либо отладчика, такого как WebKit, FireBug или IE8 Developer Tool?

Отмой недавний вопросЯ уже создал некоторую функцию 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, Firebug и Google Chrome) могутустановить точку останова в любом динамическом сценарии. Потому что отладочный скрипт должен быть загружен в первый раз после загрузки страницы.

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

Обновление 1 - добавление исходного кода для тестирования

Вы можете использовать следующий файл xhtml для отладки значения someVariable.



    
    Dynamic Loading Script Testing
    
    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);
    }
    




Из ответа я просто тестирую его в FireBug. Результат должен отображаться как на картинках ниже.

альтернативный текст

Пожалуйста, посмотрите наdynamicLoadingScript» скрипт, который добавляется после загрузки страницы.

альтернативный текст

Но он не найден во вкладке скрипта FireBug

Обновление 2 - создание точки отладки в скрипте динамической загрузки

альтернативный текст

альтернативный текст

Оба приведенных выше изображения показывают вставкиотладчик;» Оператор в некоторой строке скрипта может запустить точку останова в скрипте динамической загрузки. Однако оба отладчика не показывают никакого кода в точке останова. Поэтому это бесполезно для этого.

Спасибо,

 TheGeekZn17 мар. 2014 г., 14:24
2014 и ваши изображения все еще мертвы. Можете ли вы их повторить?
 adamJLev09 апр. 2010 г., 23:45
Вы нашли решение для этого? Я'м здесь с той же проблемой.
 James Westgate17 мая 2011 г., 13:25
Попробуйте загрузить отдельный файл динамически, т.е. смотрите здесь для реализацииqueryj.com/2011/03/11/a-lightweight-script-loader - Я считаю, что отладчики справляются с этим гораздо легче.
 Molecular Man19 июл. 2011 г., 12:01
@infinity, заценимое решение
 Eric19 авг. 2016 г., 00:35
У меня есть похожий вопрос, но я могуне могу сказать, потому что изображения сломаны. Вы можете обновить их?

Ответы на вопрос(12)

отладчик;» Заявление в JavaScript вы 'добавляем динамически. Это должно привести к его остановке на этой линии независимо от настроек точки останова.

 adamJLev09 апр. 2010 г., 23:44
Какие'Точный код, который вывы используете для добавления тега сценария? Я'У меня та же проблема, что и у OP, что делает невозможным отладку динамически загружаемых файлов JS в Chrome. Спасибо!
 Joeri Sebrechts12 апр. 2010 г., 14:52
var loaderNode = document.createElement ("сценарий»); loaderNode.setAttribute (»тип", "текст / JavaScript»); loaderNode.setAttribute (»ЦСИ», URL); document.getElementsByTagName (»голова") [0] .appendChild (loaderNode);
 Joeri Sebrechts12 нояб. 2009 г., 09:17
Все, что я могу найти, это:code.google.com/p/fbug/issues/detail?id=1259 , Кстати, я использую тег script, добавляемый в заголовок, для динамической загрузки скриптов (но с использованием атрибута src), и код, добавленный таким образом, отлаживаем для меня во всех браузерах, даже если он 'не загружается вместе с начальной страницей.

ОБНОВИТЬ: синтаксис для sourceUrl был изменен (@ заменен на #), чтобы избежатьошибки в неподдерживаемых браузерах (читай: IE).подробности

рения скрипта. Когда вы это сделаете, вы можете установить точку останова в соответствующем месте, и это 'сохранится при обновлении страницы.

 Soul_Master12 нояб. 2009 г., 06:00
Мне нужно изменить некоторый JavaScript (ограничивая область действия всего селектора jQuery текущим частичным представлением div) перед его выполнением. Или у вас есть идея для решения моего недавнего вопроса. Для получения дополнительной информации, пожалуйста, посмотрите на мой недавний вопрос.
 Moishe Lettvin11 нояб. 2009 г., 07:47
Вы'верно. Это нет работа. Я попробовал это с помощью eval (), и Firebug позволит вам установить точку останова, когда вы используете это. Есть ли причина, по которой вы можетеиспользовать eval () и нужно установить тег сценария? В более общем смысле, есть ли причина, по которой вы можетеСлужит ли этот динамический javascript отдельным файлом .js на вашем сервере? Какую проблему ты пытаешься решить?

В Chrome на вкладке скриптов вы можете включитьпауза на все исключения

И затем поместите где-нибудь в вашей строке кодаtry{throw ''} catch(e){}, Chrome остановит выполнение, когда достигнет этой строки.

РЕДАКТИРОВАТЬ: изменение изображения, чтобы было яснее, что яЯ говорю о.

 Soul_Master20 июл. 2011 г., 12:37
Для разработки в Google Chrome вы должны вставить текст, который указывает имя текущего динамического скрипта, когда jQuery или любой другой скрипт загрузки добавляют скрипт в DOM, как я сообщил команде jQuery. Но я неу меня нет времени работать над этим.bugs.jquery.com/ticket/8292
 Molecular Man20 июл. 2011 г., 13:38
@Soul_Master, но, используя мой метод, вы неТ нужно вставить текст. Вы вставляете в свою динамическую строку сценарияtry{throw ''} catch(e){} затем включитьпауза на все исключения Режим и Chrome остановят выполнение, когда выбрасывается исключение. Я'Я проверил это много раз. Я загрузил другое изображение. Там яснее что яЯ говорю о.
 Molecular Man15 сент. 2014 г., 13:46
@dineshygv, ты можешь ... сейчас. Но ты не мог 3 года назад.debugger Wouldn»работать в динамически созданном сценарии тогда.
 dinesh ygv15 сент. 2014 г., 12:48
В хроме можно использовать отладчик; " оператор, чтобы сломаться на оператор, когда панель отладчика открыта. Chrome просто проигнорирует это, если панель отладчика закрыта.

ы можете легко найти любой оцененный код с помощью инструмента разработчика, например, следующих изображений.

Имитация динамической загрузки файла.

НажмитеCtrl + Shift + F в вкладка и поиск вышеуказанной функции.

Создайте точку останова и выполните функцию для ее проверки.

Да, (сейчас) можно отлаживать динамически загружаемый JavaScript с помощью Google Chrome!

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

Способ 1:

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

Откройте консоль Chrome и напишите название метода и нажмите Enter.

В моем случае этоGetAdvancedSearchConditonRowNew

Если метод JS загружен, он покажет определение метода.

Нажмите на определение метода, и весь файл JS будет открыт для отладки :)

Способ 2:

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

открытоnetwork Вкладка в Google Chrome Dev ToolsНажмите на элемент управления (например, кнопку), который загружает некоторый файл javascript и вызывает некоторую функцию javascript.наблюдать за вкладкой сети и искать эту функцию JS (в моем случае это)RetrieveAllTags?_=1451974716935Наведите егоinitiater и ты'найду ваш динамически загруженный файл JS (с префиксомVM*).

Нажмите на этоVM* файл, чтобы открыть.Поместите отладчик туда, куда вы хотите, в этот файл: D

 toddmo27 апр. 2017 г., 16:39
Позор Google для того, чтобы сделать это настолько тупым. 1 / Позор = Kudos (обратный позор) вам за то, что вытащил его :)

который мне нравится использовать, это добавить console.log (''Заявление в моем коде. Как только этот оператор появляется в консоли, ему присваивается номер строки. Вы можете щелкнуть этот номер, чтобы перейти к местоположению в источнике и установить точку останова. Недостаток этого подхода заключается в том, что точки останова не сохраняются при перезагрузке страницы, и вам необходимо выполнить код, прежде чем вы сможете добавить отладчик.

д код "название" как это:

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

Если вы это сделаете, я думаю, что этоСкорее всего,debugger подход от "обновление 2 " должен работать тогда.

 Soul_Master20 мая 2011 г., 10:02
Да. Я вижу это. Я уже сообщал об этой ошибке команде jQuery в течение длительного времени.bugs.jquery.com/ticket/8292
 Kyle Simpson28 сент. 2011 г., 20:54
Это'Скорее всего,debugger часть, которая вызывает проблемы, а не исходный комментарий (который, безусловно, игнорируется JS)
 Jethro Larson27 окт. 2011 г., 05:38
Это может вызвать проблемы с условной компиляцией. например.:javascriptkit.com/javatutors/conditionalcompile.shtml
 Jethro Larson16 сент. 2011 г., 02:36
Предупреждение! описанный метод вызывает ошибку в IE7, поэтому непокинуть//@ sourceURL=blah в производстве.

ом отладчика, подобным этому

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

работает для меня.

Мне нужно изменить некоторый 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-код не перепутан.

(Все еще кажется хакерским, может быть, у кого-то есть лучшее решение)

ура

Решение Вопроса

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

атрибут, который нужно установить,

//# sourceURL=dynamicScript.js

где dynamicScript.js - это имя файла, который должен отображаться в браузере файлов сценариев.

Дополнительная информацияВот

Пол Айриш также кратко говорит об этом в своем превосходном выступлении наИнструменты & Стек разработки веб-приложений

 parsh17 апр. 2013 г., 04:56
В случае, если у кого-то возникли проблемы с MVC3 / Razor, не забудьте экранировать символ @, например что-то вроде // @@ sourceURL = dynamiccript.js И просто к сведению, вышеописанное работает и в firebug.
 JMac18 мар. 2015 г., 17:39
Для меня файл js отображался в списке источников в группе под названием "(без домена) ", Стоит упомянуть, как я пропустил это сначала!
 Matt Bolt20 апр. 2017 г., 08:56
исправлена ссылка на последнюю документацию Google:developers.google.com/web/tools/chrome-devtools/javascript/...
 chrismarx28 июл. 2014 г., 17:50
обновленная ссылка на раздел инструментов разработчика Chrome на исходных картах -developer.chrome.com/devtools/docs/...
 Ray Foss31 мар. 2015 г., 21:09
По какой-то причине это работало только для отладки, когда я поместил его в нижней части JavaScript, а не в верхней части. Это все еще переименовало бы VM ### к правильному имени, но точки останова отказались сломаться.
 Jared10 июн. 2016 г., 19:29
@ JMac это 'Это та самая причина, по которой выне в состоянии локально сопоставить (через рабочие пространства) с этим динамическим JS. К сожалению, и я надеюсьЯ ошибаюсь.
 Cekk26 февр. 2014 г., 12:39
Обратите внимание, что новый синтаксис "// # sourceURL = dynamicScript.js " изменить с @ на #
 Roman Snitko14 авг. 2013 г., 09:57
Вы также можете использовать эту функцию для динамических встроенных сценариев JavaScript. Но, если у вас есть какое-то исключение в этом скрипте, вы не увидите его в списке источников.

Гугл Хром (или жеСафари) Инструмент разработчиков, вы можете запускать JavaScript построчно.



Инструмент разработчика> Сценарии> Выберите, какой скрипт вы хотите отлаживать> знак паузы на правой стороне или установить контрольные точки, нажавномер строки

зером, вот где находится WebKit или FireBug отладчик, так чтозависит от отладчика, независимо от того, что, я думаю, это то же самое для инструментов разработчика в IE8,

Таким образом, ваш код подчиняется отладчику, поэтому, если ваша проблема не будет обнаружена в этом файле или тексте, если это не ошибка

Другое делоscript.text = "alert('Test!');"; недопустимо, поэтому оно не будет работать во всех браузерах.script.innerHTML = "alert('Test!');";

хотя его innerHTML означает код внутри тэгов HTML, а не HTML внутри, просто большинство людей используют его для этого, поэтому его неправильно объясняют

ИЗДАНО ДЛЯ ОБНОВЛЕНИЯ ВТОРОГО

И на втором обновлении с помощью Chrome я сделал это

перейти к: пусто Откройте консоль вверх и мимо в

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

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

затем он сломается и откроет вкладку скрипта с показом about: blank (ничего не видно)

Затем с правой стороны отобразите список стеков вызовов, затем нажмите на второй (анонимная функция), и он покажет вам.

Таким образом, в вашем файле будет (анонимная функция) код, который вы выполняете, и вы увидите точку останова там. так что вы знаете свой правильный.

Ваш ответ на вопрос