wake-up-neo.com

Chrome-Entwicklertools: Anzeigen von Konsolen- und Quellenansichten in getrennten Ansichten / vertikal nebeneinander?

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

Drücken Sie Esc Wenn ich mich auf der Registerkarte Sources befinde, sehe ich unten eine kleine Ansicht von Console. Aber ich möchte eine größere Ansicht der beiden gleichzeitig. Ist das möglich?

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

Bearbeiten:

Klarstellung - Ich weiß, wie man abdockt das Dev-Tools-Fenster (das ist meine Standardeinstellung). Ich schätze, ich bin nur gierig und frage mich, ob ich Sources und Console weiter in separate, nicht angedockte Fenster aufteilen kann (oder zumindest, wenn ihre Ansichten vertikal auf dasselbe Fenster aufgeteilt werden, anstatt horizontal wie durch Drücken von Esc does)

104
Himanshu P

Vertikale Teilung

Sie können die Entwickler-Tools abdocken (durch Klicken auf das Symbol in der unteren linken Ecke), wodurch sie in ein neues Fenster verschoben werden. Dann drücken Esc um die Konsole zu öffnen.

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

screenshot of vertically split devtools

Horizontale Teilung

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

BEARBEITEN: Die Unterstützung für Custom.css wurde entfernt, es ist jedoch weiterhin möglich, die Stile der Entwicklertools mit der neuen API chrome.devtools.panels.applyStyleSheet zu ändern ( Beispielcode ).

/* 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 so aus:

screenshot of horizontally split devtools

147
Rob W

esc - ist die Abkürzung,

oder im Menü/Einstellungen auf klicken Konsolenschublade anzeigen

enter image description here

75
bhv

Eine einfachere Lösung besteht darin, das linke untere Symbol gedrückt zu halten, wodurch ein anderes Symbol angezeigt wird. Wenn Sie diese Option auswählen, können Sie die Konsole rechts neben Ihrem Hauptfenster des Browsers anzeigen

5
Lloyd Moore

Das OP wurde wahrscheinlich vor drei Jahren verschoben, aber für alle anderen:

Ich kenne keine Möglichkeit, das Fenster des Entwickler-Tools aufzuteilen, aber Sie können zwischen vertikalem, horizontalem und automatischem (Standard-) Layout des Bedienfelds wechseln, nach dem das OP in seiner Erläuterung gefragt hat. Ich habe das häufig als nützlich empfunden.

  1. Öffnen Sie das Dreipunkt-Menü in der rechten oberen Ecke des Entwicklertools-Fensters.
  2. Einstellungen auswählen'.
  3. Registerkarte "Allgemein" -> Abschnitt "Darstellung"
  4. "Panel-Layout"
5
Pogginhopper

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

 enter image description here

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

 enter image description here

Danach können Sie es wieder andocken.

1
Gennady G