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

Расширение Microsoft Edge DevTools для Visual Studio Code позволяет использовать средства разработчика Microsoft Edge и встроенную версию браузера Microsoft Edge, включая эмуляцию устройства, прямо из Visual Studio Code. Расширение DevTools предоставляет многие из тех же инструментов, которые есть в DevTools в браузере Microsoft Edge, из Visual Studio Code.

Средства разработчика Microsoft Edge и предварительный просмотр браузера в Visual Studio Code

Visual Studio Code — это легкий, но мощный редактор исходного кода для Windows, Linux и macOS. Visual Studio Code - это полноценная интегрированная среда разработки (IDE) с мощными функциями для веб-разработки. Visual Studio Code включает встроенную поддержку JavaScript, TypeScript и Node.js, поэтому это отличный инструмент для веб-разработчиков, особенно с этим расширением DevTools.

Расширение DevTools для Visual Studio Code позволяет:

  • Разрабатывайте веб-страницы и используйте средства разработчика, не выходя из Visual Studio Code. Это расширение предоставляет альтернативу использованию средств разработчика для разработки веб-страниц в окне браузера.

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

  • Протестируйте специальные возможности ваших веб-страниц из Visual Studio Code.

  • Редактируйте CSS и SASS в реальном времени и наблюдайте, как изменения сразу же отражаются в экземпляре браузера при редактировании фактических исходных файлов. Редактирование зеркала CSS позволяет управлять сохранением изменений файла.css. Средства разработчика открывают и редактируют ваши .css файлы, но без их автоматического сохранения. Так что вы можете решать и контролировать, сохранять ли внесенные вами изменения на вкладке "Стили " инструмента "Элементы ".

Сравниваемые подходы

Расширение DevTools для Visual Studio Code — это один из нескольких различных способов использования DevTools для изменения локальных файлов.

Способ Плюсы и минусы Статья
Средство "Элементы средств > разработчика" для браузера > Вам придется вручную копировать изменения из средств разработчика в исходные файлы. Проверка, редактирование и отладка HTML и CSS с помощью средства Elements
Вкладка "Рабочая>область" для определения рабочей области в средствах разработчика > в браузере > Всегда сохраняет изменения, что может помешать экспериментам Выберите локальную рабочую область, чтобы использовать средства разработчика для изменения файлов и сохранения изменений на диске в обзоре средств.
Параметры> средств разработчика > браузера>: эксперименты>Открытие исходных файлов в Visual Studio Code Всегда сохраняет изменения, что может помешать экспериментам Открытие исходных файлов в Visual Studio Code
Расширение Microsoft Edge DevTools для Visual Studio Code Автоматически открывает и редактирует исходный файл CSS, но не сохраняет его автоматически, поэтому вы можете выбрать, сохранять ли изменения. Данная статья.

Двухстороннее редактирование

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

CSS

С помощью редактирования зеркала CSS вы можете изменить CSS на вкладке Edge DevTools, и он автоматически изменится в исходном файле .html.css, а также будет отражен на вкладке Edge DevTools: Браузер. Средства разработчика позволяют вам решить, сохранить ли изменение, что позволяет вам экспериментировать.

Вы можете изменить CSS в исходном файле .css.html , сохранить изменение, а затем перезагрузить веб-страницу в Edge DevTools: вкладка Браузер , которая также обновляет вкладку Edge DevTools .

HTML

Дерево DOM можно изменить на вкладке Edge DevTools (например, изменить <h2>Success!</h2> на <h2>CSS Success!</h2>), затем нажать клавишу ВВОД, а затем обновить вкладку Edge DevTools: Browser, чтобы увидеть изменения. (При этом автоматически не выполняется редактирование .html исходного файла.)

Вы можете изменить HTML в исходном файле .html , сохранить изменение, а затем перезагрузить веб-страницу в Edge DevTools: вкладка Браузер , которая также обновляет вкладку Edge DevTools .

Задачи, поддерживаемые средствами разработчика

Расширение DevTools для Visual Studio Code позволяет:

Задача Статья
Запустите новый экземпляр браузера со средствами разработчика для вашего проекта. Открытие DevTools и браузера DevTools
Эмулируйте разные устройства и просматривайте свой проект в разных режимах отображения. Эмуляция устройства
Просмотр структуры DOM среды выполнения и макета страницы с помощью средства "Элементы ". Открытие исходных файлов с помощью средства "Элементы"
Анализируйте и изменяйте стили CSS вашего проекта с помощью динамического предварительного просмотра и динамических изменений исходных файлов проекта. Обновление файлов .css из средства "Стили" (редактирование CSS зеркало)
Анализ трафика сайта с помощью средства "Сеть ". Интеграция средства сетевого взаимодействия
Войдите в журнал, попробуйте JavaScript и откройте окно или DOM с помощью средства "Консоль ". Интеграция с консолью
Проверка хранилища и служебных сценариев с помощью средства "Приложение ". Интеграция средств приложения
Используйте расширение в рабочем процессе отладки Visual Studio Code. Интеграция с отладкой Visual Studio Code

Обзор средств в расширении DevTools

В расширение DevTools для Visual Studio Code включены следующие инструменты. Следующие статьи не посвящены конкретно расширению DevTools для Visual Studio Code, а относятся к средствам разработчика браузера Microsoft Edge.

Средство Назначение Статья
Средство "Элементы" Проверяйте, редактируйте и отлаживайте свои HTML и CSS. Вы можете редактировать в инструменте, одновременно отображая изменения в браузере в динамическом режиме. Выполняйте отладку HTML с помощью дерева DOM, а также проверяйте CSS для веб-страницы и работайте с ним. Проверка, редактирование и отладка HTML и CSS с помощью средства Elements
Средство "Консоль" Интеллектуальная и полнофункциональная командная строка в средствах разработчика. Отличный сопутствующий инструмент для использования с другими инструментами. Предоставляет эффективный способ написания сценариев, проверки текущей веб-страницы и управления текущей веб-страницей с помощью JavaScript. Обзор консоли
Средство "Сеть" Используйте средство "Сеть ", чтобы убедиться, что ресурсы загружаются или высылаются должным образом. Проверка свойств отдельного ресурса, таких как заголовки HTTP, содержимое или размер. Проверка сетевой активности
Средство "Приложение " Используйте средство "Приложение " для управления хранилищем страниц веб-приложений, включая манифест, служебные сценарии, локальное хранилище, файлы cookie, хранилище кэша и фоновые службы. Средство "Приложение" для управления хранилищем
Средство "Проблемы" Средство "Проблемы" автоматически анализирует текущую веб-страницу, сообщает о проблемах, сгруппированных по типу, и предоставляет документацию, помогающую объяснить и устранить проблемы. Поиск и устранение проблем с помощью средства "Проблемы"
Средство "Состояние сети " Используйте средство " Состояние сети ", чтобы отключить кэш браузера, настроить регулирование сети, задать строку агента пользователя и установить кодировки содержимого, например deflate, gzip и br. Средство "Состояние сети"
Средство блокировки сетевых запросов Используйте средство блокировки сетевых запросов , чтобы проверить блокировку сетевых запросов к указанному шаблону URL-адреса и посмотреть, как ведет себя веб-страница. Средство блокировки сетевых запросов
Средство "Проверка " Используйте средство проверки для просмотра сведений об элементе на отрисованной веб-странице. Когда инструмент проверки активен, вы наводите курсор на элементы на веб-странице, а средства разработчика добавляют наложение сведений и сетку выделения на веб-странице. Анализ страниц с помощью средства "Проверка"
Эмуляция устройства Используйте средство эмуляции устройства, также называемое режимом имитации устройства или режимом устройства, чтобы приблизительно определить, как ваша страница выглядит и как реагирует на нее на мобильном устройстве. Эмуляция мобильных устройств (эмуляция устройств)

Список всех средств, доступных в браузерной версии средств разработчика Microsoft Edge, см. в разделе "О списке средств".

См. также

Внешние страницы:

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