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

196

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

javascript google-chrome-devtools

— CDT
источник

220

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

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

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

— Эшли Шредер
источник

10

Оказывается, это был ответ, который я искал. Поместите точку останова в первую строку кода JavaScript. Затем, когда произойдет перерыв, вставьте туда измененный код. Сделайте паузу, и это работает!

— Николас Блазген

как вы там редактируете или вставляете код? Я определенно не вижу такой функциональности в консоли Chrome. Я могу редактировать JS / HTML из раздела Элементы, но это не перезагружается автоматически. Но в том месте, где установлены точки останова, это, кажется,

— доступно только для чтения

К сожалению, это все еще не очень хорошее решение. Любой добавляемый вами код недоступен в консоли. Например, добавление var foo = 'bar'в скрипт не выставляет fooконсоль.

— AgmLauncher

что случилось с внешними скриптами? контрольные точки, кажется, исчезают из них.

— OlehZiniak

Это работает до тех пор, пока вы хотите изменить внешне загруженные сценарии, ни Chrome, ни инструменты отладки FireFox не позволят изменить встроенный JavaScript, даже если его выполнение прерывается из-за точки останова.

— Марек,

151

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

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

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

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

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

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

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

— Нико
источник

13

С выпуском Chrome 65 это должен быть новый принятый ответ. (Функциональность уже была доступна в Chrome Canary)

— Micros

1

У меня есть файл "a.js? Ver = 1.2". Он сохраняется в папке переопределения как «a.js» и не загружается как переопределение. Не работает ли при наличии параметров? Есть ли обходной путь?

— Ральф

Работает как задумано, но нужно позаботиться об одном. Вам нужно очистить конфигурации переопределения или удалить локально измененный файл (сохраненный в папке, которую вы указали при настройке переопределений), как только вы захотите загрузить свой исходный файл js.

— Мухаммед Мурад Хайдер

61

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

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

— laktak
источник

1

Сделал мне трюк, спасибо. Я использовал Fiddler для Windows до этого расширения. Прямо сейчас я могу отлаживать удаленные файлы на любой платформе.

— Ахмад Алфи

Я не понимаю программное обеспечение, может кто-нибудь объяснить, как именно я должен его настроить?

— Черный

0

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

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

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

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

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

— Марс Робертсон
источник

-8

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

— jacksbox
источник

Какая версия хрома? Да, вы можете «редактировать» содержимое сценария (но не сценарии на самой странице), но изменения не имеют никакого эффекта, и ctrl-s / save позволяет просто сохранить сценарий локально (как ctrl-as в главное окно).

— Давидконрад

Я использую версию 34 - когда я редактирую скрипт, например, добавляю console.log к событию click (уже связан) и сохраняю, консоль выводит следующее сообщение: «Перекомпиляция и обновление успешно завершены». - после этого. когда я запускаю событие click, я получаю вывод журнала в консоли.

— Jacksbox

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

— Джейк Уилсон

32

вы меня в "да" ... но потом вы потеряли меня в "пока вы не обновите всю страницу" ....

— Cool Blue