How do you edit Javascript in the browser?
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.
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
Современные браузеры предоставляют встроенные инструменты разработки для JavaScript и других технологий. Среди этих инструментов можно найти консоль, которая похожа на интерфейс оболочки, а также инструменты для проверки DOM, отладки и анализа сетевой активности.
Консоль можно использовать для регистрации информации как части процесса разработки JavaScript. Также консоль позволяет взаимодействовать с веб-страницей, выполняя выражения JavaScript в контексте страницы. По сути, консоль предоставляет возможность писать код JavaScript и при необходимости управлять им.
Данное руководство научит работать с консолью JavaScript в браузере и ознакомит с другими встроенными инструментами разработки, которые могут вам пригодиться.
Работа с консолью JavaScript в браузере
Большинство современных веб-браузеров, поддерживающих HTML и XHTML, по умолчанию предоставляют доступ к консоли разработчика, где вы можете работать с JavaScript в интерфейсе, подобном оболочке терминала. В этом разделе вы узнаете, как получить доступ к консоли в Firefox и Chrome.
Браузер Firefox
Чтобы открыть Web Console в браузере FireFox, откройте меню ☰ в верхнем правом углу.
Нажмите кнопку Developer. Она откроет меню Web Developer, где вы сможете выбрать Web Console.
Консоль откроется в нижней части окна браузера.
Вы также можете войти в веб-консоль с помощью сочетания клавиш Ctrl+Shift+K в Linux и Windows или Command+Option+K в macOS.
Браузер Chrome
Чтобы найти JavaScript Console в браузере Chrome, откройте меню в правом верхнем углу окна (кнопку с тремя точками по вертикали). Выберите More Tools → Developer Tools.
На экране появится панель. Выберите Console в верхнем меню, чтобы получить доступ к консоли JavaScript Console.
Вы также можете войти в веб-консоль с помощью сочетания клавиш Ctrl+Shift+J в Linux и Windows или Command+Option+J в macOS.
Работа с консолью JavaScript
В консоль можно вводить код JavaScript.
Для примера попробуйте написать простое предупреждение, которое будет выводить строку Hello, World!:
Нажмите Enter. В браузере появится всплывающее окно:
Обратите внимание: консоль также распечатает результат вычисления выражения, которое будет читаться как undefined.
Консоль может также логировать данные JavaScript с помощью console.log.
Чтобы отобразить строку «Hello, World!» в консоли, введите:
console.log(«Hello, World!»);
Hello, World!
Также консоль может обрабатывать математические вычисления:
console.log(2 + 6);
8
Попробуйте ввести более сложный пример:
console.log(34348.2342343403285953845 * 4310.23409128534);
148048930.17230788
Также консоль может работать с несколькими строками и переменными:
let d = new Date();
console.log(«Today’s date is » + d);
Today’s date is Mon Jul 03 2017 16:06:51 GMT+0300
Если вам нужно изменить команду, которую вы ранее вводили в консоль, нажмите клавишу со стрелочкой вверх ↑ на клавиатуре. Это позволит вам отредактировать команду и запустить ее снова.
Окружение JavaScript Console подобно оболочке терминала, что позволяет протестировать код в режиме реального времени.
Работа с HTML-файлами
В консоли можно работать в контексте HTML-файла или страницы с динамической визуализацией. Это дает возможность поэкспериментировать с кодом JavaScript в контексте HTML, CSS и JavaScript.
Имейте в виду: как только вы перезагрузите страницу, измененную в консоли, она вернется к прежнему состоянию, поэтому обязательно сохраняйте все изменения, которые нужно оставить.
Создайте простой HTML-файл index.html.
Сохраните файл и откройте его в браузере. На экране появится страница с заголовком Today’s Date.
Теперь откройте консоль и используйте JavaScript, чтобы изменить страницу. Вставьте в HTML заголовок.
let d = new Date();
document.body.innerHTML = «<h1>Today’s date is » + d + «</h1>»
В консоли появится:
Today’s date is Mon Jul 03 2017 16:15:55 GMT+0300
Страница будет выглядеть так:
Today’s date is Mon Jul 03 2017 16:15:55 GMT+0300
Затем можно изменить стиль страницы, например, цвет фона:
document.body.style.backgroundColor = «pink»;
«pink»
Также можно изменить цвет текста на странице:
document.body.style.color = «white»;
«white»
Создайте новый элемент с помощью тега <p>:
let p = document.createElement(«P»);
Затем можно создать текст и добавить его в абзац:
let t = document.createTextNode(«Paragraph text.»);
Добавьте текст в переменную р:
Затем вставьте переменную р в элемент <p>.
Теперь страница выглядит так:
Today’s date is Mon Jul 03 2017 16:26:58 GMT+0300
Paragraph text.
Консоль позволяет поэкспериментировать с отображением и внешним видом HTML-страниц. Однако при этом важно помнить, что сам документ HTML не меняется при работе с ним в консоли. Как только вы перезагрузите страницу, она примет свой прежний вид.
Работа с другими инструментами разработки
В данном разделе вы ознакомитесь с другими встроенными инструментами разработки, которые можно использовать в браузерах.
Инструмент DOM (Document Object Model)
Во время загрузки любой страницы браузер создает объектную модель документа, или DOM страницы.
DOM – это дерево объектов, которое отображает иерархию HTML-элементов страницы. Дерево DOM можно просмотреть в панели Inspector в Firefox и в панели Elements в Chrome.
Эти инструменты позволяют проверять и редактировать элементы DOM, а также искать объекты HTML, связанные с конкретной страницей. DOM может показать, имеет ли фрагмент текста или изображение атрибут ID, и может определить значение этого атрибута.
Кроме того, в боковой панели или под панелью DOM можно найти стили CSS, которые используются в документе HTML или таблице стилей.
Чтобы отредактировать DOM в реальном времени, дважды кликните по выбранному элементу. Для примера можете попробовать превратить тег <h1> в <h2>.
Опять же, после обновления страница примет прежний вид.
Вкладка Network
Вкладка Network позволяет мониторить и записывать сетевые запросы. В этой вкладке показаны сетевые запросы браузера, в том числе запросы для загрузки страницы, время обслуживания запросов и сведения о каждом из них. Эти данные можно использовать для оптимизации производительности загрузки страницы и отладки запросов.
Использовать вкладку Network можно вместе с консолью JavaScript. Например, вы можете начать отладку страницы с помощью консоли, а затем открыть вкладку Network и просмотреть сетевую активность, не перезагружая страницу.
Дополнительные рекомендации по работе с сетевыми данными вы найдете в мануалах браузеров:
Отзывчивый дизайн
Сайты с отзывчивым дизайном быстро адаптируют свой вид и функции на различных устройствах: мобильных телефонах, планшетах, настольных компьютерах и ноутбуках. Размер экрана, плотность пикселей и ответ на прикосновения – факторы, которые следует учитывать при разработке адаптивных сайтов. Также принципы отзывчивого дизайна важно учитывать для того, чтобы веб-сайт был доступным и производительным вне зависимости от устройства, на котором его открывают.
Современные браузеры (в том числе Firefox и Chrome) предоставляют модели соблюдения принципов отзывчивого дизайна при разработке сайтов и приложений. Эти модели эмулируют поведение того или иного устройства, что позволяет протестировать и проанализировать все функции сайта.
Больше об этом можно узнать в руководствах браузеров:
-
в Firefox в Chrome
Заключение
В этом руководстве представлен краткий обзор работы с консолью JavaScript в современных веб-браузерах. Также здесь можно найти информацию о других полезных инструментах разработки.
Как редактировать Javascript в браузере?
Я искал способ редактировать 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, а также я, вероятно, не знал, что функция может быть заменена на лету.
7 ответов
В 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).
поскольку ваш комментарий bounty просит исправить сломанный веб-сайт, я бы использовал вышеуказанные инструменты для создания фрагмента JS, который исправляет вашу проблему. После этого я бы не хотел каждый раз выполнять код на панели инструментов разработчика.
Так. как только вы создадите это JS snippet, который исправляет сайт для вас, вы можете использовать GreaseMonkey(плагин)для выполнения скрипта фиксации сайта при каждом посещении. Таким образом, вы можете нормально использовать сайт и не выполнять его вручную при каждой загрузке страницы.
в настоящее время это невозможно в Firefox OTB. Смотрите Ошибки 737743 и 486546.
в отношении @artur-grzesiak, «стоп, шаг через, изучить и изменить», как представляется, относится к переменные
в chrome версии 42.0.2311 в Developer Tool, нажав на консоли вы можете получить окно, где вы можете редактировать javascript и после нажатия enter можно увидеть его эффект в браузере.
в Mozilla версии 37.0.1 после открытия инструмента разработчика нажмите на консоли редактировать код сценария java в правой части окна инструмента и после завершения редактирования нажмите на run, чтобы проверить код сценария java в браузере.