21

Internet Explorer でこれらの問題のデバッグを開始するまで、Ajax 呼び出しで返されたコードをデバッグする際にいくつかの問題がありました。具体的には、json で返された関数 (Firefox ではエラーがトラップされません)。 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');}}

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

4

11 に答える 11

18

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

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

于 2009-03-03T15:27:39.393 に答える
7

おそらく、[ネット] タブを使用して、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");
  }
});
于 2009-03-03T16:04:06.607 に答える
1

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

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

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

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

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

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

于 2011-05-11T22:52:08.840 に答える
1

これは簡単です。私は常に FIDDLER を使用し て ajax 呼び出しをデバッグします。

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

于 2011-05-12T13:15:04.003 に答える
1

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

次に、それをコンソールタブの実行/評価パネルにコピーすると（右下に上向き/下向きの矢印があります。上をクリックすると右側のテキストエリアに変わります。下をクリックすると、それに沿って走る単一の行が表示されますボトム）。

Ajax 呼び出しが返された場合:function(){alert("hello")}

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

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

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

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

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

于 2011-05-12T12:29:22.590 に答える
0

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

于 2013-08-02T01:39:46.433 に答える
0

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

私の場合、script タグを含む HTML を返していました。たとえば、firebug の AJAX リクエストから発生した javascript に構文エラーがあった場合、例外やエラーは発生しません。AJAX コンテンツはレンダリングされません。

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

それは私がこれまでに手に入れることができた最高のものです。

于 2012-02-21T11:42:08.850 に答える
0

AJAX の問題をデバッグするために常に正常に機能する fiddler と呼ばれる HTTP プロキシ デバッガーを使用しています。表示できるように、すべての HTTP 要求と応答をキャプチャします。http://www.fiddlertool.com/から無料で入手できます。

于 2009-03-03T15:26:06.930 に答える
0

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

于 2011-05-12T13:59:56.003 に答える
-1

「デバッガー」を使用します。実行を停止したいコード行として。このようにして、ロードされたソース コードがデバッガーのソース セクションで利用できるようになります。クロムで動作することは確かです。

于 2013-07-16T06:48:40.017 に答える