calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

最高にわかるChromeデベロッパーツールの使い方(チートシート付き)

初めてデベロッパーツールを触る人でも分かるように、簡潔・シンプルに書きました。画像付きのチートシートのようなものですね。今回は初心者の方向けということでChromeデベロッパーツールの入門編。Chromeは最新版です。

PR
IT/WEB業界への転職なら
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

Chrome Devtools Cheatsheet

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください