[解決済み] Chromeのデベロッパーツールです。コンソールビューとソースビューを別々のビューで表示する/縦に並べる？

質問

Chromeのデベロッパーツールです。を表示する方法はありますか？ Console タブと Sources タブを別々のビューで表示しますか？この2つを同時に見たいことがよくあります。

を押す エスケープ が表示されているときに Sources を小さく表示させることができます。 Console を下に表示します。しかし、両方を同時に大きく表示したいのですが。これは可能でしょうか？

もしそうでなければ、クロームの拡張機能でできるかもしれないことでしょうか？

編集する

明確化 - 私は方法を知っています。 ドック解除 は、開発ツールのウィンドウです（私のデフォルト設定です）。ただ、欲張りなもので、さらに分割できないかと考えています。 Sources と Console を別のドッキングされていないウィンドウに分割する (あるいは、最低限、同じウィンドウ上でビューを縦に分割する。 Esc を実行します)

どのように解決するのですか？

垂直方向の分割

デベロッパーツールのドックを解除すると（左下のアイコンをクリック）、新しいウィンドウに移動します。その後 エスケープ をクリックすると、コンソールが表示されます。

ウィンドウ、"スモールコンソール"ともに、用途に合わせてサイズを変更することが可能です。

水平分割

コンソールを下ではなく、右に配置したい場合。 <ストライク を編集して、デベロッパーツールをカスタマイズします。 path/to/profile/Default/User StyleSheets/Custom.css を作成し、以下のルールを追加してください。

EDIT: Custom.css は削除されましたが、新しい API を使用して開発者ツールのスタイルを変更することは可能です。 chrome.devtools.panels.applyStyleSheet メソッド( サンプルコード ).

/* 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;
}

結果はこのようになります。