LoginSignup
1538
1576

More than 3 years have passed since last update.

@ryo2132(Ryo Kawamata)

開発体験を変える! Chrome DevTools Tips 7選

Last updated at Posted at 2020-08-17

最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。
誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう！

1. $0で選択中のDOM要素の取得

特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。
Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。

手順

  1. カーソルで取得したい要素を選ぶ
  2. Consoleタブで$0を入力

$0はChromeが提供しているConsole Utilities APIです。Console Utilities API Reference で他にも色々便利機能が紹介されているので一読をお勧めします。

他のAPI一例

$(selector)
セレクタに一致するDOM要素を返す。document.querySelectorと同意。
（一見jQueryですが、Console Utilities APIです）

$('#hoge')

$$(selector)
セレクタに一致するDOM要素の配列を返す。document.querySelectorAllと同意

$$('div')

$x(path)
xpathに一致するDOM要素の配列を返す。

$x("//p")

2. DOM変化からのDebugger起動（Break on）

DevToolsでのデバッグというとソースコード上にdebuggerを仕込んでというのがありますが、ソースコードを何もいじらずDevTools単体でも実行できます。

1つはElementsタブからのBreak onの設定です。
何か表示が変わるDOM要素を選択して右クリックでBreak onを選択、表示されるサブメニューでいずれかの項目にチェックを入れます。
その状態で画面上にて表示の変化のトリガーとなる動作を行うと、DOMの変化の実行前に処理が止まり、該当変化のイベント処理からステップ実行が可能になります。
（Chrome DevToolsを調べようと思ったきっかけの機能。会社のチームリーダーに教えてもらいました）

Break Onの起動オプションは以下の通りです。

option名 内容
Subtree modifications 現在選択されているノードの子が削除または追加されたとき、または子の内容が変更されたときにトリガーされます。子ノード属性の変更、または現在選択されているノードへの変更ではトリガーされません
Attribute modifications 現在選択されているノードで属性が追加または削除されたとき、または属性値が変更されたときにトリガーされます
Node removal 現在選択されているノードが削除された時にトリガーされます

手順

  1. Elementsパネルをひらく
  2. 下位要素が変化する、または自身の属性が変わる or 破棄される要素を選ぶ
  3. 右クリックでBreak onを選択、サブメニューのいずれかにチェックを入れる
  4. 画面上で変化のトリガーとなる操作をする

3. Exceptionの発生箇所で自動停止

エラー発生時に自動的にブレークポイントを設定することも可能です。
「console上にエラー出てるけど、何処で発生しているんだろう？」という時にわざわざ該当箇所を探しブレークポイントを設定する必要はありません。一瞬でデバッグできます。

手順

  1. Sourcesタブを開く
  2. 右側のデバッグコンソールのストップアイコンを押す
  3. Pause on caught exceptions にチェックを入れる
  4. エラーの発生する動作を行う

4. snippetの登録

良く使うスクリプトをsnippetとして登録する機能です。
登録したスクリプトはコントロールパネルから実行できます。私はちょっとしたデバッグ用のスクリプトなどを登録しています。

手順

  1. cmd + shift + p でコントロールパネルを開きsnippetで検索
  2. Sources Create new snippetを選択
  3. snippetウィンドウで自由にスクリプトを作成（自動保存されます）
  4. 実行ボタン、またはcmd + pでコントロールパネルを開き!を入力してsnippet一覧を表示し実行

5. ScreenShot（フルページ or ノード）

スクロール分を含んだフルページのスクリーンショットを撮りたい時ってありますよね。そんな時はおそらくChrome拡張を使っている人が多いと思います。
でも実はDevTools単体でもできます。他にも、Screenshot Capture node screenshotを選べばElementsの選択画面で選択しているノードの範囲でのスクリーンショットもお手軽に撮れます。

手順

  1. cmd + shift + P でコントロールパネルを開きscreenで検索
  2. Screenshot Capture full screenshotを選択
  3. フルページのスクリーンショットがダウンロードされる

6. APIリクエストの実行形式でのコピー

APIのテストや別クライアントでの操作の際に、APIリクエストをcURLやその他の形式で使いたいって時あると思います。そんな時もDevToolsが使えます。
ネットワークタブからリクエストを選び、右クリックでCopyを選択するだけで様々な実行形式のコードベースが取得可能です。

手順

  1. Networkタブを開く
  2. コピーしたいリクエストを選択して右クリック
  3. Copyのサブメニューから指定の形式を選ぶ

7. 使用していないCSS、JSの調査

DevTools単体で静的解析的に、ロードしているものの未使用のCSS、JSを調べることも可能です。
※ あくまでページ単体での調査なので、全ページで使う共通スクリプトをbunldeしていると値が悪く出たりします。そこは注意が必要です。

  1. cmd + shift+ P でコントロールパネルを開く
  2. Show Coverageを選択
  3. 表示されるタブで、リロードボタンを実行

apx. 画面上で自由にテキスト編集

これはChrome DevToolsの機能という訳ではないのですが、分かりやすく凄いので紹介します。
DevToolsのConsoleタブ上で以下のコードを実行すると、画面上の要素を自由に改変できるようになります。
文字列を編集したり、画像を削除したり色々できます。

document.designMode = "on"

ちょっと表現を変えてデザインを見てみたりとかする時に便利です。

ちなみに$0と組み合わせて、選択中の要素を編集可能にしたい場合は以下でも出来ます。

$0.contentEditable = 'true'

終わりに

以上「開発体験を変えるChrome DevTools Tips 7選」でした。
ふと調べ始めたら色々ありました。知ってると知らないとでデバッグ効率や開発体験がかなり変わると思います。
まだまだ知らない便利な機能があると思うので、よく使っている機能などあればコメントやRTで教えてもらえると嬉しいですー!

参考

1538
1576
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1538
1576