Интеграция с отладкой Visual Studio Code
Чтобы открыть Средства разработки в Visual Studio Code в режиме отладки с помощью пользовательского интерфейса DevTools, щелкните правой .html кнопкой мыши файл или нажмите кнопку Запустить проект, как описано в разделе Открытие инструментов разработки и браузера DevTools. Вы также можете использовать пользовательский интерфейс Visual Studio Code для запуска отладчика, например F5, чтобы открыть вкладки DevTools, если вы определяете файл, совместимый с launch.json DevTools, нажав кнопку Создать launch.json на боковой панели инструментов Microsoft Edge.
При открытии средств разработки в Visual Studio Code в режиме отладки открываются следующие компоненты пользовательского интерфейса:
- Вкладка Edge DevTools .
- Вкладка Edge DevTools: Браузер .
- Панель инструментов Отладка.
- Боковая панель запуска (отладчик), включая панель контрольных значений .
- Консоль отладки в нижней части окна.
См. также шаг 5. Пошаговое выполнение кода JavaScript в отладчике в разделе Начало работы, щелкнув правой кнопкой мыши HTML-файл.
Способы запуска отладчика вместе с вкладками DevTools
Для большинства из этих подходов требуется launch.json созданный devTools файл, содержащий ваш URL-адрес.
Функции пользовательского интерфейса DevTools для открытия средств разработки в режиме отладки
- Щелкните правой кнопкой .html мыши файл в Обозреватель>Открыть с помощью Edge. Этот подход по существу использует путь к файлу, а не URL-адрес, и не требует создания launch.json файла.
- Панель > действий Microsoft Edge Tools> нажмите кнопку Запустить проект.
Visual Studio Code функций пользовательского интерфейса для открытия средств разработки в режиме отладки
- Нажмите клавишу F5.
- На панели действий щелкните значок Запуск и отладка (), а затем на боковой панели Запуск и отладка нажмите кнопку Запуск и отладка .
- Откройте палитру команд Visual Studio Code, начните вводить слово debug после >и выберите Отладка: Открыть ссылку. См . команду Open Link в статье Отладка браузера в VS Code.
Открытие браузера в рамках сеанса отладки
Вы можете открыть вкладку Edge DevTools: Browser (встроенный браузер DevTools) в рамках сеанса отладки. Расширение DevTools открывает новый браузер в виде встроенного браузера в Visual Studio Code. Эту вкладку Средства разработки: браузер можно переместить в любое место редактора. Эту вкладку можно использовать параллельно с исходным кодом или разделить области и просмотреть браузер под кодом:
Расширение DevTools можно использовать с обычным Visual Studio Code отладки пользовательского интерфейса или рабочего процесса, как показано ниже. В этом подходе, чтобы перейти в режим отладки, мы не используем пользовательский интерфейс DevTools. Мы не щелкаем файл правой кнопкой .html мыши, чтобы выбрать команду Открыть с помощью Edge, и не нажимаем кнопку Панель > действий Microsoft Edge Tools>Launch Project (Запуск проекта).
Отладка JavaScript встроена в Visual Studio Code. Вы можете выполнять отладку в Chrome, Microsoft Edge или Node.js без установки расширений. При отладке с помощью параметра Microsoft Edge с Visual Studio Code функций отладки и пользовательского интерфейса можно запустить средства разработки Microsoft Edge из отладчика JavaScript. Если расширение DevTools не установлено, вам будет предложено дополнительно установить его.
Расширение DevTools предоставляет дополнительные функции, такие как встроенный браузер DevTools с панелью инструментов эмуляции устройства, а также дополнительные способы входа в режим отладки в Visual Studio Code.
Чтобы запустить отладчик Visual Studio Code вместе с DevTools, используя обычный пользовательский интерфейс, который является частью Visual Studio Code:
- Откройте новое окно Visual Studio Code. Папка (рабочая область) не открыта, а вкладки Средства разработки не открыты.
- Откройте папку (рабочую область). Например, выберите Файл>Открыть последние> C:\Users\username\Documents\GitHub\Demos\demo-to-do . Вкладки Средства разработки не открыты.
- .html Откройте файл.
Щелкните файл в .html редакторе, а затем выполните любые из следующих действий пользовательского интерфейса, которые запускают отладчик Visual Studio Code обычным способом:
- Нажмите клавишу F5.
- На панели действий щелкните значок Запуск и отладка (), а затем на боковой панели Запуск и отладка нажмите кнопку Выполнить и отладку , как показано ниже.
- Откройте палитру команд Visual Studio Code, начните вводить слово debug и выберите Отладка: Открыть ссылку.
Средства Microsoft Edge не отображаются на приведенном выше снимке экрана, так как на этом снимке экрана были удалены средства разработки.
При первом нажатии кнопки Проверить на панели инструментов Отладка откроется боковая панель Расширения: Marketplace , содержащая средства Microsoft Edge для VS Code: 
Создание файла launch.json, ориентированного на средства разработки
Предположим, что открытая папка не содержит папку .vscode , которая уже содержит launch.json файл:
- Выберите Панель > действий Инструменты Microsoft Edge>, нажмите кнопку Создать launch.json и нажмите клавишу F5. Или см. статью Открытие средств разработки и браузера DevTools. После установки расширения DevTools при открытии .html файла и нажатии кнопки Проверить на панели инструментов Отладка вкладки Edge DevTools открываются внутри Visual Studio Code:
На приведенном выше снимке экрана в папке Обозреватель есть launch.json файл, а в .vscode нижней части окна — строка из этого файла: Launch Edge Edge Headless and attach DevTools( в нижней части окна), так как Средства разработки были открыты с помощью функции Visual Studio Code, такой как F5, которая использовала созданный devTools launch.json файл. - При необходимости в левом верхнем углу вкладки Edge DevTools нажмите кнопку Переключить экранную трансляцию :
Откроется вкладка Edge DevTools: Browser ( Браузер ). На приведенном выше снимке экрана в папке нет launch.json файла в Обозреватель .vscode , а также нет строки, например Launch Edge Headless and attach DevTools в нижней части окна, так как DevTools был открыт путем щелчка правой кнопкой мыши .html файла в Обозреватель.
Дополнительные шаги и снимки экрана пользовательского интерфейса см. в разделе Где в пользовательском интерфейсе отображаются строки имен. В большинстве случаев единственное, что нужно знать о содержимом файла, созданного launch.json средствами разработки, — ввести нужный URL-адрес в строке «url» в нескольких местах.
Автоматическое открытие браузера и средств разработки при отладке в Visual Studio Code
Для отладки проекта может потребоваться изменить страницу по умолчанию, которая открывается в Microsoft Edge в Visual Studio Code. Чтобы изменить страницу по умолчанию на веб-сайт проекта, выполните следующие действия:
- В Visual Studio Code выберите Файл>Новое окно. Обратите внимание, что папка не открыта.
- На панели действий выберите Средства Microsoft Edge.
- На панели Инструменты Microsoft Edge: Целевые объекты щелкните ссылку открыть папку .
- Выберите папку проекта с новой страницей по умолчанию, отображаемой при запуске отладки в Visual Studio Code. При первом открытии папки необходимо подтвердить, что вы доверяете авторам файлов в этой папке:
- При необходимости установите флажок Доверять авторам всех файлов в родительской папке, а затем нажмите кнопку Да, я доверяю авторам : При первом выполнении этого процесса необходимо также снова выбрать панель действий >Microsoft Edge Tools . На панели Инструменты Microsoft Edge: Цели теперь отображаются две кнопки: Запустить экземпляр и Создать launch.json:
Создание файла launch.json, ориентированного на средства разработки
- Выберите Создать launch.json , чтобы создать launch.json в проекте. Это должен быть более длинный файл, созданный devTools, как показано в файле launch.json для расширения DevTools, а не короткий, более универсальный файл, созданный Visual Studio Code. См. также статью Удаление или повторное создание файла launch.json в статье Устранение неполадок с расширением DevTools.
- В launch.json добавьте URL-адрес проекта. Если оставить URL-адрес пустым, отобразится страница по умолчанию.
- Сохраните launch.json .
При выборе отладки проекта в Visual Studio Code, независимо от того, используете ли вы функции пользовательского интерфейса DevTools или обычные функции Visual Studio Code пользовательского интерфейса, он автоматически запустит браузер и откроет средства разработчика, отображая URL-адрес, указанный в файле launch.json .
Если вы видите страницу Успешно, но хотите использовать собственную веб-страницу
Какая веб-страница открывается в Средствах разработки, определяется launch.json , существует ли этот файл в рабочей области (открытой папке). Таким образом, вы можете нажать клавишу F5, пока открыт собственный .html файл, но при этом на вкладках Средства разработки отображается страница успешного выполнения по умолчанию. В этом случае возможны следующие варианты:
- Измените launch.json в открытой папке url-адрес (обычно) или, возможно, путь к файлу. Затем можно использовать рабочий процесс или пользовательский интерфейс отладчика Visual Studio Code, например F5.
- Или удалите launch.json , а затем панель > действий Обозреватель щелкните файл >правой> кнопкой мыши .html выберите Открыть с помощью Edge. В этом подходе не используется рабочий процесс или пользовательский интерфейс отладчика Visual Studio Code, например F5.
См. также
- Файл launch.json для расширения DevTools
- Отладка Microsoft Edge в Visual Studio Code
- Расширение Средств разработки Microsoft Edge для Visual Studio Code
- Отладчик Visual Studio Code теперь интегрируется с расширением DevTools в разделе Новые возможности в средствах разработки (Microsoft Edge 93) .
Внешние страницы:
- Запустите конфигурации в статье Отладка для Visual Studio Code.
- Отладка браузера в VS Code
«Параметры», «Текстовый редактор», «HTML (веб-формы)», «Проверка»
Чтобы настроить проверку синтаксиса HTML-разметки в редакторе для текущего файла, перейдите на страницу параметров Проверка. Чтобы открыть эту страницу, выберите в строке меню Инструменты>Параметры и перейдите к разделу Текстовый редактор>HTML (веб-формы)>Проверка.
Проверка
- Использовать тип документа для определения схемы проверки Схема позволяет определить, какие элементы, атрибуты и регистр текста допустимы в выбранной схеме. Кроме того, вы можете определить теги и атрибуты, доступные в IntelliSense. Выберите этот параметр, если вы хотите, чтобы Visual Studio использовало содержимое страницы и html-элемент для определения схемы. Например, если вы выбрали этот параметр, а страница содержит объявление , Visual Studio использует схему HTML5. Но если тег html имеет атрибут xmlns, такой как , в Visual Studio используется схема XHTML5.
- Target when no doctype found (Выбрать целевую схему, если тип документа не найден) Выберите схему, чтобы проверить соответствие, если нет на странице.
- Показать ошибки Установите этот флажок, чтобы включить проверку. Если флажок снят, редактор не будет выделять ошибки при проверке. Остальные флажки позволяют выполнить точную настройку проверки, указав отдельные типы ошибок, которые редактор должен отмечать.
Примечание. Некоторые схемы не предоставляют параметры для пометки отдельных типов ошибок. Например, при выборе XHTML 1.1 в качестве схемы целевого объекта все флажки параметров будут сняты. В этом случае выделяются все типы ошибок.
См. также
Как в visual studio code запустить html
Самый простой способ — открыть папку с файлами через проводник, выбрать необходимый файл, щелкнуть по нему правой кнопкой мыши и выбрать в разделе «Открыть с помощью» VS Code. Далее можно заняться редактированием файла. Вы увидите результат вёрстки в браузере, но это не слишком удобно — при любых изменениях придётся переходить в браузер и обновлять страницу. Можно немного облегчить этот вопрос с помощью установки расширения в VS Code — Live Server . Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях. Для установки расширения нужно в VS Code нажать кнопку которая откроет магазин дополнений, вбить в поиске название — и нажать Install. Другой способ — скачать Live Server из магазина расширений по ссылке выше, но это менее удобно.
После установки расширения и запуска вашего HTML-файла нужно нажать кнопку «Go live», в результате откроется окно браузера с вашей страницей. При попытке изменения файла — будет происходить автоматическое обновление страницы браузера.
Подготовка проекта CSS и HTML с помощью Visual Studio Code
Эта серия мануалов покажет вам, как создать и настроить веб-сайт с помощью CSS, языка таблиц стилей, используемого для управления внешним видом сайтов. Вы можете выполнить все мануалы по порядку, чтобы создать тестовый веб-сайт и познакомиться с CSS, или вразброс использовать описанные здесь методы для оптимизации других проектов CSS.
При написании мы использовали Visual Studio Code, редактор кода, свободно доступный для Mac, Windows или Linux
Примечание: Найти все мануалы этой серии можно по тегу CSS-practice
Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.
В этом мануале вы узнаете, как создать все папки и файлы, необходимые для сборки вашего тестового веб-сайта CSS.
С помощью редактора кода вы создадите каталог проекта, каталог и файл для кода CSS, файл для кода HTML и папку для изображений. В этой серии мануалов используется Visual Studio Code, редактор кода, свободно доступный для Mac, Windows или Linux, но вы можете использовать редактор кода, который вам нравится больше. Обратите внимание: если вы используете другой редактор, вам нужно будет откорректировать некоторые инструкции мануалов.
Создание файлов и папок HTML и CSS
Запустив текстовый редактор, откройте новую папку для нашего проекта и назовите ее css-practice. Мы будем использовать эту папку для хранения всех файлов и папок, созданных в ходе выполнения этой серии мануалов.
Чтобы создать новую папку проекта в редакторе Visual Studio Code, перейдите к пункту File в верхнем меню и выберите Add Folder to Workspace. В новом окне нажмите кнопку New Folder и создайте новую папку по имени css-practice.
Затем создайте новую папку внутри css-practice и назовите ее css. Внутри этой папки откройте новый файл и сохраните его как styles.css – это файл, который вы будете использовать для хранения правил стилей CSS. Если вы используете Visual Studio Code, вы можете создать новую папку, щелкнув правой кнопкой мыши (в Windows) или нажав CTRL+левая кнопка мыши (на Mac) в папке css-practice, затем выберите New File и создайте папку css. Затем кликните правой кнопкой мыши (в Windows) или нажмите CTRL+левая кнопка (в Mac) в папке css, выберите New File и создайте файл styles.css.
Сохраните файл и оставьте его открытым.
Вам также необходимо создать файл для добавления контента HTML – текста, изображений и HTML-элементов, которые будут отображаться в браузере. В каталоге проекта css-practice откройте еще один новый файл и сохраните его как index.html (так же, как вы создали файл styles.css ранее). Обязательно сохраните этот файл index.html в папке css-practice, а не в папке css.
Затем вам нужно добавить в файл index.html строку кода, которая скажет браузеру использовать файл styles.css в качестве таблицы стилей сайта. Для этого вам понадобится HTML-тег и ссылка на файл styles.css. Добавьте следующий фрагмент кода в свой HTML-документ:
Благодаря этому фрагменту кода браузер будет интерпретировать HTML-код в соответствии с таблицей стилей, расположенной в css/styles.css. На протяжении всей этой серии мануалов будьте внимательны, чтобы случайно не удалить эту строку при изменении кода в файле index.html. Сохраните файл index.html и оставьте его открытым.
Теперь создайте дополнительную папку внутри css-practice и назовите ее images. В этой папке вы сохраните все изображения, которые будете использовать при выполнении этой серии мануалов.
Теперь у вас должна быть папка проекта css-practice, содержащая папки и файлы, необходимые для нашего сайта CSS:
- Папка по имени css содержит файл styles.css.
- Пустая папка images.
- Файл index.html
Если вы используете Visual Studio Code, ваш редактор должен теперь отображать следующее дерево файлов:
Обратите внимание, что имена файлов включают расширения (.html и .css), которые указывают на тип их содержимого. В следующих мануалах этой серии мы добавим контент в эти файлы.
Отладка и устранение неполадок CSS и HTML
При работе с HTML и CSS важна точность. Даже лишний пробел или неправильно введенный символ могут помешать вашему коду работать должным образом.
Если ваш код HTML или CSS не отображается в браузере так, как вы ожидаете, убедитесь, что вы написали код в точности так, как показано в мануале. В целом мы рекомендуем вам вводить код в файлы вручную – так он лучше запоминается, но иногда полезно скопировать и вставить его, чтобы убедиться, что в не мнет ошибки.
Ошибки HTML и CSS могут быть вызваны несколькими причинами. Для начала проверьте свои правила разметки и CSS на наличие лишних или недостающих пробелов, неправильно записанных тегов, а также лишних знаков пунктуации или символов. Вам также следует убедиться, что вы случайно не поставили фигурные или книжные кавычки (“ или “), которые часто используются текстовыми редакторами. Фигурные кавычки предназначены для чтения текста человеком и вызовут ошибку в коде, поскольку они не распознаются браузерами как кавычки. Вводя кавычки прямо в редакторе кода, вы можете быть уверены, что используете правильный тип.
Каждый раз, когда вы вносите в код изменения, обязательно сохраняйте файл перед его перезагрузкой в браузере, чтобы проверить результаты.
Краткое примечание по автоматической поддержке HTML
Некоторые редакторы кода (к ним относится и Visual Studio Code который мы используем в этой серии) предоставляют автоматическую поддержку написания HTML. В Visual Studio Code эта поддержка подразумевает умные подсказки и автозавершение кода. Эта функция бывает полезной, но будьте с ней осторожны: если вы не привыкли работать с ней, вы можете сгенерировать дополнительный код, который вызовет ошибки. Если эти подсказки вас отвлекают, вы можете отключить их в настройках редактора кода.
Заключение
Теперь вы готовы приступить к разработке вашего тестового сайта. В следующем мануале мы покажем, как использовать правила CSS для управления стилем и макетом HTML-страниц.