人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

Chrome DevTools を使ってみよう (16) DevToolsのウインドウ構成と設定

2017年 08月 16日
DevTools を使い慣れた人には自明の事かも知れませんが、DevToolsのウインドウ設定の基本を整理します。


 〔 DevTools のウインドウ設定 〕 


 Chrome画面とDevTools 同居か別居か 

DevToolsの右上、「」メニューの最初で、「Chrome画面とDevToolsが同じウインドウ」 か、「Chrome画面とDevToolsが別ウインドウ」 かが選択出来ます。

Chrome DevTools を使ってみよう (16) DevToolsのウインドウ構成と設定_a0349576_18260792.png

デスクトップに余裕があれば「別ウインドウ」として、Toolsを拡げて使う方が快適です。 特にHTMLは、折り返しが少ない方が構造が読み易くなります。(私の説明は掲載面積の関係でにしている事が多いですが)


 DevTools は縦分割か横分割か 

DevTools のウインドウの右上の「」をクリックして、メニューから「Settings」を押します。

Chrome DevTools を使ってみよう (16) DevToolsのウインドウ構成と設定_a0349576_17593882.png

「Settings」の最初の「Preferences」→「Appearance」で、下図の「Panel layout」の設定があります。
これは DevTools の複数のウインドウを、縦分画(vertical)にするか横分割(horizontal)にするかの設定です。

Chrome DevTools を使ってみよう (16) DevToolsのウインドウ構成と設定_a0349576_18115683.png

私はHTMLを縦方向に広く見たいので「vertical」に設定しています。 私の説明のハードコピーは縦分割の状態ですが、横分割にしていても特に判り難いことはないでしょう。(横分割はHTMLの折り返しが一番少ない設定です)


 ウインドウの幅調節 

下図は、Chrome画面とDevToolsが同居したの設定ですが、
▪Chrome画面とDevToolsの境界
▪DevToolsの左ウインドウと右ウインドウの境界
は、それぞれ境界部をドラッグして調節出来ます。

Chrome DevTools を使ってみよう (16) DevToolsのウインドウ構成と設定_a0349576_18123395.png

DevToolsが独立したでも同様で、左右ウインドウの境界をドラッグして調節出来ます。


 ウインドウ内表示の拡大・縮小 

ウインドウ内表示の拡大・縮小を「Ctrl + マウススクロール」で操作できる様になったのは、いつからでしょう。 Chrome画面(ブラウザ画面)は、当然この操作に対応しています。 また、DevToolsもこの操作に対応しています。(使う人は少ないと思いますが「Ctrl 」+「+」「-」でも操作可能です)

Chrome DevTools を使ってみよう (16) DevToolsのウインドウ構成と設定_a0349576_18542827.png





この記事はカテゴリ「スキン編集」にトラックバックしています。



by Ataron | 2017-08-16 19:24 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。