Начало работы с помощью кнопки Запустить экземпляр

Используйте это руководство, чтобы узнать, как открыть и закрыть средства разработки, нажав кнопку Запустить экземпляр , чтобы поэкспериментировать с демонстрационной веб-страницей Успешно . Этот подход открывает для редактирования веб-страницу успешного выполнения по умолчанию, чтобы вы могли попрактиковаться и приступить к работе с средствами разработки. Этот подход отображается в пользовательском интерфейсе и открывает вкладки Средства разработки в режиме без отладки.

Этот способ открытия средств разработки полезен в следующих простых сценариях:

• Если вы хотите поэкспериментировать с редактированием по умолчанию, страница Успешно с помощью средств разработки.

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

• Если у вас нет открытой папки и вы хотите поэкспериментировать с изменением CSS на странице, указанной с помощью URL-адреса, без редактирования локального исходного файла.

Шаг 1. Установка средств разработки и необходимых компонентов

1. Если вы еще этого не сделали, выполните действия, описанные в разделе Установка расширения DevTools для Visual Studio Code, а затем выполните следующие действия. Для этого руководства не требуется устанавливать и запускать веб-сервер, но рекомендуется.

Шаг 2. Нажмите кнопку Запустить экземпляр

1. В Visual Studio Code выберите Файл>Новое окно. Изначально папка не открывается.

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

   

3. Нажмите кнопку Запустить экземпляр . Откроется вкладка Edge DevTools и откроется вкладка Edge DevTools: Browser(Браузер ) со страницей по умолчанию Успешно:

   

   Исходный файл страницы Успешно — это автономный .html файл в каталоге на диске. Это один .html файл, содержащий правила CSS (в элементе <style> ). Он также включает оператор JavaScript console (в элементе <script> ).

   В адресной строке браузера DevTools есть file:/// путь (а не URL-адрес), например file:///C:/Users/username/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/index.html.

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

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

Шаг 3. Откройте папку, чтобы убедиться, что редактирование разрешено

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

Открытие папки позволяет предоставить ей доверие, чтобы при попытке изменить исходные файлы не появляется сообщение об ошибке. В противном случае может появиться сообщение об ошибке, так как папка, содержащая страницу Успешно, не является доверенной, и CSS зеркало редактирования пытается изменить CSS в исходном index.html файле в этой папке.

1. На вкладке Edge DevTools: Браузер в адресной строке выберите и скопируйте путь к файлу, но не имя файла, например C:/Users/username/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/.

2. На панели> действий Обозреватель нажмите кнопку Открыть папку. В диалоговом окне Открытие папки вставьте или выберите путь, скопированный выше. Чтобы вставить, в Windows может потребоваться изменить / на на \ по всему пути. Затем нажмите кнопку Выбрать папку .

   При первом открытии папки необходимо подтвердить, что вы доверяете авторам файлов в этой папке:

   

3. Нажмите кнопку Да, я доверяю авторам .

   Возможно, вам потребуется снова запустить Средства разработки, как показано ниже.

