現在、ウェブサイトを自己ホスト型から CMS システムに移行しています。現在のサイトでは、SqueezeBox.js というモーダル ポップアップ スクリプトを使用しています。現在の Web サイトでのコードを正確にコピーしましたが、サムネイル画像をクリックしてもモーダル ポップアップ ボックスが起動しません。
ヘッダーのコードを見ると、使用している CMS が他の多くの JavaScript ファイルも呼び出していることがわかりました。そのうちの 1 つが競合を引き起こしているのではないかと考えています。
これが事実であるかどうかを調べる最良の方法は何ですか? Firefox のプラグイン Web Developer を試しましたが、エラー コンソールに何も表示されません。しかし、私はそれを正しく使用していると100％確信しているわけではありません. 他の誰かが、使いやすい JavaScript 競合検出器の方向に私を向けることができますか?
乾杯
アダム
Google Chrome を使用している場合は、開発者ツールを開いて [スクリプト] タブに移動し、JavaScript ファイルを開き、クリック ハンドラーを探します。コードの横をクリックしてブレークポイントを設定すると、コードがその場所に到達すると (たとえば、クリックすると)、一時停止し、開発者ツールで、コードをステップ実行するときに、どこでどの関数が呼び出されているかを確認できます。コード ウィンドウ内の任意の変数にカーソルを合わせて、その値を確認することもできます。とても便利な！次に、それがプラグインに取り込まれているかどうかを確認できます (実行時に常にアクセスされる最初の行のような場所で、プラグイン内にブレークポイントを設定することでこれを行うこともできます)。
Firebugでも同じことができると思います
(ステップ イン、ステップ オーバー、ブレークポイントのオンとオフの切り替えなど) に入るには、少し異なる思考プロセスですが、非常に便利です。
問題が発生している場所を確認するより簡単な方法は、alert('im working); を追加することです。または、それが機能しているかどうかわからないコードに似たもの。変数をアラートして、その時点での値を確認することもできます。consoleコマンドを使用して、firebug のコンソールに出力することもできます。これらは、コードを変更する必要のないデバッグを除いて、ブレークポイント/デバッグが行うことを行っています。
JavaScript エラーがある場合、簡単な方法は、firebug または Chrome インスペクターを使用することです(サムネイルを右クリックし、[要素の検査] を選択します)。いずれかのコンソール タブを開き、ページを更新します。エラーがある場合は、コンソールに報告され、関連する行へのリンクが提供されます。
エラーが報告されていない場合は、コードのロジックによってボックスが表示されていません。エラーを見つけるには、コードをステップ実行する必要があります。サムネイル画像のクリック ハンドラから呼び出されている関数を確認します。いずれかのツールでその関数に移動し、関数の最初の行にブレークポイントを配置します。サムネイルをもう一度クリックすると、コードはその行で一時停止します。そこから、コードをステップ実行して、どのコード ブランチがたどられているかを確認できます。ある時点でサニティ チェックが失敗し、コードが爆破される可能性があります。