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

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

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

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

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

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

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

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

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

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

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

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

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

3. На вкладке Рабочая область откройте файл, например .js файл.

4. На панели действий выберите средство, отличное от средства Источники, например элемент.

5. На панели "Быстрое представление " в нижней части devTools откройте средство быстрого исходного кода . Открытый .js файл отображается в упрощенном редакторе, а инструмент "Элементы" по-прежнему отображается.

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

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

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

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

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

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

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

4. Нажмите раскрывающийся список Код .

5. Нажмите кнопку Копировать URL-адрес в буфер обмена .

   

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

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

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

6. Если вы установили Git, откройте командную строку.

7. Клонируйте репозиторий на локальный диск, введя строку 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

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

2. Перейдите в клонированную /demo-to-do/ папку, например C:\Users\localAccount\GitHub\Demos\demo-to-do\.

   Если вы используете оболочку git bash, это оболочка UNIX, поэтому даже в Windows необходимо завернуть путь к каталогу с обратными косыми чертами в кавычки или использовать косую черту, а не обратную косую черту.

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

   git checkout -b test
   

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

   git branch test
   git switch test
   

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

   # 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
   

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

   

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

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

См. также:

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

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

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

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

   Откроется devTools.

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

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

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

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

4. Нажмите кнопку Разрешить .

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

5. На вкладке Рабочая область разверните дерево файлов и щелкните один или несколько файлов, например to-do.js.

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

   

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

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

1. Далее на панели действий в верхней части средства разработки выберите средство, отличное от средства Источники ("), например элемент (".

2. Если панель инструментов быстрого просмотра не отображается в нижней части средства разработки, нажмите клавишу ESC.

3. На панели быстрого просмотра в нижней части devTools нажмите кнопку Другие инструменты , а затем выберите Быстрый источник.

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

   

   todo.js отображается, так как этот файл открыт в средстве "Источники ".

4. На демонстрационной веб-странице To Do удалите все задачи.

5. Щелкните панель Быстрый источник и нажмите клавиши CTRL+F.

   В средстве быстрого источника появится пользовательский интерфейс Поиска .

6. Введите никаких задач и нажмите клавишу ВВОД.

7. В строке кода измените no tasks на 0 tasks.

   На вкладке имя файла появится звездочка.

8. Нажмите клавиши CTRL+S.

   Звездочка удаляется на вкладке имя файла.

9. Обновите демонстрационную веб-страницу (CTRL+R).

10. Если отображаемая веб-страница не меняется с "Нет" на "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 на вкладке файла.

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

См. также

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