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

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

Средство

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

Используйте средство "Быстрый источник" совместно со средством "Источники"

Чтобы отобразить средство "Быстрый источник" в кратком представлении в нижней части средств разработчика, на панели действий в верхней части средств разработчика необходимо открыть любое другое средство, кроме этого средства.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Например, если вы еще этого не сделали, клонируйте репозиторий MicrosoftEdge / Demos на локальный диск, как показано ниже.

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

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

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

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

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

    Кнопка Code в репозитории Demos для получения 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

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

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

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

Запуск локального сервера

  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" и переключитесь на нее (чтобы избежать изменения файлов демо в ветке "main"):

    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:

    Демонстрация приложения DevTools TODO

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

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

См. также:

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

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

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

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

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

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

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

    В верхней части средств разработчика отображается сообщение " Средства разработчика запрашивают полный доступ к <пути>".

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

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

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

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

    Средство

Открытие средства "Быстрый источник" и редактирование файла

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

  1. Начиная с сказанного выше, на панели действий в верхней части средств разработчика выберите инструмент, отличный от инструмента "Источникиинструмент "Элементы" (значок средства ").

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

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

    Средство "Быстрый источник" открывается в быстром просмотре в нижней части средств разработчика:

    Средство

    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-файла появляется зеленая точка «сопоставлено».

    Измененный файл .js в средстве

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

Это конец шагов руководства.

См. также:

Открытие файла с помощью меню команд

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

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

  • Выберите команду "Настройка средств разработчика> и управлениеими".

  • Нажмите клавиши 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 на вкладке файла.

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

См. также

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