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

Из моего недавнего вопроса , я уже создал некоторую функцию 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.

<!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. Результат должен отображаться как на картинках ниже.

альтернативный текст http://d7cgnq.bay.livefilestore.com/y1pJGV27qEARXzZhsMMhPD5z0OxAtnkQK8eKeEXMAxuHjsuWeAq1aGl7sTISRNqVv3lw8ghyxE_GorlwSJDvTql0m0ugSGXPaY-/undebugable-firebug-html.PNG

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

альтернативный текст http://d7cgnq.bay.livefilestore.com/y1pz_RwqjgeVqe2mAlUZha0PalpPdP0X5AiwJcQhYahERlnbPDdZpb-_d1e96Q-14raSDMJOBsdcV9jsi4B5yCUDqm41Wc3h0yk/undebugable-firebug-script.PNG

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

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

альтернативный текст http://d7cgnq.bay.livefilestore.com/y1peKdIMOztXss-pc8PlJEmaGov_0ShYnLsuDdK5OLETbCG0UpkX6Te29w0YW2pNKaD_0ANAiizh2GdGPAAp_1q0JWAETo4Qoiw/Debugger-VS2010.png

альтернативный текст http://d7cgnq.bay.livefilestore.com/y1pUeHaHoTXj0WBl74fnTrXwdr_y7s7h8jNKfslSONgshzZBpUddGHNBWA9cXRabo3HAl3QazeozrCABo7pNVQc1Acl-UXXbHFE/Debugger-GoogleChrome.png

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

Спасибо

Ответы [ 12 ]

115 голосов
/ 07 июня 2012

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

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

//# sourceURL=dynamicScript.js

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

Подробнее здесь

Пол Айриш также кратко рассказывает об этом в своем превосходном выступлении по Tooling & The Webapp Development Stack

21 голосов
/ 10 ноября 2009

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

17 голосов
/ 11 января 2016

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

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

Метод 1:

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

  1. Откройте консоль Chrome, введите имя метода и нажмите Enter.
    В моем случае это GetAdvancedSearchConditonRowNew
    Если метод JS загружен, он покажет определение метода.

enter image description here


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

enter image description here


Метод 2:

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

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

debug dynamic loading JavaScript in chrome -1


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

debug dynamic loading JavaScript in chrome -1


16 голосов
/ 19 июля 2011

Я использую Google Chrome для этой цели.

В chrome на вкладке скриптов вы можете включить «пауза для всех исключений»

enter image description here

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

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

10 голосов
/ 20 мая 2011

Я думаю, вам может понадобиться дать eval'd-коду "имя", например:

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

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

5 голосов
/ 12 июля 2013

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

2 голосов
/ 06 июля 2011

Использование Chrome (12.0.742.112) с предоставленным вами кодом и оператором отладчика, подобным этому

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

chrome_debugger

у меня работает.

Мне нужно изменить некоторый JavaScript (ограничив область действия всего селектора jQuery текущим частичным> view 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 голос
/ 26 мая 2011

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

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

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

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

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

И на втором обновлении, используя Chrome, я сделал это

перейти к: blank Откройте консоль и пройдите в

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

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

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

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

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

1 голос
/ 10 ноября 2009

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

0 голосов
/ 23 августа 2016

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

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

enter image description here

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

enter image description here

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

enter image description here

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