Подтвердить что ты не робот

Отладка кода Ajax с помощью Firebug

У меня есть пара проблем с отладкой кода, возвращаемого в вызове Ajax - в частности, функция, возвращаемая в json (ошибки не попадают в ловушку в Firefox) - вплоть до того момента, когда я начал отлаживать эти проблемы в Internet Explorer ( Я думаю, что это проблема, связанная с firefox, поскольку Venkman также не обнаруживает эти ошибки.) Вы знаете какой-либо способ отладки кода, возвращаемого json из вызова Ajax?


EDITED 03/04/2009 15:05


Спасибо всем за ваши ответы, но я думаю, что я недостаточно хорошо себя объяснил. Я достаточно знаю Firebug для базовой отладки, но моя проблема возникает, когда я извлекаю код в вызове Ajax, у которого есть проблема с ним. Скажем, у нас есть следующий HTML файл (вам понадобится прототип в той же папке, чтобы он работал правильно):

<!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" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<script>
function ajaxErrorTest()
{
    new Ajax.Request('data.json', {
           'method': 'get',
           'onSuccess': function(data){
           if(data.responseJSON.func)
           data.responseJSON.func();}});
}
</script>
<input type="button" value="test" onclick="ajaxErrorTest();" />
</body>
</html>

а затем содержимое файла data.json:

{'func':function(){console.log('loaded...');alert('hey');}}

Если вы загрузите страницу в браузере и нажмите кнопку "Тест" (и все будет хорошо), вы получите что-то в консоли и окно с предупреждением "hey". Теперь измените файл data.json на это:

{'func':function(){console.log('loaded...');alerts('hey');}}

... и снова нажмите кнопку "Тест" (нет необходимости перезагружать страницу;-) Вы получаете консольную линию, но нет окна предупреждения... и никаких ошибок!!! это те ошибки, которые я пытаюсь отлаживать.

4b9b3361

Ответ 1

Попробуйте щелкнуть по панели "Консоль" (это вкладка) и включить ее. Вы обнаружите, что любые HTTP-запросы будут обнаружены вместе с любой информацией, которую они содержат. Я использую это для просмотра любого JSON, хранящегося в запросе, а также любых ошибок (500/404/и т.д.).

Также имейте в виду, что вам нужно включить панель консоли для каждого домена. Обычно есть три подзаголовка: заголовки, столбцы и ответ. Я обычно использую вкладки post/response совсем немного, когда я отлаживаю свой AJAX.

Ответ 2

Возможно, вы захотите использовать вкладку Net и отфильтровать запросы только для XMLHttpRequests (XHR).

Дополнительные советы:

  • не стесняйтесь console.dir(yourObject) в своем коде или непосредственно на панели консоли. Это даст вам полное состояние и свойства вашего объекта.
  • проверьте свои HTTP-заголовки запроса/ответа; иногда это просто вопрос кодирования.
  • Если вы не знаете, какое событие/действие пользователя вызвало этот вызов XHR, вы можете добавить console.trace() прямо перед вашим AJAX вызов. Таким образом вы получите полный стек вызовов.

Изменить:

Код, выполненный в другом контексте

Единственный способ, которым я придумал, - это окружение вашего кода с помощью (уродливого) try/catch. Я предполагаю, потому что код выполняется в другом javascript контексте

<script>
function ajaxErrorTest()
{
    new Ajax.Request('data.json', {
           'method': 'get',
           'onSuccess': function(data){

           try{
             if(data.responseJSON.func)
             data.responseJSON.func();}});
           } catch (err) {
             console.dir(err);
           }
}
</script>

В этом коде содержится подробное сообщение об ошибке:

ReferenceError: alerts is not defined

Я действительно сомневаюсь, что изменение контекста выполнения решит проблему. Я не знаю, как это с прототипом, но с jquery, это можно сделать легко:

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
    $(this).addClass("done");
  }
});

Ответ 3

Я не уверен, что эта проблема связана с фактическим JSON, который извлекается. Можете ли вы попробовать выполнить ошибку непосредственно в обработчике onSuccess и посмотреть, отображается ли она в консоли Firebug? Что-то вроде этого:

