Сохраняются ли изменения, внесенные с помощью Chrome devtools, в файл

Обновлено: 02.07.2024

Этот курс был обновлен! Теперь мы рекомендуем вам пройти курс «Введение в инструменты разработчика, версия 3».

Урок "Сохранение изменений в рабочих пространствах" является частью полного курса "Освоение инструментов разработчика Chrome версии 2", представленного в этом предварительном видео. Вот что вы узнаете из этого урока:

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

Расшифровка урока "Сохранение изменений в рабочих пространствах"

[00:00:00]
>> Джон Куперман: Отлично, тогда мы сможем сохранить изменения на диск. Так что это, наверное, самый большой пример в редактировании, и он прошел очень, очень, очень долгий путь. Сказав это, он все еще не будет идеальным для вашего рабочего процесса. Но именно здесь мы подходим к концепции использования инструментов разработки в качестве основной IDE.

[00:00:17] Таким образом, редактор не открывается только с помощью инструментов разработчика. Итак, что мы можем сделать, так это обратиться к источникам. Я собираюсь закрыть все эти другие вкладки здесь. На самом деле, еще одна удобная вещь, если у меня что-то открыто. Это случается со мной часто, когда у меня здесь открыто около миллиона вещей.

[00:00:31] Так же, как и в редакторе, вы можете щелкнуть правой кнопкой мыши и сделать такие вещи, как закрыть, закрыть другие, закрыть справа или закрыть все. Так что я собираюсь закрыть все эти вкладки и позволить мне сделать это немного больше здесь. Итак, что здесь происходит, мы можем видеть это для этой страницы.

[00:00:44] Мы получаем все эти файлы. Вот файл CSS, файл JavaScript и все такое. Я собираюсь сделать это немного больше. Я собираюсь перейти на вкладку файловой системы здесь. Итак, в файловой системе у нас есть концепция добавления папки в рабочее пространство. Итак, прежде чем мы это сделаем, концепция заключается в том, что Chrome получает все эти файлы с вашего локального хоста, а затем вы можете предоставить Chrome папку с вашим фактическим кодом.

[00:01:10] И Chrome начнет действительно пытаться разумно сопоставить эти вещи. Так что все будет в порядке, стиль, основанный на CSS, придет, и папка, которую вы мне дали, также имеет стиль, основанный на CSS, и они одинаковы. Итак, теперь я сопоставлю их вместе, и он сопоставит столько файлов, сколько сможет.

[00:01:25] И после сопоставления любые изменения, которые мы собираемся внести, сохраняются на диске, как если бы они были записаны в вашем текстовом редакторе. Так что это вид высокого уровня, давайте пройдемся по нему вместе. Позвольте мне открыть мой искатель, так что я заполнил это рабочее пространство. Итак, вот где, и мы перейдем к этому, и я помогу любому настроить.

[00:01:46] Это пример приложения, над которым мы работаем, «Освоение инструментов Chrome для глухих», и я только что клонировал его, вот как я это делаю. Я клонирую его в эту папку, так что это то место, откуда я работаю. Если я зайду в свой терминал, вы увидите, что я нахожусь в mastering-chrome-devtools.

[00:02:00] Здесь я запускаю npm start, чтобы получить приложение. У всех пока все хорошо? Итак, у меня это похоже на запуск npm start. Он открывает этот локальный хост. Это своего рода то, что служит контенту. Итак, что я делаю, так это добавляю папку в рабочую область, а затем захожу в свой поисковик, нахожу этот Mastering Chrome DevTools и нажимаю на нем «Выбрать».

[00:02:22] По сути, я хочу сказать, что добавляю эту папку. Это всегда кусает меня. Если вы не видите этого сразу, и это произойдет, когда вы будете выполнять упражнение, это из-за этого маленького предупреждения. Я нет, может быть, это легко увидеть для некоторых людей. Я всегда забываю о его существовании и о том, что он говорит.

