Инструменты разработки Chrome - измените JavaScript и перезагрузите

Question

Можно ли изменить JavaScript страницы и затем перезагрузить страницу, не перезагружая измененный файл JavaScript (и, следовательно, не теряя изменений)?

Answer 1

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

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

Но, как все говорили, после следующей перезагрузки изменения пропадут - по крайней мере, это позволит вам запустить немного измененную клиентскую часть JS.

Answer 2

Отличная новость, исправление ожидается в марте 2018 года, перейдите по этой ссылке: https://developers.google.com/web/updates/2018/01/devtools

"Локальные переопределения позволяют вносить изменения в DevTools и сохранять эти изменения при загрузке страниц. Ранее любые изменения, внесенные в DevTools, были бы потеряны при перезагрузке страницы. Локальные переопределения работают для большинства типов файлов.

Как это устроено:

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

Чтобы настроить локальные переопределения:

1. Откройте панель "Источники".
2. Откройте вкладку "Переопределения".
3. Нажмите Настройка переопределений.
4. Выберите каталог, в который вы хотите сохранить изменения.
5. В верхней части окна просмотра нажмите кнопку "Разрешить", чтобы предоставить DevTools права на чтение и запись в каталог.
6. Внесите свои изменения. "

ОБНОВЛЕНИЕ (19 марта 2018 г.): подробные объяснения здесь: https://developers.google.com/web/updates/2018/01/devtools

Answer 3

Расширение Resource Override позволяет вам сделать именно это:

• создайте правило файла для URL, который вы хотите заменить
• отредактируйте js/css/etc в расширении
• перезагрузите так часто, как вы хотите:)

Answer 4

1. В настройках devtools установите флажок Включить локальные переопределения.
2. Перейдите на вкладку «Сеть», найдите файл, который хотите отредактировать, щелкните его правой кнопкой мыши и выберите «Сохранить для переопределений» (на вкладке «Источники/переопределения» вам нужно добавить локальную папку).
3. Файл появляется в новой вкладке на вкладке «Источники» как локальная копия, поэтому вы можете редактировать этот файл, и после перезагрузки сайта новый (и отредактированный) файл переопределения загрузится на сайт!

Answer 5

Я знаю, что это не ответ на конкретный вопрос (Chrome Developer Tools), но я успешно использую этот обходной путь: http://www.telerik.com/fiddler

(уверен, что некоторые веб-разработчики уже знают об этом инструменте)

1. Сохраните файл локально
2. Редактировать как требуется
3. Прибыль!

Полные документы: http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder

PS. Я бы предпочел, чтобы это было реализовано в Chrome как флаг preserve after reload, не могу сделать это сейчас, форумы и дискуссионные группы заблокированы в корпоративной сети:)

Answer 6

Да, вы можете легко! Источник -> файловая система -> выберите папку контейнера -> разрешить доступ -> откройте файл, отредактируйте и сохраните. https://www.delftstack.com/howto/javascript/edit-javascript-in-the-browser/

Answer 7

Да, просто откройте вкладку "Источник" в dev-tools и перейдите к сценарию, который вы хотите изменить. Внесите свои изменения непосредственно в окне инструментов разработчика и затем нажмите Ctrl+ S, чтобы сохранить скрипт - знайте, что новые js будут использоваться, пока вы не обновите всю страницу.