JavaScriptのデバッグには、代表的なツールとしてブラウザの「開発者ツール」があります。Microsoft Edgeを事例にできることの備忘録です。
内容:
開発者ツールの起動
Microsoft Edgeの開発者ツール(DevTools)の起動方法は、デバッグしたいウェブページをEdgeで開き、次のような方法があります。
- Ctrl+Shift+I のキーを押す(キーボードの F12 キーでも可)
- Webページの画面を右クリックして「開発者ツールで調査する」を選択します。
これで、開発者ツールが起動します。
実施できること
- ページに読み込まれているJavaScriptの確認
開発者ツール上部の「ソース」タブから確認できます。 - ブレークポイントを設定し、実行の一時停止
- コードを1行ずつ実行
「ステップオーバー」や「ステップイン」ボタンを使って、コードを1行ずつ実行できます。 - 変数値を確認する
[ スコープ ] ウィンドウや、console.log() を使用して変数の値を出力できます。
例えば、コードを1行ずつ実行の画面は以下です。
なお、Microsoft Edge DevTools の詳細情報は以下です。
参考: kintoneカスタマイズでのデバッグ方法
kintoneでの簡単なデバッグの基本です。
以上、ブラウザを使用したJavaScriptのデバッグ方法でした。