[00:02:35] В общем, это становится деликатным. Итак, теперь я как бы добавляю что-то, что, в свою очередь, дает Chrome права на запись в мою файловую систему. И это то, что мы хотим сделать, но Chrome требует этого каждый раз, когда вы признаете эту угрозу безопасности. Итак, я собираюсь пойти дальше и сказать, разрешите.

[00:02:51] И теперь мы можем видеть, значит, у нас все еще есть страница. Это то, что на самом деле поступает с сервера. Но теперь в файловой системе, мы видим, я только что залил сюда всю свою папку. Таким образом, вы можете увидеть все то же самое, что и при завершении проекта.

[00:03:04] Что действительно уникально, так это то, что вы начнете замечать эти зеленые точки на многих из этих файлов. Здесь вы увидите зеленую точку. И если я вернусь на вкладку элементов, я начну видеть зеленую точку рядом со всеми этими правилами. Итак, зеленая точка означает, что он тонет, что он нанесен на карту.

[00:03:20] И это означает, что все, что я здесь изменю, сохранится, будет записано. Итак, позвольте мне просто показать вам пример, чтобы как бы визуализировать это. Итак, я вернусь к самому верху и выберу свою навигацию. Вот моя навигация.

[00:03:34] У меня здесь навигация, и она синего цвета.И если я открою свой код Visual Studio и перейду к моему style.css, это будет просто локально на моем компьютере. Я вижу, что у меня здесь навигация, и она синяя. Так что это имеет смысл. Это код CSS, который я написал, а затем он создается здесь.

[00:03:51] Но теперь, когда он сопоставлен, если я продолжу и изменю его на красный и нажму Enter, мы фактически вернемся к файловой системе и увидим, что он был изменен на красный. Так что это именно то, что мы собираемся сделать таким образом, чтобы мы могли сделать что-то вроде

[00:04:09]
>> Джон Куперман: Заходи. Сделайте розовый, и он изменится на розовый. Итак, сейчас мы находимся в этом режиме, когда мы создаем весь наш код, и он фактически сохраняется там. И если мы заглянем в git, то увидим, что там реальная файловая система меняется. Итак, вернитесь сюда, здесь начинается предостережение.

[00:04:25] Таким образом, он может делать все, что связано с CSS. Вы бы заметили, что если бы вы сделали что-то вроде изменения навигации в div или что-то в этом роде, класс div. А то обновляю, нет. Ого, извините, у меня все еще есть точка останова.
>> Джон Куперман: Если я обновлю ее, она не сохранится в div.

[00:04:46] И причина здесь довольно проста, если подумать. Когда мы посмотрим на сайт, мы увидим, что на самом деле я не обслуживаю HTML. У меня есть приложение node, которое обслуживает язык шаблонов, такой как Mustache или что-то в этом роде. Но главное то, что помните, когда мы начинали это, мы узнали разницу между HTML и DOM.

[00:05:03] HTML — это то, что мы создаем. DOM — это то, во что его превращает Chrome. Итак, здесь мы редактируем DOM. Это не что-то, что было автором. Это то, что Chrome сделал с этим. Таким образом, чтобы придерживаться простого практического правила, все, что вы редактируете на вкладке стилей, мгновенно сохраняется на диск, без проблем.

[00:05:20] Все, что вы отредактируете в элементах с левой стороны, не сохранится на диске. Если вы хотите, вы можете вернуться к источникам и открыть любой файл, который вы можете открыть в источниках, включая ваш HTML. Они будут сохраняться на диске просто отлично. Но они предупреждают, что если вы вносите изменения здесь, например, изменяете элемент, изменяете имя класса, эти изменения не сохраняются.

[00:05:41]
>> Докладчик 2: Очевидно, есть вопрос о SAS-
>> Джон Куперман: Да, это здорово.
>> Докладчик 2 : [НЕРАЗБОРЧИВО] строить процессы.
>> Джон Куперман: Да, это здорово. Итак, теперь мы переходим к этим процессам сборки. Так что реальность такова, что многие из нас просто сидят, пишут только HTML и CSS и рассылают их.

