Открытие средств разработки и браузера DevTools

  • Статья

Открыть вкладку DevTools и вкладку Edge DevTools: Browser можно несколькими способами :

Способ Описание
Щелкните файл правой кнопкой .html мыши. Файл не launch.json используется. Открывает средства разработки в режиме отладки. Используйте этот подход, если вы хотите выполнить отладку, а веб-приложение может работать из файловой системы, а не из веб-сервера.
Нажмите кнопку Запустить экземпляр . Файл не launch.json используется. Открывает средства разработки в режиме без отладки. Используйте этот подход, если не хотите выполнять отладку.
Нажмите кнопку Запустить проект . Используется launch.json файл. Открывает средства разработки в режиме отладки. Используйте этот подход, если вы хотите выполнить отладку, а веб-приложение использует ИНТЕРФЕЙСы API, требующие запуска на веб-сервере.

Эти подходы описаны ниже. Подробные инструкции по использованию репозитория демонстраций см. в статье Начало работы с расширением DevTools для Visual Studio Code.

Открытие средств разработки путем щелчка правой кнопкой мыши HTML-файла

Этот подход открывает вкладки DevTools в режиме отладки и рекомендуется, если веб-страница не требует запуска на веб-сервере, как в некоторых API.

Чтобы открыть средства разработки и встроенный браузер, а также панель инструментов Отладка ДЛЯ HTML-файла на жестком диске:

  1. В Visual Studio Code выполните одно из следующих действий.

    • Выберите Панель> действий Обозреватель (кнопка Обозреватель) > нажмите кнопку Открыть папку.
    • Выберите Файл>Открыть папку.
    • Выберите Файл>Открыть последние.

  2. Откройте папку, содержащую исходные файлы веб-приложения.

  3. В Visual Studio Code в Обозреватель щелкните файл правой .html кнопкой мыши, выберите Открыть с помощью Edge, а затем выберите Открыть браузер с помощью средств разработки:

    Щелкните правой кнопкой мыши HTML-файл в Обозреватель, чтобы открыть его с помощью Edge с средствами разработки или без него.

    Откроется devTools с Visual Studio Code в режиме отладки:

    Компоненты DevTools при выборе open browser with DevTools

    В Visual Studio Code открыты следующие компоненты:

    • Вкладка Edge DevTools , включая вкладку Элементы и другие вкладки инструментов.
    • Вкладка Edge DevTools: Браузер , включая панель инструментов Эмуляции устройства в нижней части экрана.
    • Панель инструментов Отладка в верхней части, включая такие кнопки, как Пауза, Шаг с обходом, Шаг в начало, Сброс и Остановка.
    • Консоль отладки внизу.
    • Боковая панель Выполнить и Отладка (аналогично выбору просмотреть>выполнение).

При таком подходе экземпляр не указан в списке Целевые>объектыинструментов> Microsoft Edge панели действий.

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

На вкладке Edge DevTools: Browser (Средства разработки для Edge: браузер ) есть панель инструментов эмуляции устройства. Эта вкладка содержит встроенный веб-браузер с функциями DevTools. Этот браузер иногда называют экранной трансляцией или браузером без головы для средств разработки.

См. также:

Открытие средств разработки путем нажатия кнопки Запустить экземпляр

Этот подход открывает вкладки Средства разработки в режиме без отладки и полезен, если вы не хотите использовать панель инструментов Отладка.

