Руководство по рабочей области (вкладка "Рабочая область" средства "Источники")

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

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

Шаг 1. Клонирование репозитория демонстраций Edge на локальный диск

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

Клонируйте репозиторий MicrosoftEdge и Demos на локальный диск, включая папку /workspaces/ demo, следующим образом:

Если это еще не сделано, скачайте Git и установите его.
Перейдите в раздел MicrosoftEdge / Demos в новом окне или вкладке.
Нажмите раскрывающийся список Код и нажмите кнопку Копировать URL-адрес в буфер обмена .

URL-адрес копируется в буфер обмена: https://github.com/MicrosoftEdge/Demos.git

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

Вы также можете использовать область управления версиями Visual Studio Code, чтобы клонировать репозиторий и пропустить приведенный ниже шаг командной строки.
Откройте командную строку, например git bash.
Клонируйте репозиторий на локальный диск, введя строку URL-адреса, скопированную из репозитория GitHub. Если вы используете командную строку git bash:
```
# Example location where the repo directory will be added:
cd ~/GitHub
git clone https://github.com/MicrosoftEdge/Demos.git
```

Дополнительные сведения о клонировании репозитория см. в разделе:

Клонирование репозитория — документация GitHub.

Перейдите к следующему разделу.

Шаг 2. Запуск сервера localhost в каталоге исходных файлов веб-страницы

Если это еще не сделано, установите последнюю версию Node.js и npm из Node.js.

См. также:
- Установите Node.js и диспетчер пакетов узлов (npm) в разделе Установка расширения DevTools для Visual Studio Code.
Перейдите в командную строку, например оболочку git bash или панель Терминала в Microsoft Visual Studio Code.
Перейдите в Demos каталог репозитория workspaces :
```
cd ~/GitHub/Demos/workspaces
pwd
```
Каталог для использования с вкладкой "Рабочая область" средства "Источники" может иметь любое имя. Этот каталог демонстрации называется /workspaces/.
Создайте рабочую ветвь с именем "test" и переключитесь на нее (чтобы избежать изменения файлов демонстрации в "главной" ветви):
```
git checkout -b test
```
Это эквивалентно следующему:
```
git branch test
git switch test
```
Выполните одну из следующих команд, чтобы запустить веб-сервер:
```
# Node.js option
npx http-server
```
Дополнительные сведения и параметры см. в статье Запуск сервера (npx http-server)статьи Установка расширения DevTools для Visual Studio Code.
```
# Python 2 option
cd ~/GitHub/demos/workspaces
python -m SimpleHTTPServer
```
```
# Python 3 option
cd ~/GitHub/demos/workspaces
python -m http.server
```
Откройте вкладку в Microsoft Edge и перейдите к локально размещенной версии сайта. Обычно доступ к нему выполняется по следующим сведениямlocalhost:8080:

Другой распространенный эквивалентный URL-адрес — .http://0.0.0.0:8080 Номер порта по умолчанию для параметра сервера Python — 8000. Точный номер порта может отличаться.

Откроется веб-страница Демонстрация рабочих областей DevTools .

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

См. также:

Запуск простого локального HTTP-сервера в разделе Как настроить локальный тестовый сервер? в MDN — отображается Python.

Перейдите к следующему разделу.

Шаг 3. Добавление папки Рабочей области в средство "Источники"

Затем определите рабочую область в средствах разработки:

Щелкните правой кнопкой мыши локально размещенную веб-страницу Демонстрация рабочих областей DevTools и выберите Пункт Проверить. Или нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS).

Откроется devTools.
Перейдите на вкладку Источники ().
В области Навигатор (слева) откройте вкладку Рабочая область (которая сгруппирована по вкладке Страница ):
Нажмите кнопку Добавить папку .

Откроется диалоговое окно Выбор папки .
Перейдите в созданный каталог с клоном /Demos/workspace/ . Например, в текстовом поле Папка: введите путь, например C:\Users\localAccount\GitHub\Demos\workspaces\.
Нажмите кнопку Выбрать папку .

