Comment repositionner les outils de développement Chrome

489

Les outils sont ouverts en bas de la fenêtre chrome par défaut. C'est un choix plutôt mauvais pour un écran large car il y a beaucoup d'espace vide à droite mais pas beaucoup d'espace vertical à épargner. Malheureusement, je n'ai trouvé aucun moyen de repositionner les outils. Je voudrais les avoir sur le côté, semblable à Firebug.

La seule option similaire à ce que je veux est de détacher les outils de développement et de placer côte à côte le chrome et la fenêtre d'outils. Ce n'est pas très pratique pour un alt-tabbing rapide de l'IDE vers le navigateur et vice versa, donc une solution "intégrée" serait bien.

google-chrome google-chrome-devtools kostja
la source
github.com/melat0nin/chrome-devtools-vertical
Raghav
stackoverflow.com/questions/14386994/…
Nate

Réponses:

895

Chrome 46 ou plus récent

Cliquez sur le bouton points de suspension verticaux (⋮) puis choisissez l'option d'ancrage souhaitée.

Chrome 45 ou plus ancien

Maintenez l'icône du dock en haut à droite. Il apparaît une option pour changer l'ancrage

Pour modifier la séparation entre les panneaux HTML et CSS, accédez dans DevTools à Paramètres (F1)> Général> Apparence> Disposition des panneaux.

loislo
la source
2
Cool, il est présent dans la version stable, je n'en
étais
8
dans les versions récentes de chrome et de canari, l'option a été supprimée, mais vous pouvez toujours y accéder en cliquant et en maintenant l'icône du dock en bas à gauche, elle affiche une option à ancrer à droite.
Paul Spencer
2
Cool, dock à droite fonctionne. Maintenant, comment déplacer l'inspecteur CSS sous l'onglet Éléments au bas du volet des outils de développement? Sinon, je dois voir le HTML et le CSS côte à côte dans des colonnes très étroites.
Vicky Chijwani
11
Quel horrible design! Nulle part je ne le découvrirais moi-même. Nulle part ailleurs, je n'ai vu cette attente et cette attente jamais utilisées.
Dmitri Zaitsev
4
@blrbr Ouais si vrai. Si vous avez besoin de faire une recherche Google juste pour savoir comment activer une option dont vous savez qu'elle existe, il y a un problème avec la conception de l'interface utilisateur. Le mot clé ici est «découvrabilité». Ce n'est pas facile à découvrir.
Stijn de Witt
70

Placez votre pointeur sur le bouton du dock et faites un long clic dessus (quelques secondes) ou un clic droit et gauche de la souris selon la version du navigateur.

entrez la description de l'image ici entrez la description de l'image ici

user3246105
la source
41

Raccourci clavier pour basculer la position d'ancrage (côté / bas)

CTRL+ SHIFT+D

Et il existe de nombreux raccourcis que vous pouvez voir en allant sur

Paramètres »Raccourcis , comme affiché ici:
Capture d'écran des paramètres

Alternativement, utilisez CTRL+ ?pour accéder aux paramètres, à partir de là, vous pouvez accéder au sous-élément "Raccourcis" sur la gauche ou utiliser la référence officielle .

Alupotha
la source
6
⌘-Shift-D sur OSX aussi.
meatspace
2
Si vous ne parvenez pas du tout à ouvrir le quai, essayez Ctrl+Shift+I - mais si votre fenêtre est une fenêtre contextuelle, je ne pense pas que l'ancrage fonctionne même.
Noumenon
Je vous remercie! L'inspecteur était en quelque sorte bloqué loin de l'écran, CTRL + MAJ + D l'a ancré pour moi!
Stan
1
Pour une raison quelconque, lorsque je désancre les outils de développement Chrome, l'outil semble s'exécuter à droite de mon moniteur et n'est plus visible. La seule façon dont je peux le faire réapparaître est Ctrl + Shift + D et ancrer les outils de développement sur le côté ou le bas. C'est bizarre
jazzBox
Je voudrais juste vous déclarer mon amour. 🐐💘🐐
Curtis Blackwell
18

On dirait que c'est en bas à gauche maintenant sous la forme d'une icône avec des fenêtres qui se chevauchent et le "Détacher dans une fenêtre séparée." info-bulle.

entrez la description de l'image ici

brian_d
la source
13
Vous pouvez préciser que vous devez cliquer ET MAINTENIR ce bouton pour ancrer à droite. Comme @PaulSpencer l'a remarqué, il suffit de cliquer uniquement sur les désancrages.
0x89
11

Après avoir placé mon dock à droite (voir les réponses plus anciennes), j'ai toujours trouvé les panneaux divisés verticalement.

Pour diviser les panneaux horizontalement - et même obtenir plus de la largeur de votre écran - allez dans Paramètres (coin inférieur droit) et décochez la case `` Diviser les panneaux verticalement lorsqu'ils sont ancrés à droite ''.

Maintenant, vous avez tous les panneaux de gauche à droite: p

user2243570
la source
8

Depuis octobre 2014, version 39.0.2171.27 bêta (64 bits)

Je devais aller dans le volet Chrome Web Developper dans "Paramètres" et décocher les panneaux fractionnés verticalement lorsqu'il est ancré à droite

Pierre Maoui
la source
1

La version 56.0.2924.87 dans laquelle je suis maintenant, désancre automatiquement les DevTools si vous n'êtes PAS sur un bureau. Sinon, ouvrez un nouvel onglet Chrome et inspectez pour ancrer les DevTools dans la fenêtre.

Charix
la source
Que voulez-vous dire par "pas sur un bureau"? Je suis sur 59.0.3067.6 (dev) et cela fait des choses étranges sur certains sites Web. Par exemple, dans Vtiger 6.5, un clic droit et "inspecter" ouvre les outils de développement dans une nouvelle fenêtre qui n'a pas le choix "Côté Dock", cependant l'utilisation de F12 l'ouvre normalement intégré dans l'onglet actuel avec le choix "Côté Dock" disponible. Étrange.
dhaupin
0

De plus, si vous souhaitez voir les sources et la console sur une seule fenêtre, accédez à:

"Personnaliser et contrôler DevTools ->" Afficher le tiroir de la console "

Vous pouvez également le voir ici dans le coin droit:

"Afficher le tiroir de la console"

Anton Polkanov
la source