普段ウェブサイトを修正する時に Chrome DevTools のような開発者ツール、ディベロッパーツールを使うのは当たり前になってきています。自分の勉強も含めて、使い方についてまとめました。
起動
まず起動しましょう。F12
で起動できますが、ファンクションキーは微妙に押しずらかったりするのでCtrl + Shift + I
で起動するか、要素選択状態から始められるCtrl + Shift + C
もおすすめです。
設定
起動後に、右上にある︙
マークから各種設定を行えます。
- Dock side … DevTools の位置を変更できる
- Hide console Drawer … 後述する Console ブロック表示切替え
- Search … 現在のページで読み込んでいるソースファイル全体から文字列検索を行う
- Run command … DevTools で使えるコマンドを実行する。マウスを使いたくない人向け
- Open file … 現在のページで読み込んでいるソースファイルを開く。
- More tools … なんか色々できる(
- Shortcuts … ショートカットの確認
- Settings … 各種設定
この中でよく使うのは、Search、Open file ですかね。
特に Search は全ファイルから文字列を検索できるので、この id とか class どこで使ってるかな?みたいな時にサクっと検索できるのがありがたいです。Search はCtrl + Shift + F
でも使えます。
Settings はとりあえず Theme を Dark にして、DevTools をダークテーマにしとくとカッコいいです。
各パネル
DevTools の上部にあるパネルの説明です。
Elements
HTML が表示されます。load 後に Javascript が動作した後のコードなので、Ctrl + U
で表示したソースコードとは異なります。もし Javascript 動作前のコードが見たい場合はそちらを見てください。
要素選択
DevTools の左上にあるを押すと、要素選択状態になります。この状態でページ上にある要素をクリックすると、Element パネルの HTML の方も対象までジャンプします。この機能を使うことが非常に多いのですが、
Ctrl + Shift + C
でも同じ状態になるので便利です。
また、HTML ソースコードの方で右クリックすると、その要素の修正を行えます。
- Add Attribute / Edit Attribute … 属性の追加と編集
- Edit as HTML … 要素の HTML を修正できる
- Delete element … 要素削除
- Copy … 色んな形式でコピーできる
- Hide element … 要素を非表示にできる。削除と違ってソースコードからは消えないので、復活もできる。
- Force state … 要素の状態を強制的に変更できる。hover 状態の時に要素がどうなるか確認したい時に便利
- Break on … その要素の変更や削除があった時に、処理を止めることが出来る
- Expand recursively … 子要素を全て展開する
- Collapse Children … 子要素を全て閉じる
- Scroll into view … 要素までスクロール移動する
- Focus … 謎(
- Store as global variable … 要素の DOM を仮の変数に代入する
Edit as HTML なんかはたまに使います。名前の変更でよく割り当てられるF2
でも同じことができます。属性は属性名をダブルクリックすればそのまま編集できるので、コンテキストメニューから選ぶよりも早いです。
要素はドラッグして移動できるので、順番を変えたり、他の要素の子要素にとして入れたりすることが簡単にできます。
Styles スタイルの確認と変更
Styles パネルから、リアルタイムに CSS の修正をすることができます。今どんなスタイルが当たっているのか一括で見たい時は、Styles パネルの隣にある Computed パネルを見ます。プロパティ名をクリックすると、どのスタイルが優先されているか、どのファイルのどの行に記述があるか確認できます。
数値の変更
スタイルを調整する時に、10px, 11px, 12px … というように数値を変更することがあると思います。いちいち打ち込むのは面倒ですが、↑↓キーを押すと 1 ずつずらすことができます。一気に数値を増減させたい時は下記も使うと便利です。
Ctrl + ↑↓
… 10 単位Ctrl + Shift + ↑↓
… 100 単位Alt + ↑↓
… 0.1 単位
Event Listeners
選択している要素にくっついているイベントの一覧を確認できます。また、イベント名を押すとどのファイルでそのイベントが追加されているのか確認できます。また、イベントの詳細にホバーした時に表示される remove を押すと、イベントを削除することが出来ます。
エラーの検証等でイベント実行途中で処理を止めたいといった時は、後述する Souces パネルでの内容を確認して下さい。
Console
console の使用は Javascript を扱うなら必須になってきます。ページ内のエラーを探すのにも便利です。またconsole.log()
を使った時の出力先です。
Javascript を書く
直接コードを記述できます。
Sources
現在のページで読み込んでいるソースファイルの中身を閲覧できます。また、Javascript のブレイクポイントを設定したり、処理のステップ実行を行うことができます。
続きはまた追記します。