Просмотр ответа HTML на вызов Ajax через инструменты разработчика Chrome?

Итак, в моем javascript я делаю ajax-вызов услуги на моем сайте. Упс, что-то не получается. Нет проблем. Вот что я сделал бы в Firefox:

  • Откройте консоль firebug
  • Найдите неудачный вызов Ajax и нажмите знак +, чтобы узнать больше информации.
  • На вкладке ответа есть необработанный HTML. Кто хочет все это прочитать? Я нажимаю вкладку HTML.
  • Ах, хорошо отформатированный HTML, возвращаемый Django, показывает мое деление на нулевую ошибку.

Теперь, что я сейчас делаю в Chrome:

  • Ctrl + Shift + J, чтобы открыть Инструменты разработчика
  • Перейдите в раздел Ресурсы
  • Прокрутите вниз до вызова Ajax и нажмите
  • Еще раз, я вижу необработанный HTML. Все еще не хочу читать все это, но так как нет вкладки HTML, я копирую и вставляю в текстовый редактор.
  • Сохранить html файл
  • Откройте html файл в браузере, чтобы я мог прочитать HTML-код ошибки, возвращенный Django

Так на вопрос. Есть ли в любом случае просмотр HTML-ответа из вызова Ajax, отображаемого в браузере, без необходимости копировать и вставлять необработанный html в текстовый редактор?

Ответ 1

Нет, в настоящее время нет способа. Когда вы перейдете в Инструменты разработчикa > Ресурсы > вкладка XHR > И нажмите на свой ресурс (слева), вы увидите две вкладки. Первый - Headers (который является сырым) и Content, который также является сырым.

Ответ 2

Просто для вашей информации, в то время как Firebug Lite имеет не панель NET, в ней есть функция отслеживания XHR с тем же внешним видом Firebug. Конечно, Firebug Lite очень ограничен по сравнению с Chrome Developer Tools, но для некоторых конкретных задач, таких как редактирование CSS или проверка XHR, Firebug Lite делает работу очень хорошо.

Текущая стабильная версия показывает вам заголовки HTTP, GET и POST, а также текст ответа. Но следующая версия 1.3.1 (которая будет выпущена в ближайшее время) включает в себя средство просмотра HTML, средство просмотра XML и удобный просмотрщик JSON (для данных запроса и ответа).

Эта функция будет включена в следующую версию 1.3.1b2 (возможно, последнюю бета-версию для версии 1.3.1), но если вы хотите, чтобы она работала прямо сейчас, вы можете использовать канал разработчика.

Ответ 3

Да, самый простой способ - использовать вкладку Сеть в Инструментах разработчика.

  • Ctrl + Shift + I, чтобы открыть Инструменты разработчика (или используйте панель меню вверху: "Вид → Разработчик → Инструменты разработчика" )
  • Перейдите на вкладку "Сеть".
  • Обновить текущую страницу
  • Прокрутите вниз до вызова Ajax слева и нажмите
  • В главном меню будут показаны несколько вкладок (обычно по умолчанию - предварительный просмотр). Нажмите "Заголовки", и вы должны увидеть информацию заголовка запроса и ответа.

Ответ 4

Так как я заметил, что на вкладке "Сеть" > "XHR" отклика правой кнопкой мыши "сохранить как" нет, я создал новую автоматическую горячую клавишу script: (нажмите среднюю кнопку мыши в тексте ответа )

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

Ответ 5

Щелкните правой кнопкой мыши по запрошенной ссылке на вкладке консоли в firebug. Затем щелкните правой кнопкой мыши и выберите открытый ответ на новой вкладке. Вы увидите его как HTML.

Ответ 6

Вы можете скачать autohotkey и написать быстрый макрос, чтобы выполнить шаги, необходимые для просмотра ответа XHR в окне браузера...

Здесь script я написал в autohotkey, что если вы нажмете среднюю кнопку мыши (кнопку мыши) внутри этого окна ответа в Chrome Developer Tools > Network tab, он выполнит следующие действия:

  • Щелкните правой кнопкой мыши... нажмите Сохранить как
  • Вставьте расположение файла в приглашение файла и нажмите Enter
  • Откройте файл (использует браузер по умолчанию)
  • Удалить файл

    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, он становится невероятно медленным!