Блог

Главная - Вопросы по программированию - Инструменты разработчика Chrome — изменение javascript и перезагрузка

Инструменты разработчика Chrome — изменение javascript и перезагрузка

#html #jquery #browser

#javascript #google-chrome-devtools

Вопрос:

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

Ответ №1:

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

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

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

Комментарии:

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

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

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

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

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

Ответ №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#overrides

Комментарии:

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

2. У меня есть файл «a.js?ver = 1.2». Он сохраняется в папке переопределения как «a.js» и не загружается как переопределение. Это не работает, когда есть параметры? Есть ли обходной путь?

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

4. спасибо, сначала я не нашел вкладку переопределения, так как моя панель навигатора (левая панель) была свернута.

5. Это работает. Даже при изменении стилей на вкладке «Элементы» и сохранении с помощью Ctrl S.

Ответ №3:

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

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

Комментарии:

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

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

Ответ №4:

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

Комментарии:

1. Спасибо, приятель! это сработало, вы сэкономили много моего времени и усилий.

2. 1 за то, что указал мне правильное направление developer.chrome.com/blog/new-in-devtools-65/#overrides

Ответ №5:

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

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

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

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

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

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

Ответ №6:

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