ウェブサイトでJavaScriptの競合が発生しているかどうかを確認するにはどうすればよいですか？

Question

私は現在、CMSシステムにホストされている自己のウェブサイトを移動しています。現在のサイトでは、SqueezeBox.jsと呼ばれるモーダルポップアップスクリプトが使用されています。 サムネイル画像をクリックするとモーダルポップアップボックスが表示されません。

ヘッダーのコードを見ると、私が使用しているCMSでも多数の他のjavascriptファイルが呼び出されていることがわかりました。そのうちの1つが矛盾しているのかどうか疑問に思っています。

これが該当するかどうかを調べる最も良い方法は何ですか？私はFirefoxのプラグインWeb Developerを試しましたが、エラーコンソールで何も見ることができません。しかし、私はそれが正しく使用されていることを100％確信していません。他の誰かが、JavaScriptの競合検出器を使用する簡単な方向に私を指すことはできますか？

乾杯

アダム

Answer 1

Google Chromeをお持ちの場合は、開発者ツールを開くと、あなたは、「スクリプト」タブに移動し、あなたのJavaScriptファイルを開いて、クリックハンドラを探すことができます。..クリックブレークポイントを設定するコードの横に沿って、そのコードがその場所に到達すると（例えばクリックすると）、それが一時停止し、開発者ツールでは、どの関数が呼び出されているのかを確認できますコードを介して。また、コードウィンドウ内の任意の変数にカーソルを置くと、その値が表示されます。とても便利な！プラグインにプラグインが入っているかどうかを確認することができます（プラグインの中にブレークポイントを設定すると、実行時に常にアクセスされる最初の行のような場所に設定できます）。

は、私はあなたがdo the same thing with Firebug

することができますそれは（上となどオフブレークポイントを回し、ステップオーバー、へのステップ）に入るために別の思考プロセスのビットだが、それは非常に有用だと考えています。

問題の発生場所を確認するより簡単な方法は、アラートを追加することです（「作業中です。それが動作しているかどうかわからないコードと似たようなものです。変数に警告して、その時点での値が何かを確認することもできます。 consoleコマンドを使用してFirebugのコンソールにそれを表示することもできます。これらは、コードを変更する必要がないデバッグを除いて、ブレークポイント/デバッグが行うことをしています。

Answer 2

javascriptエラーがある場合は、firebugまたはChromeインスペクタを使用しています（サムネイルを右クリックして[要素を検査]を選択してください）。いずれかのコンソールタブを開き、ページを更新します。エラーがある場合は、コンソールに報告され、該当する行へのリンクが表示されます。

エラーが報告されない場合、コードのロジックによってボックスが表示されなくなります。エラーを見つけるには、コードをステップ実行する必要があります。どの機能がサムネイル画像のクリックハンドラから呼び出されているか調べてください。いずれかのツールでその関数に移動し、関数の最初の行にブレークポイントを置きます。もう一度サムネイルをクリックすると、コードはその行で一時停止します。そこからコードをステップバイステップで実行し、どのコードブランチが続くかを確認することができます。ある時点では正常性チェックが失敗し、コードが爆発する可能性があります。