2013-06-27 3 views
2

Cela semble être très simple, mais ça me fait battre. Je veux être capable d'explorer l'arborescence DOM (visuellement) dans la console firebug, de la même manière que je peux explorer la page html. Lorsque je clique sur le panneau DOM (toutes les options étant réglées sur 'affichage'), je peux voir mes objets jQuery et Javascript. (Ils sont mis en surbrillance en haut de la liste), mais je ne peux pas voir mes nœuds de page (par exemple, header div, pied de page div, éléments h1).Comment puis-je traverser mon DOM HTML dans firebug?

Il existe d'autres entrées telles que window, document, etc, qui semblent prometteuses mais ne semblent pas m'emmener partout (sauf dans une boucle).

Si je sélectionne un élément dans le panneau HTML, alors sur le côté droit de l'écran, sélectionnez DOM, il est indiqué qu'il n'y a aucune propriété à afficher pour cet objet. Cela ne me semble pas non plus.

Qu'est-ce qui me manque?

+0

Dans firebug, utilisez l'onglet HTML pour voir l'arborescence DOM – jeff

+0

Jeff, qui ne me donne accès qu'aux informations sur le prototype. Si je regarde dans une boîte de sélection, par exemple, je veux savoir quelle est sa valeur actuelle (dans le DOM), pas que c'est un HTMLSelectElement. Est-ce que je manque quelque chose? –

+0

Peut-être que l'onglet DOM dans le panneau de droite vous donnera les informations dont vous avez besoin? – jeff

Répondre

2

Lorsque vous accédez au panneau DOM, vous voyez par défaut les propriétés de l'objet global window. Pour trouver vos nœuds HTML ici, vous devez choisir document de window s descendants, puis head ou body - puis dans chaque niveau, vous pouvez développer plus loin childNodes ou .

Ensuite, lorsque vous sélectionnez quelque chose dans le panneau HTML, vous pouvez faire un clic droit et choisissez "Inspecter dans le panneau DOM".

Last but not least, quand vous avez un article, disons textarea ou input sélectionné dans le panneau HTML, vous pouvez vous y référer par $0 dans Firebug. Ensuite, vous pouvez inspecter toutes ses propriétés DOM en écrivant $0.value etc. Attention au bouton "Afficher la ligne de commande" à gauche des noms des panneaux, ce qui permet de voir la console et le panneau HTML en même temps.

Aussi, vous pouvez simplement aller au panneau DOM et utiliser le bouton "Inspecter l'élément" de Firebug pour cibler sur la page, en utilisant la souris, l'élément spécifique que vous voulez voir dans le panneau DOM.

+0

Je ne comprends pas pourquoi, mais hier je ne pouvais pas aller de fenêtre en document sans être redirigé vers la fenêtre (et se faire prendre dans une boucle). Aujourd'hui, cependant, il semble que tout va bien. Merci! –

2

Accédez au bouton DOM dans Firebug. Dans votre zone de recherche, tapez 'document'. Appuyez sur le symbole '+' et ouvrez le. Cliquez sur "body", et ainsi de suite. Tout commence à 'window'.

Conseil:

La plupart du temps window est implicite, de sorte que vous ne devez pas dire window.document.getElementById();, ou même window.onload = function(){*stuff here*/}. Vous devez dire window.onload si vos tests pour voir si elle existe, cependant. document est une propriété de window et possède une série de ses propres propriétés et méthodes.

+0

Salut Jason, je n'ai pas d'entrée "corps", c'est le problème ... –

Questions connexes