Переопределения Chrome и рабочие области
Инструменты разработчика Chrome — неотъемлемая часть жизни каждого веб-разработчика. Однако, похоже, что большинство людей не используют его в полной мере. Предлагается гораздо больше, чем просто отладка кода и обработка сетевых запросов.
Инструменты разработчика Chrome могут сделать вашу жизнь намного проще. В этом посте мы коснемся основы одной из тем, которая, как мне кажется, очень пригодится.
Любой достойный разработчик знает, что он может вносить изменения в код на стороне клиента с помощью инструментов разработчика браузера. Однако одно предостережение об ошибке заключается в том, что изменения кода не сохраняются при обновлении страницы. Как только вы нажмете «Обновить», ваши изменения исчезнут, и вы получите исходный код с вашего сервера.
Chrome позволяет сохранять изменения JavaScript и CSS при обновлении браузера. Это очень полезно, особенно в случаях использования, когда поведение страницы привязано, например, к событию обновления. Это также дает вам возможность напрямую поиграть с производственной средой, так как ваши изменения будут локальными для вашего собственного браузера. Продолжайте читать, чтобы узнать, как это сделать.
- Локальные переопределения
С помощью этой функции изменения, которые вы вносите в код на стороне клиента (как JavaScript, так и CSS), могут сохраняться при обновлении браузера.
Чтобы настроить локальные переопределения в DevTools:
- Откройте панель Источники.
- Откройте вкладку Переопределения.
- Нажмите Выбрать папку для переопределения.
- Выберите, в какой каталог вы хотите сохранить изменения.
- В верхней части области просмотра нажмите Разрешить, чтобы предоставить DevTools доступ для чтения и записи к каталогу.
Теперь ваши изменения JavaScript или CSS будут сохраняться при обновлении страницы до тех пор, пока URL-адрес веб-страницы не изменится или вы не удалите файлы вручную из каталога, выбранного на шаге 4.
Вы можете просто отредактировать код в любом файле и нажать CTRL+S прямо на панели «Источники».
Как только вы сохраните любой файл, вы увидите, что он появляется на панели переопределений, и обратите внимание на фиолетовую точку рядом с именем файла, которая обозначает переопределяемый файл. Теперь Chrome будет игнорировать код, поступающий с вашего сервера (для переопределенного файла), но вместо этого будет выполнять код, который вы сохранили на панели «Источники», при обновлении страницы, перезапуске браузера и т. д.
Хотите получить доступ к исходным файлам, поступающим с сервера? Просто снимите флажок Включить локальные переопределения.
Более того, инструменты разработки позволяют отслеживать все внесенные изменения в код в стиле Github Desktop. Просто щелкните правой кнопкой мыши файл, который вы хотите просмотреть, на панели переопределений и выберите «Локальные модификации». Вы можете увидеть изменения до и после на панели «Изменения».
2. Рабочие пространства/файловая система
Одно предостережение в отношении метода Overrides заключается в том, что Chrome создает новый файл локально и использует его всякий раз, когда вы редактируете код и нажимаете «Сохранить». Это означает, что всякий раз, когда ваш код готов, этот файл необходимо объединить с файлом исходного кода вашего локального проекта с контролируемой версией.
С помощью функции файловой системы вы можете напрямую вносить изменения в существующий исходный код проекта, контролируемый версией, из Chrome DevTools. Думайте о Chrome DevTools как о IDE, где вы можете редактировать и запускать код в одном месте.
После настройки локальной файловой системы файл JavaScript, обслуживаемый сервером, будет переопределен вашим локальным исходным файлом. Во многом это очень похоже на локальные переопределения. Однако локальные переопределения предназначены для экспериментов с вашим кодом. Если вы не заботитесь о сохранении изменений, которые вы делаете в DevTools, в ваших реальных файлах исходного кода проекта на диске, выберите Overrides.
Узнайте больше о рабочих пространствах здесь — https://developers.google.com/web/tools/chrome-devtools/workspaces.
