Как сохранить изменения в коде элемента на сайте в хроме

Обновлено: 06.07.2024

Как "динамически" редактировать код JavaScript в отладчике Chrome? Это не для меня, поэтому у меня нет доступа к исходному файлу. Я хочу отредактировать код и посмотреть, какие эффекты они имеют на странице, в этом случае останавливая анимацию от очереди несколько раз.

вы можете использовать встроенный отладчик JavaScript в инструментах разработчика Chrome на вкладке " Скрипты "(в более поздних версиях это вкладка" источники"), но изменения, которые вы применяете к коду, выражаются только в то время, когда выполнение проходит через них. Это означает, что изменения в коде, который не выполняется после загрузки страницы, не будут иметь эффекта. В отличие от, например, изменений кода, находящихся в мыши обработчики, которые вы можете проверить на лету.

есть видео с мероприятия Google I / O 2010 представляем другие возможности инструментов разработчика Chrome.

я наткнулся на это сегодня, когда я играл с чужим сайтом.

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

Так как быстрая работа вокруг, и если она работает с вашим ситуация:

добавить точку останова в более ранней точке скрипта
обновить страницу
отредактируйте изменения в коде
CTRL + s (сохранить изменения)
возобновить отладчик

этой это удивительный учебник для отладчика Chrome. Он показывает очень простые шаги для внесения изменений в отладчик в Скрипты.

Это то, что вы ищете:

1.- Перейдите на вкладку источник и откройте файл javascript

2.- Отредактируйте файл, щелкните его правой кнопкой мыши и появится меню: нажмите кнопку сохранить и сохранить его локально.

для просмотра различий или возврата изменений щелкните правой кнопкой мыши и выберите опцию Локальные Изменения. из меню. Вы увидите, что ваши изменения отличаются от исходного файла, если вы развернете метку времени показанный.

довольно легко, перейдите на вкладку "сценариев". И выберите исходный файл и дважды щелкните любую строку для редактирования.

теперь google chrome имеет ввести новую функцию. С помощью этой функции вы можете редактировать код в chrome browse. (Постоянное изменение местоположения кода)

для этого нажмите F12 --> Source Tab -- (правая сторона) -- > File System - в этом, Пожалуйста, выберите местоположение кода. и тогда браузер chrome спросит у вас разрешения, и после этого код будет тонуть с зеленым цветом. и вы можете изменить свой код, и он также отразится на вашем местоположении кода (это означает, что он будет постоянным изменить)

Если его javascript, который работает на кнопке Нажмите, а затем внести изменения в разделе Источники>Источники (в инструментах разработчика в chrome) и нажатие Ctrl +S для сохранения, достаточно. Я делаю это все время.

Если вы обновите страницу, ваши изменения javascript исчезнут, но chrome по-прежнему будет помнить ваши точки останова.

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

Я искал способ изменить скрипт и отладить этот новый скрипт. Способ, которым мне удалось это сделать:

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

перезагрузите страницу, чтобы точка останова была нажата

вставьте новый скрипт и установите в нем нужные точки останова

Ctrl+s, и страница будет обновляться, вызывая эту точку останова в первой строке чтобы его ударили.

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

поскольку это довольно популярный вопрос, который касается живого редактирования JS, я хочу указать еще один полезный вариант. Как описал svjacob в своем ответе:

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

вышеупомянутое решение не работало для меня для довольно большого JS (webpack bundle - 3.21 MB minified version, 130k строк кода в prettified version) - chrome разбился и попросил перезагрузку страницы, которая вернула любые сохраненные изменения. Путь в этом случае был Саша где вы можете установить опцию AutoRespond для замены любого удаленного ресурса любым локальным файлом с Вашего компьютера -см. этот вопрос SO для деталей.

в моем случае I также пришлось добавить заголовки CORS в fiddler для успешного макета ответа.

Chrome DevTools имеет фрагментов панель, где вы можете создавать и редактировать код JavaScript, как в редакторе, и выполнять его. Откройте DevTools, затем выберите Панель "источники" и вкладку "фрагменты".

Инструменты разработчика веб браузеров — это мощнейший инструмент для отладки работы веб сайтов. Если вы ещё не знакомы с ним, то обратитесь к статье «Статический анализ исходного кода веб-сайта в браузере».

Используя Инструменты разработчика возможно выполнить любые изменения HTML разметки, стилей и JavaScript кода «на лету», наблюдая за изменения в реальном времени.

Сделанные изменения пропадают сразу после перезагрузки страницы. Если вам нужно, чтобы изменения кода, сделанные в Инструментах разработчика браузеров, сохранялись после перезагрузки страницы, то данная статья расскажем вам, как это сделать на примере Google Chrome (Chromium).

Откройте Инструменты разработчика (клавиша F12) и перейдите во вкладку «Sources», там найдите раздел «Overrides»:

Кликните на «Select folder for overrides», выберите папку, куда будут сохраняться файлы для перезаписи файлов сайтов. На запрос о правах доступа, нажмите кнопку «Разрешить»:

Поставьте галочку «Enable Local Overrides». Если вы не видите этот флажок, то перезапустите веб-браузер и вернитесь на эту влкадку Инструментов веб-разработчика.

После этого в «Sources» → «Page» в контекстном меню для любой страницы будет доступно «Save for overrides»:

Теперь все файлы, для которых вы выбрали «Save for overrides» будут сохранены на жёсткий диск. Вы можете делать любые изменения в них и они также будут сохранены на постоянной основе. И при повторном открытии сайтов вместо оригинальных файлов будут использованы сохранённые вами версии.

На вкладке «Sources» → «Overrides» вы увидите список всех сохранённых файлов для всех сайтов:

Как отменить Overrides (локальные переопределения)

