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

84
27 сентября 2021, 03:40

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

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

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

Answer 1

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

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

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

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

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

Answer 2

Если вы имеете в виду изменить что-то на сайте и сохранить это для вас лично, тогда вам нужно:

*либо расширение браузера как custom style script куда можно вставлять js и css.

*либо расширение юзерскриптов наподобие greasemonkey. Обычно все используют подобное расширение или букмарклеты чтобы изменять что-то на чужих сайтах.

*либо расширения типа stylish для изменения внешнего вида сайта

Если вы имеете в виду визуальное редактирование сайта и сохранение результатов таких сложных расширений мало, попробуйте Code Cola, сам я правда не пользовался таким.

Либо сделать букмарклет с кодом который вам нужен для изменения страницы. Один из самых простых вариантов.

Если вы имеете визуальное редактирование своих сайтов то есть много визуальных редакторов.

Можно попытаться подгрузить сайт по ajax (есть ограничение на загрузку из другого домена,нужно загружать как plain text... ) изменить его а потом сохранять в куки или localstorage, то есть создать подобие мини браузера

Другой вариант это перенести сайт в оффлайн граббером и провести изменения уже там.

Есть еще не совсем законные варианты наподобие xss или подмены скрипта... но это уже другой разговор. Я думаю вы не это имели в виду.

READ ALSO
Как реализовать операцию сравнения в regexp?

Как реализовать операцию сравнения в regexp?

Пытаюсь решить следующую задачу именно с использованием regexp в JSСуть задачи проста: По входным данным матчить числа N-ой значности

86
canvas Отследить нажатый элемент

canvas Отследить нажатый элемент

Подскажите, пожалуйста, как отслеживать состояние "элементов" созданных на холстеВот простой пример

182
Как изменить выделенный текст при нажатии на кнопку?

Как изменить выделенный текст при нажатии на кнопку?

Сделал вот такой маленький пример:

258
x509: certificate signed by unknown authority на Golang

x509: certificate signed by unknown authority на Golang

Имеется js код такого типа, который делает запрос к апи и получает от него ответ

304