[00:05:55] Это не так. Итак, у всех нас есть эти инструменты сборки, например, с помощью веб-пакета, возможно, с помощью Gulp. И у вас может быть препроцессор CSS, такой как Sass или LESS, или у вас есть языки шаблонов, такие как Mustache, как у нас есть все эти виды абстракций, которые мы используем изо дня в день. Поэтому, когда я читал этот курс несколько лет назад, ответом было решительное нет, с этим материалом это не сработает.

[00:06:15] Но это очень долгий путь. Так что да, если вы используете Sass, если вы используете SCSS, все будет отлично работать. Chrome имеет встроенную поддержку для этого, поэтому вы просто перетащите свой проект с файлами Sass. Chrome полностью понимает и может выполнять эти переходы. Таким образом, любое изменение цвета будет записано в соответствующий файл Sass.

[00:06:34] По мере того, как вы переходите к другим вещам, более сложные инструменты сборки, такие как я упоминал ранее, создают, реагируют приложение, в котором у вас есть реакция, которая на самом деле не так хорошо поддерживается в Chrome DevTools. У вас есть Webpack, который создает все это. Все становится действительно сложным. Вы найдете все меньше и меньше вещей, работающих там. Чтобы проверить это, просто перетащите рабочую область и посмотрите, какие файлы она может распознать и сопоставить.

[00:06:56] Так что поддержка оценки определенно есть. Грядет поддержка усов. Полная поддержка экосистемы Webpack, вероятно, еще далеко. Я бы сказал, что этого не произошло, за исключением того, что в последнее время они добились огромных успехов в поддержке инструментов сборки, а затем следует иметь в виду еще одну интересную вещь: большинство этих инструментов перестраиваются при изменении файловой системы. какие они все.

[00:07:17] Все это по-прежнему будет работать правильно, потому что любые изменения, внесенные вами в файл Sass, отразятся на файловой системе. Это снова запустит вашу сборку, так что рабочий процесс будет работать хорошо. Я думаю, что об этом нужно думать в зависимости от вашего стиля, для которого это действительно здорово.

[00:07:31] Если вы используете Sass или CSS или что-то в этом роде, вы можете перетащить эти файлы и начать вносить изменения здесь, и они сохранятся без проблем, когда вы войдете к вашей разработке HTML. Так что, если вы используете React, View или Angular, я предполагаю, что он не будет работать так хорошо для изменения HTML.

[00:07:49] Но это очень хорошо работает для вашего CSS. А также теперь, когда все сопоставлено, это будет очень хорошо работать и для вашего JavaScript. Итак, вы можете видеть, что JavaScript имеет зеленую точку.Любые изменения, которые я внесу в исходники, также будут сохранены на диске.
>> Докладчик 2: Прежде чем вы перейдете к другой панели-

[00:08:02]
>> Джон Куперман: Да, конечно.
>> Докладчик 2: Тот, что рядом с файловой системой, и который будет сохранять изменения.
>> Джон Куперман: Да, у нас есть-
>> Докладчик 2: Переопределение, переопределение.
>> Джон Куперман: Да, да. Так что да, я немного углублюсь в это. Это довольно круто. Позвольте мне углубиться в это. У меня есть кое-что по этому поводу в разделе отладки.

[00:08:19] Но да, так что со скриптами контента и вашими переопределениями вы можете применять действительно что-то вроде скриптовой обезьяны в свое время. Вы можете применить постоянные переопределения к разным вещам. Вы можете применить его как глобальный или как очень узкий масштаб. Да.
>> Джон Куперман: Да, у Самары есть отличный вопрос.

[00:08:38] Итак, с элементом nav, почему я не мог сохраниться? Итак, это будет небольшое погружение, но я просто хочу взглянуть на это. Итак, если я смотрю на свой макет, я использую этот язык шаблонов мопсов. Я создаю элемент и присваиваю ему класс, так что это похоже на nav.nav.

[00:08:55] А затем экспресс, мой сервер узла запускается, берет этот элемент мопса, превращает его во время выполнения в HTML и отправляет вниз. А затем браузер берет этот HTML и превращает его в эту штуку DOM, которую я вижу здесь. Итак, это не мой HTML, и хорошим примером может быть это.

[00:09:13] Если вы создали приложение React, приложение просмотра или что-то еще, обычно, если оно отображается на стороне клиента, вы обслуживаете только один div. Вы бы сказали, что div ID равен root, и это похоже на то, что вы отправляете, это HTML, который вы пишете, а затем React как бы монтирует его и начинает создавать свои собственные динамические вещи.

[00:09:29] Так что, как бы я ни пытался отредактировать элемент здесь, Chrome не может знать, откуда он взялся, точно так же, как Chrome не знает, что node превратил файл pub в HTML или Chrome. не может узнать, например, какой компонент React отвечает за создание и монтирование этого элемента.

[00:09:46] Так что стоит подумать о том, что если вы хотите изменить такие HTML-файлы или что-то в этом роде, вы можете это сделать. Но вам придется просматривать исходники, открывать эту вкладку и вносить изменения, как в редакторе. Таким образом, эти изменения не сохраняются.

[00:10:00] Те, что слева, потому что они постоянно обновляются, динамичная модель DOM. Я надеюсь, что это немного проясняет ситуацию. Коротко и мило: левый размер не сохранится, правая часть сохранится, и исходники сохранятся.
>> Докладчик 2: Это очень похоже на ситуацию, когда у вас есть CSS, который был перенесено из Sass.

[00:10:20]
>> Джон Куперман: Да, главное, что Chrome DevTools поддерживает Sass. Так что это просто понимает Sass. Он не понимает, и я думаю, что с моим конкретным приложением у него нет возможности понять что-то на стороне сервера. Так что он не мог понять ноту, потому что он даже не знал, что эта нота — это то, что его окружает.

[00:10:39] Он просто достигает конечной точки и возвращается к HTML. Он понятия не имеет, где этот HTML, как он генерируется. Нет, так было раньше. Таким образом, рабочие пространства работали так: если вы перетащите папку, ничего не произойдет. А потом как бы открывал файлы, может подскажет.

[00:10:54] Это было бы так: я думаю, что это то или я думаю. И вы были бы, как да, полностью. В настоящее время это похоже на действительно умный. Просто перетащите папку внутрь. Все, что может стать зеленым, станет зеленым, и все готово.
>> Джон Куперман: Можно ли одновременно открыть вкладку элементов и вкладку источников?

[00:11:10] Нет, нельзя. Единственные двойные вкладки, которые вы можете сделать, это открыть ящик консоли поверх любой другой вкладки.

Локальные переопределения — это новый способ сделать это, начиная с Chrome 65. Переопределения — это функция, отличная от рабочих областей.

11 ответов 11

Вы можете сохранить изменения CSS из инструментов Chrome Dev Tools. Теперь Chrome позволяет добавлять локальные папки в рабочую область. Предоставив Chrome доступ к папке и добавив папку в локальную рабочую область, вы можете сопоставить веб-ресурс с локальным ресурсом.

Перейдите на панель "Источники" инструментов разработчика, щелкните правой кнопкой мыши на левой панели (где перечислены файлы) и выберите Добавить папку в рабочую область. Вы можете быстро перейти к таблице стилей на панели "Источники", щелкнув таблицу стилей в правом верхнем углу каждого правила CSS для выбранного элемента на панели "Элементы".

После добавления папки вам нужно будет предоставить Chrome доступ к ней.

Далее вам нужно сопоставить сетевой ресурс с локальным ресурсом.

После перезагрузки страницы Chrome теперь загружает локальные ресурсы для сопоставленных файлов. Чтобы упростить задачу, Chrome показывает только локальные ресурсы (так что вы не запутаетесь, редактируете ли вы локальный или сетевой ресурс). Чтобы сохранить изменения, нажмите CTRL + S при редактировании файла.

Возможно, вам придется открыть сопоставленные файлы и начать редактирование, чтобы Chrome применил локальную версию (дата 201604.12).

