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

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

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

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

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

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

  1. Если вы еще этого не сделали, скачайте git и установите его.

  2. Перейдите в репозиторий MicrosoftEdge / Demos в новом окне или вкладке.

  3. Нажмите кнопку раскрывающегося списка кода , а затем — кнопку Копировать URL-адрес в буфер обмена .

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

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

    Или вы можете использовать панель управления версиями Visual Studio Code, чтобы клонировать репозиторий, и пропустить шаг командной строки ниже.

  4. Откройте командную строку, например git bash.

  5. Клонируйте репозиторий на локальный диск, введя строку URL-адреса, скопированную из репозитория GitHub. Если вы используете командную строку git bash:

    # Example location where the repo directory will be added:
cd ~/GitHub
git clone https://github.com/MicrosoftEdge/Demos.git

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

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

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

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

    См. также:

  2. Перейдите в командную строку, например в оболочку git bash или в область терминала в Microsoft Visual Studio Code.

  3. Изменение каталога Demosworkspaces репозитория:

    cd ~/GitHub/Demos/workspaces
pwd

    Каталог для использования с вкладкой Рабочая область средства "Источники" может иметь любое имя. Этот каталог с демонстрацией называется /workspaces/.

  4. Создайте рабочую ветку с именем "test" и переключитесь на нее (чтобы избежать изменения файлов демо в ветке "main"):

    git checkout -b test

    Это эквивалентно следующему:

    git branch test
git switch test

  5. Запустите одну из следующих команд, чтобы запустить веб-сервер.

    # 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

  6. Откройте вкладку в Microsoft Edge и перейдите к локальной версии сайта. Обычно вы можете получить к нему доступ, перейдя на страницуlocalhost:8080:

    Демонстрационная версия DevTools Workspaces

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

    Откроется демонстрационная страница рабочих пространств средств разработчика .

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

См. также:

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

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

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

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

    Откроются средства разработчика.

  2. Щелкните вкладку Источники (значок средства ").

  3. В области Навигатор (слева) откройте вкладку Рабочая область (сгруппирована с вкладкой Page ):

    Вкладка

  4. Нажмите кнопку "Добавить папку ".

    Откроется диалоговое окно "Выбор папки ".

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

  6. Нажмите кнопку "Выбрать папку ".

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

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

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

    На вкладке Workspace есть зеленая точка, указывающая на сопоставление между ресурсом, полученным с сервера, и локальным исходным файлом

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

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

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

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

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

    Просмотр styles.css в текстовом редакторе

  2. Выберите инструмент Элементы (значок инструмента "); затем в дереве DOM разверните <body> элемент, а затем выберите элемент.<h1>

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

    Значок

  3. Измените значение color свойства <h1> элемента на оранжевое. Для этого выберите <h1> элемент в дереве DOM. В правиле CSS для h1, щелкните fuchsia, начните вводить оранжевый, а затем выберите оранжевый из списка цветов:

    Изменение свойства цвета в styles.css

  4. Выберите средство "Источники ", щелкните его правой кнопкой мыши styles.cssи выберите "Открыть в содержащей папке".

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

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

  6. Обновите страницу.

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

Совет: Вы также можете изменить цвет, щелкнув образец цвета фукшия, чтобы открыть палитру для выбора нового цвета. Шестнадцатеричное значение для выбранного цвета является названием цвета.

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

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

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

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

  1. Продолжая сказанное выше, в средствах разработчика откройте вкладку "Источники" (значок средства

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

    В средстве "Источники" откроется вкладка "index.html".

  3. В теге <h1> замените "Демонстрация рабочих пространств средств разработчика" на "Я люблю торт".

    Рядом с изображением index.html.

  4. Нажмите клавиши CTRL+S (Windows, Linux) или COMMAND+S (macOS).

    Изменения сохранятся, а звездочка исчезнет.

    Это изменение было внесено в списке файла, а не в дереве DOM в средстве "Элементы ".

  5. Обновите страницу. Заголовок на отрисованной странице меняется на "I Love Cake", так как эта строка была сохранена в index.html сопоставленном каталоге /Demos/workspace/ :

    Изменение HTML в средстве

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

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

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

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

    Многие разработчики не пишут HTML напрямую, а вместо этого используют такие подходы, как:

    • Язык на стороне сервера, например Java, Python или PHP.
    • Генератор сайтов, например Eleventy.
    • Клиентская среда, использующая код JavaScript.
    • Язык разметки, отличный от HTML, например Markdown.

    Это означает, что на практике лишь немногие разработчики изменяют HTML-файлы на вкладке Workspace. Большинство разработчиков создают HTML-файлы, используя исходный файл другого типа, например исходный файл JS компонента React, а затем выполняют повторную сборку и перезагрузку (что может произойти автоматически).

  8. Нажмите и удерживайте или щелкните правой кнопкой мыши кнопку "Обновить" в Microsoft Edge, а затем выберите "Жесткое обновление " (CTRL+SHIFT+R).

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

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

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

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

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

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

  2. На вкладке "Рабочая область " выберите script.js.

    script.js Откроется на вкладке в области редактора инструмента "Источники ".

  3. В области редактора добавьте следующий код в нижней части script.js:

    document.querySelector('a').style = 'font-style:italic';

    На script.js вкладке появится звездочка.

  4. Нажмите клавиши CTRL+S (Windows, Linux) или COMMAND+S (macOS).

    script.js будет сохранена, а звездочка будет удалена с script.js вкладки.

  5. Обновите страницу.

  6. Если в файле HTML, JS или CSS больше нет зеленой точки "сопоставления", щелкните и удерживайте или щелкните правой кнопкой мыши кнопку "Обновить " в Microsoft Edge, а затем выберите "Жесткое обновление " (CTRL+SHIFT+R).

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

    Ссылка на странице теперь выделена курсивом

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

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

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

    Добавляется файл с именем NewFile :

    Новый файл, добавленный через вкладку Workspace

  2. Щелкните правой кнопкой мыши NewFile на вкладке «Рабочая область » и выберите « Переименовать».

  3. Измените имя файла на test.js.

  4. В test.js, добавьте строку: console.log('hello from test.js');

  5. В средстве "Источники " на вкладке "Рабочая область " выберите index.html.

  6. В index.html, под линией <script src="./script.js" defer></script>добавьте линию: <script src="./test.js" defer></script>

  7. Нажмите клавиши CTRL+S (Windows, Linux) или COMMAND+S (macOS).

    index.html сохраняется.

  8. Нажмите и удерживайте или щелкните правой кнопкой мыши кнопку "Обновить" в Microsoft Edge, а затем выберите "Жесткое обновление " (CTRL+SHIFT+R).

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

    Добавление ссылки на JS-файл в HTML-файле и зеленых точек на всех файлах веб-страниц

На этом учебник завершен.

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

См. также

Примечание.

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

Лицензия Creative Commons Эта работа предоставляется по лицензии Creative Commons Attribution 4.0 International License.

  • Последнее обновление: