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

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)

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.

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:

esc - ist die Abkürzung,

oder

Bei menu(the three dots)Klick aufshow console drawer

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

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"

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

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

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

Danach können Sie es wieder andocken.