Как редактировать js в браузере
Я искал способ редактировать 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 в браузере.
Если вы занимаетесь веб-программированием, это значит, что вам не надо рассказывать о том, насколько в вашей работе важна отладка. Нередко для записи данных в логи, для их форматирования или вывода на экран используют внешние библиотеки, не учитывая при этом того факта, что в распоряжении программистов имеются JavaScript-команды для работы с консолями, которые встроены в браузеры. И обладают эти консоли гораздо более серьёзными возможностями, чем может показаться на первый взгляд.
Пожалуй, первое, что многим приходит в голову при слове «консоль» — это команда console.log() . Однако, она — лишь одна из многих подобных команд. Материал, перевод которого мы сегодня публикуем, посвящён особенностям работы с консолью JavaScript.
Что такое консоль?
Консоль JavaScript — это механизм, интегрированный в современные браузеры, который поддерживает встроенные инструменты разработки в интерфейсе, напоминающем командную строку. С использованием консоли разработчик может делать следующее:
- Просматривать журналы ошибок и предупреждений, возникающих на веб-странице.
- Взаимодействовать с веб-страницей, используя команды JavaScript.
- Отлаживать приложения и работать с DOM непосредственно из браузера.
- Исследовать и анализировать сетевую активность.
Методы console.log, console.error, console.warn и console.info
Вероятно, наиболее часто используемыми методами при работе с консолью являются console.log() , console.error() , console.warn() и console.info() . Этим методам можно передавать один или несколько параметров. Система вычисляет значение каждого из них и объединяет все результаты в строку, части которой разделены пробелами. В случае с объектами или массивами эти команды позволяют выводить их в таком виде, который позволяет просматривать их содержимое. Вот как это выглядит.
Использование различных команд для вывода данных в консоль
Метод console.group
Метод console.group() позволяет собирать серии вызовов console.log() (а также — других подобных методов) в группы, содержимое которых можно сворачивать и разворачивать. Пользоваться этим методом очень просто: после вызова console.group() (или после console.groupCollapsed() , если группу требуется вывести сразу в свёрнутом виде) нужно поместить все вызовы console.log() , которые надо сгруппировать. Затем, в конце набора команд, которые требуется сгруппировать, надо поместить команду console.groupEnd() . Рассмотри пример.
В консоль, после выполнения этого фрагмента кода, попадёт следующее.
Группировка данных в консоли с помощью метода console.group()
Метод console.table
После того, как я узнал о существовании метода console.table() , моя жизнь изменилась навсегда. Например, использование обычной команды console.log() при выводе JSON-кода или больших JSON-массивов — это сущий кошмар. Метод console.table() позволяет выводить сложные структуры данных внутри симпатичных таблиц, столбцам которых можно давать имена, передавая их в качестве параметров (не все браузеры поддерживают эту возможность console.table() ). Вот пример работы с этой командой.
То, что получилось, и выглядит отлично, и способно облегчить отладку.
Табличное оформление выводимых данных с помощью console.table()
Методы console.count, console.time и console.timeEnd
Методы console.count() , console.time() и console.timeEnd() можно назвать чем-то вроде швейцарского ножа для разработчика, который занимается отладкой приложений. Так, метод console.count() позволяет подсчитывать количество собственных вызовов и выводить его в консоль с заданной меткой. Метод console.time() позволяет запустить именованный таймер (имя передаётся ему в качестве параметра, на одной странице может присутствовать до 10000 таймеров). Для того чтобы остановить конкретный таймер, используется команда console.timeEnd() с меткой таймера, передаваемой в качестве параметра. Она останавливает таймер и выводит время его работы в консоль. Вот как пользоваться этими методами.
А вот как выглядит результат работы этого кода в консоли.
Использование методов console.count(), console.time() и console.timeEnd()
Методы console.trace и console.assert
Методы console.trace() и console.assert() позволят выводить из места их вызова информацию о стеке. Представьте себе, что вы занимаетесь разработкой JS-библиотеки и хотите сообщить пользователю о том, где возникла ошибка. В подобном случае эти методы могут оказаться весьма полезными. Метод console.assert() похож на console.trace() , разница между ними заключается в том, что console.assert() выведет данные лишь в том случае, если не выполнится переданное ему условие. Вот как работать с этими методами.
Несложно заметить, что вывод, генерируемый этим фрагментом кода, выглядит так же, как нечто подобное выглядело бы в React (или в любой другой библиотеке), когда фреймворк сообщает о возникновении исключения.
Результат использования команд console.assert() и console.trace()
Команды для работы с консолью и продакшн-код
Команды для работы с консолью нужны на этапе разработки и отладки приложений. Это значит, что когда придёт время выпуска продукта, эти команды придётся из кода удалить. Об этом можно просто забыть и, через некоторое время после сборки продакшн-версии проекта, заметить, что программа пишет что-то в консоль тогда, когда в этом нет никакой необходимости. Не стоит нагружать компьютеры ненужной работой, пусть и такой, казалось бы, незначительной, как вывод данных в консоль. В то же время, учитывая то, что команды для работы с консолью могут пригодиться в ходе доработки приложения, лучше всего не удалять их из исходного кода программы насовсем, а убирать их лишь из её продакшн-версии. Тут нам на помощь придут средства для сборки проектов. Так, я постоянно пользуюсь Webpack, и на работе, и в собственных проектах. Этот инструмент позволяет удалять все ненужные команды по работе с консолью (он способен отличить их от других команд) из продакшн-сборок с использованием uglifyjs-webpack-plugin.
Эта конфигурация очень проста, но она облегчает повседневную работу программиста и избавляет от проблемы забытых команд по работе с консолью.
Итоги
В этом материале мы рассказали о некоторых полезных командах для работы с консолью. Они позволяют, с помощью инструментов, являющихся частью современных браузеров, решать множество задач, которые сопутствуют разработке и отладке клиентских JavaScript-приложений.
Сегодня решил ради интереса изменить JS код на одном сайте. Сначала полез в интернет искать простые варианты решения. На форумах писали про расширение для Хрома Resource Override, однако код не заменялся или сам файл просто удалялся. Так же пробовал метод с AdBlock и еще расширением для загрузки .js файла на сайт. Однако сайт не работал либо ломал браузер. Друзья веб-разработчики тоже не знают. Как всё-таки изменять JS код файла в браузере?
P.s. Если потребуется более точное описание ситуации, я могу обновить пост
Обновлено: Я имею ввиду не на самом сайте, а скорее во вкладе Отладка или Resources, цель скорее просто научиться так делать и изучить JS получше
2 ответа 2
В Хроме, начиная с версии 65, есть встроенный функционал локальных переопределений. Он позволяет редактировать скрипты и стили прямо в DevTools, без помощи сторонних расширений.
Все что нужно сделать - это перейти на вкладку Sources, слева выбрать подраздел Overrides (может прятаться под кнопкой » ), и выбрать локальную папку для хранения измененных файлов. Вверху под адресной строкой появится запрос на предоставление доступа к папке - нажимаем кнопку "Разрешить".
После этого, можно свободно редактировать скрипты страницы на вкладке Sources/Page - браузер будет автоматически подменять их измененными версиями (которые сохраняются в указанной папке, так же автоматически). Когда редактирование скрипта завершено, надо только нажать Ctrl+S в DevTools, и обновить страницу.
Быстро перейти к измененной копии файла в дереве папок Overrides (например, чтобы удалить ее, сбросив все правки) можно кликнув на вкладке или содержимом файла правой кнопкой мыши, и выбрав пункт меню "Reveal in sidebar".
Доступен также diff изменений: он открывается командой "Local Modifications. ", которая находится в том же контекстном меню.
Отключить переопределения можно просто сняв галочку в подразделе Overrides. Конечно же, изменения никуда не исчезнут (в этом и смысл хранения локально) - они будут применяться при повторном включении функции.
Within JSP files, I have some pretty complicated Javascript. On a production machine, we're seeing a very weird bug that we have not been able to understand. We have never been able to replicate it in a local or development environment. It might be related to the javascript, but I haven't found a good way to do this: use my browser to visit the page (on the production website) and then use browser tools to edit the javascript that runs on that page, including on reloads of the page.
I'm always able to do this to tweak CSS etc, but as these questions point out, it's not obvious how to tweak JS client-side:
However, those answers don't help me because:
- "Execute JS" (Firefox addon) doesn't seem to work (doesn't do more than the console in Chrome already can do),
- "Charles" might work if I'd used separated js files, but my javascript is embedded in JSP
It seems like How to modify javascript code on the fly in browser in debugging mode? is the closest thing to what I'm talking about, but that guy isn't able to talk about what he did because it was for his employer.
Thanks for your help! Ryan
6 Answers 6
The problem with editing JavaScript like you can CSS and HTML is that there is no clean way to propagate the changes. JavaScript can modify the DOM, send Ajax requests, and dynamically modify existing objects and functions at runtime. So, once you have loaded a page with JavaScript, it might be completely different after the JavaScript has run. The browser would have to keep track of every modification your JavaScript code performs so that when you edit the JS, it rolls back the changes to a clean page.
But, you can modify JavaScript dynamically in a few other ways:
- JavaScript injections in the URL bar: javascript: alert (1);
- Via a JavaScript console (there's one built into Firefox, Chrome, and newer versions of IE)
- If you want to modify the JavaScript files as they are served to your browser (i.e. grabbing them in transit and modifying them), then I can't offer much help. I would suggest using a debugging proxy like Fiddler
The first two options are great because you can modify any JavaScript variables and functions currently in scope. However, you won't be able to modify the code and run it with a "just-served" page, like you can with the third option.
Other than that, as far as I know, there is no edit-and-run JavaScript editor in the browser. Hope this helps,
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:
as far as persistence goes you would probably have to clone the site to your system locally and go from there.
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.
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.
Any idea why Firefox doesn't offer that feature? I'm willing to use Chrome but since I primarily use Firefox a solution for it would be nice.
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.
Читайте также: