本記事は、開発体験を変える! Chrome DevTools Tips 7選 にインスパイアされ、Firefox の実装状況を確認したものになります。
Chrome との比較のため、元記事を引用しながら説明します。
1.
$0で選択中のDOM要素の取得特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleで
document.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。
Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。
手順
- カーソルで取得したい要素を選ぶ
- コンソールタブで
$0を入力
Chrome の Console Utilities API と、ほぼ同等のものが Firefox にも用意されています。
Helper commands の一例
$(selector, element)
CSS セレクター文字列セレクターを検索し、一致する要素から派生した最初のノードを返します。指定しない場合、要素はデフォルトでドキュメントになります。 document.querySelector() と同等、または \$ 関数が存在すれば、\$ 関数を呼び出します。
$('#hoge')
$$(selector, element)
CSSセレクター文字列セレクターを検索し、一致する要素から派生した DOM ノードの配列を返します。指定しない場合、要素はデフォルトでドキュメントになります。これはdocument.querySelectorAll（）に似ていますが、NodeListではなく配列を返します。
$$('div')
$x(xpath, element, resultType)
要素のコンテキストで XPath xpath 式を評価し、一致するノードの配列を返します。指定しない場合、要素はデフォルトでドキュメントになります。 resultType パラメータは、返される結果のタイプを指定します。
XPathResult 定数または対応する文字列：「number」、「string」、「bool」、「node」、または「nodes」。
指定しない場合は、ANY_TYPEが使用されます。
$x("//p")
2. DOM変化からのDebugger起動（Break on）
DevToolsでのデバッグというとソースコード上に
debuggerを仕込んでというのがありますが、ソースコードを何もいじらずDevTools単体でも実行できます。
1つはインスペクタータブからのブレークポイントの設定です。
何か表示が変わるDOM要素を選択して右クリックでブレークポイントの設定を選択、表示されるサブメニューでいずれかの項目にチェックを入れます。
その状態で画面上にて表示の変化のトリガーとなる動作を行うと、DOMの変化の実行前に処理が止まり、該当変化のイベント処理からステップ実行が可能になります。
ブレークポイントの設定のオプションは以下の通りです。
| option名 | 内容 |
|---|---|
| サブツリーの変更 | 現在選択されているノードの子が削除または追加されたとき、または子の内容が変更されたときにトリガーされます。子ノード属性の変更、または現在選択されているノードへの変更ではトリガーされません |
| 属性の変更 | 現在選択されているノードで属性が追加または削除されたとき、または属性値が変更されたときにトリガーされます |
| ノードの削除 | 現在選択されているノードが削除された時にトリガーされます |
手順
- インスペクタータブをひらく
- 下位要素が変化する、または自身の属性が変わる or 破棄される要素を選ぶ
- 右クリックで
ブレークポイントの設定を選択、サブメニューのいずれかにチェックを入れる - 画面上で変化のトリガーとなる操作をする
3. Exceptionの発生箇所で自動停止
エラー発生時に自動的にブレークポイントを設定することも可能です。
「console上にエラー出てるけど、何処で発生しているんだろう？」という時にわざわざ該当箇所を探しブレークポイントを設定する必要はありません。一瞬でデバッグできます。
手順
- デバッガータブを開く
- 右側のブレークポイントペインにある
ブレークポイント → 例外で停止にチェックを入れる - エラーの発生する動作を行う
4. snippetの登録
良く使うスクリプトをsnippetとして登録する機能です。
登録したスクリプトはコントロールパネルから実行できます。私はちょっとしたデバッグ用のスクリプトなどを登録しています。
これは結構手順が違いました。
手順
- コンソールタブを開きます
-
ctrl+bでマルチラインモードに切り替えます。 - マルチラインモードで自由にスクリプトを作成
-
ctrl+sで名前を付けて保存 -
ctrl+oで読み込み
5. ScreenShot（フルページ or ノード）
スクロール分を含んだフルページのスクリーンショットを撮りたい時ってありますよね。そんな時はおそらくChrome拡張を使っている人が多いと思います。
でも実はDevTools単体でもできます。他にも、Screenshot Capture node screenshotを選べばElementsの選択画面で選択しているノードの範囲でのスクリーンショットもお手軽に撮れます。
これは、Firefox だとアドレスバーにある三点リーダから選択できます。
自由エリア選択も可能です。
手順
- アドレスバーにある三点リーダからスクリーンショットを撮るを選択
6. APIリクエストの実行形式でのコピー
APIのテストや別クライアントでの操作の際に、APIリクエストをcURLやその他の形式で使いたいって時あると思います。そんな時もDevToolsが使えます。
ネットワークタブからリクエストを選び、右クリックでCopyを選択するだけで様々な実行形式のコードベースが取得可能です。
手順
- ネットワークタブを開く
- コピーしたいリクエストを選択して右クリック
- コピーのサブメニューから指定の形式を選ぶ
7. 使用していないCSS、JSの調査
DevTools単体で静的解析的に、ロードしているものの未使用のCSS、JSを調べることも可能です。
※ あくまでページ単体での調査なので、全ページで使う共通スクリプトをbunldeしていると値が悪く出たりします。そこは注意が必要です。
残念ながら、Firefox ではできないようです。
CSSカバレッジ
apx. 画面上で自由にテキスト編集
これはChrome DevToolsの機能という訳ではないのですが、分かりやすく凄いので紹介します。
DevToolsのConsoleタブ上で以下のコードを実行すると、画面上の要素を自由に改変できるようになります。
文字列を編集したり、画像を削除したり色々できます。
こっちはできます。
document.designMode = "on"
ちょっと表現を変えてデザインを見てみたりとかする時に便利です。
ちなみに$0と組み合わせて、選択中の要素を編集可能にしたい場合は以下でも出来ます。
$0.contentEditable = 'true'
終わりに
以上「開発体験を変えるChrome DevTools Tips 7選」からの「開発体験を変える! Firefox DevTools Tips 7 - 1 選」でした。
思っていたよりも、同等の機能がありますね。
(なので、思っていた以上にパクリ記事になってしまいました＾＾；)
カバレッジの件は、個人的に結構残念です。