Возможно ли отладить динамическую загрузку 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 ]

0 голосов
/ 17 декабря 2014

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

0 голосов
/ 20 июня 2011

Используя Google Chrome (или Safari ) Инструмент для разработчиков, вы можете запускать JavaScript построчно.

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

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