Как я могу отладить минимизированный JS в firebug?

Question

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

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

Answer 1

Обновление: теперь есть расширение firebug, которое украшает JavaScript:

https://addons.mozilla.org/en-US/firefox/addon/javascript-deminifier/

Он отлично работает для меня в Firefox 12.0.

Кредит на этот ответ за то, что он его заметил.

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

Подумайте об изменениях!

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

• Chrome поддерживает ускоренное улучшение (встроенную функцию) ресурсов JavaScript

• После того, как вы его украсите, вы сможете отлаживать егофайл ресурсов JavaScript в том виде, в каком он был «изначально» загружен с веб-сервера.Точки разрыва устанавливаются нажатием номера строки.

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

Answer 6

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

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

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

Answer 7

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

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

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

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

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

Answer 8

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

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

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

Opera автоматически претифицирует минимизированный JavaScript. Источник