156

Chrome 開発者ツール:ConsoleタブとSourcesタブを別々のビューで表示する方法はありますか? この両方を同時に見たいと思うことがよくあります。

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

そうでない場合、これはクロム拡張機能でできることですか?

編集：

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

4

6 に答える 6

199

縦割り

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

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

垂直に分割された devtools のスクリーンショット

水平分割

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

編集: のサポートは削除されましたが、新しい APIメソッド (サンプル コードCustom.css)を使用して開発者ツールのスタイルを変更することは引き続き可能です。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;
}

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

水平分割された devtools のスクリーンショット

于 2013-05-14T08:18:30.813 に答える
9

OPはおそらく3年前に投稿してから移動しましたが、他の人にとっては次のとおりです。

開発者ツールウィンドウを分割する方法はわかりませんが、OPが説明で尋ねた垂直、水平、および自動（デフォルト）のパネルレイアウトを切り替えることができます. これは便利だなとよく思います。

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