paul-irish, Интересует как сделать diff/patch только локальными изменениями CSS (без удаленных изменений). SaveAs на самом деле не решает проблему гибкости и ускорения.

Похоже, в инспекторе Chrome 46 есть ошибка, из-за которой при перезагрузке страницы сопоставленный локальный файл повторно применяется только при изменении его на панели «Источники». Вы даже можете изменить его во внешнем редакторе, но вы должны открыть и сфокусировать его на панели «Источники».

Я думаю, что OP хочет увидеть изменения, которые он внес на вкладке «Стили» панели «Элементы». Эти изменения не обязательно привязаны к конкретному исходному файлу.

Технический писатель и защитник DevTools здесь.

Начиная с Chrome 65, локальные переопределения — это новый, упрощенный способ сделать это. Это функция, отличная от рабочих областей.

Настроить переопределения

Перейти к панели "Источники".
Перейдите на вкладку "Переопределения".
Нажмите «Выбрать папку для переопределения».
Выберите каталог, в котором вы хотите сохранить изменения.
В верхней части окна просмотра нажмите «Разрешить», чтобы предоставить DevTools доступ для чтения и записи к каталогу.
Внесите изменения. На приведенном ниже GIF видно, что изменение background:rosybrown сохраняется при загрузке страницы.

Как работают переопределения

Когда вы вносите изменения в DevTools, DevTools сохраняет изменения в модифицированной копии файла на вашем компьютере. Когда вы перезагружаете страницу, DevTools отправляет измененный файл, а не сетевой ресурс.

Разница между переопределениями и рабочими пространствами

Workspaces позволяет использовать DevTools в качестве интегрированной среды разработки. Он сопоставляет код вашего репозитория с сетевым кодом, используя исходные карты. Реальное преимущество заключается в том, что если вы минимизируете свой код или используете код, который необходимо транспилировать, например SCSS, то изменения, которые вы делаете в DevTools (обычно), сопоставляются с исходным исходным кодом. С другой стороны, переопределения позволяют изменять и сохранять любой файл в Интернете. Это хорошее решение, если вы просто хотите быстро поэкспериментировать с изменениями и сохранить их при загрузке страницы.

Узнайте, как вносить и отслеживать постоянные изменения в коде при отладке на вкладке "Источники" Chrome DevTools.

Панель "Источники" в Chrome DevTools предоставляет нам множество функций разработки и отладки, от управления содержимым HTML и CSS веб-страниц до сохранения данных с переопределениями и создания фрагментов. В этом посте мы больше сосредоточимся на том, как мы можем вносить и отслеживать изменения на панели «Источники» DevTools.

Панель источников

Прежде чем мы начнем, давайте познакомимся с панелью "Источники". Среди уже упомянутых функций панель «Источники» позволяет добавлять точки останова в базу кода для повышения эффективности процессов отладки. Он также позволяет настроить рабочее пространство. Рабочие пространства позволяют сохранять изменения, которые вы вносите в DevTools, в файловую систему, поэтому DevTools можно использовать как редактор кода.

Открыть инструменты разработчика

Чтобы начать работу с панелью "Источники", давайте продемонстрируем, как открыть ее в Chrome DevTools. Есть несколько способов сделать это, но я выберу тот, который считаю удобным.

Откройте браузер Google Chrome и откройте DevTools с помощью ярлыка:

Теперь перейдите на вкладку "Источники":

Замечательно, теперь, когда мы открыли панель "Источники", давайте продолжим и продемонстрируем, как отслеживать изменения, которые мы вносим в DevTools.

Отслеживание изменений в источниках

Прежде чем мы перейдем к отслеживанию изменений, давайте сначала продемонстрируем, как вносить изменения, а затем отслеживать их в практических целях. Панель «Источники» предоставляет нам вкладку «Переопределение», которая дает нам возможность вносить изменения в DevTools и сохранять эти изменения при перезагрузке страницы. Давайте рассмотрим его поближе.

Переопределения

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

Как это работает:

