Как редактировать js в браузере
Обновлено: 04.07.2024
Я искал способ редактировать JavaScript в браузере, например Firefox, на лету и выполнять его. Firebug позволяет редактировать HTML и CSS на лету, но JavaScript-это боль. Я должен вернуться к источнику и изменить это.
Я не понимаю, почему инструменты разработчика браузера не позволяют редактировать. Есть ли способ сделать это?
[обновление]: Отмечен новый ответ в 2015 году
- IE теперь предоставляет один из лучший опыт разработки / отладки
- Chrome предоставляет IntelliSense при написании javaScript, что круто
- FF работает так же, как 2010.
можно использовать все три (Firefox, Internet Explorer и Chrome) консоли браузера для обновления существующей функции: скажем, у меня была функция a() который использовал для консоли.log ('a'), я могу перейти к консоли, переопределить функцию a() as alert('a') и запустить его снова, чтобы увидеть предупреждение коробка.
когда я задал этот вопрос в 2010 году, браузеры не были так хороши в отладке JavaScript, а также я, вероятно, не знал, что функция может быть заменена на лету.
В Chrome: Откройте панель Chrome DevTools - > Sources, перейдите в левую навигацию или нажмите Ctrl + O для открытия файлов, включенных в страницу.
затем вы можете отредактировать файл и нажать Ctrl + S , чтобы сохранить изменения, и посмотреть, что происходит с новыми кодами. Обычно я делаю это с помощью брейк-пойнтов.
Если вы отлаживаете и хотите сохранить изменения в локальной файловой системе, вы можете щелкнуть правой кнопкой мыши по навигации и выбрать Добавить папку в рабочую область:
в таком случае, если вы сохраните изменения в DevTools, соответствующий файл в вашей файловой системе также будет обновлен.
например добавляю папку в рабочую область, в ней есть 1.js:
затем я редактирую файл JS в DevTools, изменение обновляется в локальной файловой системе сразу же:
конечно, я нашел Execute JS (для firefox) иногда полезным, и я думаю, что это то, что вы ищете:
Он позволяет просматривать и изменять Javascript на Вашей странице.
Chrome имеет довольно сильную функцию для внесения изменений в код JS. Вы в основном устанавливаете некоторые точки останова и после того, как вы редактируете JS по своему желанию. дополнительная информация и демо -- где Пол Айриш исправляет сломанную страницу.
в случае FF вы можете использовать Developer Edition:
Отладчик JavaScript Стоп, пошагово, изучить и изменить JavaScript в страницу.
Chrome предоставляет отличное средство для редактирования javascript в браузере
step1: запустите инструмент разработки Откройте Chrome, загрузите страницу из локальной файловой системы / сервера и откройте "инструменты разработчика" в меню "Инструменты" или нажмите Ctrl+Shift+I / Cmd+Shift+I. перейдите на вкладку "Источник", затем щелкните значок "источники" или нажмите Ctrl+O, чтобы выбрать файл JavaScript
setp2: изменить Теперь вы можете сразу перейти к редактированию кода. Chrome также предлагает полезный список функций, который поможет вам найти нужную строку-нажмите Ctrl+Shift+O / Cmd+Shift+O
Шаг 3:сохранить Нажмите Ctrl+S / Cmd+S, чтобы сохранить изменения. Это обновляет файл в памяти и немедленно применяет изменения. Примечание однако этот код не запустится снова, поэтому изменения переменных инициализации не будут затронуты.
, чтобы сохранить изменения в исходный файл, щелкните правой кнопкой мыши редактор и выберите сохранить или Сохранить как. Однажды готово, вы можете обновить страницу и скрипт перезапустится
Шаг 4: отменить Ваше обновление вызвало проблему? Щелкните правой кнопкой мыши редактор и выберите локальные изменения. Нижняя панель отображает все последние изменения и позволяет вернуться назад.
Firefox предоставляет еще один инструмент для редактирования JavaScript в браузере
setp1: запуск Scratchpad Чтобы открыть окно "Блокнот", нажмите Shift F4 или перейдите в меню веб-разработчика (подменю в меню Сервис на OS X и Linux), затем выберите Scratchpad. Откроется окно редактора Scratchpad. Оттуда вы можете сразу начать писать код JavaScript, чтобы попробовать.
Шаг 2: редактирование Меню Файл предлагает опции для сохранения и загрузки фрагментов кода JavaScript, так что вы можете использовать код позже, если хотите.Информация о завершении кода и типе доступна только в Firefox 32 и далее. Чтобы вывести список предложений автозаполнения, нажмите Ctrl пробел. Чтобы отобразить всплывающее окно, нажмите Shift Space в Firefox 32 или Ctrl Shift Space в Firefox 33+.
Шаг 3:Выполнение После написания кода выберите код, который вы хотите запустить. Если вы ничего не выберете, будет запущен весь код в окне. Затем выберите способ запуска кода с помощью кнопок вверху, меню "Выполнить" или контекстного меню. Код выполняется в области текущей выбранной вкладки. Любые переменные, объявленные вне функции, будут добавлены в глобальный объект для эту вкладку.
доступно четыре варианта выполнения.
- выполнить
- проверить
- дисплей
- перезагрузить и запустить
для создания / редактирования javascript в браузере я бы использовал firebug(плагин для firefox) или встроенная панель инструментов разработчика firefox(лучше всего использовать с версия для разработчиков firefox).
Так. как только вы создадите это JS snippet, который исправляет сайт для вас, вы можете использовать GreaseMonkey(плагин)для выполнения скрипта фиксации сайта при каждом посещении. Таким образом, вы можете нормально использовать сайт и не выполнять его вручную при каждой загрузке страницы.
в настоящее время это невозможно в Firefox OTB. Смотрите Ошибки 737743 и 486546.
в отношении @artur-grzesiak, "стоп, шаг через, изучить и изменить", как представляется, относится к переменные
в chrome версии 42.0.2311 в Developer Tool, нажав на консоли вы можете получить окно, где вы можете редактировать javascript и после нажатия enter можно увидеть его эффект в браузере.
в Mozilla версии 37.0.1 после открытия инструмента разработчика нажмите на консоли редактировать код сценария java в правой части окна инструмента и после завершения редактирования нажмите на run, чтобы проверить код сценария java в браузере.
I was looking for a way to edit JavaScript in a browser, such as Firefox, on the fly and execute it. Firebug allows us to edit HTML and CSS on the fly but JavaScript is a pain. I have to go back to the source and modify that.
I don't understand why the browser developer tools don't allow editing. Is there a way to do it?
[Update]: Marked a new answer in 2015
- IE now provides one of the best dev/debugging experience
- Chrome provides IntelliSense while writing javaScript, which is cool
- FF works the same way as 2010.
One can use all three (Firefox, Internet Explorer, and Chrome) browser consoles to update an existing function: say I had a function a() which used to do console.log('a'), I can go to console, redefine the function a() as alert('a') and execute it again to see an alert box.
When I had asked this question in 2010, browsers were not so great at debugging JavaScript and also I was probably unaware that a function can be replaced on the fly.
8 Answers 8
In Chrome: Open Chrome DevTools -> Sources panel, browse in left navigation, or press Ctrl + O to open files included in the page.
Then you can edit the file and press Ctrl + S to save the change, and see what happens with the new codes. I usually do it with the help of break points.
If you are debugging and want to save the changes to your local file system, you could right click on the navigation, and select Add folder to workspace:
In such case, if you save your changes in DevTools, the relevant file in your file system will be updated as well.
For example I add a folder to workspace, in it there is a 1.js:
Then I edit the JS file in DevTools, the change is updated in local file system immediately:
Sure, I found Execute JS (for firefox) to be helpful at times, and I think it's what you're looking for:
It lets you view and modify Javascript on your page.
12.7k 15 15 gold badges 78 78 silver badges 129 129 bronze badges Interesting, quite a few extensions seem to not work with the latest version(s) of firefox.Chrome has a pretty strong feature for making changes to JS code. You basically set some breakpoints and once hit you edit JS at your will. More info and demo -- where Paul Irish fixes a broken page.
In case of FF you can use Developer Edition:
JavaScript Debugger Stop, step through, examine and modify the JavaScript running in a page.
Chrome provides an excellent facility to edit the javascript in the browser
step1: Launch the development tool Open Chrome, load a page from your local file system/server and open Developer Tools from the Tools menu or press Ctrl+Shift+I / Cmd+Shift+I. Navigate to the Source tab then either click the Sources icon or hit Ctrl+O to select your JavaScript file
setp2:Edit You can now jump straight in and edit your code. Chrome also offers a useful function list to help you locate the right line — press Ctrl+Shift+O / Cmd+Shift+O
step3:Save Hit Ctrl+S / Cmd+S to save your changes. This updates the file in memory and applies the changes immediately. Note however, that code won’t start again so changes to initialization variables won’t be affected.
To save the changes to the original file, right-click the editor and select Save or Save As…. Once done, you can refresh the page and the script will restart
step4: Undo Did your update cause problem? Right-click the editor and select Local modifications…. The lower pane displays all recent changes and allows you to revert back.
Firefox provides another tool to edit javascript in the browser
setp1: Launch Scratchpad To open the Scratchpad window, press Shift F4, or go to the Web Developer menu (which is a submenu in the Tools menu on OS X and Linux), then select Scratchpad. This will open up a Scratchpad editor window. From there you can immediately start writing some JavaScript code to try.
step2: Edit The File menu offers options to save and load JavaScript code snippets, so you can reuse code later if you like.Code completion and type information is only available from Firefox 32 onwards. To list autocomplete suggestions, press Ctrl Space. To show the popup, press Shift Space in Firefox 32 or Ctrl Shift Space in Firefox 33+.
step3:Execution Once you've written your code, select the code you want to run. If you don't select anything, all the code in the window will be run. Then choose the way you want the code to run using the buttons along the top, using the Execute menu, or using the context menu. The code is executed in the scope of the currently selected tab. Any variables you declare outside of a function will be added to the global object for that tab.
Как бы у меня есть на JavaScript действие, которое может иметь некоторые эффекты на текущей странице, но также изменит URL-адрес в браузере, так что, если пользователь нажимает перезагрузить или закладки новый URL используется?
Я пытаюсь записать состояние JavaScript в URL.
если вы хотите работать в браузерах, которые не поддерживают history.pushState и history.popState тем не менее," старый " способ-установить идентификатор фрагмента, который не вызовет перезагрузку страницы.
основная идея состоит в том, чтобы установить window.location.hash свойство для значения, содержащего любую необходимую информацию о состоянии, затем либо используйте
С HTML 5, Используйте history.pushState функции. В качестве примера:
если вы хотите изменить URL-адрес без добавления записи в список кнопки "назад", используйте .
Я бы сильно подозревал, что это невозможно, потому что это было бы невероятной проблемой безопасности, если бы это было. Например, я мог бы сделать страницу, которая выглядела как страница входа в банк, и сделать URL-адрес в адресной строке так же, как реальный банк!
возможно, если вы объясните, почему вы хотите это сделать, люди могут предложить альтернативные подходы.
[Edit in 2011: так как я написал этот ответ в 2008 году, больше информации пришло свет относительно техника в HTML5 это позволяет изменять URL-адрес, если он из того же источника]
настройки безопасности браузера не позволяют людям напрямую изменять отображаемый url-адрес. Вы можете себе представить уязвимости фишинга, которые могли бы вызвать.
при этом я часто просто использовать ссылки для действий с хэшем как href, затем добавьте события click с jquery, которые используют запрошенный хэш для определения и делегирования действия.
Я надеюсь, что это ставит вас на правильный путь.
jQuery имеет отличный плагин для изменения URL браузеров, называемый в jQuery-толкатель.
JavaScript pushState и jQuery можно использовать вместе, например:
history.pushState(null, null, $(this).attr('href'));
пример:
пример:
window.history.pushState("object", "Your New Title", "/new-url");
метод pushState ():
pushState() принимает три параметра: объект состояния, заголовок (который в настоящее время игнорируется) и (необязательно) URL. Рассмотрим каждый из этих трех параметров более подробно:
состояние объекта - объект состояния является объектом JavaScript, который связан с новая запись истории, созданная pushState() . Всякий раз, когда пользователь переходит в новое состояние, запускается событие popstate, и свойство state события содержит копию объекта state записи журнала.
объектом состояния может быть все, что может быть сериализовано. Поскольку Firefox сохраняет объекты состояния на диск пользователя, чтобы их можно было восстановить после перезагрузки браузера, мы накладываем ограничение размера 640k символов на сериализованное представление объекта состояния. Если вы передайте объект состояния, сериализованное представление которого больше этого в pushState() , метод выдаст исключение. Если вам нужно больше места, рекомендуется использовать sessionStorage и / или localStorage.
заголовок - в настоящее время Firefox игнорирует этот параметр, хотя он может использовать его в будущем. Передача пустой строки здесь должна быть безопасной от будущих изменений метода. Кроме того, вы можете передать короткий заголовок для состояние, в которое вы переходите.
URL-адресом - URL новой записи истории задается этим параметром. Обратите внимание, что браузер не будет пытаться загрузить этот URL-адрес после вызова pushState() , но он может попытаться загрузить URL-адрес позже,например, после перезагрузки браузера. Новый URL-адрес не должен быть абсолютным; если он относителен, он разрешен относительно текущего URL-адреса. Новый URL-адрес должен иметь то же происхождение, что и текущий URL-адрес; в противном случае, pushState() выдаст исключение. Этот параметр является необязательным; если он не указан, он имеет значение текущего URL-адреса документа.
В только что вышедший Firefox 6 входит новый инструмент для веб-разработчиков: простой редактор JavaScript (прим. переводчика — по-английски он называется Scratchpad («блокнот»). Буду его так и называть, чтобы не писать каждый раз «простой редактор JavaScript».) Идея проста: браузер это отличное место для экспериментов с JavaScript. Большинство JS-разработчиков уже знают об этом и используют такие инструменты, как веб-консоль и командную строку Firebug, чтобы использовать преимущества единственной среды, которая точно знает, как выглядит веб-страница.
Веб-консоль оптимизирована для ввода одной строки кода за раз (подсказка: с помощью Shift+Enter можно ввести несколько строк). В Firebug есть кнопка, включающая многострочный режим ввода, но всё равно работа основана на поочерёдном и линейном выполнении кусков кода.
К Scratchpad это не относится. Он полностью отвергает подход «строка ввода — строка вывода». Это просто текстовый редактор, который умеет запускать JavaScript.
Используем Scratchpad
Scratchpad можно найти в меню «Веб-разработка». Выберите «Простой редактор JavaScript» в этом меню, и увидите окно текстового редактора. При запуске в нём появляются подсказки по использованию.
- Введите код
- Выделите какую-то его часть
- Выберите одну из трёх команд в контекстном меню или меню «Выполнить»:
- Запустить
- Исследовать
- Отобразить
Конечно, для них есть акселераторы, чтобы не было необходимости тянуться за мышкой.
«Запустить» просто выполняет выбранный код. Эту команду можно использовать для определения функций или запуска кода, который управляет страницей.
«Исследовать» выполняет код и открывает инспектор объектов на возвращённом значении.
Наконец, «отобразить» помещает результат выполнения кода в редактор. С помощью этой команды можно превратить редактор в калькулятор. Впрочем, полезнее будет её использовать для отслеживания результатов при проверке правильной работы страницы.
Замечу, кстати, что многие идеи Scratchpad происходят из сред Smalltalk. Тридцать лет прошло, а мы всё ещё его догоняем :)
Чтобы понять для себя, что такое Scratchpad, нужно увидеть его в действии. Либо запустите его сами, либо посмотрите видео Роба Кэмпбелла.
Пишем новый код в Scratchpad
Scratchpad — очень удобный способ попробовать ваш код там, где он и должен работать: в браузере. Пусть у вас есть какая-то функция, которая даёт неправильные результаты. Загрузите страницу, скопируйте код функции в редактор, и добавьте пару строк кода, который её вызывает. Вы быстро привыкнете немного менять функцию и перезапускать код. Когда наконец получите желаемый результат, скопируйте функцию обратно из редактора в тот файл, где она была определена. И всё это можно отладить без единой перезагрузки страницы!
Используем фрагменты кода
Scratchpad умеет загружать файлы с кодом на JavaScript и сохранять своё содержимое. Это позволяет сохранять наборы часто используемых функциях. Например, если ваш сайт использует AJAX для загрузки различных данных, сохраните все такие вызовы в один файл и сможете получить эти данные в любой момент работы над сайтом.
Об областях видимости
Как и веб-консоль, код в Scratchpad видит все переменные на странице, но переменные, определённые в Scratchpad, странице недоступны. Если вы хотите определить переменную (скажем, foo ), видимую JavaScript-коду страницы, можно присвоить её объекту window : window.foo = 1 .
Но в отличие от веб-консоли, содержимое Scratchpad сохраняется при переключении вкладок, и запущенный код всегда выполняется в открытой сейчас странице. Это позволяет, например, убедиться, что код одинаково работает на сервере для разработки и отладочном сервере.
Планы на будущее
Scratchpad прост, и мы хотим это сохранить. Мы планируем несколько улучшений, которые появятся в ближайших версиях Firefox, но суть — «текстовый редактор, умеющий запускать JavaScript» — останется неизменной.
Мы ждём ваших отзывов о Scratchpad! Напишите нам в список рассылки dev-apps-firefox (прим. переводчика — по-английски), что вы думаете. Или начните участвовать в нашей работе и сделайте Scratchpad и другие инструменты для разработчиков ещё лучше.
Читайте также: