Как я могу определить, есть ли у меня конфликт JavaScript на моем веб-сайте?
В настоящее время я перевожу веб-сайт из собственной системы в систему CMS. Текущий сайт использует модальный всплывающий скрипт SqueezeBox.js. Я скопировал код точно так, как он выглядит на текущем веб-сайте, однако модальное всплывающее окно не срабатывает, когда я нажимаю на миниатюру изображения.
Глядя на код в заголовке, я заметил, что CMS, которую я использую, также вызывает ряд других файлов javascript, и мне интересно, вызывает ли один из них конфликт.
Какой лучший способ узнать, так ли это? Я попробовал подключаемый модуль Firefox для веб-разработчиков, но ничего не вижу в консоли ошибок. Однако я не уверен на 100%, правильно ли я его использую. Может ли кто-нибудь еще направить меня в сторону простого в использовании детектора конфликтов JavaScript?
ура
Адам
2 ответа
Если у вас есть Google Chrome, откройте Инструменты разработчика и перейдите на вкладку "скрипты", откройте файлы javascript и найдите обработчик щелчков. Нажмите на стороне кода, чтобы установить точку останова, затем, когда код достигает этого места (например, если вы щелкнете по нему), он будет приостановлен, а затем в инструментах разработчика вы сможете увидеть, какие функции вызываются и куда вы переходите по коду. Вы также можете навести курсор на любую переменную в окне кода, чтобы увидеть ее значение. Очень кстати! Затем вы можете увидеть, попадает ли он вообще в ваш плагин (вы также можете сделать это, установив точку останова внутри плагина в месте, подобном первой строке, к которой всегда будет осуществляться доступ при запуске).
Я считаю, что вы можете сделать то же самое с Firebug
Это немного другой мыслительный процесс, в который нужно войти (шаг, шаг, включение и выключение точек останова и т. Д.), Но он чрезвычайно полезен.
Более простой способ проверить, где возникают проблемы, - добавить предупреждение (я работаю); или что-то похожее на код, вы не уверены, что он работает. Вы также можете предупредить переменную, чтобы увидеть, каково значение в этой точке. Вы также можете использовать консольную команду, чтобы распечатать ее на консоли Firebug. Они делают то, что делают для вас точки останова / отладки, за исключением отладки, в которой вам не нужно менять код.
Если есть ошибка javascript, то проще всего использовать firebug или Chrome Inspector (щелкните правой кнопкой мыши на миниатюре и выберите "Проверить элемент"). Откройте вкладку консоли любого из них и обновите страницу. Если есть ошибка, она будет сообщена в консоли и предоставит ссылку на соответствующую строку.
Если об ошибке не сообщается, то логика кода предотвращает отображение окна. Вам нужно будет пройти через код, чтобы найти ошибку. Посмотрите, какая функция вызывается из обработчика щелчка миниатюрного изображения. Перейдите к этой функции в любом инструменте и поместите точку останова в первую строку функции. Нажмите на миниатюру еще раз, и код остановится в этой строке. Оттуда вы можете пройти по коду и посмотреть, какая ветвь кода следует. В какой-то момент, скорее всего, произойдет проверка работоспособности, которая приведет к сбою кода.