Chrome開発者ツール：View ConsoleとSourcesのビューを別々のビュー/垂直に並べて表示しますか？

Chrome開発者ツール：ConsoleタブとSourcesタブを別々のビューで表示する方法はありますか？私はしばしばこれらの両方を同時に見たいと思います。

タブEsc上で押すと、下部のSources小さなビューが表示さConsoleれます。しかし、私は同時に両方のより大きな見方を望んでいます。これは可能ですか？

そうでない場合、これはChrome拡張機能でできることですか？

編集：

明確化- 開発ツールウィンドウのドッキングを解除する方法を知っています（これが私のデフォルトのセットアップです）。ただ、貪欲Iの推測であると思って、私はさらに分割することができる場合Sourcesと、Console別のドッキングウィンドウに（または非常に少なくとも、同じウィンドウに垂直自分の意見分割を持って、代わりに水平方向のように押しEscています）

垂直分割

開発ツールをドッキング解除して（左下隅のアイコンをクリックして）、新しいウィンドウに移動できます。次に、を押しEscてコンソールを開きます。

ウィンドウと「小さなコンソール」の両方は、ニーズに合わせてサイズを変更できます。

水平分割

コンソールを下部ではなく右側に配置する場合は、を編集して開発者ツールをカスタマイズしpath/to/profile/Default/User StyleSheets/Custom.css、次のルールを追加します。

編集：のサポート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;
}

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

esc -ショートカットです

または

で、menu(the three dots)上のクリックshow console drawer

右側で「3つのドット」を押し、「コンソールドロワーを表示」をクリックします

OPはおそらくこれを3年前に投稿してから進んでいますが、他の誰にとっても：

開発者ツールウィンドウを分割する方法はわかりませんが、垂直、水平、自動（デフォルト）のパネルレイアウトを切り替えることができます。私はこれが便利だと頻繁に思いました。

1. 開発ツールウィンドウの右上にあるその他メニューを開きます。
2. 「設定」を選択します。
3. 「一般」タブ->「外観」セクション
4. 「パネルレイアウト」

より簡単な解決策は、左下のアイコンを押したままにすることです。これにより、別のアイコンがポップアップし、選択すると、メインのブラウザウィンドウの右側にコンソールを表示できます。

入力できるがコンソールが表示されず、サイズを変更できない場合：

次に、右上隅のDevToolsをドッキング解除します。次に、サイズを変更できます。

この後、ドッキングすることができます。