عرض استجابة HTML من Ajax Call من خلال أدوات مطور Chrome؟

Question

لذلك في JavaScript الخاص بي ، أقوم بإجراء مكالمة Ajax إلى خدمة على موقع الويب الخاص بي. يصيح ، شيء ما فشل. لا مشكلة. هذا ما سأفعله في Firefox:

1. افتح وحدة تحكم Firebug
2. ابحث عن مكالمة Ajax الفاشلة وانقر فوق علامة + لرؤية المزيد من المعلومات.
3. علامة تبويب الاستجابة لها HTML الخام. من يريد قراءة كل ذلك؟ أنا النقر فوق علامة التبويب HTML.
4. آه ، فإن HTML المنسقة بشكل جيد تم إرجاعه بواسطة Django يعرض الفجوة الخاصة بي على Zero Error.

الآن هذا ما أفعله حاليًا في Chrome:

1. Ctrl+Shift+J لفتح أدوات المطور
2. اذهب إلى الموارد
3. قم بالتمرير لأسفل إلى مكالمة Ajax وانقر
4. مرة أخرى ، أرى HTML الخام. ما زلت لا ترغب في قراءة كل ذلك ، ولكن نظرًا لعدم وجود علامة تبويب HTML أقوم بنسخها وألصقها في محرر نصوص.
5. حفظ ملف HTML
6. افتح ملف HTML في المتصفح حتى أتمكن من قراءة الخطأ الذي تم إرجاع HTML بواسطة Django

حتى على السؤال. هل هناك على أي حال لعرض استجابة HTML من مكالمة AJAX التي تم تقديمها في المتصفح دون الحاجة إلى نسخ ولصق HTML الخام إلى محرر نصية؟

Answer 1

كلا ، لا يوجد حاليا. عندما تحصل على أدوات المطورين> الموارد> علامة تبويب XHR> وانقر فوق موردك (على اليسار) ، ترى علامتين. الأول هو الرؤوس (وهو الخام) والمحتوى الذي هو خام كذلك.

Answer 2

فقط للحصول على معلوماتك ، بينما يعمل Firebug Lite ليس لديك لوحة صافية ، هو يفعل احصل على ميزة مراقب XHR مع نفس المظهر والشعور بإطلاق النار. بطبيعة الحال ، فإن Firebug Lite محدود للغاية مقارنة بأدوات مطور Chrome ، ولكن بالنسبة لبعض المهام المحددة مثل تحرير CSS أو فحص XHR ، يقوم Firebug Lite بعمل جيد للغاية.

يوضح لك الإصدار المستقر الحالي رؤوس HTTP ، وحصل على المتغيرات ونشرها ، ونص الاستجابة. لكن الإصدار التالي 1.3.1 (الذي سيتم إصداره قريبًا) يتضمن عارض HTML ومشاهد XML ومشاهد JSON المتانعة (لكل من بيانات الطلب والاستجابة).

سيتم تضمين هذه الميزة في الإصدار التالي 1.3.1b2 (ربما آخر إصدار تجريبي للإصدار 1.3.1) ، ولكن إذا كنت تريد رؤيته يعمل الآن قناة المطور.

Answer 3

نعم ، أسهل طريقة هي استخدام علامة تبويب الشبكة في أدوات المطور.

1. Ctrl+Shift+I لفتح أدوات المطورين (أو استخدام شريط القائمة في الأعلى: "عرض -> مطور -> أدوات المطورين")
2. انتقل إلى علامة التبويب "الشبكة"
3. تحديث صفحتك الحالية
4. قم بالتمرير لأسفل إلى مكالمة Ajax على اليسار وانقر فوق
5. ستعرض القائمة الرئيسية عدة علامات تبويب (عادة ما تتخلف عن المعاينة). انقر على "الرؤوس" ويجب أن ترى معلومات رأس الطلب والاستجابة.

Answer 4

انقر بزر الماوس الأيمن على الرابط المطلوب في علامة تبويب وحدة التحكم في Firebug. ثم انقر بزر الماوس الأيمن واختر Open Response في علامة تبويب جديدة. سترى ذلك كـ HTML.

Answer 5

نظرًا لأنني لاحظت النقر بزر الماوس الأيمن على "حفظ AS" لم تعد هناك على الشبكة> XHR> استجابة ... لقد قمت بإنشاء برنامج نصي Auto-Hotkey جديد: (انقر فوق زر الماوس الأوسط على نص الاستجابة)

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

Answer 6

يمكنك التنزيل AutoHotkey واكتب ماكرو سريع للقيام بالخطوات اللازمة لرؤية استجابة XHR في نافذة المتصفح ...

هذا نص كتبت فيه AutoHotkey إذا ضغطت على زر الماوس الأوسط (زر Mousewheel) داخل نافذة الاستجابة هذه في علامة تبويب Network الخاصة بـ Chrome ، فسيؤدي ذلك هذه الخطوات:

1. انقر بزر الماوس الأيمن ... انقر فوق حفظ AS
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
   

هذا يجب أن يحتجزك على TIL Google يصدر تحديثًا لعرض أفضل لاستجابات HTML. لم أعد أستخدم FIRBUG FIF ، فقد أصبح بطيئًا بشكل لا يصدق!