Інструменти Chrome Dev - змінення javascript та перезавантаження

194

Чи можливо змінити JavaScript сторінки, а потім перезавантажити сторінку, не завантажуючи змінений файл JavaScript (і, таким чином, втрачаючи модифікації)?

javascript google-chrome-devtools

— CDT
джерело

218

Це трохи вирішує проблему, але один із способів досягти цього - додавши точку розриву на початку файлу javascript або блоку, яким ви хочете маніпулювати.

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

Але, як усі сказали, наступного перезавантаження змін не буде - принаймні, це дозволить вам запустити трохи змінену сторону клієнта JS.

— Ешлі Шродер
джерело

10

Виявляється, це була відповідь, яку я шукав. Помістіть точку перерви в перший рядок коду javascript. Потім, коли відбувається перерва, вставте туди свій змінений код. Відмовтесь і це працює!

— Ніколас Бласген

як редагувати або вставляти код там? Я точно не бачу такої функціональності в консолі Chrome. Я можу редагувати JS / HTML у розділі "Елементи", але це не завантажується автоматично. Але в місці, де встановлені точки

— прориву

На жаль, це все ще не чудове рішення. Будь-який доданий вами код не доступний у консолі. Наприклад, додавання var foo = 'bar'в сценарій не піддається fooконсолі.

— AgmLauncher

що з зовнішніми сценаріями? точки прориву, здається, зникають з них.

— ОлегЗіняк

Це працює до тих пір, поки ви хочете змінити зовні завантажені сценарії, ні Chrome, ні інструменти налагодження FireFox не дозволять змінювати вбудований JavaScript, навіть якщо його виконання переривається з точкою розриву.

— Марек

148

Чудові новини, виправлення виходить у березні 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

— Ніко
джерело

12

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

— Micros

1

У мене є файл "a.js? Ver = 1.2". Він зберігається у папці заміщення як "a.js", а не завантажується як заміщення. Це не працює, коли є параметри? Чи існує рішення?

— Ральф

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

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

61

Розширення Resr Override дозволяє зробити саме це:

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

— лактак
джерело

1

Трюк мені подякував. Раніше я використовував Fiddler для Windows перед цим розширенням. Зараз я можу налагоджувати віддалені файли на будь-якій платформі.

— Ахмад Альфі

Я не розумію програмне забезпечення, може хтось пояснить, як саме я повинен його налаштувати?

— Чорний

0

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

(майже впевнений, що деякі веб-розробники вже знають про цей інструмент)

Збережіть файл локально
Відредагуйте за потребою
Прибуток!

Повні документи: http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder

PS. Я вважаю за краще, щоб він був реалізований у Chrome як прапор. preserve after reloadНе можу цього робити зараз, форуми та дискусійні групи заблоковані у корпоративній мережі :)

— Марс Робертсон
джерело

-8

Так, просто відкрийте вкладку «Джерело» у інструментах розробки та перейдіть до сценарію, який ви бажаєте змінити. Внесіть свої корективи безпосередньо у вікно інструментів розробки, а потім натисніть ctrl + s, щоб зберегти скрипт - знайте, новий js буде використовуватися, поки ви не оновите всю сторінку.

— jacksbox
джерело

Яка версія хрому? Так, ви можете "редагувати" вміст скрипту (але не сценарії на самій сторінці), але зміни не мають жодного ефекту, а ctrl-s / save як просто дозволить вам зберегти сценарій локально (як ctrl-як у головне вікно).

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

Я використовую версію 34 - коли я редагую сценарій, наприклад, додаю console.log до події клацання (вже зв’язок) і зберігаю, консоль виводить таке повідомлення: "Перекомпіляція та оновлення вдалося." - після того. коли я запускаю подію клацання, я отримую журнал-вихід у консолі.

— jacksbox

Під час перезавантаження сторінки, здається, не використовується локально модифікований файл.

— Джейк Вілсон

32

Ви мали мене на "так" ... але потім ви втратили мене на ", поки ви не оновите всю сторінку" ....

— Cool Blue