web-dev-qa-db-ja.com

Firebugを使用したAjaxコードのデバッグ

Ajax呼び出しで返されたコードのデバッグにいくつか問題があります-具体的には、jsonで返された関数（Firefoxではエラーはトラップされません）-Internet Explorerでこれらの問題のデバッグを開始するまで（私はそれがVenkmanもこれらのエラーを検出しないため、Firefox関連の問題）Ajax呼び出しからjsonで返されたコードをデバッグする方法を知っていますか？

2009年3月4日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');}}

...そして[テスト]ボタンをもう一度クリックします（ページをリロードする必要はありません;-)コンソール行は表示されますが、アラートボックスは表示されません...エラーはありません!!!これは私がデバッグしようとしている種類のエラーです。

ajaxjsonfirebug
21
Erico Lendzian

「コンソール」パネル（タブ）をクリックして有効にしてみてください。 HTTPリクエストは、それらに含まれる情報とともにキャッチされることがわかります。これを使用して、リクエストに保存されているJSONとエラー（500/404/etc）を表示します。

また、ドメインごとにコンソールパネルを有効にする必要があることにも注意してください。通常、ヘッダー、投稿、応答の3つのサブタブがあります。 AJAXをデバッグするときは、通常、投稿/応答タブをかなり使用します。

18
Bryan A

[ネット]タブ を使用して、XMLHttpRequests（XHR）のみのリクエストをフィルタリングすることをお勧めします。

追加のヒント：

  • コード内またはコンソールパネルで直接 console.dir（yourObject） に躊躇しないでください。これにより、オブジェクトの完全な状態とプロパティが得られます。
  • リクエスト/レスポンスのHTTPヘッダーを確認してください。時々それは単にエンコーディングの問題です。
  • このXHR呼び出しをトリガーしたイベント/ユーザーアクションがわからない場合は、AJAX呼び出しの直前に console.trace（） を追加できます。こうすることで完全なコールスタックを取得します。

編集：

別のコンテキストで実行されたコード

私が思いついた唯一の方法は、コードを（醜い）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");
  }
});
7
Brian Clozel

この問題に、取得される実際のJSONが関係しているかどうかはわかりません。 onSuccessハンドラーで直接エラーをスローして、Firebugコンソールに表示されるかどうかを確認できますか？このようなもの：

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

この場合、Firebug 1.7ではこの問題は 修正済み であるはずです。

1
Jeffery To

Firefoxのネット/コンソールタブを組み合わせて使用​​します。

Firefoxの[ネット]タブからjsonの結果をコピーします。

次に、結果をコンソールの変数に貼り付けて、問題のある関数を実行してみてください。

この場合、私はこれを貼り付けました：

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

これを実行すると、firebugでこのエラーが発生します。 ReferenceError：アラートが定義されていません

1
Jeff Davis

他の人が言及しているように、[コンソール]タブでAJAX URLを展開して返されるJSON/Javascriptを表示します。

次に、それを[コンソール]タブの実行/評価パネルにコピーすると（右下に上/下矢印があり、上をクリックすると右側のテキスト領域に変わります。下をクリックすると、1行が実行されます。ボトム）。

Ajax呼び出しが戻った場合：function(){alert("hello")}

次に、次のようなものを使用できます。

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

これにより、返されたajaxを実行できます。

ブレークポイントを使用してデバッグするには、HTMLビューを使用してタグを作成し（FirebugのHTMLビューを使用）、コードをこのタグ内の関数に貼り付けるだけです。次に、run '/ evalパネルから前の関数を呼び出すことにより、ブレークポイントを設定して起動できます。

これが正常に機能する場合は、明らかに制御できないバグがありますが、jsonをtext/plainとして返送し、変数に割り当ててから評価することで、簡単に回避できます。

1
earcam

これは単純です。私は常に [〜＃〜] fiddler [〜＃〜] を使用してajax呼び出しをデバッグします。

Fiddlerは、コンピューターとインターネット間のすべてのHTTP（S）トラフィックをログに記録するWebデバッグプロキシです。 Fiddlerを使用すると、すべてのHTTP（S）トラフィックを検査し、ブレークポイントを設定し、着信データまたは発信データを「いじる」ことができます。 Fiddlerには、強力なイベントベースのスクリプトサブシステムが含まれており、任意の.NET言語を使用して拡張できます。

1
Dementic

デバッグしようとしているエラーは、ネイティブのFirefoxコンソールでかなり目に見えます。それは：「ツール」-「エラーコンソール」
もちろん、発生した後に表示されますが、行番号が間違っています（無限の類似性）

0
Luis Siquot

私はfiddlerと呼ばれるHTTPプロキシデバッガーを使用しています。これは私のAJAX問題をデバッグするために常に正常に機能します。すべてのHTTP要求と応答をキャプチャして表示します。 http： //www.fiddlertool.com/

0
Gavin

動的にロードしたライブラリまたはJavaScriptコードを使用する場合は、JavaScriptコードの先頭に// @ sourceURL = foo.jsというフレーズを使用できますfoo.jsはそれを割り当てる名前です。デバッガーはその名前でそれを表示します。これは、firebugで私が考えるchromeに当てはまります。この場合、動的にロードされるjavascript（またはjson）コードにブレークポイントを設定できます。

0
Farshid Saberi

投稿で言及されている特定の問題はFirefoxに関するものであることを私は知っています。 Java AJAX呼び出しから来るスクリプトをデバッグする方法を一般的にグーグルで調べているときにこのページにたどり着きました。他の多くの人もそうするでしょう。

私の場合、スクリプトタグが含まれているHTMLを返していました。たとえば、FirebugのAJAXリクエストから発生したjavascriptにsytaxエラーがあった場合、何も表示されません。例外、またはエラー。AJAXコンテンツはレンダリングされません。

グーグルchromeビルドされたデバッガーでは、発生したエラーが発生しますが、コードをステップスルーすることはできません。ステップスルーしたくない場合は、そのためのダミーページを作成する必要があります。

それは私がこれまでにそれを得ることができた中で最高です。

0
Gunner