Как настроить рабочие области, чтобы сохранять изменения в исходных файлах

Kayce Basques

Sofia Emelianova

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

Обзор

Автоматическое или ручное подключение к папке рабочей области позволяет сохранять изменения, внесенные в Инструментах разработчика, в локальной копии того же файла на компьютере. Пример:

• У вас есть исходный код сайта на компьютере.
• Вы запускаете локальный веб-сервер из каталога исходного кода, чтобы сайт был доступен по адресу localhost:PORT. Этот сервер также предоставляет простой файл JSON с метаданными (описан ниже).
• Вы открыли сайт localhost:PORT в Google Chrome и используете Инструменты разработчика, чтобы изменить CSS сайта.

Если папка рабочей области подключена, изменения, которые вы вносите в файлы CSS, HTML и JavaScript на панели Источники, сохраняются в исходном коде на вашем компьютере. Однако изменения, внесенные в DOM на панели Элементы, не сохраняются.

Кроме того, инструменты разработчика обычно могут сопоставить оптимизированный код с исходным с помощью карт кода.

Как создать метаданные для подключения

Чтобы инструменты разработчика автоматически находили папку рабочей области, сгенерируйте случайный UUID версии 4 и поместите его в следующий JSON-файл:

{
  "workspace": {
    "uuid": "UUID",
    "root": "path/to/project/root/folder"
  }
}

Затем поместите файл JSON в path/to/project/root/folder/.well-known/appspecific/com.chrome.devtools.json.

Запустите локальный HTTP-сервер и убедитесь, что он также предоставляет файл JSON.

Вы также можете пропустить этот шаг и настроить подключение к папке вручную.

Как подключить папку рабочей области

Примечание. На этом и следующем шаге используется демонстрация автоматических папок Workspace.

Чтобы подключить папку:

1. В Chrome перейдите на страницу, размещенную локально (в нашем примере это localhost:8000), и откройте Инструменты разработчика.

2. В разделе Источники > Рабочая область нажмите Подключить рядом с папкой.

   

3. В появившемся окне нажмите Изменить файлы, чтобы предоставить инструментам разработчика доступ к папке.

   

4. После подключения вы сможете открыть папку на вкладке Рабочие области.

   

На вкладке Рабочая область рядом с файлами HTML, CSS и JavaScript появится зеленая точка. Эти зеленые точки означают, что инструменты разработчика установили сопоставление между сетевыми ресурсами страницы и файлами в папке.

Как сохранить изменения в исходной папке

Вы можете сохранять изменения в любых файлах CSS, HTML и JavaScript в подключенной папке рабочей области.

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

Совет. Если вы подключите папку рабочей области, панель помощи от ИИ сможет автоматически сохранять изменения CSS в исходных файлах.

Чтобы сохранить изменения в CSS:

1. Откройте CSS-файл из подключенной папки рабочей области в разделе Источники > Рабочие области.

2. Измените ССЦ.

   Примечание. Изменения применяются к странице, но не к источнику.

3. Сохраните изменения, например нажав Ctrl/Cmd + S, и посмотрите, как они применились в исходном файле. На панели Источники рядом с названием файла появится зеленая точка.

   Примечание. Чтобы применить и сохранить изменения CSS, перезагружать страницу не нужно.

Чтобы узнать, как это сделать, посмотрите видео:

Сохранить изменения в HTML

Чтобы сохранить изменения в HTML:

1. Откройте HTML-файл из подключенной рабочей папки в разделе Источники > Рабочие области.

2. Внесите изменения в HTML-код.

   Примечание. Изменения не применяются к опубликованной странице или источнику.

3. Сохраните изменения, например нажав Ctrl/Cmd + S, и посмотрите, как они применились в исходном файле. На панели Источники рядом с названием файла появится зеленая точка.

4. Чтобы изменения вступили в силу, обновите страницу.

Чтобы узнать, как это сделать, посмотрите видео:

Примечание. Изменения в HTML-коде можно применить и сохранить на панели Источники, но не на панели Элементы.

Почему нельзя изменить HTML на панели Элементы?

• Дерево узлов, которое вы видите на панели Элементы, представляет собой DOM страницы.
• Чтобы показать страницу, браузер получает HTML-код по сети, анализирует его и преобразует в дерево узлов DOM.
• Если на странице есть код JavaScript, он может добавлять, удалять или изменять узлы DOM. CSS также может изменять DOM с помощью свойства content.
• В конечном итоге браузер использует DOM, чтобы определить, какой контент показывать пользователям.
• Поэтому окончательный вид страницы, которую видят пользователи, может сильно отличаться от HTML-кода, полученного браузером.
• Из-за этого инструментам разработчика сложно определить, где нужно сохранить изменение, внесенное на панели Элементы, поскольку на DOM влияют HTML, JavaScript и CSS.

Проще говоря, дерево DOM !== HTML.

Сохранить изменения в JavaScript

Чтобы сохранить изменения в JavaScript:

1. Откройте файл JavaScript из подключенной папки рабочей области в разделе Источники > Рабочие области.

2. Измените код JavaScript.

   Примечание. Изменения не применяются к опубликованной странице или источнику.

3. Сохраните изменения, например нажав Ctrl/Cmd + S, и посмотрите, как они применились в исходном файле. На панели Источники рядом с названием файла появится зеленая точка.

4. Если локальный HTTP-сервер отслеживает изменения в исходных файлах и автоматически перезагружает страницу, вы увидите изменения, как только сохраните их в Инструментах разработчика. В противном случае разверните локальный сервер заново.

Чтобы узнать, как это сделать, посмотрите видео:

Совет. При изменении кода JavaScript иногда требуется доступ к другим панелям, например Элементы или Консоль. Для этого используйте панель приложений и измените порядок панелей.

Как удалить подключение к папке рабочей области

Чтобы удалить связь с папкой рабочей области, в разделе Источники > Рабочая область нажмите правой кнопкой мыши на папку, в раскрывающемся меню выберите Удалить из рабочей области и нажмите Удалить.

Примечание. Изменение или удаление UUID папки в JSON-файле метаданных также отключает папку.

Как подключить папку рабочей области вручную

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

2. В разделе Источники > Рабочая область нажмите Добавить папку вручную. Затем выберите папку с исходными файлами.

   

   Примечание. Вы также можете перетащить папку на панель Источники.

3. Затем выполните шаги 3 и 4 из раздела Как подключить папку рабочей области.

Ограничения

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

Сообщество разработчиков DevTools работает над поддержкой возможностей, предоставляемых картами источников, в различных фреймворках и инструментах. Если у вас возникли проблемы при использовании рабочей области с выбранным фреймворком или вы смогли настроить его, начните обсуждение в списке рассылки или задайте вопрос на Stack Overflow, чтобы поделиться своими знаниями с другими пользователями DevTools.

Дальнейшие действия

Управлять уже настроенными папками можно в разделе Настройки > Рабочая область.

Далее вы узнаете, как использовать инструменты разработчика, чтобы изменять CSS и отлаживать JavaScript.

Статьи по теме

Локальные переопределения – ещё одна похожая функция Инструментов разработчика, которая позволяет имитировать веб-контент или заголовки запросов. Это позволяет экспериментировать с изменениями на странице, не дожидаясь, пока они будут реализованы на сервере. При локальном переопределении изменения сохраняются при загрузке страницы, но не сопоставляются с исходным кодом страницы.