«
»
Chrome DevToolsGoogleGoogle ChromeWEB

Использование локальных переопределений в DevTools

Использование локальных переопределений в DevTools

Однако основным недостатком является то, что обычно эти изменения не сохраняются – если вы переходите на другую страницу или обновляете ту же страницу, все изменения теряются. Но теперь, с выпуском Chrome 65, все изменилось.

Постоянные локальные переопределения

Начиная с Chrome 65, DevTools теперь включает функцию «Local Overrides», которая позволяет вносить изменения, сделанные локально. Теперь вы можете не терять все свои изменения, когда вы обновите или покинете страницу.

Итак, как использовать эту функцию? Вот основные шаги, чтобы начать.

Включить локальные переопределения

  • В DevTools откройте панель « Источники» .
  • В разделе « Источники» откройте вкладку « Переопределения

Использование локальных переопределений в DevTools

Нажмите «Выбрать папку для переопределений». Затем выберите папку на локальном компьютере, где должны храниться локальные переопределения (вы можете создать новую папку специально для этой цели).

Использование локальных переопределений в DevTools

Теперь вы увидите, что установлен флажок «Включить локальные переопределения». Вы также заметили, что на панели « Сеть» имеется предупреждающий знак, указывающий, что некоторые сетевые запросы могут быть перезаписаны с локальным переопределением.

Использование локальных переопределений в DevTools

Внесите свои изменения

  • Теперь вы можете вносить изменения в файлы. Если вы находитесь на панели « Элементы» , обратите внимание, что рядом с именем файла стоит маленький кружок, обозначающий, что он был отредактирован и теперь является локальным переопределением.

Примечание. Если вы обновляете разметку, используйте для этого панель « Источники» (а не панель « Элементы» ).

Использование локальных переопределений в DevTools

  • Обновите страницу или перейдите на другую страницу сайта. Chrome продолжит использовать внесенные вами изменения.

Отслеживайте свои изменения

  • На вкладке « Переопределения» (в разделе « Источники» ) отобразится список всех файлов, которые вы используете для локальных переопределений. Они будут организованы по доменам. Отсюда вы можете выбрать файлы для редактирования или вообще удалить локальные переопределения.
  • Chrome также предлагает новую функцию под названием « Изменения» , которая предоставит вам обзор всех внесенных вами изменений. Это находится рядом с вкладкой Консоль DevTools.

Использование локальных переопределений в DevTools

Эта функция позволяет вам вернуться к внесенным вами изменениям и точно увидеть, чем они отличаются от исходных файлов.

Использование локальных переопределений в DevTools

Инструмент производительности

Функция переопределения не только позволяет экспериментировать с изменениями дизайна на нелокальном сайте, но также имеет значение для разработки, связанной с производительностью.

Благодаря настройке локальных переопределений у вас теперь есть возможность вносить изменения в код на нелокальном сайте, а затем посмотреть, какое влияние на эти изменения окажут на производительность. (И Гарри Робертс, и Умар Ганза выпустили недавние скринкасты, показывающие некоторые примеры этого.)

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

Если вы работаете на сайте локально, эти новые функции могут иметь ограниченную ценность. Но в тех случаях, когда вы хотите экспериментировать на сайте, который не является локальным, и делать это быстро, эти новые функции открывают много возможностей.

Ресурсы

Статья была переведена для блога TechBlog.SDStudio.top
Источник: afasterweb.com

Источник записи:

Связанные записи
LinuxWEBWordPressПанели управления

Как уменьшить нагрузку на сервер и повысить скорость WordPress с помощью Memcached | Форум Plesk

GoogleGoogle Chrome

Google Chrome - Что нового в DevTools (Chrome 84)

GoogleGoogle AdsensePageSpeed Insights

Как настроить отложенную загрузку для рекламных блоков Google AdSense?

GoogleGoogle AdsensePageSpeed Insights

6 способов повысить скорость загрузки страниц сайта AdSense »WebNots