Google Chrome: raccourci clavier pour afficher les ressources / Inspecter l'élément?

19

Google Chrome a une fonctionnalité semblable à Firebug où vous cliquez sur un élément de page et choisissez "Inspecter l'élément".

Je saute toujours dans la vue Ressources pour regarder les requêtes HTTP.

Existe-t-il un raccourci clavier pour ouvrir cet outil?

google-chrome frankadelic
la source
Documents officiels et raccourcis plus utiles: outils de développement Chrome: raccourcis clavier
Michal Mau
Voici des informations utiles; code.google.com/chrome/devtools/docs/overview.html
Furkan Ekinci
En outre, F12 affiche le volet Inspect Element dans Chrome sur Ubuntu
dylan murphy

Réponses:

23

Je viens de découvrir que Ctrl+ Shift+ Iet Ctrl+ Shift+ Cfonctionnent. Tout comme Firebug.

Sous OS X, c'est Command+ Option+ Iou Command+ Shift+ C.

RustyDev
la source
1
Merci horizens - juste ce que je cherchais. D'accord, l'inspecteur est devenu si bon que je n'ai plus besoin de Firebug. Au revoir, FF.
shacker
J'ai changé ma réponse ... avoir le même raccourci que Firefox est super.
frankadelic
Cmd / Ctrl + Shift + C est également très utile, car il vous permet de sélectionner un élément spécifique à inspecter sans naviguer dans le menu contextuel. Voir aussi developers.google.com/chrome-developer-tools/docs/shortcuts
Jo Liss
quelqu'un sait-il comment changer ce raccourci clavier? Dans Firebug, vous pouvez configurer le raccourci. Il Chrome, il semble être dur. pour une raison, j'utilise la disposition du clavier dvorak et la touche C est loin de ma main gauche.
Michael Butler
11

en maintenant N enfoncé et en cliquant avec le bouton droit quelque part sur la page, vous ouvrez la fenêtre d'inspection et vous amène à l'élément de code sur lequel vous avez cliqué dans la page tnnnnnnnnhe. je viens de découvrir cela.

pseudo
la source
Votre faute de frappe est involontairement hilarante :)
frankadelic
1
+1 pour un point spécifique de la page (même si l'OP ne voulait que la fenêtre générale). C'est bien pour les problèmes de survol, laissant la souris là où elle se trouve, sans avoir à déplacer la souris dans le menu contextuel.
goodeye
3
@goodeye note: vous simulez également le survol en cliquant sur l'icône de bascule de l'état de l'élément (boîte en pointillés avec flèche), elle se trouve à droite du menu accordéon "styles" si vous ne le trouvez pas images google pour "élément bascule état "
Myster
1
Mon dieu, pendant tout ce temps, j'ai fait un clic droit et fait "Inspecter l'élément" en perdant tout ce temps.
cri le
@Myster, Nice tip, Btw le mode bascule de l'appareil ne fait-il que le redimensionnement?
Pacerier
3

Ctrl+ Shift+ Iouvre les outils de développement à la dernière section dans laquelle vous vous trouviez. Si vous étiez le dernier dans la section Ressources, vous verrez les ressources.

Je ne pense pas qu'il existe un raccourci clavier spécialement pour Inspect Element , car cela dépend du contexte (c'est-à-dire l'emplacement de la souris)?

MrWhite
la source
Frankadelic veut vraiment ouvrir les outils de développement pour accéder au panneau Ressources, pas au panneau Éléments, donc Ctrl + Maj + I est un bon raccourci à utiliser: il ouvre les outils de développeur de la même manière que vous les avez laissés. (Les menus contextuels de Chrome ont très peu d'options, donc cliquer avec le bouton droit de la souris, l'élément Inspecter est une façon courante pour les utilisateurs de se rendre à l'un des outils de développement via la souris.)
Bavi_H
Bavi_H, c'est exact.
frankadelic