web-dev-qa-db-fra.com

Comment inspectez-vous l'inspecteur Web dans Chrome?

Selon Google, cela doit être accompli en visitant "chrome-devtools: //devtools/devtools.html" dans Chrome mais maintenant en visitant cette page dans la version stable de Chrome (ou Canary), montre juste une version dépouillée à 99% de l'inspecteur.

Pour réitérer mon "titre", il s'agit de "inspecter" l'inspecteur. Pas seulement inspecter une page Web normale.

Et bien que je ne pense pas qu'il soit nécessaire de savoir pour résoudre le problème, j'inspecte l'inspecteur afin que je puisse le styliser comme discuté par Paul Irish et ici: http://darcyclarke.me/design/skin -votre-chrome-inspecteur /

google-chromegoogle-chrome-devtools
65
cchiera

Suivez ces étapes faciles!

  1. Presse Command+Option+i (Ctrl+Shift+i sous Windows) pour ouvrir DevTools.

  2. Assurez-vous que les outils de développement sont désamarrés dans une nouvelle fenêtre. Vous devrez peut-être déconnecter du menu: Undock from menu

  3. Presse Command+Option+i  encore sur cette nouvelle fenêtre.

  4. Cela ouvrira les DevTools sur les DevTools.
    • Vous pouvez redocker les DevTools de la page si vous le souhaitez.
  5. Si ce n'est pas déjà fait, sélectionnez É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 toujours valable pour comprendre pourquoi vous rencontrez votre problème peut être trouvé en comprenant comment Chrome Developer Tools: Remote Debugging fonctionne.

79
JDavis
  1. Chrome ouvert: // inspecter
  2. Ouvrez l'inspecteur sur cette page (cmd + alt + i)
  3. Faites défiler vers le bas de la page, sous la section Other cliquez sur le lien d'inspection

L'URL dans la section Other doit ressembler à ceci: chrome-devtools: //devtools/devtools.html? Docked = true & dockSide = bottom & toolbarColor = rgba (230,230,230,1…

EDIT: ils ont imaginé la page chrome: inspect, vous devez donc cliquer sur l'en-tête Autre à gauche pour que cela fonctionne maintenant.

14
Helder Roem

Je viens de faire fonctionner ça. La clé est que vous devez démarrer chrome en mode 'Débogage à distance'.

sur OSX, ouvrez une fenêtre de terminal et exécutez ce qui suit:

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

Sur les fenêtres, c'est

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

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

Cela démarrera une instance de chrome, qui enverra des messages de débogage à un serveur Web local sur le port 9222.

Si vous accédez à ce service Web, il vous donnera la possibilité d'utiliser l'inspecteur pour inspecter n'importe quelle fenêtre chrome en cours d'exécution. Puisque nous voulons inspecter l'inspecteur, nous devons démarrer une fenêtre d'inspecteur d'abord (comme ci-dessus Utilisez les touches de raccourci; pour Mac, c'est Commande + option + i.)

Maintenant, allez-y et accédez à

http://localhost:9222

Il vous présentera une liste de fenêtres à afficher dans le débogueur. Sélectionnez la fenêtre qui commence par "Developer Tools" et vous pourrez inspecter le CSS pour l'inspecteur.

Son difficile à voir dans l'image ci-dessous, mais sur la gauche, j'ai ma chrome fenêtre pointant vers le débogueur distant, mettant en évidence l'une des étiquettes de la barre d'outils. Sur la droite, vous le voyez allumé avec le info-bulle comme si nous déboguions une page Web.

Inspect the inspector

4
Mixologic

Il y a quelques semaines, quelqu'un l'a souligné dans le salon de discussion "javscript" de stackoverflow. Tout d'abord et surtout, assurez-vous que l'inspecteur est déconnecté de la fenêtre de votre navigateur . Ensuite, il suffit d'ouvrir une fenêtre d'inspection et d'inspecter cette fenêtre. Dans Windows c'est CtrlShiftI (Edit: j'ai dit, CtrlShiftI mais cela fait apparaître la console inspectant la console ... vous devriez pouvoir naviguer d'avant en arrière.) pour le raccourci clavier. (Autres combinaisons de clavier pour d'autres options et OS ici et ici .) Faites-le deux fois et vous êtes bon.

Edit: ok, vous êtes probablement confus quant au désamarrage de la fenêtre. Voici ce sur quoi vous cliqueriez s'il est ancré.enter image description here

Edit II: Je ne sais pas trop pourquoi vous ne pouvez pas inspecter. La réponse de JDavis est cohérente avec la documentation de Google pour les ordinateurs Apple. Si vous utilisez Linux, cela semble être le même que Windows. Vous êtes censé appuyer sur la combinaison de touches d'inspecteur pendant que le focus est sur fenêtre de l'inspecteur.

3
JayC