Поделиться через

Изменение и сохранение файлов в рабочей области (вкладка "Рабочая область" средства "Источники")

Средства разработки можно использовать в качестве интегрированной среды разработки (IDE) в браузере. Чтобы сохранить изменения в исходных файлах веб-страницы, добавьте папку исходного кода веб-страницы на вкладке Рабочая область средства Источники . Затем вы можете редактировать и сохранять файлы HTML, CSS и JS в редакторе средства "Источники " (или в средстве быстрого исходного кода на панели "Быстрое представление " в нижней части средства разработки).

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

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

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

См. также:

Обзор функции рабочей области DevTools

Рабочая область DevTools позволяет просматривать исходный код веб-сайта, который находится на компьютере, и вносить в него изменения из средства "Источники", чтобы изменения сохранялись при обновлении страницы.

Ниже приведен типичный сценарий использования рабочей области:

  1. Ищите исходный код веб-сайта на компьютере.

  2. Запустите локальный веб-сервер (например npx http-server, ) из каталога исходного кода, чтобы сайт был доступен по локальному URL-адресу разработки, http://localhost:8080например .

  3. Откройте http://localhost:8080 в Microsoft Edge.

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

  5. Перезагрузите веб-страницу, чтобы просмотреть изменения.

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

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

Ограничения функции рабочей области с преобразованным исходным кодом

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

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

Редактирование CSS с помощью вкладки "Стили" в инструменте "Элементы" при использовании вкладки "Рабочая область" средства "Источники"

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

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

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

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

  • Изменения, внесенные на вкладке Стили в инструменте Элементы , не сохраняются в CSS-файле на диске, если таблица стилей не сопоставлена с файлом рабочей области. Изменение CSS на вкладке Стили инструмента "Элементы" потеряет изменения; изменения не сохраняются на диске.

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

При использовании рабочей области:

  1. Измените файл в средстве "Источники ".
  2. Сохраните изменения.
  3. Снова выполните сборку. Некоторые системы сборки делают это автоматически при обнаружении изменений.
  4. Перезагрузите страницу. Некоторые серверы делают это автоматически при обнаружении изменений.

Ограничения вкладки "Стили" средства "Элементы"

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

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

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

Затем в фоновом режиме все сохраненные изменения должны быть повторно созданы и скомпилированы (что может произойти автоматически), а затем изменения отображаются на веб-странице после обновления страницы (что может произойти автоматически).

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

Локальные переопределения сохраняют внесенные изменения на веб-странице в выбранной папке и упорядочивают их в структуру папок, соответствующую URL-адресу переопределенных ресурсов.

Функция Переопределения хранит копию ресурсов веб-страницы, которые вы редактируете в средствах разработки. При обновлении страницы Microsoft Edge загружает локальную измененную копию файлов вместо файлов на сервере.

См. также:

Изменения дерева DOM средства элементов теряются после обновления

Чтобы внести изменения в исходный HTML-файл, необходимо использовать вкладку Рабочая область средства "Источники" вместо средства "Элементы".

Ограничения редактирования дерева DOM средства >Elements:

В инструменте Элементы можно изменить представление HTML-документа в формате DOM, созданное подсистемой браузера при загрузке страницы. Однако изменения в DOM не могут быть сопоставлены с исходными файлами HTML. Вы можете внести изменения в HTML-содержимое с помощью дерева DOM в инструменте Элементы , но изменения в дереве DOM не сохраняются на диске и влияют только на текущий сеанс браузера.

См. также:

Ограничения вкладки "Страница" средства >"Источники":

Вкладка Страница средства Источники не позволяет сохранять изменения в файловой системе.

  • HTML-файл, открытый на вкладке Страница , не может быть изменен.
  • Файл CSS или JS, открытый на вкладке Страница , можно изменить, но изменения не сохраняются при обновлении веб-страницы.

Ниже показано, что изменения в дереве DOM средства Elements не сохраняются при обновлении страниц.

  1. Настройте демонстрацию рабочих областей, как описано в руководстве по рабочей области (вкладка "Источники" Рабочая область).

  2. В средствах разработки выберите инструмент Элементы (</>).

  3. В дереве DOM в элементе <h1> выделите текстовую строку DevTools Workspaces Demo, удалите ее, введите текстовую строку I Love Cakeи нажмите клавишу ВВОД. На отрисоченной веб-странице отображается новый текст заголовка I Love Cake:

    Попытка изменения HTML из дерева DOM в инструменте

  4. Выберите инструмент Источники , щелкните правой кнопкой мыши index.htmlи выберите Команду Открыть в содержащей папке.

    откроется проводник или Finder.

  5. index.html Откройте файл, который находится в каталоге/Demos/workspace/, в текстовом редакторе, например Visual Studio Code. Только что внесенные изменения не отображаются; в заголовке по-прежнему говорится "DevTools Workspaces Demo", а не "I Love Cake".

  6. В браузере обновите демонстрационную страницу.

    Страница возвращается к исходному заголовку "Демонстрация рабочих областей DevTools", так как дерево DOM с вашим изменением было отменено, а DOM был создан повторно из неизмененного index.html файла, который находится в вашем /Demos/workspace/ каталоге.

Почему изменения дерева DOM не сохраняются

Изменение дерева DOM в элементе Elements в соответствии с приведенным выше разделом не работает.

  • Дерево узлов, которое отображается в инструменте Элементы , представляет модель DOM страницы.

  • Чтобы отобразить страницу, браузер получает HTML по сети, анализирует HTML-код, а затем преобразует его в дерево узлов DOM.

  • Если на странице есть какой-либо Код JavaScript, он может добавлять, удалять или изменять узлы DOM. CSS также может изменить DOM с помощью content свойства .

  • В конечном итоге браузер использует DOM, чтобы определить, какое содержимое должно быть представлено пользователям браузера.

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

  • Это усложняет решение, в котором средства разработки должны сохранять изменения, внесенные в инструмент "Элементы ", так как на модель DOM влияют HTML, JavaScript и CSS.

Короче говоря, дерево DOM, созданное подсистемой браузера, отличается от HTML-документа, загруженного с сервера.

Создание зеленых "сопоставленных" точек в файлах

Если зеленые "сопоставленные" точки перестают отображаться в файлах в средствах разработки, например на вкладке Рабочая область ; Или, если средство "Изменения " не отображает ожидаемые изменения:

  • После отображения инструментов разработки нажмите кнопку Обновить в Microsoft Edge, а затем выберите Пункт Жесткое обновление (CTRL+SHIFT+R).

    Зеленая "сопоставленная" точка рядом с файлом в DevTools указывает, что DevTools установило сопоставление между сетевым ресурсом страницы, полученной от веб-сервера, и локальным исходным файлом в каталоге /Demos/workspace/ . Новый файл, добавленный в DevTools, должен быть возвращен сервером, чтобы он был указан как сопоставленный.

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

  1. Ссылка на добавленный .js файл в HTML-файле, например на строку <script src="test.js"></script> в теге <body> .

  2. Убедитесь, что в .js файле есть код, например строка console.log('hello from test.js');.

  3. Нажмите клавиши CTRL+S (Windows, Linux) или COMMAND+S (macOS). Ваше изменение будет сохранено, и звездочка исчезнет.

  4. После отображения инструментов разработки нажмите кнопку Обновить в Microsoft Edge, а затем выберите Пункт Жесткое обновление (CTRL+SHIFT+R).

См. также:

См. также

Примечание.

Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Исходная страница находится здесь и автор Кейс Баски.

Creative Commons License Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.