На вкладке «Sources» → «Overrides» выберите файл, который вы не хотите использовать, чтобы вновь задействовалась оригинальная копия с сайта, нажмите на него правой кнопкой мыши и выберите «Delete»:

Как при открытии сайта не использовать определённые файлы скриптов или стилей

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

Как добавить скрипт или стили при открытии сайта

Вы можете добавить код или стили в уже существующие файлы с помощью Overrides. Либо обратите внимание на вкладку «Sources» → «Snippets». Если вы не видите пункт Snippets, то нажмите на кнопку » чтобы развернуть полный список пунктов.

Несмотря ни на что, не многие знают, как сохранить изменения стилей из консоли chrome. Об этом кратко сегодня и расскажем.

Вообще говоря, это стандартная возможность Chrome, доступная ещё с 11-го года, но малоизвестная и по сей день.

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

Итак, как сохранить изменения стилей из консоли chrome?

Это делается за 2 простых шага:

Откройте вкладу Sources инспектора chrome, кликните правой кнопкой мыши в левом поле, где выводится список файлов, и выбирите Add folder to workspace

После добавления папки нужно разрешить хрому работать с этой папкой

Готово. После перезагрузки страницы, Chrome будет сам сохранять и синхронизировать все внесенные правки в локальный файл.

Подводные камни

Есть некоторая проблема с тем, в каком виде хром сохраняет измененные файлы. Они мягко говоря очень не приглядного вида. Никакого форматирования, всё сжато и уменьшено, читать и работать с этим вообще не удобно. Более того, сохраняются все браузерные стили, в том числе и дефолтные для браузера, которых нет в исходном коде редактируемого сайта, что также привносит немного путаницы в результат. Но, как ни крути, это способ сохранить и не потерять наработки сделанные на скорую руку. После такой синхронизации можно привести код в чувства при помощи клинеров кода, и бьютифаеров. После чего вычленить дефолтные стили и оставить только актуальную версию кода, которая нам так нужна. Не очень удобно, зато работает без дополнительных примочек, которые кстати, тоже работают не очень хорошо.

Типичный процесс веб-разработки включает в себя создание HTML-страниц со связанным CSS и JavaScript. Он включает в себя следующие этапы:

Открытие созданной страницы в браузере.
Поиск проблем с дизайном и функционалом с помощью инструментов разработчика.
Изменение HTML, CSS и JavaScript.
Копирование измененного в редактор и повтор первого шага.

Но можно открывать и редактировать файлы непосредственно в Google Chrome, а внесенные изменения сохранять локально и обновлять в редакторе. Для этого

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

Откройте создаваемую веб-страницу в Google Chrome. Затем перейдите в « Инструменты разработчика» на вкладку Sources .

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

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

Перейдите на вкладку Filesystem, затем нажмите + Add folder to workspace . После этого укажите рабочую папку и подтвердите, что разрешаете браузеру доступ к ней.

Шаг 3: Отредактируйте и сохраните исходный код

Отредактируйте исходный код веб-страницы. Не сохраненные изменения помечаются звездочкой прямо на вкладке файла.

Изменения CSS мгновенно обновляются. Для сохранения HTML и JavaScript, нужно нажать Ctrl +S, а затем обновить окно браузера.

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

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

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

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

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

В данном посте покажем, как можно изменить код страницы в браузере Google Chrome. В других браузерах это делается аналогично. Я думаю трудностей не будет с этим.

Для изменения исходного кода страницы не обязательно хорошо знать HTML и CSS. Далее вы это сами увидите.

Редактирование html кода в браузере

Мы будем менять данные на сайте. Изменения в коде будут видны только нам. При обновлении страницы они исчезнут.

Откройте в браузере страницу сайта, в которой необходимо изменить код. Это можно

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

В контекстном меню нажимаем Edit as HTML и у нас появится выделенный код.

При такой редакции мы видим сразу результат.

Вверху картинки отмеченное красной рамкой HTML код, находящийся в шапке сайта, стиль которого будем менять.

Внизу красной стрелкой показано style.css:473 и находится в Консоли> Внешний вид>Редактор темы>файл style.css строка 473. Как можно это использовать?

Эти изменения можно использовать следующим образом. Копируем в блокнот Notepad++ с расширением html. Если это Ваш сайт, то вносим изменения в файлы на веб-сервере.

Или эти изменения можно внести в Консоли административной панели сайта, используя Редактор темы файлов.

С помощью подмены HTML кода, мы сможем изменить открытую веб-страницу как захотим.
Умение изменить исходный код страницы – дает отличный навык для продвинутого пользователя Интернета.

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

Редактирование CSS во встроенном редакторе

Для этого в заходим в Консоль админ панели и при наведении курсора на Внешний вид выпадает меню где нажимаем на Редактировать CSS

Открывается с левой стороны окно для редактирования.

Нажимаем на Дополнительные стили и открывается поле для загрузки кода CSS.

Код CSS в котором будем производить изменения копируем и вставляем в вышеуказанное поле.

После загрузки редактируем код и смотрим результат, если нас все устраивает и мы нажимаем на кнопку Опубликовать. Все изменения в дизайне сайта будут такими же как в предварительном просмотре.

При неготовности опубликовать произведенные изменения. Нажимаем на пиктограмму в виде шестеренки. Открывается дополнительное окно

где можем сделать пометку Сохранить. Изменения будут сохранены, и можно будет поделиться. С внесенными изменениями, без публикации. Останется как черновик.

Также можно Запланировать публикацию произведенных изменений, на будущую дату: День, Месяц, Год и Время выставляем по своему желанию.

Далее мы можем посмотреть полную историю произведенных нами изменений. Это очень удобно в истории отражены изменения данных до и после.

Или мы можем просто отменить изменения. Нажав на пиктограмму корзины.

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