Во-первых, необходимо указать каталог, в котором DevTools будет сохранять внесенные изменения.
При внесении изменений в DevTools измененная копия сохраняется в вашем каталоге.
Когда страница перезагружается, DevTools предоставляет вам локальный измененный файл

Настроить переопределения:

Откройте панель "Источники".
Откройте вкладку "Переопределения".
Нажмите "Настроить переопределения".
Выберите каталог, в котором вы хотите сохранить изменения.
В верхней части области просмотра нажмите «Разрешить», чтобы предоставить DevTools доступ для чтения и записи к каталогу.
Внесите изменения

Сохраняющиеся изменения

Одна из уникальных особенностей современных браузеров заключается в том, что вы можете манипулировать цветами, проверять элементы и сохранять, чтобы сразу увидеть результат ваших изменений в браузере. Проблема здесь в том, что эти изменения не сохраняются — поэтому, если вы перейдете на другую страницу или, возможно, даже перезагрузите текущую страницу, все ваши изменения будут потеряны.

В последнем обновлении Chrome появилась новая функция под названием «локальные переопределения». Это позволяет нам сохранять эти изменения локально, чтобы вы не потеряли свои изменения при перезагрузке страницы. Давайте посмотрим, как это работает на нашем последнем изображении.

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

Теперь вы можете внести изменения в веб-страницу, а затем перезагрузить страницу, и Chrome продолжит использовать внесенные вами изменения.

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

Теперь, когда мы успешно внесли и сохранили изменение в DevTools, давайте посмотрим, как мы можем отслеживать все наши изменения.

В последней версии Chrome у нас есть возможность использовать новую функцию под названием вкладка "Изменения" для отслеживания всех изменений на нашей веб-странице. Поскольку мы настроили сохраняемость с переопределениями, давайте изменим нашу пользовательскую веб-страницу и посмотрим, как это изменение отслеживается на вкладке «Изменения» .

Как это работает: мы открываем панель «Источники» и открываем файл, в который мы собираемся внести изменения (на вкладке «Страница»). Затем вносим изменения и сохраняем. Также мы перезагружаем страницу, чтобы убедиться, что наше изменение сохранилось. Затем мы открываем вкладку «Изменения», щелкнув правой кнопкой мыши в редакторе и выбрав «Локальные модификации», чтобы открыть нашу вкладку «Изменения», где мы можем увидеть внесенные нами изменения. Это именно то, что мы продемонстрировали на гифке выше.

Ограничения

DevTools не сохраняет изменения, сделанные в дереве DOM на панели элементов. Поэтому для сохранения и отслеживания изменений вам придется редактировать HTML-файлы на панели «Источники».
Если вы редактируете CSS на панели «Стили», а источником этого CSS является файл HTML, DevTools не сохранит изменения. Как и раньше, для отслеживания изменений необходимо редактировать HTML-файл на панели «Источники».

Заключение

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

Подробнее о создании отличных веб-приложений:

Хотите узнать больше о создании отличных пользовательских интерфейсов? Ознакомьтесь с Kendo UI — нашей полной библиотекой компонентов пользовательского интерфейса, которая позволяет быстро создавать высококачественные адаптивные приложения. Он включает в себя все необходимые компоненты: от таблиц и диаграмм до планировщиков и циферблатов.

Кристиан Нвамба

Кристиан – разработчик программного обеспечения из Лагоса (Нигерия) и адвокат разработчиков. Он продолжает раздвигать границы с/для Next Billion Users и Next Million Developers через Microsoft.

Chrome DevTools позволяет невероятно легко опробовать новые стили в браузере, прежде чем мы решим что-то зафиксировать в нашем проекте. Однако по умолчанию он не сохраняет эти изменения между обновлениями. Поэтому, если мы используем локальный сервер разработки, он может уничтожить наши изменения до того, как мы сможем их сохранить.

Новая вкладка "Локальные переопределения" в DevTools 65 решает эту проблему.Каждый раз, когда в DevTools вносится редактирование, исходный файл копируется в другую папку, применяется к изменению, которое мы внесли в копию, а затем вместо этого используется эта копия каждый раз при перезагрузке страницы.

