Сохраните изменения, внесенные в DevTools, обратно в исходные файлы на своем компьютере, настроив рабочее пространство. Вы можете автоматически подключить папку рабочей области к DevTools, предоставив файл конфигурации, или вручную добавить местоположение рабочей области на панели «Источники» .
Обзор
Автоматическое (или ручное) подключение к папке рабочей области позволяет сохранить изменения, внесенные вами в DevTools, в локальную копию того же файла на вашем компьютере. Например, предположим:
- У вас есть исходный код вашего сайта на рабочем столе.
- Вы запускаете локальный веб-сервер из каталога исходного кода, чтобы сайт был доступен по адресу
localhost: PORT, а также обслуживал простой файл JSON с метаданными (описано позже). - У вас есть
localhost: PORT, открытый в Google Chrome, и вы используете DevTools для изменения CSS сайта.
Если папка рабочей области подключена, изменения, которые вы вносите на панели «Источники» в файлы CSS, HTML и JavaScript, сохраняются в исходном коде на вашем компьютере. Однако DevTools не сохраняет изменения в DOM, внесенные на панели «Элементы» .
Более того, DevTools обычно может сопоставить оптимизированный код с исходным исходным кодом с помощью карт исходного кода.
Генерация метаданных для соединения
Чтобы DevTools автоматически обнаруживал папку вашего рабочего пространства, сгенерируйте случайный 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.
Альтернативно вы можете пропустить этот шаг и вручную настроить подключение к папке .
Подключить папку рабочей области
Чтобы подключить папку:
- В Chrome перейдите на локально размещенную страницу (в данном примере —
localhost:8000) и откройте DevTools . В разделе «Источники» > «Рабочая область» нажмите «Подключиться» рядом с вашей папкой.
При появлении запроса нажмите «Редактировать файлы» , чтобы предоставить DevTools доступ к вашей папке.
После подключения вы сможете открыть папку на вкладке «Рабочие пространства» .
На вкладке «Рабочая область» рядом с файлами HTML, CSS и JavaScript отображается зеленая точка. Эти зеленые точки означают, что DevTools установил соответствие между сетевыми ресурсами страницы и файлами в папке.
Сохраните изменения обратно в исходную папку
Вы можете сохранить изменения в любых файлах CSS, HTML и JavaScript в папке подключенного рабочего пространства.
Сохраните изменения в CSS
Чтобы сохранить изменения в CSS:
- Откройте файл CSS из папки подключенной рабочей области в разделе «Источники» > «Рабочие области» .
Внесите изменения в свой CSS.
Сохраните изменение, например, нажав Ctrl / Cmd + S , и просмотрите примененное изменение обратно в исходном файле. На панели «Источники» рядом с именем файла отображается зеленая точка.
Чтобы ознакомиться с процессом работы, посмотрите видео:
Сохраните изменения в HTML
Чтобы сохранить изменения в HTML:
- Откройте HTML-файл из папки подключенного рабочего пространства в разделе «Источники» > «Рабочие пространства» .
Внесите изменения в свой HTML.
Сохраните изменение, например, нажав Ctrl / Cmd + S , и просмотрите примененное изменение обратно в исходном файле. На панели «Источники» рядом с именем файла отображается зеленая точка.
Перезагрузите страницу, чтобы изменения вступили в силу.
Чтобы ознакомиться с процессом работы, посмотрите видео:
Почему вы не можете изменить HTML на панели «Элементы» ?
- Дерево узлов, которое вы видите на панели «Элементы», представляет собой DOM страницы.
- Чтобы отобразить страницу, браузер получает HTML-код по сети, анализирует его, а затем преобразует его в дерево узлов DOM.
- Если на странице есть JavaScript, этот JavaScript может добавлять, удалять или изменять узлы DOM. CSS также может изменить DOM с помощью свойства
content. - Браузер в конечном итоге использует DOM, чтобы определить, какой контент он должен предоставлять пользователям браузера.
- Поэтому окончательное состояние страницы, которое видят пользователи, может сильно отличаться от HTML-кода, полученного браузером.
- Это затрудняет DevTools определение места сохранения изменений, внесенных на панели «Элементы» , поскольку на DOM влияют HTML, JavaScript и CSS.
Короче говоря, дерево DOM !== HTML.
Сохраните изменения в JavaScript
Чтобы сохранить изменения в JavaScript:
- Откройте файл JavaScript из папки подключенной рабочей области в разделе «Источники» > «Рабочие области» .
Внесите изменения в свой JavaScript.
Сохраните изменение, например, нажав Ctrl / Cmd + S , и просмотрите примененное изменение обратно в исходном файле. На панели «Источники» рядом с именем файла отображается зеленая точка.
Если ваш локальный HTTP-сервер прослушивает изменения исходного файла в реальном времени и автоматически перезагружает страницу, вы увидите примененные изменения, как только сохраните их в DevTools. В противном случае повторно разверните локальный сервер.
Чтобы ознакомиться с процессом работы, посмотрите видео:
Удаление подключения к папке рабочей области
Чтобы удалить подключение к папке рабочей области, в разделе «Источники» > «Рабочая область» щелкните правой кнопкой мыши папку, выберите «Удалить из рабочей области» в раскрывающемся меню и нажмите «Удалить» .
Подключить папку рабочей области вручную
Откройте DevTools на локальной странице.
В разделе «Источники» > «Рабочая область» нажмите «Добавить папку вручную» . Затем выберите папку с исходными файлами.
Затем выполните шаги 3 и 4 в разделе «Подключение папки рабочей области» .
Ограничения
Если вы используете современную среду, она, вероятно, преобразует ваш исходный код из формата, который вам легко поддерживать, в формат, оптимизированный для максимально быстрого запуска. Соединение с папкой рабочей области обычно позволяет сопоставить оптимизированный код обратно с исходным исходным кодом с помощью карт исходного кода .
Сообщество DevTools работает над поддержкой возможностей, предоставляемых исходными картами, в различных средах и инструментах . Если у вас возникли проблемы при использовании рабочей области с выбранной вами платформой или она заработала после некоторой пользовательской настройки, создайте ветку в списке рассылки или задайте вопрос в Stack Overflow, чтобы поделиться своими знаниями с остальным сообществом DevTools.
Следующие шаги
Всеми уже настроенными папками вы можете управлять в 
Настройки > Рабочая область .
Далее вы узнаете, как использовать DevTools для изменения CSS и отладки JavaScript .
См. также
Локальные переопределения — это еще одна похожая функция DevTools, которая позволяет имитировать веб-контент или запрашивать заголовки. Таким образом, вы можете свободно экспериментировать с изменениями на странице, не дожидаясь, пока серверная часть подготовится. При локальном переопределении изменения сохраняются при загрузке страницы, но не сопоставляются с исходным кодом вашей страницы.