JavaScriptのデバッグ

プログラムやスクリプトの中のエラーと呼ばれますbug。

デバッグ(Debugging)は、コンピュータプログラム（bug）の中のエラーを見つけ出し、減少させるプロセスです。

JavaScriptデバッガー

すべての主流ブラウザには内蔵のJavaScriptデバッガーがあります。

内蔵のデバッガーを開閉し、エラーレポートをユーザーに通知できます。

デバッガーを使用して、コードの実行を停止できる場所（ブレークポイント）でコードを一時停止できます。

一旦実行が停止すると、スクリプトの状態や変数を確認し、問題がないかを確定できます。

変数の値の変化過程を観察することもできます。

console.log()メソッド

ブラウザがデバッグをサポートしている場合、これを使用してconsole.log();デバッガー窓口にJavaScriptの値を表示：

let　x　=　50;
let　y　=　20;
let　z　=　x　+　y;
console.log(z);

Webブラウザのコンソールにアクセスするには、まずF12キーボードのキーを押し、それから「コンソール」タブをクリック。

デバッガー(debugger)キーワード

デバッガーキーワードが呼び出すすべての利用可能なデバッグ機能、例えばブレークポイントの設定。

デバッグ機能が利用できない場合、この文は無効です。

以下のサンプルは、デバッガーを呼び出すためにdebugger文を挿入したコードを示しています：

var　a　=　50　+　20;
debugger;
document.getElementById("output").innerHTML　=　a;

デバッガーを呼び出すと、debugger文の実行が停止します。これはスクリプトソースのブレークポイントのようなものです。

主要ブラウザのデバッグツール

通常、ブラウザをアクティブにして使用しますF12のデバッグから、デバッガーメニューで「コンソール」を選択。

そうでない場合は、以下の手順に従ってください：

Chrome

• ブラウザを開く

• メニューから「更多工具」を選択

• ツールから「開発者ツール」を選択

• 最後にコンソールを選択

FireFox

• ブラウザを開く

• メニューから「Web開発者」を選択

• 最後に「Webコンソール」を選択

Edge

• ブラウザを開く

• メニューから「開発者ツール」を選択

• 最後に「コンソール」を選択

Opera

• ブラウザを開く

• メニューから「開発者」を選択

• 「開発者」から「開発者ツール」を選択
  

• 最後に「コンソール」を選択

Safari

• メインメニューのSafari、設定、詳細に移動

• 「メニューバーで開発メニューを表示する」にチェックを入れる

• 新しいオプション「開発」がメニューに表示された場合：
  「エラーデータベースを表示する」を選択