概要
GNU socialのQvitterのバグに対応しています。その際に、JavaScriptのエラーが発生していて処理が止まっていることがけっこうあります。
Webブラウザーの開発者ツールを使えば、スタックトレース (直近の関数コールツリー) や、クラッシュ箇所、クラッシュ時の変数を確認したり、特定の変数・処理にブレークポイントを作成して、特定条件で動作を停止させて、変数の値などを確認したりできます。
今まではスタックトレースの確認くらいでしか使ったことがありませんでした。クラッシュ時の変数の値や、ブレークポイントなどを使いこなせると、だいぶ問題の原因を理解できます。今後のためにWebブラウザーの開発者ツールを学びます。
「ブラウザーの開発者ツールとは？ – ウェブ開発を学ぶ | MDN」を参考にしました。Webブラウザーによって、多少画面構成などが異なりますが基本は同じです。MDNにある通り、今回はFirefox v111.0で確認しました。
開始
Webブラウザーの開発者ツールは複数の方法で開始できます。
- メニュー-[More tools]-[ウェブ開発ツール]
- F12
- C-I (Mac=command-option-i)
- 右クリック (Mac=Ctrlクリック)-コンテキストメニュー-[Inspect] ([Inspect Accessibility Properties])
右クリックの [Inspect] か [F12] が手っ取り早く開始できます。
画面
開発者ツールを開始したので、画面構成を確認します。
開発者ツールを開くと以下のタブが存在します。
- インスペクター: 表示コンテンツのHTML/CSSの調査。
- コンソール: JavaScriptのログ。コマンドライン。
- デバッガ―: JavaScriptのデバッガー。
- ネットワーク: HTTP通信の要請・応答の時系列表示。
- スタイルエディター: CSS。
- パフォーマンス: 速度計測。
- メモリー: 使用メモリー。
- ストレージ: キャッシュ、HTTP Cookies、Indexed DB、Local Storage、Session Storage。
- アクセシビリティ: アクセシビリティロールの確認。
- アプリケーション: Service Workers/Manifest。
特によく使うのが「インスペクター」、「コンソール」、「ネットワーク」、「ストレージ」だと思います。
タブの右端の四角のマークで、レスポンシブデザインモード (モバイル端末表示) のオン・オフを変更できます。
その右の […] で開発者ツールの表示位置を選べます。
[Settings] から開発者ツールの設定を行えます。タブの表示項目もオン・オフできるので、あまり使わない項目は非表示にしたほうがいいかもしれません。
デバッガー
JavaScriptのデバッグで特に重要で、あまり私が理解していなかった機能を紹介していきます。
まず、[デバッガー] タブです。
こちらの画面には3のペインがあります。
- ファイルリスト: デバッグページに関するファイルのリストを表示。項目を選ぶとファイルの中身を中央のペインに表示。
- ソースコード: ファイルの中身を表示。左端の行番号の選択で、ブレークポイント (プログラムの停止箇所) を設定可能。
- ウォッチ式とブレークポイント: 追加したウォッチ式とブレークポイントの一覧を表示。ブレークポイントで停止した場合、セクションが追加されて、コールスタックとスコープが追加表示される。停止箇所までの直近の関数表示と、停止箇所で参照可能な変数の値を確認可能。
特に、問題発生時は例外が出ていることが多いので、[ブレークポイント] に [例外で停止] や [補足した例外で停止] を指定するだけで、停止箇所のコールスタックとその時の変数の値を確認できるのが便利に思いました。
コンソール
続いて [コンソール] タブです。
こちらの画面では、Webブラウザーで現在読み込まれたページに対して、JavaScriptを実行して、発生したエラーを報告してくれます。コードの実行とそのエラー結果を確認できます。
Webページの動作がおかしい場合、こちらのコンソール画面にエラーが出ている場合が多いです。ここでエラーの内容を確認して、デバッガータブで詳細情報を確認するという流れで原因の調査ができそうです。
結論
Webブラウザーの開発者ツールの紹介でした。
今までは、JavaScriptに関してはコンソールしか使ったことがありませんでした。動作確認をしているとデバッガータブが便利だということに気づいての学習でした。その他、設定で普段使わないタブを非表示にできることも知りました。
今回は機能の紹介だけで具体的な使い方には触れませんでしたが、これだけでも私にとっては十分でした。今後さらに使いこなしていく必要があれば、その際にまた詳細を備忘録として紹介します。
詳細プロフィール。SNS: Twitter/[email protected]/[email protected]。2022-07-17からgnusocial.jpとweb.gnusocial.jpのサイトを運営しています。WordPressで分散SNSに参加しています。このアカウントの投稿に返信すると、サイトのコメント欄にも反映されます。自称ASD。
Comments