JavaScript デバッグ
デバッグ ツールなしで JavaScript プログラムを作成するのは困難です。
コードには構文エラーや論理エラーが含まれている可能性があり、デバッグ ツールがなければ、これらのエラーを見つけるのは困難です。
通常、JavaScriptにエラーがあった場合、プロンプトメッセージが表示されないため、コードエラーの場所を見つけることができません。
JavaScript デバッグ ツール
プログラム コード内のエラーを見つけることは、コード デバッグと呼ばれます。
デバッグは難しいですが、幸いなことに、多くのブラウザにはデバッグ ツールが組み込まれています。
組み込みのデバッグ ツールは開始または停止でき、重大なエラー メッセージがユーザーに送信されます。
デバッグ ツールを使用すると、ブレークポイント (コードの実行が停止する場所) を設定し、コードの実行中に変数を検出できます。
ブラウザでデバッグツールを有効にするには、通常、F12キーを押して、デバッグメニューで「コンソール」を選択します。
JavaScript プログラムをデバッグするには、alert() よりも console.log() を使用する方が良い方法です。その理由は、alert() 関数が JavaScript プログラムの実行をブロックするため、副作用とコンソールが発生するためです。 log() は関連情報のみをコンソールに出力するため、同様の懸念は生じません
console.log() とは何ですか?
一部の非常に古いバージョンのブラウザを除いて、現在のほとんどのブラウザにはデバッグ機能が組み込まれており、デバッグ機能がなくても、プラグインをインストールすることで補完できます。たとえば、古いバージョンの Firefox にはデバッグ ツールが組み込まれていません。この場合、Firebug プラグインをインストールすることでデバッグ機能を追加できます。デバッグ機能のあるブラウザでは、console という名前のメンバー変数が window オブジェクトに登録され、デバッグ ツールのコンソールを参照します。コンソール オブジェクトの log() 関数を呼び出すことで、コンソールに情報を出力できます。たとえば、次のコードは、コンソールに「サンプル ログ」を出力します。
コードは次のとおりです。 window.console.log("Sample log");
上記のコードは、ウィンドウ オブジェクトを無視して、直接省略すると:
コードは次のとおりです:console.log("Sample log");
console.log() は、任意の文字列、数値、JavaScript オブジェクトを受け入れることができます。 alert() 関数と同様に、console.log() も改行文字 n とタブ文字 t を受け入れることができます。 console.log() ステートメントによって出力されるデバッグ情報は、ブラウザのデバッグ コンソールで確認できます。 console.log() の動作はブラウザによって異なる場合があります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script type="text/javascript">
//变量
var i = 'I am a string';
console.log('变量：',i);
//数组
var arr = [1,2,3,4,5];
console.log('数组：',arr);
//对象
var obj1 = {
key1 : 'value1',
key2 : 'value2',
key3 : 'value3'
};
var obj2 = {
key6 : 'value4',
key5 : 'value5',
key4 : 'value6'
};
var obj3 = {
key9 : 'value7',
key8 : 'value8',
key7 : 'value9'
};
console.log('对象：',obj1);
//对象数组
var objArr1 = [obj1,obj2,obj3];
var objArr2 = [[obj1],[obj2],[obj3]];
console.log('对象数组1：',objArr1);
console.log('对象数组1：',objArr2);
</script>
</head>
<body>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
</body>
</html>debugger キーワード
debugger キーワードは、JavaScript の実行を停止し、デバッグ関数を呼び出すために使用されます。
このキーワードは、デバッグ ツールでブレークポイントを設定するのと同じ効果があります。
デバッグが利用できない場合、デバッガーステートメントは機能しません。
デバッガを有効にすると、コードは 3 行目より前で実行を停止します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
</head>
<body>
<p id="demo"></p>
<script>
var x = 5 * 5 + 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>主要ブラウザ用のデバッグツール
通常、ブラウザでデバッグツールを有効にするには、F12キーを押してデバッグメニューで「コンソール」を選択します。
各ブラウザの手順は次のとおりです:
Chromeブラウザ
ブラウザを開きます。メニューから「ツール」を選択します。 「ツール」から「開発者ツール」を選択します。最後に、「コンソール」を選択します。
Firefox ブラウザ
ブラウザを開きます。ページにアクセスしてください:
http://www.getfirebug.com。指示に従ってください:
Firebug をインストールします。
Internet Explorer ブラウザ。
ブラウザを開きます。メニューから「ツール」を選択します。 「ツール」から「開発者ツール」を選択します。最後に、「コンソール」を選択します。
Opera
ブラウザを開きます。 Opera の組み込みデバッグ ツールは Dragonfly です。詳細な手順については、ページ
http://www.opera.com/dragonfly/ を参照してください。
Safari
ブラウザを開きます。マウスを右クリックし、「要素の検査」を選択します。下部に表示されるウィンドウで「コンソール」を選択します。
次のセクション