Как отлаживать Javascript, который был загружен через AJAX (в частности, jQuery)

Я изменил свой стиль кодирования с более сложными проектами на загрузку страниц (и их встроенных скриптов) "по требованию" в последнее время. Однако отлаживать эти сценарии сложно, как при загрузке, например:

jQuery.get('/myModularPage', function(html){ /* insert the loaded page into the DOM */ });

или

$('#some-container').load('/myOtherPage');

Эти сценарии выполняются отлично, но если я отлаживаю, как установить контрольные точки на этих динамически загружаемых страницах и сценариях?

Ответы

Ответ 1

UPDATE

Теперь принятая форма имеет # (хэштег), а не @ (символ)

Синтаксис был изменен во избежание конфликтов с операторами условной компиляции IE и некоторыми другими проблемами (спасибо Александру Пшеничному и Варункумару Нагараджану за это)

//#sourceURL=/path/to/file

Это действительно может быть любая строка, которая поможет вам идентифицировать блок кода.

Дополнительная хорошая точка из JMac:

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

ОРИГИНАЛ

Я боролся с вышеупомянутым около недели, прежде чем бегать через в этой статье. Это действительно отлично работает для моей среды разработки (Chrome 22, поскольку я пишу это).

Firebug также поддерживает поддерживаемые разработчиком eval() буферы: просто добавьте строку в конец вашего eval (выражение), например:

//@ sourceURL=foo.js

Например, учитывая этот простой html-документ:

<!DOCTYPE html>
<html>
<body>
    <p>My page content</p>
    <div id="counter"></div>
    <script type="text/javascript">
        //if this page is loaded into the DOM via ajax 
        //the following code can't be debugged 
        //(or even browsed in dev-tools)

        for(i=0;i<10;i+=1) {
            document.getElementById('counter').innerText = i;
        }

        //but if I add the line below
        //it will "magically" show up in Dev Tools (or Firebug)

        //@ sourceURL=/path/to/my/ajaxed/page
    </script>
<body>
</html>

Вещи, которые я еще не обнаружил:

  • Нужно ли это делать для каждого блока script для встроенных скриптов?
  • Должна ли она быть последней строкой блока script? (В статье предполагается, что ответ на этот вопрос да)

Ответ 2

Добавьте это в файлы js, где вы хотите его сломать:

debugger;

Затем перейдите в /over/out, как и любой другой отладчик.

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

Ответ 3

Эта проблема выглядит так, как будто она в настоящее время полностью решена с помощью новой прагмы:

//# sourceURL=filename

Обратите внимание на "hash" #, а не на символ "at" @.

Включив эту строку в ваш источник, ссылка на нее появится в отладчике!

Ответ 4

Как вы уже упоминали, вы можете использовать //@ sourceURL. Кажется, что Chrome не поддерживает //@ sourceURL для встроенных скриптов. Он работает над выражениями eval. Эта статья HTML5 об исходных картах дает более подробную информацию об именах блоков eval и именах любых анонимных функций в вашем коде.

Вместо использования eval вы можете попробовать внедрить тег script или JSONP.