JavaScriptのデバッグ

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

ブラウザを開きます。マウスを右クリックし、「要素の検査」を選択します。下部に表示されるウィンドウで「コンソール」を選択します。

学び続ける

新しいファイル

<!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>

リセットコード

自動運転

提出する

プレビュー Clear