Comment inspectez-vous l'inspecteur Web en chrome?

Question

Selon Google, ce que vous être accompli en visitant "chrome-devtools://devtools/devtools.html" dans Chrome, mais maintenant la visite de cette page dans la version stable de Chrome (ou Canaries), montre à 99% dépouillé version de l'inspecteur.

Réitérer mon "titre" c'est en référence à "l'inspection" l'inspecteur. Pas seulement de la visite d'une page web normale. C'est une capture d'écran: http://cl.ly/JFzc

Et bien que je ne pense pas qu'il est nécessaire de connaître pour résoudre le problème, j'ai"m de l'inspection de l'inspecteur afin que je puisse le style comme discuté par Paul Irish et ici: http://darcyclarke.me/design/skin-your-chrome-inspector/

Answer 1

Suivez ces étapes faciles!

1. Appuyez sur Commande+Option+i (Ctrl+Maj+i sur Windows) pour ouvrir DevTools.
2. Assurez-vous que les outils de développement sont détachés dans une nouvelle fenêtre. Vous pouvez avoir à cliquer ou à long maintenez l'icône d'amarrage en bas à gauche:
3. Appuyez sur Commande+Option+j'ai de nouveau sur cette nouvelle fenêtre.
4. Qui va ouvrir les DevTools sur les DevTools.
   • Vous pouvez rattacher la page DevTools si vous le souhaitez.
5. Si c'est pas déjà fait, sélectionnez les Éléments - c'est la première icône en haut de l'inspecteur.

---

Un peu au-delà de la portée de votre question, mais encore valide à comprendre pourquoi vous êtes en train de vivre votre problème peut être trouvée par comprendre comment les Outils de développement Chrome: Débogage à Distance fonctionne.

Answer 2

1. Ouvrez google chrome://inspecter
2. Ouvrez l'inspecteur sur cette page (cmd + alt + i)
3. Faites défiler vers le bas de la page, sous l'autre en-tête, cliquez sur le inspecter lien

L'URL dans la section devrait ressembler à quelque chose comme ceci: chrome devtools://devtools/devtools.le html?amarré=true&à quai=bas&toolbarColor=rgba(230,230,230,1...

EDIT: ils ont cru jusqu'au chrome:inspecter la page, donc vous devez cliquez sur les Autres d'en-tête sur la gauche pour obtenir que cela fonctionne maintenant.

Answer 3

Je viens de faire ce travail. La clé est que vous avez besoin de lancer chrome dans " Débogage à Distance mode.

sur OSX, ouvrez une fenêtre de terminal et exécutez la commande suivante:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Sur windows, Son

chrome.exe --remote-debugging-port=9222

(mieux windows les instructions peuvent être trouvées ici: https://developers.google.com/chrome-developer-tools/docs/remote-debugging#remote)

Cela va lancer une instance de chrome, qui enverra les messages de débogage d'un serveur web local sur le port 9222.

Si vous accédez à ce service web, il vous donnera la possibilité d'utiliser l'inspecteur d'inspecter le chrome de la fenêtre qui est en cours d'exécution. Puisque nous voulons inspecter l'inspecteur, nous avons besoin de commencer un inspecteur de la fenêtre (Comme ci-dessus, Utiliser les touches de raccourci; pour Mac c'est Commande+option+i.)

Maintenant, allez de l'avant et de naviguer à

http://localhost:9222

Il vous présentera une liste de windows à afficher dans le débogueur. Sélectionnez la fenêtre qui commence par "Outils de développement" et vous serez en mesure d'inspecter les css pour l'inspecteur.

Difficile de voir dans l'image ci-dessous, mais sur la gauche j'ai mon chrome fenêtre pointant vers le débogueur distant, ce qui témoigne de la barre d'outils des étiquettes. Sur la droite, vous voyez elle est illuminée par l'info-bulle comme si nous étions des débogage d'une page web.

Answer 4

Il y A quelques semaines quelqu'un l'a souligné dans stackoverflow est "javascript" tchat. Tout d'abord, et, très important, assurez-vous que l'inspecteur ne l'est pas à partir de la fenêtre de votre navigateur. Ensuite, c'est juste une question d'ouverture d'une fenêtre de l'inspecteur, puis l'inspection de la fenêtre. Sous windows, c'est CtrlMajj' (Edit: je l'ai dit, CtrlMajj' , mais qui apporte de la console inspection de la console... vous devriez être capable de naviguer d'avant en arrière.) pour le raccourci clavier. (D'autres combos clavier pour d'autres options et de Systèmes d'exploitation ici et ici.) Juste le faire deux fois et vous êtes bon.

Edit: ok, vous êtes probablement confus quant à détacher de la fenêtre. C'est ce que vous souhaitez, cliquez s'il est ancré..

Edit II: je ne suis pas tout à fait sûr de savoir pourquoi vous ne pouvez pas inspecter. JDavis réponse est cohérente avec les Google Docs pour les ordinateurs Apple. Si vous êtes sous Linux, il semble être le même que celui de Windows. Vous censés frapper l'inspecteur combinaison de touche, tandis que l'accent est mis sur la fenêtre de l'inspecteur.