При этом предполагается, что изначально папка не открыта в Visual Studio Code, а открываемая launch.json папка не содержит файла.

  1. В Visual Studio Code выполните одно из следующих действий.

    • Выберите Панель> действий Обозреватель (кнопка Обозреватель) > нажмите кнопку Открыть папку.
    • Выберите Файл>Открыть папку.
    • Выберите Файл>Открыть последние.

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

  2. На панели действий нажмите кнопку Инструменты Microsoft Edge (инструменты Microsoft Edge) и нажмите кнопку Запустить экземпляр :

    Расширение Microsoft Edge DevTools для Visual Studio Code

    Если есть кнопка "Запустить проект" , а не кнопка "Запустить экземпляр ", это означает, что папка содержит launch.json файл. Проверьте, какой URL-адрес указан в launch.json файле, и попробуйте щелкнуть Запустить проект, как описано в разделе Открытие инструментов разработки, нажав кнопку Запустить проект. Или, если вы хотите узнать, как работает кнопка Запустить экземпляр , можно удалить launch.json файл и создать новый launch.json файл позже.

    Нажатие кнопки Запуск экземпляра

    • Откроется вкладка Edge DevTools , изначально содержащая сведения о странице Успешное выполнение, например C:\Users\username\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.1\out\startpage\index.html.
    • Откроется вкладка Edge DevTools: Browser (встроенный браузер), на которой изначально отображается страница Успешно .
    • Панель инструментов отладки и пользовательский интерфейс отладки Visual Studio Code не открываются.
    • В области Средства Microsoft Edge откроется раздел Целевые объекты , в котором указан целевой объект, а кнопка Запустить экземпляр будет удалена.

  3. На вкладке Edge DevTools: Browser в адресной строке вставьте путь к файлу или URL-адрес, соответствующий папке, открытой в Visual Studio Code.

    Если вы хотите получить путь к файлу: на панели> действий Visual Studio Code >Обозреватель (кнопка Обозреватель) > щелкните правой кнопкой .html мыши файл >Путь копирования.

    Если вы хотите вставить URL-адрес, ниже приведены примеры:

    • http://localhost:8080
    • http://127.0.0.1:8080
    • http://10.0.1.8:8080

    Аналогичные URL-адреса отображаются в командной строке при вводе (например) npx http-server для локального запуска веб-сервера.

    Указанная веб-страница отображается на вкладке Edge DevTools: Browser (встроенный браузер). На вкладке Edge DevTools отображаются сведения о веб-странице.

См. также:

Открытие средств разработки путем нажатия кнопки Запустить проект

Этот подход открывает вкладки DevTools в режиме отладки и рекомендуется, если веб-страница требует запуска на веб-сервере как с определенными API.

Сводка.

  1. Откройте локальную папку, содержащую исходные файлы веб-приложения.
  2. Нажмите кнопку Создать launch.json .
  3. Добавьте URL-адрес localhost в .json файл.
  4. Нажмите кнопку Запустить проект .

Предполагается, что вы используете веб-сервер localhost, как описано в разделе Шаг 6. Настройка сервера localhost в статье Установка расширения DevTools для Visual Studio Code.

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

Открытие локальной папки, содержащей исходные файлы веб-приложения

  1. В Visual Studio Code выполните одно из следующих действий.

    • Выберите Панель> действий Обозреватель (значок Обозреватель) > нажмите кнопку Открыть папку.
    • Выберите Файл>Открыть папку.
    • Выберите Файл>Открыть последние.

    Выберите каталог, содержащий исходные файлы веб-страницы. Например, C:\Users\username\Documents\GitHub\Demos\demo-to-do\.

  2. На панели действий щелкните Инструменты Microsoft Edge (значок Средства Microsoft Edge). Откроется панель Средства Microsoft Edge .

    • Если папка еще не содержит .vscode каталог, содержащий launch.json file, на боковой панели инструментов Microsoft Edge есть кнопка Запуск экземпляра и кнопка Создать launch.json .

    • Если папка уже содержит .vscode каталог, содержащий launch.json файл, на боковой панели инструментов Microsoft Edge есть кнопка "Запустить проект" , а не кнопка "Создать launch.json ". В этом случае может потребоваться проверить или изменить url строку в существующем launch.json файле, как описано ниже.

Перейдите ниже.

Нажмите кнопку "Создать launch.json"

  1. Нажмите кнопку Создать launch.json :

    Кнопка

    Откроется новый launch.json файл.

Перейдите ниже.

Добавление URL-адреса localhost в файл .json

  1. В нескольких местах файла launch.json на каждой из "url" строк прокрутите страницу вправо и обратите внимание на комментарий : "Укажите URL-адрес проекта, чтобы завершить настройку".

    "url": "c:\\Users\\username\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\index.html", 
