Скрипт для редактирования страницы в браузере

Обновлено: 05.01.2025

Я искал способ редактировать 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 в браузере.

В виду того, что часть кода ответственная за считывание/запись файлов, реализуется, обычно, другими скриптами, тут будут, в основном, WYSIWYG редакторы на javascript. Скрипты поддерживаемые только одним браузером (IE), а также без демостраницы, удалены из шапки.

Наиболее популярные:

[js] CKEditor (бывший FCKEditor) - интегрируется почти с любым вебязыком и умеет практически все, что нужно для редактора. обсуждение

[js] CLEditor - простой и легкий плагин для jQuery

[js] dijit.Editor - виджет javascript-фрэймворка Dojo Toolkit

[js] markItUp! - плагин для jQuery

[js] Cross-Browser Rich Text Editor (сайт)-- редактор для IE5.5+/Mozilla 1.3+/Firefox 0.6.1+/Netscape 7.1+/Mac Safari 1.3+/Opera 9+

[Flash] Rich Text on-Screen Editor (WYSIWYG) (сайт)-- HTML-редактор на флэш, .fla-исходник прилагается. (не дружит c русскими шрифтами, поэтому для того, чтобы можно было использовать на странице-- необходимо в исходнике заменить шрифты на кириллические).

[Java] Ekit Java HTML Editor (сайт)-- open source HTML-редактор в виде Java-аплета

[Java] ZWebEdit (сайт)-- Простейший редактор: умеет только заключать в тэги <b>, <i> или <u> выделенную часть введённого текста

WYSIWYG-редактор

Редактор WYSIWYG из системы управления сайтом Bitrix

Скрипты для редактирования содержимого файлов из браузера

[Perl] AutoHTMLite (сайт)-- скрипт для создания HTML-файлов на сервере из браузера + для заливки файлов на сервер из браузера

[Perl] Genie (сайт)-- Простой скрипт для редактирования файлов или заливки готовых файлов на сервер из браузера

[Perl, SSI] Page Updater (сайт)-- скрипт позволяет вставлять/заменять часть текста на странице, для обновления новостей на странице не подойдёт-- не может сохранять предыдущие обновления, но для вставки кода баннеров, обновления любой информации, не требующей сохранения при её замене (напр., цены и т.п.), вполне сгодится. По сути делает то же, что и SSI, но есть возможность изменять информацию из браузера.

[PHP] SnippetMaster LITE (сайт)-- скрипт для изменения содержимого страниц сайта (редактируемые места необходимо определять заранее при помощи специальных коментариев)

ты шапку читал? %)
Это уже есть. + несколько более-менее нормальных вещей оттуда %)

(А причем тут эта тема?)

Namo ActiveSquare 5

Навороты:
- Многоязычность
- подключение необходимого CSS прямо в окно редактора
- Большой набор функций форматирования
- Корректная(!) работа с изображениями
- Легко интегрируется
- Можно создавать собственные панели инструментов
- Автоматически определяет язык браузера и включает нужнуюю локаль

Минусы
- Работает тока под виндой и IE5+
- Иногда глючит автоопределения языка браузера

Теги в принципе можно и все при желании впихнуть
Жду отзывов

Добавлено
ЗЫ. работает только в ИЕ 5.5+
Даже в МайИЕ не так как надо работает

Сегодня решил ради интереса изменить JS код на одном сайте. Сначала полез в интернет искать простые варианты решения. На форумах писали про расширение для Хрома Resource Override, однако код не заменялся или сам файл просто удалялся. Так же пробовал метод с AdBlock и еще расширением для загрузки .js файла на сайт. Однако сайт не работал либо ломал браузер. Друзья веб-разработчики тоже не знают. Как всё-таки изменять JS код файла в браузере?

P.s. Если потребуется более точное описание ситуации, я могу обновить пост

Обновлено: Я имею ввиду не на самом сайте, а скорее во вкладе Отладка или Resources, цель скорее просто научиться так делать и изучить JS получше

не на сайте, а скорее на клиенте что во вкладке Resources или Отладка

В Хроме, начиная с версии 65, есть встроенный функционал локальных переопределений. Он позволяет редактировать скрипты и стили прямо в DevTools, без помощи сторонних расширений.

Все что нужно сделать - это перейти на вкладку Sources, слева выбрать подраздел Overrides (может прятаться под кнопкой » ), и выбрать локальную папку для хранения измененных файлов. Вверху под адресной строкой появится запрос на предоставление доступа к папке - нажимаем кнопку "Разрешить".

