Affichage d'une réponse HTML d'appel Ajax grâce à des outils de développement Google Chrome?

StackOverflow https://stackoverflow.com/questions/3181287

Question

Donc, dans mon javascript Je fais un appel ajax à un service sur mon site. Whoops, quelque chose échoue. Aucun problème. Voici ce que je ferais dans Firefox:

  1. Ouvrez la console Firebug
  2. Trouver l'appel Ajax a échoué et cliquez sur le signe + pour voir plus d'informations.
  3. L'onglet réponse a le HTML brut. Qui veut lire tout cela? Je clique sur l'onglet HTML.
  4. Ah, le HTML bien formaté retourné par Django montre ma division par zéro erreur.

Maintenant, voici ce que je fais actuellement dans Chrome:

  1. Ctrl + Maj + J pour ouvrir les outils de développement
  2. Aller aux ressources
  3. Faites défiler jusqu'à l'appel Ajax, puis cliquez sur
  4. Encore une fois, je vois HTML brut. Ne veulent toujours pas lire tout cela, mais comme il n'y a pas un onglet HTML je copier et coller dans un éditeur de texte.
  5. Enregistrer le fichier html
  6. Ouvrir le fichier html dans le navigateur pour que je puisse lire le code HTML d'erreur renvoyé par Django

Alors à la question. Y at-il quand même pour voir la réponse HTML à partir d'un appel Ajax rendu dans le navigateur sans avoir à copier et coller le code HTML brut à un éditeur de texte?

Était-ce utile?

La solution

Non, il n'y a actuellement aucun moyen. Lorsque vous goto Developer Tools> Ressources> XHR Tab> et cliquez sur votre ressource (à gauche), vous voyez deux onglets. La première étant de coupe (qui est crue), et qui est contenu brut ainsi.

Autres conseils

Pour votre information, alors que Firebug Lite fait pas un panneau NET, il fait ont une fonction de veilleur XHR avec le même aspect et la convivialité de Firebug. Bien sûr, Firebug Lite est très limité par rapport aux outils de développement Chrome, mais pour certaines tâches spécifiques comme l'édition CSS ou inspection XHR, Firebug Lite fait le travail très bien.

Les émissions actuelles de version stable vous les en-têtes HTTP, GET et POST les variables, et le texte de réponse. Mais la prochaine version 1.3.1 (qui sortira bientôt) comprend la visionneuse HTML, visionneuse XML et le spectateur JSON à portée de main (pour la demande et les données de réponse).

Cette fonction sera incluse dans la prochaine version 1.3.1b2 (probablement la dernière version bêta pour la version 1.3.1), mais si vous voulez le voir courir à droite, vous pouvez maintenant utiliser le canal de révélateur .

Oui, le plus simple est d'utiliser l'onglet Réseau dans les outils de développement.

  1. Ctrl + Maj + I pour ouvrir les outils de développement (ou utilisez la barre de menu en haut: "Vue -> Développeur -> Outils de développement")
  2. Allez à l'onglet "Réseau"
  3. Actualiser votre page actuelle
  4. Faites défiler jusqu'à l'appel Ajax à gauche, puis cliquez sur
  5. Le menu principal affichera plusieurs onglets (par défaut habituellement Preview). Cliquez sur « têtes » et vous devriez voir les informations en-tête et demande de réponse.

Faites un clic droit sur le lien demandé dans l'onglet console Firebug. Ensuite, faites un clic droit et choisissez réponse ouverte dans un nouvel onglet. Vous verrez comme HTML.

Depuis que je remarquai le clic droit « Enregistrer sous » capacité est pas plus longtemps sur l'onglet réponse> XHR> Réseau ... J'ai créé un nouveau script automatique raccourci clavier: (cliquez sur le bouton central de la souris sur le texte de réponse) 

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

vous pouvez télécharger autohotkey et d'écrire une macro rapide à faire les étapes nécessaires pour voir la réponse XHR dans un fenêtre du navigateur ...

Voici un script que j'ai écrit dans autohotkey que si vous appuyez sur le bouton central de la souris (bouton mousewheel) à l'intérieur que fenêtre de réponse dans les outils de développement de Chrome> onglet Réseau, il fera comme suit:

  1. Faites un clic droit ... cliquez sur Enregistrer sous
  2. Coller l'emplacement du fichier dans l'invite et appuyez sur Entrée de fichier
  3. Ouvrez le fichier (utilisations du navigateur par défaut)

  4. Supprimez le fichier 

    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

Cela devrait vous tenir sur jusqu'à Google publie une mise à jour pour une meilleure visualisation des réponses HTML. Je n'utilise pas plus Firebug FF, il est devenu incroyablement lent!

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top