Подтвердить что ты не робот

Как я могу отладить мини-JS в firebug?


У меня есть веб-страница, которая включает в себя безумное количество миниатюрных JS файлов. Веб-страница прекрасно работает в моей локальной сети, но выдает некоторую ошибку JS при постановке. В JS есть проблема, и я не буду ее отлаживать. Когда я загружаю JS в тег Firebug script, он появляется в одной длинной горизонтальной линии. Есть ли выход в Firebug, который расширяет или украшает script для отладки? Я знаю, что могу использовать jsbeautifier, но они не помогут мне. Я не могу загрузить расширенный файл в CDN, побеждает цель использования CDN.

Точки, которые следует отметить,
a) Я не могу управлять ящиком, который обслуживает JS, его на CDN, я упомянул об этом.
б) Я могу использовать инструменты beautifiers и т.д., но это поможет мне в отладке script во время выполнения? ИМХО, нет
c) Будучи связанными NDA и другими юридическими вещами, я не могу поделиться script, но это общая проблема, вы можете столкнуться с ней с помощью миниатюрного jQuery

4b9b3361

ОТВЕТЫ

Ответ 1

  • Украсьте свой script
  • Добавьте хост CDN в /etc/hosts или ваш локальный DNS, чтобы разрешить его на свой собственный веб-сервер.
  • Принять улучшенную версию и все, что вам нужно на указанном веб-сервере.
  • Оба Firefox и Chrome (версии этого редактирования) поддерживают украшение script с помощью кнопки {}, доступной в инспекторе.

Ответ 3

Просто загрузите миниатюрный файл и нажмите кнопку {} внизу, и он мгновенно украсит, сделав точки останова и другие отладки. (Истина для Chrome тоже)

Ответ 4

Это обычная проблема, и команда разработчиков Chrome недавно предложила изящное решение, которое они назвали Source Maps - см. http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ для получения дополнительной информации, я думаю, вы найдете именно то, о чем вы (и остальные) кричали!:)

Ответ 5

Рассмотрим изменение!

Firefox w/Firebug был моим любимым методом отладки JavaScript почти год, но я недавно перешел на Google-Chrome Developer-Tools, который намного превосходит.

  • Chrome поддерживает функцию On-The-Fly (встроенная функция), украшающую ресурсы JavaScript enter image description here

  • Как только вы украшены, вы можете отлаживать файл ресурсов JavaScript, поскольку он был "изначально" загружен украшенным с веб-сервера. Ломаные точки устанавливаются щелчком по номеру строки. enter image description here

  • Одна из самых мощных функций ,
    Является после того, как вы остановились в точке разрыва, вы можете выполнять команды (используя консоль) в той же области, в которой вы находитесь в точке разрыва. В Firefox вы не можете этого сделать. enter image description here Его так легко отлаживать (даже анонимные функции), вы никогда не вернетесь в Firefox.
    Попробуйте!

Ответ 6

Это более обходной путь, но он может помочь. Идея состоит в том, что мы заменим файлы, поступающие с сервера файлами на вашем компьютере.
Это будет работать с любым браузером.
Это займет немного настройки в первый раз (возможно, 15 минут), но тогда это может быть очень удобно.
Он также помогает тестировать исправления ошибок в среде live/prod.

  • Получить Fiddler (это прокси-сервер отладки веб-сайтов), установить его, запустить.
    http://www.fiddler2.com/fiddler2/
    (Перезагрузите браузер после установки, чтобы получить расширение Fiddler)
  • Если вы отлаживаете веб-сайт HTTPS, сначала проверьте это:
    http://www.fiddler2.com/Fiddler/help/httpsdecryption.asp
  • С этого момента вы должны увидеть в Fiddler (панель "Веб-сеансы" слева) все загрузки, сделанные вашим браузером, включая JS файлы.
    Если нет, проверьте следующее: Fiddler не показывает сеансы
  • Найдите файл, который вы хотите отладить в списке (Ctrl + F работает)
  • Нажмите на файл. Затем либо:
    • получить содержимое файла с панели инспектора (вкладка textView), украсить его, сохранить в файл на вашем локальном компьютере.
    • или иметь доступ к файлу, который содержит исходный код (например: из вашего исходного элемента управления).
  • Перейдите на вкладку "Автоответчик" (верхняя левая панель).
    Установите флажок "Включить автоматические ответы".
    Установите флажок "Непревзойденные запросы через прокси".
  • Перетащите свой файл с левой панели на правую панель (редактор правил предварительной заливки внизу)
  • Задайте другое поле с указанием пути к локальному файлу
  • Нажмите кнопку "Сохранить"
  • Перезагрузите страницу и наслаждайтесь сеансом отладки.

Fiddler может делать гораздо больше, но этот прецедент отвечает на начальный вопрос.

Ответ 7

Довольно печатать свой JavaScript. Google, и вы найдете несколько онлайн-дизайнеров JS.

Я использую http://jsbeautifier.org/ сам, и он отлично работает, но ищет других и использует тот, который подходит вашим потребностям.

Предостережение: вы все равно не сможете получить значимые локальные имена переменных (которые обычно переименовываются minifier). Если код был скомпилирован компилятором Closure, то вы абсолютно не получите никакой полезной информации вообще, даже если ее beutified, потому что тогда все переменные, функции и свойства искажаются (а не только локальные).

Теперь, если ваша проблема связана с кодом отладки, который поступает извне (например, CDN), очевидно, что код будет уменьшен, и вы не сможете сохранить свою улучшенную версию там. В этом случае вы можете заменить теги, которые загружают код из CDN с URL-адресом, указывающим на вашу локальную версию, затем вы можете украсить код (скачанный с CDN) на свой собственный сервер, и затем вы можете отлаживать его с помощью FireBug.

Теперь, если вы даже не управляете HTML, который содержит эти теги (например, они находятся на внешнем сервере), то, к сожалению, вы не можете делать то, что хотите, без физической загрузки всего сайта на свой собственный сервер. Даже если вы загрузили весь сайт (со всеми файлами), он может не работать, поскольку сайт может управляться внутренним языком обработки или обращается к внутренней базе данных. В таком случае вам также потребуется смоделировать все эти данные. Однако это может быть сделано - вам просто нужно пройти через большую боль. Моя рекомендация - сохранить версию веб-страницы и запустить ее на своем собственном сервере, обслуживая украшенный код с вашего собственного сервера для отладки.

Ответ 8

Размещение точек останова на JavaScript делает отладку намного проще, но если ваш код уже сделал это для производства, то он, вероятно, был уменьшен. Как вы можете отладить измененный код? Полезно, что некоторые из браузеров имеют возможность унифицировать ваш JavaScript.

В Chrome и Safari просто выберите вкладку "Сценарии", найдите соответствующий файл и нажмите значок "{}" (довольно печатная версия), расположенная в нижней панели.

В Internet Explorer щелкните значок инструмента с помощью выделения script, чтобы найти параметр для форматирования JavaScript.

Opera автоматически отключит мини-JavaScript. Источник