web-dev-qa-db-ja.com

Chrome開発者ツール：コンソールビューとソースビューを個別のビュー/垂直に並べて表示しますか？

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

押す Esc Sourcesタブを開くと、下部にあるConsoleの小さなビューが表示されます。しかし、両方を同時に拡大して見たいです。これは可能ですか？

そうでない場合、これはchrome拡張機能で実行できる可能性がありますか？

編集：

明確化-アンドック開発ツールウィンドウ（これがデフォルトの設定）の方法を知っています。貪欲なだけで、SourcesとConsoleを個別のドッキングされていないウィンドウにさらに分割できるかどうか（または、少なくとも、Escを押すのではなく、同じウィンドウで垂直にビューを分割できるかどうか）

google-chromegoogle-chrome-extensiongoogle-chrome-devtools
110
Himanshu P

垂直分割

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

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

screenshot of vertically split devtools

水平分割

下部ではなく右側にコンソールを配置する場合は、 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;
}

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

screenshot of horizontally split devtools

154
Rob W

esc -ショートカットです、

またはメニュー/設定で、コンソール引き出しの表示をクリックします

enter image description here

81
bhv

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

開発者ツールウィンドウを分割する方法は知りませんが、OPが明確にするために尋ねた垂直、水平、自動（デフォルト）のパネルレイアウトを切り替えることができます。私は頻繁にこれが有用であることを見つけました。

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

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

5
Lloyd Moore

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

enter image description here

次に、アンドック右上隅にある開発ツール。その後、サイズを変更できます。

enter image description here

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

1
Gennady G