Chrome-Entwicklertools: Anzeigen von Konsolen- und Quellenansichten in separaten Ansichten / vertikal gekachelt?

128

Chrome-Entwicklertools: Gibt es eine Möglichkeit, die ConsoleRegisterkarte und die SourcesRegisterkarte in separaten Ansichten anzuzeigen ? Ich möchte oft beide gleichzeitig betrachten.

Durch Drücken , Escwenn auf der SourcesRegisterkarte lässt mich einen kleinen Blick auf das Meer Consolean der Unterseite. Aber ich hätte gerne eine größere Ansicht von beiden gleichzeitig. Ist das möglich?

Wenn nicht, ist dies etwas, was eine Chrome-Erweiterung möglicherweise kann?

Bearbeiten:

Erläuterung - Ich weiß, wie man das Fenster mit den Entwicklungswerkzeugen abdockt (das ist meine Standardeinstellung). Nur gierig Ich schätze sein und mich gefragt , ob ich weiter aufspalten Sourcesund Consolein separate dockten Fenster (oder zumindest, ihre Ansichten teilt haben vertikal auf dem gleichen Fenster, anstatt horizontal als Pressen der EscFall ist)

Himanshu P.
quelle

Antworten:

176

Vertikale Aufteilung

Sie können die Entwicklertools abdocken (indem Sie auf das Symbol in der unteren linken Ecke klicken), wodurch sie in ein neues Fenster verschoben werden. Drücken Sie dann Esc, um die Konsole zu öffnen.

Sowohl das Fenster als auch die "kleine Konsole" können an Ihre Bedürfnisse angepasst werden.

Screenshot von vertikal geteilten Devtools

Horizontale Aufteilung

Wenn Sie die Konsole lieber rechts als unten haben möchten, passen Sie die Entwicklertools durch Bearbeitenpath/to/profile/Default/User StyleSheets/Custom.css an und fügen Sie die folgenden Regeln hinzu:

BEARBEITEN: Die Unterstützung für Custom.csswurde entfernt, aber es ist weiterhin möglich, die Stile der Entwicklertools mithilfe einer neuen API- chrome.devtools.panels.applyStyleSheetMethode ( Beispielcode ) zu ändern .

/* If drawer has been expanded at least once AND it's still expanded */
#-webkit-web-inspector #main[style*="bottom"]:not([style*="bottom: 0"]) {
    width: 50%;
    bottom: 0 !important;
}

#-webkit-web-inspector #drawer[style*="height"]:not([style*="height: 0"]) {
    /* The position of the drawer */
    left: 50% !important;
    /* styles to position the #drawer correctly */
    top: 26px !important;
    height: auto !important;
    z-index: 1;
    border-left: 1px solid rgb(64%, 64%, 64%);
}
#-webkit-web-inspector.show-toolbar-icons #drawer[style*="height"]:not([style*="height: 0"]) {
    top: 56px !important;
}

Das Ergebnis sieht folgendermaßen aus:

Screenshot von horizontal geteilten Devtools

Rob W.
quelle
1
Es tut mir leid, dass ich das hätte klären sollen (wird auch im ursprünglichen Beitrag funktionieren): Ich gehe bereits von einem nicht angedockten Fenster mit Entwicklertools aus (so ist es standardmäßig für mich). Aber von diesem Fenster aus könnte ich immer noch "herausziehen" Consoleoder Sourcesein separates Fenster mögen, wie Sie es mit den regulären Registerkarten auf Chrome tun können
Himanshu P
Aktivieren Sie das Remote-Debugging und öffnen Sie die devtools in einem neuen Fenster. Ich bin nicht sicher, ob es bereits mehrere Instanzen unterstützt, Sie sollten es versuchen.
Rob W
Klingt vielversprechend (wenn auch kompliziert). Werde es ausprobieren und posten, wie es funktioniert
Himanshu P
1
@HimanshuP Remote-Debugging unterstützt noch nicht mehrere Instanzen. Ich habe meine Antwort mit einer alternativen Methode aktualisiert.
Rob W
1
Ich suchte nur nach einer Möglichkeit, die vertikal geteilte Konsole zu schließen, die immer sichtbar war. Escmachte dies. Danke dir!
Duma
100

esc - ist die Abkürzung,

oder

Bei menu(the three dots)Klick aufshow console drawer

Geben Sie hier die Bildbeschreibung ein

bhv
quelle
3
Einmal im Jahrzehnt suche ich nach einem Feature und es stellte sich heraus, dass es die ganze Zeit über einen Knopf dafür gab, genau dort auf meiner Tastatur. Art von.
Bob Stein
10

Drücken Sie rechts auf "Drei Punkte" und klicken Sie auf "Konsolenschublade anzeigen".

Geben Sie hier die Bildbeschreibung ein

Soham Mehta
quelle
7

Das OP ist wahrscheinlich seit der Veröffentlichung vor drei Jahren weitergegangen, aber für alle anderen:

Ich kenne keine Möglichkeit, das Fenster des Entwicklertools zu teilen, aber Sie können zwischen vertikalen, horizontalen und automatischen (Standard-) Bedienfeldlayouts wechseln, nach denen das OP in seiner Erläuterung gefragt hat. Ich habe dies häufig als nützlich empfunden.

  1. Öffnen Sie das Dreipunktmenü in der oberen rechten Ecke des Fensters für Entwicklungswerkzeuge.
  2. Einstellungen auswählen'.
  3. Registerkarte "Allgemein" -> Abschnitt "Darstellung"
  4. "Panel Layout"
Pogginhopper
quelle
Ich habe lange nach dieser Antwort gesucht. Vielen Dank! In meinem Fall würden die Paneele unten vertikal gestapelt, wenn mein Bildschirm nicht die volle Breite hätte. Dies war für mich sehr kontraproduktiv, da ich wollte, dass die Gruppen von Paneelen unten nebeneinander und nicht vertikal gestapelt sind. Durch Klicken auf das Layout-Symbol erhielt ich nicht das gewünschte Layout, aber Ihre Lösung funktionierte genau so, wie ich es wollte.
Chris22
Jedes Mal, wenn ich zu einem neuen Computer wechsle, muss ich nach dieser Einstellung suchen und mein bevorzugtes Layout erhalten. Vielen Dank!
Stacyhorton
5

Eine einfachere Lösung besteht darin, das Symbol unten links gedrückt zu halten, wodurch ein weiteres Symbol angezeigt wird, mit dem Sie bei Auswahl die Konsole rechts neben Ihrem Hauptbrowserfenster anzeigen können

Lloyd Moore
quelle
Dies sollte wirklich die akzeptierte Antwort sein, da es sowohl richtig als auch "offensichtlich" ist
miraculixx
Hinweis: In neueren Versionen von Chrome (Stand: 18.03.2015) ist dies obligatorisch, um den Modi "Andocked Bottom" und "Docked Side" zu umgehen. Sie möchten also ein separates Fenster.
Maxkfranz
1
@miraculixx Nein, es ist nicht korrekt. Das OP hat bereits ein nicht angedocktes DevTools-Fenster.
Jpaugh
1
Ich kann das "Symbol unten links" nicht verstehen (nichts für mich zum Datum dieses Kommentars)
Pac0
2

Wenn Sie die Konsole eingeben, aber nicht sehen und ihre Größe nicht ändern können:

Geben Sie hier die Bildbeschreibung ein

Dann Abdocken DevTools in der oberen rechten Ecke. Dann können Sie die Größe ändern:

Geben Sie hier die Bildbeschreibung ein

Danach können Sie es wieder andocken.

Gennady G.
quelle