В той же версии DevTools была добавлена дополнительная функция: вкладка "Изменения". Он показывает разницу всех изменений между всеми исходными файлами и нашими локальными переопределениями.

Обе эти функции позволяют гораздо быстрее и безопаснее опробовать живые изменения CSS в Chrome DevTools.

Инструктор: [00:01] Chrome DevTools всегда был очень удобен и быстр, позволяя вам опробовать различные изменения стиля в браузере. В этом случае я могу просто выбрать свою карточку и начать уменьшать ширину здесь, пока мне не понравится, как она выглядит.

[00:13] Если по какой-то причине страница обновится, все эти изменения будут потеряны. К счастью, в DevTools версии 65 появилась новая функция, которая называется «Локальные переопределения», которая фактически позволяет вам сохранять все эти изменения, не затрагивая папку проекта вообще.

[00:30] Чтобы активировать это, я могу просто перейти на вкладку «Источники», «Переопределения», а затем выбрать папку для переопределений. Это может быть любая папка на вашем компьютере. Он не обязательно должен находиться в папке вашего проекта.

[00:44] Я позволю это. Теперь, если я вернусь к элементам и снова начну вносить те же изменения и запущу обновление, все эти изменения сохранятся.

[00:54] Чтобы увидеть, что произошло, у нас теперь есть новая папка в Overrides с файлом style.css внутри. Так что на самом деле это точная копия моего исходного файла style.css, с которого я начал, но он имеет новое значение ширины, которое я изменил. Chrome фактически скопировал исходный файл в мою папку Overrides и теперь использует его вместо него.

[01:16] Допустим, я хочу добавить несколько новых правил вместо редактирования существующих. Я просто зайду сюда и добавлю цвет фона. Как и ожидалось, это сработает просто отлично. Но что, если я хочу добавить совершенно новые стили?

[01:32] Здесь я найду свою кнопку. Обычно я просто нажимаю эту кнопку «Плюс» здесь и позволяю Chrome добавить новое правило для меня. Однако по умолчанию он добавит его в свою проприетарную таблицу стилей инспектора, и это не очень хорошо работает с переопределениями. Вместо этого я держу мышь на кнопке «Плюс» и могу выбирать из множества файлов. В данном случае я выберу style.css.

[01:52] Что сейчас произойдет, так это то, что этот новый стиль будет добавлен к моему переопределению style.css. Я могу просто добавить красный цвет фона. Теперь, если я вернусь к своим источникам, мы увидим, что это новое правило было добавлено в конце.

[02:07] Как и ожидалось, это работает с любым файлом CSS, в том числе с файлами из других библиотек. Я найду элемент из моего текста. Здесь вы можете видеть, что все эти правила взяты из CSS-файла Material Design. Я просто немного увеличу размер шрифта и увижу маленькую фиолетовую точку.

[02:26] Это означает, что исходный файл был скопирован в мои переопределения. Я могу подтвердить это, обратившись к Источникам. Теперь у нас есть новая папка с CSS-файлом Material Design.

[02:37] Одним из ограничений всего этого является то, что он не работает с изменениями, внесенными на вкладке «Элементы». Если я изменю заголовок и обновлю страницу, она вернется к исходному заголовку.

[02:49] Чтобы обойти это, мне придется зайти в свои сетевые ресурсы, найти файл HTML и изменить заголовок здесь. Опять же, вы увидите эту точку, что означает, что она была скопирована в мои переопределения. Теперь, если я обновлю страницу, мы увидим новый заголовок.

[03:05] Наконец, действительно хорошим дополнением ко всему этому рабочему процессу является вкладка «Изменения», добавленная в той же версии DevTools. Я могу перейти к трем точкам здесь, «Дополнительные инструменты» и «Изменения». Если я просто расширю это, это покажет нам разработчиков всего, что мы делали в DevTools.

[03:23] Это работает с моим файлом HTML. Это также работает с моим CSS. Он также работает с любыми файлами JavaScript, которые я редактировал.

Читайте также: