Сохранение изменений в JS через Chrome Dev Tools: руководство

Быстрый ответ

Если вы ищете быстрое решение, примените функционал Локальные переопределения (Local Overrides), находящийся в секции Источники (Sources) Инструментов разработчика Chrome. Зайдите в контекстное меню нужного JavaScript-файла, нажав на него правой кнопкой мыши, выберите пункт Сохранить для переопределений (Save for overrides), внесите нужные коррективы в код и сохраните их, используя комбинацию клавиш Ctrl+S (или Cmd+S для пользователей Mac). После обновления страницы вы увидите, что внесенные изменения сохранились. ✨

Пошаговая инструкция:

1. Откройте Инструменты разработчика Chrome и перейдите в секцию Источники (Sources).
2. Нажав правой кнопкой мыши на нужный файл, выберите Сохранить для переопределений (Save for overrides).
3. Внесите нужные изменения в код и сохраните их комбинацией клавиш Ctrl+S (или Cmd+S).
4. Обновив страницу, убедитесь, что ваши изменения учтены и сохранены.

Расширяем возможности: полный потенциал локальных переопределений

Один из скрытых ресурсов среди Инструментов разработчика Chrome — это Локальные переопределения (Local Overrides)! Они позволяют наблюдать за внесенными в код изменениями в реальном времени и обходить необходимость в повторной сборке проекта. Установите локальную директорию для переопределений, и код с внесенными изменениями будет сохраняться на вашем компьютере, что исключительно удобно при экспериментировании в разных сессиях.

Как настроить локальные переопределения: пошаговое руководство

Для активации этой функции выполните следующие действия:

1. Откройте Инструменты разработчика и зайдите в Настройки (Settings), нажав на иконку с изображением шестеренки или используя клавишу F1.
2. В разделе Эксперименты (Experiments) активируйте функцию Локальные переопределения (Local Overrides).
3. Перейдите в секцию Источники (Sources) и далее — в раздел Система файлов (Filesystem). Здесь, нажав на кнопку +, укажите локальный путь для хранения файлов.
4. Предоставьте Chrome разрешения на чтение и запись в выбранной директории.
5. Выберите нужный файл, вызовите его контекстное меню, нажав правой кнопкой мыши, и выберите пункт Сохранить для переопределений, чтобы создать локальную копию файла для редактирования.

Подробнее об этом расскажет наш спикер на видео

Дополнительные инструменты и расширения для усовершенствования контроля

Если вам требуется более тонкий контроль или интеграция с уже существующими рабочими процессами, можно рассмотреть возможность использования расширения Resource Override или функцию AutoResponder в Fiddler. Оба предлагают возможность сохранять изменения даже после перезагрузки страницы.

Использование Resource Override:

1. Установите расширение из магазина приложений Chrome.
2. Настройте правила для файлов, чтобы перенаправлять конкретные запросы на локальные файлы.
3. Любые изменения, внесенные в локальные файлы, сохранятся после перезагрузки страницы.

Использование Fiddler AutoResponder:

1. Запустите Fiddler и настройте его для перехвата HTTPS-трафика.
2. Перейдите во вкладку AutoResponder.
3. Создайте правило, которое будет перенаправлять запросы к выбранному JavaScript-файлу на его локально отредактированную версию.

Визуализация

Процесс изменения JavaScript с помощью Инструментов разработчика Chrome и запуск обновленных данных можно представить следующим образом:

Оригинальный код: [Свежайший чизкейк от кондитера](🎂)
Добавление асинхронности, обработка ошибок: [Чизкейк люкс](🍰🌟)
Обновление! Подается с наслаждением! [Обновленный Чизкейк люкс](🔄🍰🌟)

Модификация исходного кода:

До: [Чизкейк,🔴Неудачный "Красный бархат"🔴, Макароны]
После: [Чизкейк,✨Прекрасный "Красный бархат"✨, Макароны]

Обновление для подачи Чизкейка люкс:

"Наслаждайтесь усовершенствованным кодом, ровно как лучшим куском сладкого в вашей жизни!"

Устранение проблем и ключевые моменты

Возможные вопросы при модификации JavaScript:

• Переопределения не сохраняются: Проверьте, правильно ли установлены права доступа к папке локальных переопределений и корректно ли Chrome работает с этой папкой.
• Потеря остановочных точек: Не забывайте проверять остановочные точки в коде.
• Снижение производительности: Помните о соблюдении меры, так как частое использование переопределений может замедлить процесс отладки. Периодически пересматривайте и корректируйте их.

Лучшие практики локальных модификаций

• Резервное копирование — ваш надежный союзник: Всегда создавайте резервные копии исходных файлов перед внесением в них изменений.
• Используйте системы контроля версий: Отслеживайте изменения в коде с помощью систем контроля версий типа Git или аналогичных.
• Тестирование — залог успешного результата: Проводите проверку ваших изменений сквозь проверку. Локальные переопределения не заменяют полноценную разработку и тестовое окружение.

Полезные материалы

1. Отладка JavaScript | Инструменты разработчика | Chrome для разработчиков
2. Инструменты разработчика Chrome | Chrome для разработчиков
3. Редактирование и сохранение файлов в рабочей области | Инструменты разработчика | Chrome для разработчиков
4. Отладка JavaScript – Инструменты разработчика Chrome 101 – YouTube
5. Переопределение страниц Chrome | Расширения | Chrome для разработчиков
6. GitHub – Tampermonkey/tampermonkey
7. Статья на Medium – Продвинутая отладка JavaScript с помощью Инструментов разработчика Chrome