shikumika’s diary

日々の事務作業で手間なことを簡単にできる仕組み(自動化、方法など)、困ったことの解決方法を調べた備忘録

【JavaScript】ブラウザを使用したデバッグ方法

JavaScriptのデバッグには、代表的なツールとしてブラウザの「開発者ツール」があります。Microsoft Edgeを事例にできることの備忘録です。

内容:

開発者ツールの起動

Microsoft Edgeの開発者ツール(DevTools)の起動方法は、デバッグしたいウェブページをEdgeで開き、次のような方法があります。

  • Ctrl+Shift+I のキーを押す(キーボードの F12 キーでも可)
  • Webページの画面を右クリックして「開発者ツールで調査する」を選択します。

これで、開発者ツールが起動します。

実施できること

  • ページに読み込まれているJavaScriptの確認
    開発者ツール上部の「ソース」タブから確認できます。
  • ブレークポイントを設定し、実行の一時停止

  • コードを1行ずつ実行
    「ステップオーバー」や「ステップイン」ボタンを使って、コードを1行ずつ実行できます。
  • 変数値を確認する
    [ スコープ ] ウィンドウや、console.log() を使用して変数の値を出力できます。

例えば、コードを1行ずつ実行の画面は以下です。

ブレークポイントで、ステップオーバー、ステップインでの実行

コードを1行ずつ実行

なお、Microsoft Edge DevTools の詳細情報は以下です。

learn.microsoft.com

参考: kintoneカスタマイズでのデバッグ方法

kintoneでの簡単なデバッグの基本です。

cybozu.dev

以上、ブラウザを使用したJavaScriptのデバッグ方法でした。