// Provide your project's url to finish configuring

    Типичные примеры:

    • http://localhost:8080
    • http://127.0.0.1:8080
    • http://10.0.1.8:8080

    Аналогичные URL-адреса отображаются в командной строке при запуске сервера путем ввода npx http-server.

  2. Вставьте путь внутри строки пути с кавычками в одну из "url" строк. Например:

    "url": "http://localhost:8080", // Provide your project's url to finish configuring

    Строка URL-адреса может быть локальным путем к файлу, хотя в этом случае файл не нуженlaunch.json. Чтобы запустить средства разработки, можно просто щелкнуть файл правой .html кнопкой мыши в Обозреватель Visual Studio Code.

    (Если оставить URL-адрес как есть, отобразится страница успешного выполнения по умолчанию, и вы можете вставить URL-адрес localhost или путь к файлу в адресную строку вкладки Edge DevTools: Browser .)

  3. Скопируйте и вставьте измененную строку URL-адреса в другие места в launch.json файле. Чтобы изменить все экземпляры одновременно, можно скопировать обновленную строку URL-адреса, а затем выбрать экземпляр исходной строки URL-адреса, нажать клавиши CTRL+SHIFT+L , чтобы выбрать все экземпляры, а затем вставить обновленную строку.

  4. Сохраните launch.json файл.

Перейдите ниже.

Нажмите кнопку Запуск проекта

  1. В Visual Studio Code на панели действий нажмите кнопку Средства Microsoft Edge (значок инструментов Microsoft Edge). Откроется панель Средства Microsoft Edge , содержащая кнопку "Запустить проект " (вместо кнопки "Запустить экземпляр "), и больше не содержит кнопку "Создать файл launch.json ".

    Область целевых объектов при наличии файла launch.json

  2. Нажмите кнопку Запустить проект .

    Вкладки Edge DevTools и Edge DevTools: Browser открываются в отдельных панелях, где отображается URL-адрес веб-приложения, указанный в launch.json:

    Демонстрационная версия приложения, запущенная в средствах разработки с помощью кнопки

См. также:

Сопоставление файлов URL-адресов с открытой папкой

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

Если DevTools не удается сопоставить файлы на вкладке Edge DevTools: Browser с файлами в папке, открытой в Обозреватель Visual Studio Code, вы можете просмотреть веб-страницы и изменить их, например изменить значения CSS на вкладке Источники инструмента Элементы на вкладке Средства разработки Edge. В этом случае, однако, вы не можете использовать CSS зеркало редактирования, чтобы средства разработки автоматически изменяли исходные файлы. Варианты:

  • Снимите флажок CSS зеркало редактирования на вкладке Стили и продолжайте экспериментировать с изменениями CSS.

  • Откройте папку, содержащую исходные файлы, соответствующие веб-странице.

  • Предоставьте папке доверие, открыв ее в Visual Studio Code.

Например:

  1. Откройте папку, которая находится в локальной копии репозитория Demos, например , как C:\Users\username\Documents\GitHub\Demos\demo-to-do\описано в разделе Начало работы с расширением DevTools для Visual Studio Code.

  2. Откройте DevTools, как описано выше.

  3. На вкладке Edge DevTools: Браузер в адресной строке вставьте удаленный github.io URL-адрес, например https://microsoftedge.github.io/Demos/demo-to-do/.

    Файлы по указанному адресу фактически находятся в качестве исходных файлов на сайте GitHub по адресу https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do, а не на диске.

    Теперь вы можете изменять значения CSS в инструменте Elements, так как в Обозреватель Visual Studio Code открыта папка, содержащая исходные файлы, которые DevTools может сопоставить с скачанными файлами ресурсов, составляющими веб-страницу:

    Возможность изменять значения CSS, если папка mappable открыта

    На приведенном выше рисунке показано использование вкладки Стили с установленным флажком редактирования CSS зеркало, который используется для увеличения основного текста до 24 пт. Вкладка Edge DevTools: Browser отображает страницу при изменении значения. Адресная строка вкладки содержит URL-адрес, а не путь к файлу. Так как css зеркало флажок редактирования установлен, а соответствующий .css файл находится в локальной папке, доступной для записи, .css файл на локальном диске автоматически изменяется в .24pt;

