So positionieren Sie Chrome Developer Tools neu

489

Die Werkzeuge werden standardmäßig unten im Chrome-Fenster geöffnet. Dies ist eine ziemlich schlechte Wahl für ein Breitbild-Display, da rechts viel Platz frei ist, aber nicht viel vertikaler Platz übrig bleibt. Leider habe ich keine Möglichkeit gefunden, die Werkzeuge neu zu positionieren. Ich hätte sie gerne auf der Seite, ähnlich wie bei Firebug.

Die einzige Option, die meiner gewünschten ähnelt, besteht darin, die Entwicklungswerkzeuge abzunehmen und Chrom und das Werkzeugfenster nebeneinander zu platzieren. Dies ist jedoch nicht sehr praktisch, um schnell von der IDE zum Browser und zurück zu wechseln. Eine "integrierte" Lösung wäre also hilfreich.

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

Antworten:

895

Chrome 46 oder neuer

Klicken Sie auf die Schaltfläche mit den vertikalen Auslassungspunkten (⋮) und wählen Sie die gewünschte Andockoption aus.

Chrome 45 oder älter

Halten Sie das Dock-Symbol oben rechts gedrückt. Es wird eine Option zum Ändern des Andockens angezeigt

Um die Aufteilung zwischen den HTML- und CSS-Bedienfeldern zu ändern, gehen Sie in DevTools zu Einstellungen (F1)> Allgemein> Darstellung> Bedienfeldlayout.

Loislo
quelle
2
Cool, es ist in der stabilen Version vorhanden, ich war mir dessen einfach nicht bewusst, hat noch mehr nette Optionen :) Danke
kostja
8
In den letzten Versionen von Chrom und Kanarienvogel wurde die Option entfernt. Sie können jedoch weiterhin darauf zugreifen, indem Sie auf das Dock-Symbol unten links klicken und es gedrückt halten. Daraufhin wird eine Option zum Andocken nach rechts angezeigt.
Paul Spencer
2
Cool, Dock rechts funktioniert. Wie verschiebe ich nun den CSS-Inspektor auf der Registerkarte "Elemente" an den unteren Rand des Bereichs "Entwicklungswerkzeuge"? Ansonsten muss ich HTML und CSS in sehr engen Spalten nebeneinander anzeigen.
Vicky Chijwani
11
Was für ein schreckliches Design! Nirgendwo würde ich es selbst herausfinden. Nirgendwo sonst habe ich diesen Halt gesehen und jemals gewartet.
Dmitri Zaitsev
4
@blrbr Ja so wahr. Wenn Sie eine Google-Suche durchführen müssen, um herauszufinden, wie eine Option aktiviert werden kann, von der Sie wissen, dass sie existiert, stimmt etwas mit dem UI-Design nicht. Das Schlüsselwort hier ist "Auffindbarkeit". Das ist nicht einfach zu entdecken.
Stijn de Witt
70

Platzieren Sie Ihren Zeiger auf der Dock-Schaltfläche und klicken Sie je nach Browserversion lange darauf (einige Sekunden) oder mit der rechten und linken Maustaste.

Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein

user3246105
quelle
41

Tastaturkürzel zum Umschalten der Andockposition (Seite / unten)

CTRL+ SHIFT+D

Und es gibt viele Verknüpfungen, die Sie sehen können, indem Sie zu gehen

Einstellungen »Verknüpfungen , wie hier angezeigt:
Screenshot der Einstellungen

Alternativ können Sie mit CTRL+ ?zu den Einstellungen gehen. Von dort aus können Sie das Unterelement "Verknüpfungen" auf der linken Seite erreichen oder die offizielle Referenz verwenden .

Alupotha
quelle
6
⌘-Shift-D auch unter OSX.
Fleischraum
2
Wenn Sie das Dock überhaupt nicht öffnen können, versuchen Sie es Ctrl+Shift+I- aber wenn Ihr Fenster ein Popup ist, funktioniert das Andocken meiner Meinung nach nicht einmal.
Noumenon
Vielen Dank! Der Inspektor steckte irgendwie außerhalb des Bildschirms fest, STRG + UMSCHALT + D hat ihn für mich angedockt!
Stan
1
Aus irgendeinem Grund scheint das Tool beim Abdocken der Chrome-Entwicklertools rechts von meinem Monitor zu laufen und ist nicht mehr sichtbar. Die einzige Möglichkeit, es wieder anzuzeigen, ist Strg + Umschalt + D und das Andocken der Entwicklertools an der Seite oder unten. Das ist komisch
JazzBox
Ich möchte nur meine Liebe zu dir erklären. 🐐💘🐐
Curtis Blackwell
18

Sieht so aus, als wäre dies jetzt unten links als Symbol mit überlappenden Fenstern und dem "In separates Fenster abdocken". Tooltip.

Geben Sie hier die Bildbeschreibung ein

brian_d
quelle
13
Sie könnten klarstellen, dass Sie auf diese Schaltfläche klicken UND HALTEN müssen, um rechts anzudocken. Wie @PaulSpencer bemerkte, wird durch einfaches Klicken nur abgedockt.
0x89
11

Nachdem ich mein Dock rechts platziert habe (siehe ältere Antworten), fand ich die Panels immer noch vertikal geteilt.

Um die Bedienfelder horizontal zu teilen und sogar mehr von Ihrer Bildschirmbreite zu erhalten, gehen Sie zu Einstellungen (untere rechte Ecke) und entfernen Sie das Kontrollkästchen "Bedienfelder vertikal teilen, wenn sie nach rechts angedockt sind".

Jetzt haben Sie alle Bedienfelder von links nach rechts: p

user2243570
quelle
8

Stand Oktober 2014, Version 39.0.2171.27 Beta (64-Bit)

Ich musste im Chrome Web Developper-Bereich in "Einstellungen" gehen und die Option " Vertikale Bereiche vertikal teilen" deaktivieren , wenn ich nach rechts angedockt war

Pierre Maoui
quelle
1

Die Version 56.0.2924.87, in der ich mich gerade befinde, macht die DevTools automatisch ab, wenn Sie sich NICHT auf einem Desktop befinden. Öffnen Sie andernfalls eine NEUE neue Chrome-Registerkarte und überprüfen Sie, ob die DevTools wieder im Fenster angedockt werden sollen.

Charix
quelle
Was meinst du mit "nicht auf einem Desktop"? Ich bin auf 59.0.3067.6 (dev) und es macht einige seltsame Dinge auf bestimmten Websites. In Vtiger 6.5 werden beispielsweise durch Klicken mit der rechten Maustaste und "Überprüfen" Entwicklerwerkzeuge in einem neuen Fenster geöffnet, in dem die Option "Dock-Seite" fehlt. Mit F12 wird sie jedoch normalerweise in die aktuelle Registerkarte eingebettet, wobei die Option "Dock-Seite" verfügbar ist. Seltsam.
Dhaupin
0

Wenn Sie außerdem Quellen und Konsole in einem Fenster anzeigen möchten, gehen Sie zu:

"Anpassen und Steuern von DevTools ->" Konsolenschublade anzeigen "

Sie können es auch hier in der rechten Ecke sehen:

"Konsolenschublade anzeigen"

Anton Polkanov
quelle