最新のWeb開発のチュートリアル
×

JS チュートリアル

JS HOME JS 導入 JS どこへ JS 輸出 JS 構文 JS ステートメント JS 注釈 JS 変数 JS 演算子 JS 算術 JS 割り当て JS データの種類 JS 機能 JS オブジェクト JS 範囲 JS イベント JS ストリング JS 文字列メソッド JS 数字 JS 数のメソッド JS 数学 JS 日付 JS 日付形式 JS 日付の方法 JS 配列 JS アレイ方式 JS ブール値 JS 比較 JS 条件 JS スイッチ JS ループ For JS ループしながら JS ブレーク JS 型変換 JS 正規表現 JS エラー JS デバッギング JS 巻き上げ JS strictモード JS スタイルガイド JS ベストプラクティス JS 間違い JS パフォーマンス JS 予約語 JS JSON

JS フォーム

フォームバリデーション フォームAPI

JS オブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクトプロトタイプ

JS 機能

関数定義 ファンクションのパラメータ 関数の呼び出し 関数クロージャ

JS HTML DOM

DOM イントロ DOM メソッド DOM 資料 DOM 要素 DOM HTML DOM CSS DOM アニメーション DOM イベント DOM EventListener DOM ナビゲーション DOM ノード DOM ノードリスト

JS ブラウザ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS

JS 例 JS HTML DOM JS HTML 入力 JS HTML オブジェクト JS HTML イベント JS ブラウザ JS クイズ JS 概要

JS リファレンスマニュアル

JavaScript オブジェクト HTML DOM オブジェクト


 

JavaScriptデバッギング


デバッガなしでJavaScriptコードを書く迷子に簡単です。


JavaScriptのデバッグ

デバッガなしでJavaScriptコードを記述することは困難です。

あなたのコードは診断が難しい構文エラー、または論理エラーが含まれる場合があります。

JavaScriptコードにエラーが含まれている場合、多くの場合、何も起こりません。 そこには、エラーメッセージはありません、あなたはどこでエラーを検索する兆候を取得しません。

通常、エラーは、あなたには、いくつかの新しいJavaScriptコードを記述しようとするたびに発生します。


JavaScriptのデバッガ

プログラミングコード内のエラーを検索すると、コードのデバッグと呼ばれています。

デバッグは容易ではありません。 しかし幸いにも、すべての近代的なブラウザでは、組み込みのデバッガを持っています。

内蔵デバッガは、ユーザーに報告することがエラーを強制的にオン・オフすることができます。

デバッガを使用すると、また、ブレークポイント(コードの実行を停止させることができる場所)を設定し、コードの実行中に変数を調べることができます。

通常、それ以外の場合は、このページの下部にある手順に従ってください、あなたは、F12キーでブラウザでデバッグを有効化、およびデバッガメニューの「コンソール」を選択します。


console.log()メソッド

お使いのブラウザがデバッグをサポートしている場合は、使用することができますconsole.log()デバッガウィンドウでJavaScript値を表示するには:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>
»それを自分で試してみてください

ブレークポイントの設定

デバッガ・ウィンドウでは、JavaScriptコードにブレークポイントを設定することができます。

各ブレークポイントで、JavaScriptが実行を停止し、あなたがJavaScriptの値を調べてみましょうになります。

値を調べた後、あなたは(一般的に再生ボタン付き)、コードの実行を再開することができます。


デバッガのキーワード

デバッガのキーワードには、JavaScriptの実行、およびコール(使用可能な場合)デバッグ機能を停止します。

これは、デバッガでブレークポイントを設定するのと同じ機能を有しています。

何のデバッグが使用できない場合、デバッガ文は効果がありません。

デバッガをオンにすると、このコードは、それが第三の行を実行する前に、実行を停止します。

var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;
»それを自分で試してみてください

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

通常は、F12とお使いのブラウザでデバッグを有効化、およびデバッガメニューの「コンソール」を選択します。

それ以外の場合は、次の手順に従います。

Chrome

  • ブラウザを開きます。
  • メニューから、[ツール]を選択します。
  • ツールから、開発者用ツールを選択します。
  • 最後に、コンソールを選択します。

Firefox Firebug

  • ブラウザを開きます。
  • Webページに移動します。
    http://www.getfirebug.com
  • どのように指示に従ってください:
    Firebugのインストール

Internet Explorer

  • ブラウザを開きます。
  • メニューから、[ツール]を選択します。
  • ツールから、開発者用ツールを選択します。
  • 最後に、コンソールを選択します。

Opera

  • ブラウザを開きます。
  • Webページに移動します。
    http://dev.opera.com
  • どのように指示に従ってください:
    あなたのツールバーにデベロッパーコンソールのボタンを追加します。

Safari Firebug

  • ブラウザを開きます。
  • Webページに移動します。
    http://extensions.apple.com
  • どのように指示に従ってください:
    Firebugのライトをインストールしてください。

Safari Develop Menu

  • メインメニューのサファリ、環境設定、詳細設定に移動します。
  • チェック「メニューバーにメニューを開発表示を有効にします」。
  • 新しいオプション「開発」はメニューに表示されたら:
    「エラーコンソールを表示」を選択します。

知ってますか?

デバッグは、テストの過程で発見、およびコンピュータプログラムのバグ(エラー)を低減します。
最初の既知のコンピュータのバグは、電子機器で立ち往生本当のバグ(虫)でした。