web-dev-qa-db-ja.com

Ajax呼び出しからのHTML応答をChrome開発者ツール？

そのため、JavaScriptで、Webサイトのサービスにajax呼び出しを行っています。おっと、何かが失敗します。問題ない。 Firefoxで行うことは次のとおりです。

  1. Firebugコンソールを開きます
  2. 失敗したAjax呼び出しを見つけ、+記号をクリックして詳細を表示します。
  3. 応答タブには生のHTMLがあります。誰がそれをすべて読みたいですか？ HTMLタブをクリックします。
  4. ああ、Djangoによって返される適切にフォーマットされたHTMLは、ゼロ除算エラーを示しています。

これが私が現在Chromeで行っていることです：

  1. Ctrl + Shift + Jを押して、開発ツールを開きます
  2. リソースに移動
  3. Ajax通話まで下にスクロールして、
  4. もう一度、生のHTMLが表示されます。それでもすべてを読みたくはありませんが、HTMLタブがないため、コピーしてテキストエディタに貼り付けます。
  5. HTMLファイルを保存します
  6. ブラウザでhtmlファイルを開いて、Djangoから返されたエラーHTMLを読み取れるようにします

質問に移ります。生のhtmlをコピーしてテキストエディタに貼り付けることなく、ブラウザでレンダリングされたAjax呼び出しからのHTML応答を表示する方法はありますか？

javascriptajaxfirebuggoogle-chrome-devtools
18
Eric Palakovich Carr

いいえ、現在のところ方法はありません。 [開発者ツール]> [リソース]> [XHRタブ]に移動し、リソース（左側）をクリックすると、2つのタブが表示されます。最初のものはヘッダー（生）とコンテンツも生です。

6
Mohamed Mansour

ちなみに、Firebug LiteにはNETパネルがありませんありませんが、ありますFirebugと同じルックアンドフィールのXHRウォッチャー機能があります。もちろん、FirebugLiteはChrome開発者ツールと比較して非常に制限されていますが、CSS編集やXHR検査などの特定のタスクでは、FirebugLiteは非常にうまく機能します。

現在の安定バージョンには、HTTPヘッダー、GETおよびPOST変数、および応答テキストが表示されます。ただし、次のバージョン1.3.1（間もなくリリースされる予定）には、HTMLビューアー、XMLビューアーが含まれます便利なJSONビューア（要求データと応答データの両方）。

この機能は次のリリース1.3.1b2（おそらく、1.3.1バージョンの最後のベータバージョン）に含まれる予定ですが、今すぐ実行したい場合は、 開発者チャネル を使用できます。

4
Pedro Simonetti

はい、最も簡単な方法は、開発者ツールの[ネットワーク]タブを使用することです。

  1. Ctrl + Shift + Iを押して開発者ツールを開きます（または上部のメニューバーを使用します：[表示]-> [開発者]-> [開発者ツール]）。
  2. 「ネットワーク」タブに移動します
  3. 現在のページを更新します
  4. 左側のAjax呼び出しまで下にスクロールして、
  5. メインメニューにはいくつかのタブが表示されます（通常はデフォルトでプレビューになります）。 「ヘッダー」をクリックすると、リクエストとレスポンスのヘッダー情報が表示されます。
2
Ry Robinson

Firebugのコンソールタブで要求されたリンクを右クリックします。次に、右クリックして、[新しいタブで応答を開く]を選択します。 HTMLとして表示されます。

2
Tinh Dang

[ネットワーク]> [XHR]> [応答]タブに右クリックの[名前を付けて保存]機能がないことに気付いたので...新しい自動ホットキースクリプトを作成しました:(応答テキスト上でマウスの中ボタンをクリックします）

MButton::
MouseClick, left
ClipSaved := ClipboardAll
Send, ^a^c
sleep, 500
FileName := "C:\Users\David\Desktop\temp_xhr_response.html"
file := FileOpen(FileName, "w")
if !IsObject(file)
{
MsgBox Can't open "%FileName%" for writing.
return
}
StringGetPos, pos, Clipboard, HeadersPreviewResponseCookiesTiming
if pos = -1
{
pos = 0 
}
TestString := SubStr(Clipboard, pos+38)
file.Write(TestString)
file.Close()
Run, open "C:\Users\David\Desktop\temp_xhr_response.html"
Clipboard = %ClipSaved%
sleep, 1000
FileDelete, C:\Users\David\Desktop\temp_xhr_response.html
return
1
prograhammer

autohotkey をダウンロードして、ブラウザウィンドウでXHR応答を確認するために必要な手順を実行するための簡単なマクロを作成できます...

これが私が書いたスクリプトです autohotkey Chromeの開発ツール>ネットワークタブの応答ウィンドウ内でマウスの中ボタン（マウスホイールボタン）を押すと、次の手順が実行されます。

  1. 右クリック... [名前を付けて保存]をクリックします
  2. ファイルの場所をファイルプロンプトに貼り付け、Enterキーを押します
  3. ファイルを開きます（デフォルトのブラウザを使用）

  4. ファイルを削除します

    MButton::
MouseClick, right
MouseGetPos, xpos, ypos
xpos := xpos + 5
ypos := ypos + 5
MouseMove, xpos, ypos
MouseClick, left
Sleep, 500
ClipSaved := ClipboardAll
Clipboard := "C:\Users\David\Desktop\temp_xhr_response.html"
Send, ^v  {Enter}
Clipboard = %ClipSaved%
sleep, 500
Run, open "C:\Users\David\Desktop\temp_xhr_response.html"
sleep, 1000
FileDelete, C:\Users\David\Desktop\temp_xhr_response.html
return

これは、GoogleがHTML応答をより見やすくするためのアップデートをリリースするまであなたを保持するはずです。私はもうFFのFireBugを使用していません、それは信じられないほど遅くなりました！

0
prograhammer