DevTools を使い慣れた人には自明の事かも知れませんが、DevToolsのウインドウ設定の基本を整理します。
〔 DevTools のウインドウ設定 〕 Chrome画面とDevTools 同居か別居か DevToolsの右上、「
︙」メニューの最初で、「Chrome画面とDevToolsが同じウインドウ」
❶ か、「Chrome画面とDevToolsが別ウインドウ」
❷ かが選択出来ます。
デスクトップに余裕があれば「別ウインドウ」
❷ として、Toolsを拡げて使う方が快適です。 特にHTMLは、折り返しが少ない方が構造が読み易くなります。(私の説明は掲載面積の関係で
❶にしている事が多いですが)
DevTools は縦分割か横分割か DevTools のウインドウの右上の「
︙」をクリックして、メニューから「Settings」を押します。
「Settings」の最初の「Preferences」→「Appearance」で、下図の「Panel layout」の設定があります。
これは DevTools の複数のウインドウを、縦分画(vertical)にするか横分割(horizontal)にするかの設定です。
私はHTMLを縦方向に広く見たいので「vertical」に設定しています。 私の説明のハードコピーは縦分割の状態ですが、横分割にしていても特に判り難いことはないでしょう。(横分割はHTMLの折り返しが一番少ない設定です)
ウインドウの幅調節 下図は、Chrome画面とDevToolsが同居した
❶の設定ですが、
▪Chrome画面とDevToolsの境界
▪DevToolsの左ウインドウと右ウインドウの境界
は、それぞれ境界部をドラッグして調節出来ます。
DevToolsが独立した
❷でも同様で、左右ウインドウの境界をドラッグして調節出来ます。
ウインドウ内表示の拡大・縮小 ウインドウ内表示の拡大・縮小を「Ctrl + マウススクロール」で操作できる様になったのは、いつからでしょう。 Chrome画面(ブラウザ画面)は、当然この操作に対応しています。 また、DevToolsもこの操作に対応しています。(使う人は少ないと思いますが「Ctrl 」+「+」「-」でも操作可能です)