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

  • Статья

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

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

Чтобы обновить свои знания об используемых технологиях, ознакомьтесь со следующими статьями:

Введение

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

  • У вас есть исходный код демонстрационного веб-сайта на рабочем столе.

  • Вы запускаете локальный веб-сервер из каталога исходного кода, чтобы сайт был доступен по адресу localhost:8080. Примечание. Если используется параметр сервера Python, номер порта по умолчанию — 8000.

  • Вы открыли localhost:8080 в Microsoft Edge и используете средства разработки для изменения исходного кода веб-сайта, который включает файлы CSS, HTML и JavaScript.

В этом руководстве описаны инструкции по настройке среды.

Ограничения

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

DevTools не поддерживает все варианты платформы; Например, функция "Рабочие области" (вкладка "Файловая система") не работает с платформой "Создание React приложения".

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

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

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

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

Мы настроим демонстрационные файлы, а затем настроим Средства разработки.

  1. В другом окне или вкладке перейдите к исходному коду демонстрации Рабочих областей.

  2. Создайте app каталог, например ~/Desktop/app или C:\Users\myusername\app\. Скопируйте index.html, ../shared/img/logo.png, README.md, script.jsи styles.css из демонстрационного исходного кода в каталог app . В остальной части руководства этот каталог называется ~/Desktop/app или C:\Users\myusername\app\, хотя можно использовать другой путь.

  3. Если вы еще этого не сделали, установите Node.js и npm. Дополнительные сведения см. в статье Установка Node.js и диспетчера пакетов узлов (npm)статьи Установка расширения DevTools для Visual Studio Code.

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

  5. Перейдите в app созданный каталог, например ~/Desktop/app или C:/Users/myusername/app. Если вы используете оболочку git bash, это оболочка UNIX, поэтому даже в Windows необходимо завернуть путь к каталогу с обратными косыми чертами в кавычки или использовать косую черту, а не обратную косую черту.

  6. Выполните одну из следующих команд, чтобы запустить веб-сервер:
    Node.js параметр:

    # Node.js option
cd ~/Desktop/app  # or:  cd C:/Users/myusername/app
npx http-server  # Node.js

    Дополнительные сведения и параметры см. в статье Запуск сервера (npx http-server)статьи Установка расширения DevTools для Visual Studio Code.

    # Python 2 option
cd ~/Desktop/app  # or:  cd C:/Users/myusername/app
python -m SimpleHTTPServer  # Python 2

    # Python 3 option
cd ~/Desktop/app  # or:  cd C:/Users/myusername/app
python -m http.server  # Python 3

  7. Откройте вкладку в Microsoft Edge и перейдите к локально размещенной версии сайта. Вы должны иметь доступ к нему с помощью localhost:8080:

    Демонстрация рабочих областей DevTools

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

Определение рабочей области в средствах разработки

  1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS), чтобы открыть консоль DevTools:

    Консоль DevTools

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

  3. В области Навигатор (слева) щелкните вкладку Файловая система (которая сгруппирована по вкладке Страница ):

    Вкладка Файловая система

  4. Щелкните Добавить папку в рабочую область. откроется проводник или Finder.

  5. Перейдите в /app/ созданный каталог. Например, в текстовом поле Папка: введите путь, например ~/Desktop/app или C:\Users\myusername\app\. Затем нажмите кнопку Выбрать папку .

    DevTools предложит предоставить DevTools полный доступ к каталогу app .

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

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

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

Изменение CSS и сохранение изменений в исходном файле

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

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

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

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

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

    Значок

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

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

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

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

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

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

Изменение HTML и сохранение изменений в исходном файле

В средстве Элементы можно изменить тег html в копии файла, возвращаемого сервером. Тем не менее, чтобы сохранить изменения в локальном исходном файле, необходимо использовать средство "Источники" вместо средства "Элементы ".

Изменение дерева DOM в инструменте "Элементы" не сохраняет изменения

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

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

  1. Продолжая ранее, выберите инструмент Элементы .

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

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

  3. index.html Откройте файл, который находится в каталогеapp, в текстовом редакторе, например Visual Studio Code. Только что внесенные изменения не отображаются; В заголовке по-прежнему отображается сообщение "DevTools Workspaces Demo".

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

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

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

  1. Перейдите на вкладку Источники (значок средства )

  2. В области Навигатор слева выберите index.html. Откроется HTML-код страницы.

  3. <h1>I Love Cake</h1>Замените <h1>DevTools Workspaces Demo</h1> на , в списке файлов (в отличие от дерева DOM в инструменте Элементы).

  4. Нажмите клавиши CTRL+S (Windows, Linux) или COMMAND+S (macOS), чтобы сохранить изменения.

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

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

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

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

Изменение JavaScript и сохранение изменений в исходном файле

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

Чтобы открыть редактор кода DevTools вместе с другими инструментами, выполните следующие действия:

  1. Далее выберите инструмент Элементы (значок инструмента

  2. Нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS), чтобы открыть меню Command.

  3. В командной строке Выполнить начните вводить быстрый ввод, а затем выберите Показать быстрый источник:

    Откройте средство

    В нижней части окна DevTools откроется средство быстрого источника , в котором отображается содержимое index.html, так как это последний файл, который вы редактировали в средстве Источники . При необходимости щелкните Развернуть быстрое представление и убедитесь, что выбран инструмент Элементы .

  4. Нажмите клавиши CTRL+P (Windows, Linux) или COMMAND+P (macOS), чтобы открыть файл в меню Команд:

    Открытие script.js с помощью диалогового окна

  5. Начните вводить скрипт, а затем выберите script.js , который находится в каталоге app/ .

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

  6. Используйте средство быстрого источника , чтобы добавить следующий код в нижнюю часть script.js:

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

  7. Нажмите клавиши CTRL+S (Windows, Linux) или COMMAND+S (macOS), чтобы сохранить изменения.

  8. Обновите страницу. При необходимости нажмите и удерживайте кнопку Обновить , а затем выберите Жесткое обновление. Теперь гиперссылка Изменить файлы с помощью рабочих областей на странице курсивом:

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

См. также

Примечание.

Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Исходная страница находится здесь и автор Kayce Basques (Технический писатель, Chrome DevTools & Lighthouse).

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