Инструменты разработки 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 обслуживает локальный измененный файл, а не сетевой ресурс.

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

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

ОБНОВЛЕНИЕ (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

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

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

введите описание изображения здесь

Полные документы: 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