И��менения: отслеживайте изменения HTML, CSS и JavaScript.

Sofia Emelianova

На вкладке «Изменения» отслеживайте изменения, которые вы вносите в:

• HTML в источниках с включенными локальными переопределениями
• CSS в «Элементах» > «Стили или источники»
• JavaScript в исходниках

На вкладке «Изменения» показаны изменения, внесенные вами в DevTools. Если вы перезагрузите DevTools или свою страницу, изменения исчезнут.

Чтобы DevTools сохранял изменения при загрузке страниц, выполните действия, описанные в разделе Локальные переопределения .

Чтобы DevTools записывал изменения в ваши локальные источники, выполните действия, описанные в разделе «Редактирование и сохранение файлов с помощью Workspaces» .

Откройте вкладку «Изменения»

Чтобы открыть вкладку «Изменения» :

1. Откройте Инструменты разработчика .

2. Нажмите Command + Shift + P (Mac) или Control + Shift + P (Windows, Linux, ChromeOS), чтобы открыть командное меню .

3. Начните вводить changes , выберите « Показать изменения» и нажмите Enter .

   

Либо в правом верхнем углу нажмите кнопку Настраивайте и контролируйте DevTools > Дополнительные инструменты > Изменения .

По умолчанию DevTools отображает вкладку «Изменения» в нижней части окна DevTools, в ящике .

Просмотр и понимание ваших изменений

Чтобы просмотреть изменения:

1. Откройте Инструменты разработчика .

2. Внесите изменения в исходники:

   • HTML: сначала включите локальные переопределения , затем внесите изменения в источники.
   • CSS в «Элементах» > «Стили или источники»
   • JavaScript в исходниках

3. Откройте вкладку «Изменения» и выберите файл в правой части вкладки.

4. Обратите внимание на выходные diff , которые выделяют следующее:

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

Скопировать изменения CSS

Если вы внесли изменения в CSS в разделе «Элементы» > «Стили» , вы можете скопировать их все одной кнопкой:

1. Откройте вкладку «Изменения» и в правой части вкладки выберите файл CSS, в который вы внесли изменения.

   

2. Нажмите кнопку Кнопка «Копировать» внизу вкладки «Изменения» .

Отменить все изменения, внесенные в файл

Чтобы отменить изменения, внесенные в файл:

1. В левой части вкладки «Изменения» выберите файл с изменениями, которые нужно отменить.
2. На панели действий внизу нажмите Отменить все изменения в текущем файле .