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

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

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

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

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

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

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

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

Ответ 1

В Chrome: Откройте панель Chrome DevTools → Sources, просмотрите левую навигацию или нажмите Ctrl + O, чтобы открыть файлы, включенные в страницу.

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

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

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

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

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

Ответ 2

Конечно, я нашел Execute JS (для firefox) время от времени, и я думаю, это то, что вы ищете:

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

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

Ответ 3

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

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

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

Ответ 4

Chrome предоставляет отличное средство для редактирования javascript в браузере

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

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

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

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

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

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

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

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

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

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

Run
Проверьте,
Display
Перезагрузка и запуск

Ответ 5

Чтобы создать/отредактировать javascript в браузере, я бы использовал firebug (плагин для firefox) или встроенную панель инструментов разработчика firefox (лучше всего использовать версию разработчика firefox).

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

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

Ответ 6

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

В отношении @artur-grzesiak "Остановить, перешагнуть, изучить и изменить", как представляется, относится к variables

Ответ 7

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

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