ブラウザーで JavaScript の問題を診断する方法を説明します。

JavaScript エラーの例

Uncaught TypeError: $(...).not(...).draggable is not a function
at HTMLDocument.(lightbox.js:45)
at HTMLDocument.dispatch (jquery.js:4665)
at HTMLDocument.elemData.handle (jquery.js:4333)
at Object.trigger (jquery.js:4574)
at HTMLElement.(jquery.js:5284)
at Function.each (jquery.js:384)
at jQuery.fn.init.each (jquery.js:136)
at jQuery.fn.init.trigger (jquery.js:5283)

手順

  1. Chrome ブラウザーでエラーが発生したページを開きます。

  2. アドレスバーの URL の末尾にある URL アンカーの前にクエリ文字列パラメーターの「debugClientLibs=true」を追加します。
    例:
    http://localhost:4502/siteadmin? debugClientLibs=true#/content/geometrixx

  3. Chrome ブラウザーの右上のメニューで、Tools(ツール)/More Tools(その他のツール)/Developer Tools(デベロッパーツール)の順にクリックします。

  4.  Developer Tools(デベロッパーツール)パネルの「Console(コンソール)」をクリックします。

  5. JavaScript エラーが表示されます。各エラーの右側に、JavaScript コードのエラーが発生したファイルと行番号のリンクが表示されます。ファイルのリンクをクリックします。

  6. 「Sources(ソース)」タブでコードのエラーが発生した行に移動します。行番号を右クリックし、「Add breakpoint(ブレークポイントを追加)」を選択して、コードにブレークポイントを設定します。

  7. ページを更新し、JavaScript のデバッグを開始します。

デバッグに関するヒント:
エラーや問題がタッチ操作対応 UI のクリック可能なボタンに関連している場合は、ページ上の該当の要素と関連するイベントハンドラーをすべて確認することをお勧めします。ボタン、画像、リンクなどを右クリックし、「Inspect(検査)」を選択します。下部パネルに選択した HTML 要素が表示されます。右下のパネルにはタブが表示されます。「Event Listeners(イベントリスナー)」タブを選択し、要素に関連付けられたイベントリスナーを確認します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー