最高にわかるChromeデベロッパーツールの使い方(チートシート付き)
初めてデベロッパーツールを触る人でも分かるように、簡潔・シンプルに書きました。画像付きのチートシートのようなものですね。今回は初心者の方向けということでChromeデベロッパーツールの入門編。Chromeは最新版です。
PR
Sponsored Link
設定
エディタ
コンソール
エレメント
モバイル
ネットワーク
Headers
Audits
Security
チートシート
設定
F12(Ctrl + Shift + I)ではなくて、[win]Ctrl + Shift + C / [mac]Shift + Cmd + Cを使うと、要素を選択出来る状態でデベロッパーツールを開けるので便利です。
そのまま指を置いた状態で[win]Ctrl + Shift + D / [mac]Shift + Cmd + D（C→D）でパネルの位置を切り替えて使いやすい状態で始めましょう
win/mac対応ショートカットキーは後半にあります。
背景色を黒にする
まずはF12(Ctrl + Shift + I)>F1を押すとSettingの画面になるので、ThemeをDarkに変更。macはFn+F1。見やすくなりました。
タブの幅を変える
cssなんかをコピペした時に、半角スペース2つ分でインデントさせたいと思ったらこの設定。
F1（Setting画面）の「Default indentation」でインデント幅を変更。
エディタ
エディタとして使う（ローカルファイルを編集する）
Settings>Workspace>Add folderをクリック。
ローカルフォルダを選択するとポップアップが出るので許可を押し、
パネルのSources に戻るとローカルフォルダが追加されているので、
後はファイルを編集します。Ctrl+Sで保存すればローカルのファイルも反映・保存されます。Sourcesパネルのスクリプト内ではCtrl+Gで行番号に移動できます。
ローカルファイルのコードを整形する
最下部の｛｝を押せばコードが整形されます。
Ctrl+Dで部分選択と同時編集もできます。
Console
ログの閲覧・JavaScriptの入力や練習
Consoleパネルでは、ログを出力することができます。
Enterで実行、Shiftを押しながらEnterで改行します。Ctrl+Lで内容を消去します。
Elements
編集
パネルElementsでhtml、StylesでCSSが変更できます。
Alt+クリックで子要素全展開。
→ ← で展開、↑↓で移動。Enterで編集。Tabで編集領域移動。
:hovを押してマウスオーバーの状態を確認できます。
CSS内の画像サイズと大きさを知る
CSSに書いたimgのurlを右クリック>Open link in Resources panelを選択すると、画像サイズと大きさを確認することができます。
カラーフォーマットの変更
Styles内で、colorなどのプロパティに対して、Shiftを押しながら色をクリックすると色のフォーマット（透過指定をつけたり）を変更できます。数値に関しては上下カーソルで増減します。
Materialをクリックするとマテリアルカラーのスウォッチが出てきます。
Breakpoints
JavaScriptのデバックのときに便利。
パネルのSourcesから「Event Listener Breakpoints」を展開し「Mouse」の「click」で、クリック・ロードされた時のコードなどを見つけることができます。
モバイル
回線速度のエミュレート
以下のモバイルのアイコンを押し、メニューの「Show throttling」を押すと回線速度のエミュレート。
通信環境を選択
モバイルのアイコンを押して「No throttling」のプルダウンから、通信環境を選択できるようになります。回線は遅めを選択するとよいでしょう。
3G回線など速度が遅いものを選んで体感すると、表示崩れなどを発見できるかもしれません。
Androidデバッグ
Android 4.0以上ですが、usbで繋いでデバッグが可能。
Remote Debugging on Android with Chrome - Google Chrome
モバイルデバックの実機を増やす
F1>SettingsのDevicesから増やせます。
Network
リクエスト数・ロード時間を調べる
読み込みが遅いと感じたらパネルの「Network」で調べます。
デベロッパーツールの「Network」を開き、ブラウザを再読み込みして計測するとツールバーの下方にリクエスト数とロード時間が表示されます。
データのフィルタも簡単。
これらを参考にボトルネックをポチポチ潰していきます。
Headers
サーバ・有効期限・gzipの確認
サーバ情報から、HTTPステータスコード（Webサーバからのレスポンス）、Last-Modified（最終更新時刻）、gzipやExpires（キャッシュ）、有効期限の確認などが設定されているか確認できます。
HTTPステータスコード
- 200~ / 正常
- 300~ / 移転
- 400~ / 失敗
- 500~ / サーバエラー
Audits
未使用のセレクタを見つけます。
Audits>Reload Page...のRunを押し計測を開始し、Remove unused CSS rulesで、現ページの使ってないセレクタを見つけることが出来ます。他のページでも、そのセレクタが使われてないか調べて、どのページも使ってないようであれば削除します。
Security
SSL確認
パネルからSecurityを選び、以下のように緑の鍵のマークがハイライトされていたらOK。
httpsにしたつもりでも、正しく認証されていないと緑のマークが光りません。
チートシート
デベロッパーツールのショートカットキー（日本語版）
よく使うものをピックアップ。とりあえずこの辺り覚えれば効率よくなります。
| 項目 | 解説 | win | mac |
|---|---|---|---|
| 一般 | ソースコードを見る | Ctrl+U | Cmd+U |
| 検索 | Ctrl + F | Cmd + F | |
| パネル | 要素の検証、開閉 | F12 | Cmd + Opt + I |
| 要素選択可能状態で開く | Ctrl + Shift + C | Shift + Cmd + C | |
| パネル位置入れ替え | Ctrl + Shift + D | Shift + Cmd + D | |
| 設定 | F1 | Fn+F1 | |
| 設定画面を閉じる | Esc | Esc | |
| 移動 | Ctrl + Shift + P | Cmd + Opt + P | |
| Console | Consoleを開く | Ctrl + Shift + J | Cmd + Opt + J |
| 改行 | Shift + Enter | Opt + Enter | |
| 移動 | Ctrl + ] | Cmd + ] | |
| Elements | 展開 | → or ← | → or ← |
| 属性編集 | Enter | Enter | |
| 編集領域移動 | Tab | Tab | |
| 非表示 / 表示 | h | h | |
| html編集 | F2 | Fn+F2 | |
| Styles | rgba | Shift + クリック | Shift + クリック |
| 変数の値 | ↑or↓ | ↑or↓ | |
| Sources | マルチカーソル | Ctrl + d | Cmd + d |
| 行番号へジャンプ | Ctrl + G | Cmd + G | |
| コメントアウト | Ctrl + / | Cmd + / | |
| 要素一覧、移動 | Ctrl + Shift + O | Cmd + Shift + O | |
| ソースを横断検索 | Ctrl + Shift + F | Cmd+ Shift + F | |
| Profiles | Profilesを開く | Ctrl + E | Cmd + E |
他にも色々ありますので、以下からご覧ください。
Keyboard & UI Shortcuts Reference | Web Tools - Google Developers
スポンサード リンク
-
投稿者：commte
株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。
URL：西田 鉄平
この後によく読まれている記事
Leave a Comment