DevTools предложит предоставить DevTools полный доступ к каталогу /workspaces/ .
Нажмите кнопку Разрешить , чтобы предоставить DevTools разрешение на чтение и запись в каталог.

На вкладке Рабочая область отображаются значки страниц, имеющие зеленую "сопоставленную" точку для index.html, script.jsи styles.css. Зеленая точка "сопоставленная" указывает, что Средства разработки установили сопоставление между сетевым ресурсом страницы, полученной с веб-сервера, и локальным исходным файлом в каталоге /Demos/workspace/ :

Перейдите к следующему разделу.

Шаг 4. Сохранение изменения CSS на диске (с помощью вкладки "Стили" средства "Элементы")

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

Чтобы внести изменения в CSS-файл и сохранить его на диск с помощью вкладки Стили средства "Элементы":

В средстве Источники на вкладке Рабочая область (сгруппированная с вкладкой Страница ) выберите styles.css , чтобы открыть его в области редактора. Свойство colorh1 элемента имеет значение fuchsia:
Выберите инструмент Элементы ("); затем в дереве DOM разверните <body> элемент и выберите <h1> элемент .

В области Стили отображаются правила CSS, применяемые к элементу <h1> . Значок сопоставленного файла () рядом styles.css:1 с — это страница с зеленой точкой . Зеленая "сопоставленная" точка означает, что все изменения, внесенные в это правило CSS, сопоставляются styles.css с в каталоге /Demos/workspace/ :
Измените значение color свойства элемента на оранжевый <h1> . Для этого выберите <h1> элемент в дереве DOM. В правиле CSS для h1щелкните fuchsia, начните вводить оранжевый цвет, а затем выберите оранжевый из списка цветов:
Выберите инструмент Источники , щелкните правой кнопкой мыши styles.cssи выберите Команду Открыть в содержащей папке.

откроется проводник или Finder.
Откройте копию styles.css в каталоге /Demos/workspace/ в текстовом редакторе, например Visual Studio Code. Теперь color свойству присвоен новый цвет, который в этом примере является оранжевым. Изменение было внесено не только в копию файла, возвращенную с веб-сервера; это изменение также было внесено в сопоставленный файл в каталоге /Demos/workspace/ рабочей области.
Обновите страницу.

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

Совет: Вы также можете изменить цвет, щелкнув образец цвета fucshia, чтобы открыть средство выбора цвета, чтобы выбрать новый цвет. Значение HEX для выбранного цвета — это имя цвета.

Перейдите к следующему разделу.

Шаг 5. Сохранение изменений HTML на диске (с помощью вкладки Рабочая область средства "Источники")

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

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

Далее в devTools щелкните вкладку Источники ()
В области Навигатор слева на вкладке Рабочая область (сгруппированная с вкладкой Страница ) выберите index.html.

Откроется вкладка index.html в инструменте Источники .
В теге замените <h1> "DevTools Workspaces Demo" на "I Love Cake".

Рядом index.htmlс элементом отображается звездочка.
Нажмите клавиши CTRL+S (Windows, Linux) или COMMAND+S (macOS).

Ваше изменение будет сохранено, и звездочка исчезнет.

Вы внесли изменения в список файлов, а не в дереве DOM в инструменте Элементы .
Обновите страницу. Заголовок на отображаемой странице изменится на "I Love Cake", так как эта строка была сохранена в index.html сопоставленном /Demos/workspace/ каталоге:
В средстве Источники щелкните правой кнопкой мыши index.htmlи выберите Открыть в содержащей папке.

откроется проводник или Finder.
Откройте копию index.html в каталоге /Demos/workspace/ в текстовом редакторе, например Visual Studio Code.

Элемент <h1> содержит новый текст "I Love Cake", так как вы внесли изменения с помощью редактора средства "Источники " для редактирования index.html , а затем сохранили изменения, и этот файл был сопоставлен в рабочей области (вкладка Рабочая область ), обозначенной зеленой точкой "сопоставлено" на значке файла.

Многие разработчики не пишут HTML напрямую, а используют такие подходы, как:
- Серверный язык, например Java, Python или PHP.
- Генератор сайтов, например Eleventy.
- Клиентская платформа, использующая код JavaScript.
- Язык разметки, отличный от HTML, например Markdown.
Это означает, что на практике немногие разработчики изменяют HTML-файлы на вкладке Рабочая область. Большинство разработчиков создают HTML-файлы, используя другой тип исходного файла, например исходный файл JS компонента React, а затем перестраивает и перезагружает (что может произойти автоматически).
Нажмите кнопку Обновить в Microsoft Edge, а затем выберите Пункт Жесткое обновление (CTRL+SHIFT+R).

На вкладке Рабочая область зеленые точки отображаются во всех файлах HTML, CSS и JS.

Перейдите к следующему разделу.

Шаг 6. Сохранение изменения JavaScript на диске

Далее вы измените файл JavaScript демонстрации рабочей области и сохраните изменения в исходном файле. Чтобы сохранить изменения в исходном файле JavaScript, можно использовать средства разработки, такие как интегрированная среда разработки, после добавления папки исходного кода на вкладке Рабочая область средства "Источники ". Затем можно изменить и сохранить файл JavaScript в редакторе средства "Источники ".

На отображаемой демонстрационной веб-странице, чтобы изменить и сохранить файлы в рабочей области (вкладка Рабочая область средства "Источники") с курсивом:

В devTools выберите инструмент Источники , а затем перейдите на вкладку Рабочая область , которая сгруппирована по вкладке Страница .
На вкладке Рабочая область выберите script.js.

script.js открывается на вкладке в области редактора средства "Источники ".
В области редактора добавьте следующий код в нижнюю часть script.js:
```
document.querySelector('a').style = 'font-style:italic';
```
На вкладке script.js появится звездочка.
Нажмите клавиши CTRL+S (Windows, Linux) или COMMAND+S (macOS).

script.js сохраняется, а звездочка удаляется с вкладки script.js .
Обновите страницу.
Если в ФАЙЛЕ HTML, JS или CSS больше нет зеленой точки , нажмите кнопку Обновить в Microsoft Edge и выберите пункт Жесткое обновление (CTRL+SHIFT+R).

Гиперссылка Изменить файлы с помощью рабочих областей (или Изменить и сохранить файлы в рабочей области (вкладка Рабочая область средства источников)) на странице теперь курсивом:

Перейдите к следующему разделу.

Шаг 7. Добавление файла .js с помощью средств разработки

В средстве Источники на вкладке Рабочая область щелкните папку /workspaces/ правой кнопкой мыши и выберите пункт меню Создать файл .

Добавляется файл с именем NewFile :
Щелкните правой кнопкой мыши NewFile на вкладке Рабочая область и выберите команду Переименовать.
Переименуйте файл в test.js.
В test.jsдобавьте строку: console.log('hello from test.js');
В средстве Источники на вкладке Рабочая область выберите index.html.
В index.htmlполе под строкой <script src="./script.js" defer></script>добавьте строку: <script src="./test.js" defer></script>
Нажмите клавиши CTRL+S (Windows, Linux) или COMMAND+S (macOS).

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

На вкладке Рабочая область зеленые точки отображаются во всех файлах HTML, CSS и JS:

В этом руководстве показано, как завершить работу.

Если вы хотите отменить изменения изменения в папке/workspace/, можно использовать команды Git в командной строке или GitHub Desktop, чтобы отменить изменения изменения в текущей ветви, например "main" или "test".

См. также

Примечание.

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

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

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2025-07-01

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

Руководство по рабочей области (вкладка "Рабочая область" средства "Источники")

Шаг 1. Клонирование репозитория демонстраций Edge на локальный диск

Шаг 2. Запуск сервера localhost в каталоге исходных файлов веб-страницы

Шаг 3. Добавление папки Рабочей области в средство "Источники"

Шаг 4. Сохранение изменения CSS на диске (с помощью вкладки "Стили" средства "Элементы")

Шаг 5. Сохранение изменений HTML на диске (с помощью вкладки Рабочая область средства "Источники")

Шаг 6. Сохранение изменения JavaScript на диске

Шаг 7. Добавление файла .js с помощью средств разработки

См. также

Обратная связь

Дополнительные ресурсы