Отладка кода Ajax с помощью Firebug - PullRequest
Новая
       25

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

21 голосов
/ 03 марта 2009

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

ИЗД. 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');}}

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

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

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

Ответы [ 11 ]

18 голосов
/ 03 марта 2009

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

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

7 голосов
/ 03 марта 2009

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

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

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

Edit:

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

Единственный способ, которым я придумал, - окружить ваш код (некрасивым) 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");
  }
});
1 голос
/ 12 мая 2011

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

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

1 голос
/ 12 мая 2011

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

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

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

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

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

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

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

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

1 голос
/ 12 мая 2011

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

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

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

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

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

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

1 голос
/ 11 мая 2011

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

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

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

0 голосов
/ 02 августа 2013

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

0 голосов
/ 16 июля 2013

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

0 голосов
/ 21 февраля 2012

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

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

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

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

0 голосов
/ 12 мая 2011

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

Страница:
...