JavaScriptのデバッグ

JavaScript デバッグ

デバッグツールなしで JavaScript プログラムを作成するのは困難です。

コードには構(gòu)文エラーや論理エラーが含まれている可能性があり、デバッグツールがなければ、これらのエラーを見(jiàn)つけるのは困難です。

通常、JavaScriptにエラーがあった場(chǎng)合、プロンプトメッセージが表示されないため、コードエラーの場(chǎng)所を見(jiàn)つけることができません。

JavaScript デバッグツール

プログラムコード內(nèi)のエラーを見(jiàn)つけることは、コードデバッグと呼ばれます。

デバッグは難しいですが、幸いなことに、多くのブラウザにはデバッグツールが組み込まれています。

組み込みのデバッグツールは開(kāi)始または停止でき、重大なエラーメッセージがユーザーに送信されます。

デバッグツールを使用すると、ブレークポイント (コードの実行が停止する場(chǎng)所) を設(shè)定し、コードの実行中に変數(shù)を検出できます。

ブラウザでデバッグツールを有効にするには、通常、F12キーを押して、デバッグメニューで「コンソール」を選択します。

JavaScript プログラムをデバッグするには、alert() よりも console.log() を使用する方が良い方法です。その理由は、alert() 関數(shù)が JavaScript プログラムの実行をブロックするため、副作用とコンソールが発生するためです。 log() は関連情報(bào)のみをコンソールに出力するため、同様の懸念は生じません

console.log() とは何ですか?

一部の非常に古いバージョンのブラウザを除いて、現(xiàn)在のほとんどのブラウザにはデバッグ機(jī)能が組み込まれており、デバッグ機(jī)能がなくても、プラグインをインストールすることで補(bǔ)完できます。たとえば、古いバージョンの Firefox にはデバッグツールが組み込まれていません。この場(chǎng)合、Firebug プラグインをインストールすることでデバッグ機(jī)能を追加できます。デバッグ機(jī)能のあるブラウザでは、console という名前のメンバー変數(shù)が window オブジェクトに登録され、デバッグツールのコンソールを參照します。コンソールオブジェクトの log() 関數(shù)を呼び出すことで、コンソールに情報(bào)を出力できます。たとえば、次のコードは、コンソールに「サンプルログ」を出力します。

コードは次のとおりです。 window.console.log("Sample log");

上記のコードは、ウィンドウオブジェクトを無(wú)視して、直接省略すると:

コードは次のとおりです:console.log("Sample log");

console.log() は、任意の文字列、數(shù)値、JavaScript オブジェクトを受け入れることができます。 alert() 関數(shù)と同様に、console.log() も改行文字 n とタブ文字 t を受け入れることができます。 console.log() ステートメントによって出力されるデバッグ情報(bào)は、ブラウザのデバッグコンソールで確認(rèn)できます。 console.log() の動(dòng)作はブラウザによって異なる場(chǎng)合があります。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
  <script type="text/javascript">
    //變量 
    var i = 'I am a string'; 
    console.log('變量：',i); 
    //數(shù)組 
    var arr = [1,2,3,4,5]; 
    console.log('數(shù)組：',arr); 
    //對(duì)象 
    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('對(duì)象：',obj1); 
    //對(duì)象數(shù)組 
    var objArr1 = [obj1,obj2,obj3]; 
    var objArr2 = [[obj1],[obj2],[obj3]]; 
    console.log('對(duì)象數(shù)組1：',objArr1); 
    console.log('對(duì)象數(shù)組1：',objArr2); 
  </script>
</head>
<body>
  <p>
  瀏覽器中(Chrome, IE, Firefox) 使用 F12 來(lái)啟用調(diào)試模式， 在調(diào)試窗口中點(diǎn)擊 "Console" 菜單。
  </p>
</body>
</html>

debugger キーワード

debugger キーワードは、JavaScript の実行を停止し、デバッグ関數(shù)を呼び出すために使用されます。

このキーワードは、デバッグツールでブレークポイントを設(shè)定するのと同じ効果があります。

デバッグが利用できない場(chǎng)合、デバッガーステートメントは機(jī)能しません。

デバッガを有効にすると、コードは 3 行目より前で実行を停止します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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ブラウザ

ブラウザを開(kāi)きます。メニューから「ツール」を選択します。「ツール」から「開(kāi)発者ツール」を選択します。最後に、「コンソール」を選択します。

Firefox ブラウザ

ブラウザを開(kāi)きます。ページにアクセスしてください:
http://www.getfirebug.com。指示に従ってください:
Firebug をインストールします。

Internet Explorer ブラウザ。

Opera

ブラウザを開(kāi)きます。 Opera の組み込みデバッグツールは Dragonfly です。詳細(xì)な手順については、ページ
http://www.opera.com/dragonfly/ を參照してください。

Safari

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

學(xué)び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <script type="text/javascript"> //變量 var i = 'I am a string'; console.log('變量：',i); //數(shù)組 var arr = [1,2,3,4,5]; console.log('數(shù)組：',arr); //對(duì)象 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('對(duì)象：',obj1); //對(duì)象數(shù)組 var objArr1 = [obj1,obj2,obj3]; var objArr2 = [[obj1],[obj2],[obj3]]; console.log('對(duì)象數(shù)組1：',objArr1); console.log('對(duì)象數(shù)組1：',objArr2); </script> </head> <body> <p> 瀏覽器中(Chrome, IE, Firefox) 使用 F12 來(lái)啟用調(diào)試模式，在調(diào)試窗口中點(diǎn)擊 "Console" 菜單。 </p> </body> </html>

提出するリセットコード

自動(dòng)運(yùn)転