ツールは、デフォルトではChromeウィンドウの下部に表示されます。右側には十分な空きスペースがありますが、縦方向に十分なスペースがないため、これはワイドスクリーンディスプレイにとってはかなり悪い選択です。残念ながら、私はツールを再配置する方法を見つけられませんでした。Firebugと同様に、横に配置したいと思います。

私が望むものに似た唯一のオプションは、開発ツールを切り離して、クロムとツールウィンドウを並べて配置することです。ただし、これはIDEからブラウザにすばやくAltキーを押しながらタブを移動する場合にはあまり便利ではないため、「統合された」ソリューションが適しています。

Chrome 46以降

縦の省略記号ボタン（⋮）をクリックして、目的のドッキングオプションを選択します。

Chrome 45以前

右上のドックアイコンを長押しします。ドッキングを変更するオプションをポップアップします

HTMLパネルとCSSパネルの分割を変更するには、DevToolsで[設定（F1）]> [一般]> [外観]> [パネルレイアウト]に移動します。

ブラウザーのバージョンに応じて、ポインターをドックボタンの上に置き、長押し（数秒）または右＆左クリックします。

ドッキングポジション（サイド/ボトム）を切り替えるキーボードショートカット

CTRL+ SHIFT+D

に行くことによってそれらを見ることができる多くのショートカットがあります

ここに表示される設定»ショートカット：

または、CTRL+ ?を使用して設定に移動し、そこから左側の「ショートカット」サブアイテムに到達するか、公式リファレンスを使用できます。

これは左下にあるように見えますが、ウィンドウが重なっているアイコンと「別のウィンドウにドッキング解除」が表示されています。ツールチップ。

ドックを右側に配置した後（以前の回答を参照）、まだパネルが垂直に分かれているのがわかりました。

パネルを水平に分割し、画面の幅をさらに広げるには、[設定]（右下隅）に移動し、[右にドッキングしたときにパネルを垂直に分割する]チェックボックスをオフにします。

これで、左から右にすべてのパネルができました：p

2014年10月現在、バージョン39.0.2171.27ベータ（64ビット）

Chrome Web Developperで[設定]に移動し、右にドッキングしたときにパネルを垂直に分割するチェックボックスをオフにする必要がありました

現在使用しているバージョン56.0.2924.87では、デスクトップにいない場合、DevToolsを自動的にアンドッキングします。それ以外の場合は、新しい新しいChromeタブを開き、Inspect to the DevToolsをウィンドウにドッキングします。

さらに、1つのウィンドウにソースとコンソールを表示する場合は、次の場所に移動します。

"DevToolsのカスタマイズと制御->"コンソールドロワーの表示 "

ここの右隅にも表示されます。