Chrome DevTools: локальные переопределения для JS файлов из исходной карты Webpack

Question

Я не совсем доволен удобством использования видеоплеера на coursera.org (не на моем собственном веб-сайте) и хочу что-то изменить, используя локальные переопределения для моего удобства.

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

В чем проблема и как ее решить?

Answer 1

Я понял, что это может быть ошибка функции локального переопределения: я мог видеть локальные изменения, внесенные в глобальный файл JS, но не для файлов, восстановленных исходными картами Webpack (файлы в webpack: //).

Вот обходной путь:

1. сначала найдите файл, который нужно изменить ( используя точки останова прослушивателя событий );
2. добавьте точку останова туда, где вы хочу изменить. Я добавил точку останова в строку 24, но создается больше точек останова, что, я думаю, является ошибкой в ​​DevTools. Затем установите флажки на правой панели, и вы должны увидеть исходный файл, созданный веб-пакетом (с красным крестом на вкладке);
3. щелкните вкладку правой кнопкой мыши и выберите «Показать на панели сети»;
4. Щелкните правой кнопкой мыши сетевой вызов и выберите «Сохранить для переопределения»;
5. Наконец, откройте сохраненный файл и внесите изменения. Обновите sh страницу, и вы должны увидеть переопределенные изменения.

Надеюсь, это поможет, если вы находитесь в подобной ситуации!