Предотвращение сообщений об ошибках при зеркальных отображениях или сопоставлении

Затем попробуйте изменить CSS, не открыв соответствующую папку:

  1. Выберите Файл>Закрыть папку.

  2. Запустите Средства разработки, нажав кнопку Запустить экземпляр , как описано выше.

  3. На вкладке Edge DevTools: Браузер в адресной строке вставьте удаленный github.io URL-адрес, например https://microsoftedge.github.io/Demos/demo-to-do/.

    Теперь, когда папка с исходными файлами закрыта, при попытке изменить значения CSS в инструменте Элементы вы получите сообщение об ошибке DevTools. Вы можете просматривать веб-страницы, но не изменять их. Вы можете взаимодействовать со страницей и просматривать ее на разных устройствах и в состояниях отрисовки с помощью панели инструментов эмуляции устройства в нижней части вкладки Edge DevTools: Browser .

    Вы также можете проверить CSS и HTML. Но при попытке изменить страницу вы получите сообщение об ошибке, например Ошибка при зеркальном отображении:

    Обозреватель, если не удается изменить значения CSS, если не открыта сопоставленная папка

    В качестве еще одной точки в этом сценарии ниже приведена боковая панель инструментов Microsoft Edge при нажатии кнопки Запустить экземпляр при просмотре URL-адреса и не открытой папки, содержащей исходные файлы, соответствующие ресурсам веб-страницы URL-адреса:

    Боковая панель инструментов Microsoft Edge при просмотре URL-адреса

В этом случае доступны следующие варианты:

  • Снимите флажок css зеркало редактирование на вкладке Стили и продолжайте экспериментировать с изменениями CSS (без автоматического редактирования CSS в исходных файлах). Это предотвращает дальнейшие сообщения об ошибках при сопоставлении с исходными файлами для редактирования CSS зеркало.

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

  • Предоставьте папке доверие, открыв ее в Visual Studio Code, если DevTools пытается изменить исходный файл, но Visual Studio Code не предоставил доверия содержащейся папке.

См. также:

URL-адреса, пути к файлам и открытие соответствующей папки

В некоторых случаях поведение средств разработки отличается для путей к файлам, чем для URL-адресов.

  • Если ввести путь к файлу в адресной строке браузера DevTools и изменить CSS в DevTools, браузер узнает, где найти исходные файлы. Возможно, вам потребуется открыть эту папку, чтобы предоставить ей доверие, чтобы иметь возможность использовать CSS зеркало редактирования. Или снимите флажок css зеркало редактирования.

  • Если ввести URL-адрес в адресной строке браузера DevTools, браузер знает, где найти скачаемые копии исходных файлов, если вы просматриваете только веб-страницы и экспериментируете с CSS. Если вы хотите использовать CSS зеркало редактирования (чтобы средства разработки редактировали CSS в исходных файлах), необходимо установить флажок редактирования css зеркало и открыть папку в Visual Studio Code, содержащую исходные файлы, соответствующие веб-странице.

Закрытие средств разработки

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

  • Если Visual Studio Code находится в режиме отладки, нажмите кнопку Остановить на панели инструментов Отладка или выберите Запустить>остановить отладку:

    Кнопка

    Вкладки Edge DevTools и Edge DevTools: Браузер закрываются.

  • Если вкладка Edge DevTools открыта, нажмите кнопку Закрыть (x) на вкладке.

  • Если открыта вкладка Edge DevTools: Браузер , нажмите кнопку Закрыть (x) на вкладке.

  • Выберите Панель> действийСредства Microsoft Edge. Если в разделе Целевые объекты перечислены какие-либо целевые объекты, наведите указатель мыши на правую часть целевого экземпляра и нажмите кнопку Закрыть экземпляр (x):

    Закрытие средств разработки при открытии путем нажатия кнопки Запустить экземпляр

    Затем отобразится кнопка Запустить экземпляр или Запустить проект .

  • Выберите Файл>Закрыть папку.

  • Закройте окно Visual Studio Code.

  • Если расширение DevTools открыло внешний браузер, управляемый автоматизацией, закройте окно внешнего браузера.

См. также