Webブラウザーの開発者ツールでのJavaScriptデバッグ

develop/JavaScript
2023.05.21
概要

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] が手っ取り早く開始できます。

画面

開発者ツールを開始したので、画面構成を確認します。

この投稿は Gold and Silver の会員限定 (月額Free=0円、Silver=1100円、Gold=3300円) です。記録が目的であり、元投稿の削除・炎上回避、運営費・GNU socialの開発資金などのため会員限定にしています。

このサイトでは分散SNSの話題を1年以上毎日更新しており、情報量、更新頻度は日本一だと思います。最新動向・詳細情報を把握したい人は、会員登録/ログインをお願いします (About Member)。

Comments

Copied title and URL