Как вы редактируете Javascript в браузере?

Question

Я искал способ отредактировать JavaScript в браузере, например Firefox, на лету и запустить его. Firebug позволяет нам редактировать HTML и CSS на лету, но JavaScript - это боль. Я должен вернуться к источнику и изменить это.

Я не понимаю, почему инструменты разработчика браузера не позволяют редактировать. Есть ли способ сделать это?

[Update]: Отмечен новый ответ в 2015 году

Быстрые указатели:

• IE теперь предоставляет один из лучших способов разработки и отладки
• Chrome обеспечивает IntelliSense при написании javaScript, что здорово
• FF работает так же, как 2010 ..!

Можно использовать все три (Firefox, Internet Explorer и Chrome) браузерные консоли для обновления существующей функции: скажем, у меня была функция a(), которая использовалась для создания console.log ('a'), я могу перейти к консоль, переопределите функцию a() как alert('a') и выполните ее снова, чтобы увидеть окно предупреждения.

Когда я задал этот вопрос в 2010 году, браузеры не были так хороши в отладке JavaScript, а также я, вероятно, не знал, что функция может быть заменена на лету.

Answer 1

В Chrome : откройте Chrome DevTools -> панель «Источники», перейдите к левой навигационной панели или нажмите Ctrl + O , чтобы открыть файлы, включенные в страницу.

Затем вы можете отредактировать файл и нажать Ctrl + S , чтобы сохранить изменения и посмотреть, что произойдет с новыми кодами. Я обычно делаю это с помощью точек останова .

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

В этом случае, если вы сохраните свои изменения в DevTools, соответствующий файл в вашей файловой системе также будет обновлен.

---

Например я добавляю папку в рабочую область, в ней есть 1.js :

Затем я редактирую файл JS в DevTools, изменения немедленно обновляются в локальной файловой системе:

Answer 2

Конечно, я обнаружил, что Execute JS (для Firefox) иногда помогает, и я думаю, это то, что вы ищете:

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

Позволяет вам просматривать и изменять Javascript на вашей странице.

Answer 3

Chrome имеет довольно сильную функцию для внесения изменений в код JS. Вы в основном устанавливаете некоторые точки останова и, как только вы нажимаете, редактируете JS по своему желанию. Дополнительная информация и демоверсия - где Пол Айриш исправляет сломанную страницу.

---

В случае FF вы можете использовать Developer Edition :

Отладчик JavaScript Остановитесь, пройдитесь, изучите и измените JavaScript работает на странице.

Answer 4

Chrome предоставляет отличную возможность редактировать JavaScript в браузере

step1: запустить инструмент разработки Откройте Chrome, загрузите страницу из локальной файловой системы / сервера и откройте Инструменты разработчика из меню Сервис или нажмите Ctrl + Shift + I / Cmd + Shift + I. Перейдите на вкладку «Источник», затем либо нажмите значок «Источники», либо нажмите Ctrl + O, чтобы выбрать файл JavaScript

setp2: Редактировать Теперь вы можете прыгать прямо и редактировать свой код. Chrome также предлагает полезный список функций, который поможет вам найти нужную строку - нажмите Ctrl + Shift + O / Cmd + Shift + O

step3: Сохранить Нажмите Ctrl + S / Cmd + S, чтобы сохранить изменения. Это обновляет файл в памяти и применяет изменения немедленно. Обратите внимание, однако, этот код не запустится снова, поэтому изменения переменных инициализации не будут затронуты .

Чтобы сохранить изменения в исходном файле, щелкните правой кнопкой мыши редактор и выберите Сохранить или Сохранить как …. После этого вы можете обновить страницу и скрипт перезапустится

step4: отменить Ваше обновление вызвало проблему? Щелкните правой кнопкой мыши редактор и выберите Локальные изменения…. На нижней панели отображаются все последние изменения и вы можете вернуться обратно.

---

Firefox предоставляет еще один инструмент для редактирования JavaScript в браузере

setp1: запуск Scratchpad Чтобы открыть окно Scratchpad, нажмите Shift F4 или перейдите в меню Web Developer (которое является подменю в меню Tools в OS X и Linux), затем выберите Scratchpad. Это откроет окно редактора Scratchpad. Оттуда вы можете сразу начать писать код JavaScript, чтобы попробовать.

step2: Изменить Меню «Файл» предлагает параметры для сохранения и загрузки фрагментов кода JavaScript, поэтому вы можете использовать код позже, если хотите. Заполнение кода и информация о типе доступны только в Firefox 32 и далее. Чтобы вывести список предложений автозаполнения, нажмите Ctrl Space. Чтобы показать всплывающее окно, нажмите Shift Space в Firefox 32 или Ctrl Shift Space в Firefox 33+.

step3: Execution После того как вы написали свой код, выберите код, который вы хотите запустить. Если вы ничего не выберете, будет запущен весь код в окне. Затем выберите способ выполнения кода с помощью кнопок вверху, с помощью меню «Выполнить» или с помощью контекстного меню. Код выполняется в области выбранной в данный момент вкладки. Любые переменные, которые вы объявляете вне функции, будут добавлены в глобальный объект для этой вкладки.

Доступны четыре варианта исполнения.

1. Run
2. Проверьте
3. Дисплей
4. Перезагрузить и запустить

Answer 5

В настоящее время это невозможно в Firefox OTB. Смотрите ошибки 737743 и 486546 .

В отношении @ artur-grzesiak , «Остановить, пройти, проверить и изменить», по-видимому, относится к переменным

Answer 6

Для создания / редактирования JavaScript в браузере я бы использовал firebug (плагин для Firefox) или встроенную панель инструментов разработчика Firefox (лучше всего использовать с версией Firefox для разработчиков ).).

Поскольку в вашем комментарии к награде содержится просьба исправить испорченный веб-сайт, я бы использовал вышеупомянутые инструменты для создания фрагмента JS, который решит вашу проблему.После этого я не хочу каждый раз выполнять код на панели инструментов разработчика.

Итак ... после того, как вы создали этот фрагмент JS, который исправляет сайт для вас, вы можете использовать GreaseMonkey (плагин) для выполнения скрипта исправления сайта при каждом посещении.Таким образом, вы можете использовать сайт в обычном режиме и не нужно выполнять его вручную при каждой загрузке страницы.

Answer 7

В chrome версии 42.0.2311 в Developer Tool, нажав на консоль, вы можете получить окно, в котором вы можете редактировать javascript и после нажатия Enter увидеть его эффект в браузере.

В Mozilla версии 37.0.1 после открытия инструмента разработчика, нажав на консоль, отредактируйте код java-скрипта в правой части окна инструмента и после завершения редактирования нажмите на run, чтобы протестировать код java-скрипта в браузере.