onSuccess: function() { alerts('hey'); }

Если это так, то эта проблема должна быть исправлена ​​ в Firebug 1.7.

Ответ 4

Я бы использовал комбинацию вкладок net/console в firefox.

Скопируйте json-результаты из вкладки Net в Firefox.

Затем вставьте результаты в переменную в консоли и попробуйте выполнить функцию нарушения.

В этом случае я вставил это:

var x = {'func':function(){console.log('loaded...');alerts('hey');}}
x.func();

Когда я запускаю это, firebug дает мне эту ошибку. ReferenceError: предупреждения не определены

Ответ 5

Как уже упоминалось, просмотрите JSON/Javascript, возвращенный расширением URL AJAX на вкладке Консоль.

Затем, если вы скопируете это на панель run/eval вкладки Console (там стрелка вверх/вниз в правом нижнем углу, щелчок вверх изменит ее в текстовое поле справа, щелчок вниз дает одиночный линия работает по дну).

Если ваш вызов Ajax возвращает: function(){alert("hello")}

Затем вы можете использовать что-то вроде следующего:

x = eval('function(){alert("hello")}')
x();

Это позволит вам выполнить возвращенный ajax.

Для отладки с точками останова используйте HTML-представление для создания тега (используя HTML-представление Firebug), а затем просто вставьте код в функцию внутри этого тега. Затем вы можете установить точки останова и запустить его, вызывая предыдущую функцию из панели запуска /eval.

Если это хорошо работает, то, очевидно, есть ошибка вне вашего контроля, но вы можете просто обойти это, отправив json обратно как текст /plain, назначив его переменной, а затем оценив ее.

Ответ 6

Это просто, я всегда использую FIDDLER для отладки моих вызовов ajax.

Fiddler - это прокси-сервер для веб-отладки, который регистрирует весь трафик HTTP (S) между вашим компьютера и Интернета. обманщик позволяет вам проверять все HTTP (S) трафик, установить точки останова и "скрипку", с входящими или исходящими данными. Fiddler включает мощную подсистема сценариев на основе событий и может быть расширена с помощью любого .NET. язык.

Ответ 7

Я использую HTTP-прокси-отладчик под названием fiddler, который всегда отлично работал для отладки моих проблем AJAX. Он отображает все HTTP-запросы и ответы для просмотра. Его свободно доступно из http://www.fiddlertool.com/

Ответ 8

ошибка, которую вы пытаетесь отладить, довольно заметна на встроенной консоли firefox. это: "инструменты" - "консоль ошибок"
конечно, вы видите его после него, но с неправильным номером строки (бесконечное сходство)

Ответ 9

Я знаю, что конкретная проблема, упомянутая в сообщении, для firefox. Я приземлился на этой странице, когда googling вообще как отлаживать java script, который исходит от вызова AJAX, и я уверен, что многие другие будут.

В моем случае я возвращал HTML-код, в котором был тег script, если, например, была ошибка sytax в javascript, которая сходила с запроса AJAX в firebug, вы не получите никакого исключения или ошибок, Содержимое AJAX просто не будет отображаться.

В встроенном отладчике Google Chrome вы получите сообщение об ошибке, но вы не сможете выполнить код. Если вы не сделаете шаг, тогда вам понадобится сделать для этого фиктивную страницу.

Это лучшее, что мне удалось получить до сих пор.

Ответ 10

Когда вы используете динамический код библиотеки или javascript, который вы загрузили динамически, вы можете использовать фразу // @sourceURL = foo.js в начале вашего кода javascript, который foo.js является именем, которое его назначает. отладчик покажет его с этим именем. Это правда в хром, что я думаю в firebug. В этом случае вы можете разместить точку останова в динамически загружаемом javascript (или json) коде.

Ответ 11

Использовать "debbuger;" как строка кода, где вы хотите остановить выполнение. Таким образом, загруженный исходный код будет доступен в разделе источника вашего debbuger. Я точно знаю, что он работает на хроме.