После этого, можно свободно редактировать скрипты страницы на вкладке Sources/Page - браузер будет автоматически подменять их измененными версиями (которые сохраняются в указанной папке, так же автоматически). Когда редактирование скрипта завершено, надо только нажать Ctrl+S в DevTools, и обновить страницу.

Быстро перейти к измененной копии файла в дереве папок Overrides (например, чтобы удалить ее, сбросив все правки) можно кликнув на вкладке или содержимом файла правой кнопкой мыши, и выбрав пункт меню "Reveal in sidebar".
Доступен также diff изменений: он открывается командой "Local Modifications. ", которая находится в том же контекстном меню.

Отключить переопределения можно просто сняв галочку в подразделе Overrides. Конечно же, изменения никуда не исчезнут (в этом и смысл хранения локально) - они будут применяться при повторном включении функции.

Одним из наиболее распространённых вариантов использования расширений является внесение изменение в веб-страницу. К примеру, расширение может изменить стиль, применённый к странице, скрыть существующие или вставить на страницу дополнительные DOM-узлы.

Существует два способа сделать это используя WebExtensions API:

Декларативно: объявить шаблон, которому соответствует набор URL-адресов, и загрузить набор скриптов на страницы, которые попадают в под этот шаблон.
Программно: используя JavaScript API, загрузить скрипт на страницу, из определённой вкладки.

В любом случае, эти скрипты называются контентными скриптами, и отличаются от других скриптов, которые составляют расширение:

В этой статье мы рассмотрим оба способа загрузки скрипта.

Модификация страниц, подпадающих под URL-шаблон

Прежде всего создадим новую директорию, назовём её "modify-page". В этой директории, создадим файл "manifest.json", со следующим содержимым:

Поскольку свойство "js" ключа content_scripts это массив, вы можете использовать его, для внедрения более одного скрипта. Если вы сделаете это, страницы получат набор, как если бы эти скрипты были загружены самой страницей, они будут загружены в той же очерёдности, в которой они расположены в массиве.

Ключ content_scripts также имеет свойство "css" , которое вы можете использовать для вставки CSS-таблиц.

Далее, создадим файл "page-eater.js", внутри директории "modify-page":

Программная модификация страницы

Что, если вы всё ещё хотите "съедать" страницы, но лишь в тех случаях, когда пользователь попросил об этом? Давайте обновим этот пример таким образом, чтобы мы внедряли контентный скрипт, когда пользователь выбирает соответствующий пункт контентного меню.

Для начала обновим "manifest.json":

Мы удалили ключ content_scripts и добавили два новых:

permissions (разрешения) : для внедрения скрипта, нам нужны разрешения для страниц, которые мы модифицируем. Разрешение activeTab это способ получить доступ к текущей вкладки. Нам также нужно разрешение contextMenus , чтобы добавлять в контекстное меню новые элементы.
background (фоновый) : мы используем этот ключ, для загрузки постоянного "фонового скрипта", с именем "background.js", в котором мы настроим контекстное меню и внедрим контентный скрипт.

Давайте создадим этот файл. Создадим новый файл "background.js" в директории "modify-page" и поместим в него следующий код:

В этом скрипте мы создаём элемент контекстного меню, передавая ему определённый идентификатор и заголовок (текст будет отображаться в элементе контекстного меню). Затем мы настраиваем обработчик событий таким образом, чтобы когда пользователь выбирает пункт контекстного меню, осуществлялась проверка, наш ли это элемент eat-page . Если это так - внедряем скрипт "page-eater.js" в текущую вкладку, используя tabs.executeScript() API. Это API опционально принимает идентификатор вкладки, в качестве аргумента. Мы опустили его, это означает, что скрипт будет внедряться в текущую активную вкладку.

На данном этапе расширение должно иметь следующий вид:

Теперь перезагрузим расширение, откроем страницу (на этот раз любую) активируем контекстное меню и выберем "Съесть эту страницу":

Сразу привожу достаточно хорошо прокомментированный код:

На первый взгляд, кажется, что код очень сложный. И так оно и есть, но если рассмотреть его по базовым элементам, то ничего сложного нет. Есть обычная форма и поле hidden, куда сохраняется получившийся в редакторе HTML-код. Сам редактор - это обычный фрейм, то есть обычная HTML-страница, в которой мы можем писать текст (designMode = "on"). А различные форматирования создаются с помощью метода execCommand(), который выполняет указанную в параметре команду. А уж создать новые кнопки и прикрепить к ним аналогичные обработчики, думаю, что не составит для Вас труда.

В этом скрипте нет ничего лишнего, только самое главное и основное, и его можно брать за основу для создания собственного визуального редактора на JavaScript, в котором не будет ничего лишнего, а только то, что нужно Вам.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 25 ):

Спасибо Михаил, отличная штука, сам пользуюсь HTML Box. Но теперь, есть над чем поработать.

Почему то у меня не получается получить данные в php. Я сделал следующее: 1. Создал файл data.php: <?php $strHeading = "<h1>Текст, " .$_POST["content"]. "</h1>"; ?> <html> <body> <? echo $strHeading; ?> </body> </html> 2. Потом в вашем html файле прописал следущее: <form name="myform" action="data.php" method="post"> Однако никаких записей в data.php не получил.

Для того, чтобы отправлять, нужно написать в form onsubmit="return save()". В этой save() сделать сохранение (которое уже есть в статье) в hidden и вернуть true, тогда форма отправится с данными.

Не получается с form onsubmit="return save()" Я поставил ее так <form name="myform" onsubmit="return save()" action="data.php" method="post"> Но все равно не работает!

Вы функцию save() вообще написали?

Извиняюсь не писал. Дело в том что я не разбираюсь в js. Мне просто очень понравилась ваша идея использовать вместо громоздких редакторов, простой код. Могли бы вы сюда скинуть полный код который позволял бы отправлять текст из формы этого урока, в базу данных или в другую страницу php. Сам я чайник в js.

Дописал код в статье.

Ура заработало! Респект вам.

Скрипт хорошо работает! Спасибо вам за это. У меня только один вопрос. Если закачивать напрямую данные из этого редактора в Базу Данных, то не возникнут проблемы с безопасностью?

Возникнут, особенно, если их потом ещё и выводить куда-нибудь на страницу. Поэтому надо пропускать через htmlspecialchars(), либо допускать только некоторые теги для использования.

Здравствуйте! Сделал так: echo "<h1>" . $_POST[htmlspecialchars("content")] . "</h1>"; Правильно? И еще при выводе текста код выходит такой: <div>Строка1</div><div>Строка2</div> можно ли заменить <div> на <p>? То есть чтобы выходило так: <p>Строка1</p><p>Строка2</p> Заранее благодарю.

Первая часть неправильная, надо $_POST пропускать через эту функцию, а не какую-то бессмысленную строку. Заменить можно, для этого есть str_replace().

Спасибо за str_replace(). Можно ли вместо htmlspecialchars использовать strip_tags($mytext, '<p><i><b>')? И этим обезопасить сайт.

Спасибо вам большое! Я поставил ссылку на ваш сайт здесь - tendey.kz/ru/.

Редактор работает хорошо. Только не знаю, как сделать скрипт для изменении данных. То есть чтобы можно было изменять набранный текст, который сохранен в Базе Данных.

Для обычных полей <input> я сделал через value='$peremennaya'. Но для визуального редактора это не подошло.

Здравствуйте Михаил! Пожалуйста помоги мне я уже весь нэт перевернул но все равно не получается. Я создал админ панель для моего html сайта управление меню и другое все сделал и работает но проблема заключается в добавлении новых страниц и редакции существующих. Как внедрить редактор для свободного редактирования и добавления страниц желательно TinyMCE потому что она в joomla работает супер но мне joomla не нужна. Если ты сделаешь по этому поводу видео курс то я буду тебе благодарен и обязательно поставлю твои материалы на мой сайт с сcылкой на автора.

Я вам уже задавал подобный вопрос ещё давно но ответа не было к сожалению, очень прошу ответь мне.

в ближайшее время такой курс не планируется. Но,если вы знаете php и js,внедрить визуальный редактор,используя документацию на офф.сайте редактора - труда не составит

Спасибо, штука крутая, но можно сделать рядом с кнопками В и І галочки поставить нужно же пользователю знать включен или выключен параметр кусива или полужирного?

Здраствуйте, я создал два html файла один пустой(art.htm) и другой с скриптом(edit.htm) так как я незнаю js я скопировал скрипт сайта и вставил в edit.htm и в action="art.htm" прописал art.htm и запустил но он несработал в других местах нечего неменял.

Здравствуйте, а такой же визуальный редактор можно сделать с помощью jquery? Спасибо!

Читайте также: