JavaScriptのデバッグ


JavaScriptを書くとき、デバッグツールがないと大変です。

JavaScript デバッグ

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

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

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


Note 通常、新しい JavaScript コードを作成するとエラーが発生します。

JavaScript デバッグ ツール

プログラム コード内のエラーを見つけることは、コード デバッグと呼ばれます。

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

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

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

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

console.log() メソッド

ブラウザがデバッグをサポートしている場合は、console.log() メソッドを使用してデバッグ ウィンドウに JavaScript 値を出力できます:

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
	
</body>
</html>

Runインスタンス»

[サンプルの実行] ボタンをクリックしてオンラインサンプルを表示します

ブレークポイントを設定します

デバッグウィンドウでは、JavaScript コードにブレークポイントを設定できます。

各ブレークポイントで、JavaScript コードの実行が停止され、チェックできるようになります。 JavaScript 変数の値。

確認後、コード(再生ボタンなど)を再実行することができます。

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>
<p>开启调试工具，在代码执行到第三行前会停止执行。</p>
<script>
var x = 15 * 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

  • ブラウザを開きます。

  • マウスを右クリックし、「要素の検査」を選択します。

  • 下部のポップアップウィンドウで「コンソール」を選択します。