Как редактировать js в браузере

Как редактировать JavaScript прямо на сайте?

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

Отслеживать
задан 21 окт 2019 в 14:31
11 1 1 золотой знак 1 1 серебряный знак 2 2 бронзовых знака
а какая Ваша цель?
21 окт 2019 в 14:37
Вы хотите редактировать код на чужом сайте, что ли?
21 окт 2019 в 14:37
не на сайте, а скорее на клиенте что во вкладке Resources или Отладка
21 окт 2019 в 14:48

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

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

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

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

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

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

Как редактировать JavaScript «на лету» в Google Chrome?

Собственно проблема: необходимо для себя изменить JS код на странице сайта.
Пытался править в Developer Tools (Ctrl+Shift+J) на вкладке Elements, но, в отличии от HTML, браузер упорно выполняет старый скрипт.
На вкладке Sources нашел нужный скрипт, но его невозможно редактировать.
Помогите.

Версия Chrome: 31.0.1650.63

Вопрос задан более трёх лет назад
35706 просмотров

Комментировать
Решения вопроса 1
Contego @Contego Автор вопроса

Решением оказался переход на старую Оперу(v.12 15) и использование кнопки «Применить изменения» в исходном коде.

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ответы на вопрос 3

Yavanosta

Правьте на вкладке Sources и после изменения нажмите Ctrl+S. Скрипты встроенные прямо в страничку там тоже будут (см выпадающую панельку слева)

Ответ написан более трёх лет назад
Нравится 4 1 комментарий
Contego @Contego Автор вопроса

Для этого в последних версиях Chrome нужно проследовать Console -> Значок настроек внизу -> Workspace и создать «Add folder». Но и после этого, увы, нельзя редактировать скрипты, написанные в теле страницы, а не в отдельном файле.

Как редактировать исходные файлы прямо в Chrome

Обычный день веб-разработчика включает создание веб-страниц HTML со связанным CSS и JavaScript в их любимом редакторе.

Примерный рабочий процесс:

Открыть локально размещенную страницу в браузере.
Молиться.
Открыть DevTools, чтобы исследовать проблемы с макетом и функциональностью.
Настроить элементы HTML, свойства CSS и код JavaScript, чтобы устранить проблемы.
Скопировать эти изменения обратно в редактор и вернуться к шагу #1.

Хотя такие инструменты, как «живая» перезагрузка, упростили этот процесс, многие разработчики продолжают настраивать код как в DevTools, так и в их редакторе.

Однако можно открывать и редактировать исходные файлы непосредственно в Chrome. Любые сделанные вами изменения сохраняются в файловой системе и обновляются в редакторе (при условии, что они обновляются при изменении файла).

Шаг 1: Запустите инструменты разработчика

Откройте Chrome, загрузите страницу из локальной файловой системы/сервера и откройте Инструменты разработчика из меню «Дополнительные инструменты» или нажмите F12 или Ctrl/Cmd+Shift+I, в зависимости от вашей системы. Перейдите на вкладку «Источники», чтобы проверить файловый менеджер:

Как редактировать исходные файлы прямо в Chrome

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

Шаг 2. Свяжите папку с рабочей областью

Перейдите на вкладку «Файловая система», затем нажмите «+ Добавить папку в рабочую область». Вам будет предложено найти вашу рабочую папку, и Chrome попросит вас подтвердить, что вы разрешите доступ. Проводник показывает файлы в вашей системе, которые можно открыть одним щелчком мыши:

Как редактировать исходные файлы прямо в Chrome

Шаг 3. Отредактируйте и сохраните ваш код

Теперь вы можете перейти и редактировать свой код. Несохраненные изменения помечаются звездочкой на вкладке файла.

Изменения CSS мгновенно обновляются, но в случае HTML и JavaScript вам обычно нужно нажать Ctrl / Cmd + S, чтобы сохранить файл в файловой системе, а затем обновить браузер.

Как редактировать исходные файлы прямо в Chrome

Обратите внимание, что вы также можете щелкнуть правой кнопкой мыши вкладку файла и выбрать Сохранить как …, чтобы сохранить копию файла в другом месте.

Шаг 4. Просмотр и отмена изменений

Чтобы просмотреть изменения, щелкните правой кнопкой мыши вкладку файла и выберите Локальные изменения … из контекстного меню:

Как редактировать исходные файлы прямо в Chrome

Дифференциальный вид показан. Значок стрелки в нижнем левом углу панели отменяет все изменения и возвращает файл в исходное состояние.

Инструменты разработчика Chrome никогда не станут полной заменой вашего любимого редактора, но могут быть полезны, когда вы вносите быстрые изменения или работаете с другого компьютера, на котором ваш редактор может быть не установлен.

Понравилось то, что вы прочитали?

Подписывайтесь на нашу рассылку и получайте ежедневные обновления о новых учебниках, статьях, курсах и о многом другом!

Просто введите ваш адрес электронной почты, чтобы подписаться.

(Без спамов; ежемесячно два письма; отписаться от рассылки можно в любое время)

Спасибо!

Подписка успешно оформлена. ��