Отображение или изменение исходных файлов с помощью средства быстрого доступа к исходному коду

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

Средство быстрого источника

Основное место для просмотра исходных файлов в средствах разработки находится в средстве Источники . Но иногда при просмотре или редактировании исходных файлов требуется доступ к другим средствам, таким как Элементы или Консоль. Используйте средство быстрого источника , которое по умолчанию открывается на панели Быстрого просмотра в нижней части devTools.

Использование средства быстрого источника в сочетании со средством "Источники"

Чтобы отобразить средство быстрого источника в режиме быстрого просмотра в нижней части DevTools, на панели действий в верхней части devTools должно быть открыто средство, отличное от средства "Источники".

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

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

Изменение локальных исходных файлов в DevTools путем выбора папки Рабочей области

Это комплексное руководство по всем действиям по демонстрации средства быстрого источника с помощью веб-приложения ToDo в репозитории MicrosoftEdge и Demos .

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

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

Иметь доступ к исходным файлам веб-страницы локально, например клонированного репозитория.
На вкладке Рабочая область в инструменте Источники (") добавьте локальную папку с исходными файлами.
На вкладке Рабочая область откройте файл, например .js файл.
На панели действий выберите средство, отличное от средства Источники, например элемент.
На панели "Быстрое представление " в нижней части devTools откройте средство быстрого исходного кода . Открытый .js файл отображается в упрощенном редакторе, а инструмент "Элементы" по-прежнему отображается.

Эти действия подробно описаны в руководстве ниже.

Иметь локальные исходные файлы, например клонированные репозитории

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

Например, если это еще не сделано, клонируйте репозиторий MicrosoftEdge и Demos на локальный диск следующим образом:

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

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

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

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

Теперь у вас есть локальная папка с исходными файлами (например, /demo-to-do/), которые соответствуют файлам на веб-сервере.

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

Запуск сервера localhost

Перейдите в командную строку, например оболочку git bash или панель Терминала в Microsoft Visual Studio Code.
Перейдите в клонированную /demo-to-do/ папку, например C:\Users\localAccount\GitHub\Demos\demo-to-do\.

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

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

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

См. также:

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

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

Выберите локальную папку исходных файлов в качестве рабочей области

Далее щелкните правой кнопкой мыши демонстрационную веб-страницу и выберите Пункт Проверить.

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

Откроется диалоговое окно Выбор папки .
Перейдите к папке, например C:\Users\localAccount\GitHub\Demos\demo-to-do, и нажмите кнопку Выбрать папку .

В верхней части DevTools сказано, как devTools запрашивает полный доступ к <пути>.
Нажмите кнопку Разрешить .

Дерево demo-to-do файлов отображается на вкладке Рабочая область средства Источники . Файлы HTML, JS и CSS имеют зеленую "сопоставленную" точку.
На вкладке Рабочая область разверните дерево файлов и щелкните один или несколько файлов, например to-do.js.

Файл откроется в средстве "Источники ":

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

Предположим, вы хотите продолжить просмотр средства "Элементы" , но хотите одновременно просматривать и редактировать исходные файлы, открытые с помощью средства "Источники ".

Далее на панели действий в верхней части средства разработки выберите средство, отличное от средства Источники ("), например элемент (".
Если панель инструментов быстрого просмотра не отображается в нижней части средства разработки, нажмите клавишу ESC.
На панели быстрого просмотра в нижней части devTools нажмите кнопку Другие инструменты , а затем выберите Быстрый источник.

Средство быстрого источника откроется в кратком представлении в нижней части devTools:

todo.js отображается, так как этот файл открыт в средстве "Источники ".
На демонстрационной веб-странице To Do удалите все задачи.
Щелкните панель Быстрый источник и нажмите клавиши CTRL+F.

В средстве быстрого источника появится пользовательский интерфейс Поиска .
Введите никаких задач и нажмите клавишу ВВОД.
В строке кода измените no tasks на 0 tasks.

На вкладке имя файла появится звездочка.
Нажмите клавиши CTRL+S.

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

Отображаемая веб-страница меняется с "Нет" на "0", а на вкладке имя файла JS отображается зеленая точка .

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

Ниже приведены инструкции, описанные в руководстве.

См. также:

Добавьте локальную папку в рабочую область, чтобы использовать Средства разработки для редактирования файлов и сохранения изменений на диске в обзоре средства "Источники".
Изменение и сохранение файлов в рабочей области (вкладка "Рабочая область" средства "Источники")
- Шаг 6. Сохранение изменения JavaScript на диске в руководстве по рабочей области (вкладка "Рабочая область" средства "Источники")

При открытии файла с помощью меню команд этот файл открывается как в средстве быстрого источника , так и в средстве "Источники ".

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

Выберите Команду Настроить и управлять командой DevTools>Run.
Нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS).
Щелкните ссылку Выполнить команду в пустом средстве быстрого источника (или средстве "Источники ").

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

Выберите Инструмент> ИсточникиДополнительные параметры (рядом с вкладкой Страница) >Открыть файл.
Выберите Настроить и управлять средствами разработки>Открыть файл.
Нажмите клавиши CTRL+P (Windows, Linux) или COMMAND+P (macOS).
Когда средство быстрого источника (или средство "Источники ") пусто, щелкните ссылку Открыть файл в инструкциях в средстве:

Откроется окно Открыть файл в меню "Команда ".

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

Сочетания клавиш в средстве быстрого источника

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

CTRL+F — поиск.
CTRL+S — сохранить. Если зеленая точка "сопоставлена" в имени файла HTML, JS или CSS больше нет, нажмите кнопку Обновить в Microsoft Edge и выберите Пункт Жесткое обновление (CTRL+SHIFT+R).
CTRL+P — откройте файл с помощью меню команд. Это то же самое, что перейти к средству Источники и щелкнуть файл на вкладке Рабочая область .

Закрытие файла

Чтобы закрыть файл, нажмите кнопку x на вкладке файла.

Файл закрывается в средстве быстрого источника и средстве Источники .

См. также

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

Кері байланыс

Бет пайдалы болды ма?

Last updated on 2025-07-01