1. На панели действий щелкните Средства Microsoft Edge ( Откроется боковая панель инструментов Microsoft Edge .

2. Нажмите кнопку Запустить экземпляр . Откроется вкладка Edge DevTools , а затем откроется вкладка Edge DevTools: Browser(Браузер ) со страницей по умолчанию Успешно.

Шаг 4. Изменение CSS

1. На вкладке Edge DevTools нажмите кнопку Выбрать элемент на странице, чтобы проверить его (), иногда называемую кнопкой Проверить .

2. На вкладке Edge DevTools: Browser наведите указатель мыши на различные части страницы, пока вы наблюдаете за развертыванием и обновлением дерева DOM инструмента Elements .

3. Щелкните заголовок Успешно! , который является элементом <h2> .

4. На вкладке Стили инструмента Элементы на вкладке Edge DevTools в разделе объявления h2, отличном от курсивного, щелкните справа от margin-bottom правила.

5. Введите новое правило CSS и font-size: 5emнажмите клавишу ВВОД. Орфография аналогична правилу, приведенному в разделе h2 курсивом таблицы стилей агента пользователя под ним.

   index.htmlоткрывается, автоматически редактируется CSS зеркало редактирования, чтобы добавить строку font-size: 5em;. Прокрутите страницу до этой строки в разделе h2.

Шаг 5. Упорядочивание вкладок

1. На вкладке Edge DevTools в разделе h2, отличном от курсивов, щелкните font-size введенное правило CSS, а затем нажмите клавиши СТРЕЛКА ВВЕРХ и СТРЕЛКА ВНИЗ. Значение в index.html автоматически редактируется с помощью CSS зеркало редактирования.

2. На вкладке Edge DevTools несколько раз нажмите кнопку Переключить экранную трансляцию . Откроется и закрывается вкладка Edge DevTools: Browser (Средства разработки для Edge: браузер ), что экономит место.

3. На вкладке Edge DevTools: Browser нажмите кнопку Закрыть средства разработки или Открыть средства разработки несколько раз. Другая вкладка DevTools открывается и закрывается, что экономит место.

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

   • Боковая панель сцелевыми объектамисредств> Microsoft Edge.
   • Редактор index.html .
   • Вкладка Средства разработки для Edge .
   • Вкладка Edge DevTools: Браузер .

   

Шаг 6. Просмотр JavaScript

1. На вкладке Средства разработки Для Edge щелкните вкладку консольного инструмента. index.html содержит <script> элемент, содержащий оператор console.info('Hello from the startpage!')JavaScript , который выводит сообщение "Hello from the startpage!"

Шаг 7. Открытие другого файла .html с помощью адресной строки

Введя путь к файлу в адресной строке вкладки Edge DevTools: Browser , можно также использовать кнопку Запустить экземпляр , чтобы открыть другой .html файл вместо страницы Успешно. Мы продемонстрируем это ниже. Однако щелчок правой кнопкой .html мыши файла в Обозреватель — это основной способ открыть файл, отличный .html от веб-страницы Успешно, а средства открыть в режиме отладки.

1. В Visual Studio Code выберите Файл>Открыть папку (или Открыть последние). Откройте папку \Demos\demo-to-do\ клонированного репозитория Demos, например C:\Users\username\Documents\GitHub\Demos\demo-to-do\.

2. При появлении запроса нажмите кнопку Да, я доверяю авторам . Помимо предоставления доверия, метод запуска экземпляра фактически не требует открытия папки, если указать путь к файлу, а не URL-адрес в браузере DevTools.

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

   

4. На панели действий выберите Обозреватель, а затем щелкните правой кнопкой мыши \demo-to-do\index.html>Путь копирования.

5. В Visual Studio Code на вкладке Edge DevTools: Browser в адресной строке вставьте полученный выше локальный путь к файлу, например C:\Users\username\Documents\GitHub\Demos\demo-to-do\index.html. Откроется демонстрационная версия приложения. В адресной строке file:/// добавляется префикс и (в Windows) обратная косая черта изменяется на косую черту, например file:///C:/Users/username/Documents/GitHub/Demos/demo-to-do/index.html.

6. В демонстрационном приложении введите задачу, например тест.

7. В инструменте Элементы на вкладке Стили измените значение CSS, например: щелкните размер точки в body { font-size: 11pt;} , а затем измените значение. Откроется соответствующий .css файл в открытой папке, и он автоматически изменяется в соответствии с изменениями, внесенными на вкладке Стили (но не сохраняется).

Шаг 8. Открытие URL-адреса с помощью адресной строки

Адресная строка, полученная при нажатии кнопки Запустить экземпляр, может использоваться для открытия URL-адреса на сервере. Однако кнопка Запустить проект вместе с URL-адресом, хранящимся в launch.json, является основным способом открытия веб-страницы путем указания URL-адреса, а затем средства открываются в режиме отладки.

1. Если сервер localhost работает, вставьте URL-адрес localhost, например http://localhost:8080. Или вставьте URL-адрес сервера github.io . https://microsoftedge.github.io/Demos/demo-to-do/

   Если вы хотите использовать css зеркало редактирования для редактирования исходных файлов, необходимо открыть папку в Visual Studio Code. В противном случае снимите флажок редактирование CSS зеркало на вкладке Стили в инструменте Элементы на вкладке Edge DevTools. При снятии флажка сообщения об ошибках о сопоставлении и зеркало редактирование при эксперименте с изменением CSS в Средствах разработки и не предоставили исходный файл CSS для средств разработки.

2. В демонстрационном приложении введите задачу, например тест.

3. В инструменте Элементы на вкладке Стили измените значение CSS, например: щелкните размер точки в body { font-size: 11pt;} , а затем измените значение. Откроется соответствующий .css файл в открытой папке, и он автоматически изменяется в соответствии с изменениями, внесенными на вкладке Стили (но не сохраняется).

Шаг 9. Закрытие средств разработки

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

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

   

   Обратите внимание, что на приведенном выше снимке экрана Visual Studio Code не находится в режиме отладки. Например, нет панели инструментов отладки. Если есть панель инструментов Отладка, можно закрыть Средства разработки, нажав кнопку Остановить .

3. Закрыть index.html без сохранения изменений.

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

См. также:

• Закрытие средств разработки в открывании средств разработки и в браузере DevTools.

Вы завершили работу с руководством "Начало работы с помощью кнопки Запустить экземпляр". Рекомендуется также выполнить другие руководства. См. статью Начало работы с расширением DevTools для Visual Studio Code.

См. также

• Открытие средств разработки и браузера DevTools
• Расширение Средств разработки Microsoft Edge для Visual Studio Code

Github:

• demo-to-do — демонстрационного веб-приложения, работающего на сервере github.io .
• Исходный код для демонстрации
• Репозиторий MicrosoftEdge и Demos .