Использование локальных переопределений в DevTools
Однако основным недостатком является то, что обычно эти изменения не сохраняются – если вы переходите на другую страницу или обновляете ту же страницу, все изменения теряются. Но теперь, с выпуском Chrome 65, все изменилось.
Постоянные локальные переопределения
Начиная с Chrome 65, DevTools теперь включает функцию «Local Overrides», которая позволяет вносить изменения, сделанные локально. Теперь вы можете не терять все свои изменения, когда вы обновите или покинете страницу.
Итак, как использовать эту функцию? Вот основные шаги, чтобы начать.
Включить локальные переопределения
- В DevTools откройте панель « Источники» .
- В разделе « Источники» откройте вкладку « Переопределения
Нажмите «Выбрать папку для переопределений». Затем выберите папку на локальном компьютере, где должны храниться локальные переопределения (вы можете создать новую папку специально для этой цели).
Теперь вы увидите, что установлен флажок «Включить локальные переопределения». Вы также заметили, что на панели « Сеть» имеется предупреждающий знак, указывающий, что некоторые сетевые запросы могут быть перезаписаны с локальным переопределением.
Внесите свои изменения
- Теперь вы можете вносить изменения в файлы. Если вы находитесь на панели « Элементы» , обратите внимание, что рядом с именем файла стоит маленький кружок, обозначающий, что он был отредактирован и теперь является локальным переопределением.
Примечание. Если вы обновляете разметку, используйте для этого панель « Источники» (а не панель « Элементы» ).
- Обновите страницу или перейдите на другую страницу сайта. Chrome продолжит использовать внесенные вами изменения.
Отслеживайте свои изменения
- На вкладке « Переопределения» (в разделе « Источники» ) отобразится список всех файлов, которые вы используете для локальных переопределений. Они будут организованы по доменам. Отсюда вы можете выбрать файлы для редактирования или вообще удалить локальные переопределения.
- Chrome также предлагает новую функцию под названием « Изменения» , которая предоставит вам обзор всех внесенных вами изменений. Это находится рядом с вкладкой Консоль DevTools.
Эта функция позволяет вам вернуться к внесенным вами изменениям и точно увидеть, чем они отличаются от исходных файлов.
Инструмент производительности
Функция переопределения не только позволяет экспериментировать с изменениями дизайна на нелокальном сайте, но также имеет значение для разработки, связанной с производительностью.
Благодаря настройке локальных переопределений у вас теперь есть возможность вносить изменения в код на нелокальном сайте, а затем посмотреть, какое влияние на эти изменения окажут на производительность. (И Гарри Робертс, и Умар Ганза выпустили недавние скринкасты, показывающие некоторые примеры этого.)
Например, вы можете перемещаться по местам размещения определенных сценариев на странице или добавлять некоторые стили, влияющие на отображение шрифтов, и быстро видеть влияние, которое они могут оказать. Вы можете обновить некоторые шаблоны JavaScript или обработчики событий и посмотреть, насколько значительными будут изменения.
Если вы работаете на сайте локально, эти новые функции могут иметь ограниченную ценность. Но в тех случаях, когда вы хотите экспериментировать на сайте, который не является локальным, и делать это быстро, эти новые функции открывают много возможностей.
Ресурсы
- Замечания к выпуску Chrome 65 # Локальные переопределения
- Использование «локальных переопределений» в Chrome для проверки гипотез производительности , видео Гарри Робертса
- Повышение производительности страницы с помощью Chrome DevTools , видео от Umar Hansa
Статья была переведена для блога TechBlog.SDStudio.top
Источник: afasterweb.com