Начало работы, щелкнув правой кнопкой мыши HTML-файл

  • Статья

Используйте это руководство, чтобы узнать, как открыть и закрыть Средства разработки, щелкнув правой .html кнопкой мыши файл demo To Do в Обозреватель Visual Studio Code, не запуская веб-сервер.

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

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

Шаг 2. Запустите средства разработки, щелкнув правой кнопкой мыши HTML-файл

Щелкнуть файл правой кнопкой .html мыши в Обозреватель Visual Studio Code — это main способ открыть средства разработки, если веб-страница не требует запуска на веб-сервере.

  • В отличие от кнопки Запустить экземпляр , этот подход открывает средства разработки в режиме отладки.

  • В отличие от кнопки Запустить проект , которую мы будем использовать позже, этот подход не требует создания launch.json файла.

Мы продемонстрируем, открыв демонстрационное веб-приложение :

  1. В Visual Studio Code выберите Файл>Открыть папку.

  2. Перейдите в каталог, в который вы клонировали репозиторий Demos, откройте конкретный каталог для приложения demo-to-do , например C:\Users\username\Documents\GitHub\Demos\demo-to-do\, и нажмите кнопку Выбрать папку :

    Открыть папку: демонстрационная версия

  3. Выберите Панель> действий Обозреватель (значок Обозреватель) > правой кнопкой мышиindex.html, а затем выберите Открыть в браузере Edge>Открыть с помощью средств разработки:

    Щелкните правой кнопкой мыши > Открыть браузер с помощью средств разработки

    • Откроется вкладка Edge DevTools .

    • Откроется вкладка Edge DevTools: Browser (Средства разработки edge: браузер ), на ней отобразится веб-страница, щелкнув ее правой кнопкой мыши.

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

    Две вкладки Edge DevTools и панель инструментов Отладка

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

Чтобы сэкономить место, используйте кнопку Закрыть средства разработки или Открыть средства разработки и кнопку Переключить экранную трансляцию , чтобы переключить (открыть или закрыть) вкладки DevTools.

  1. В левом верхнем углу вкладки Edge DevTools нажмите кнопку Переключить экранную трансляцию :

    Кнопка

    Вкладка Edge DevTools: Browser (Инструменты разработки для Edge: браузер ) закрывается.

  2. На вкладке Edge DevTools снова нажмите кнопку Переключить экранную трансляцию .

    Откроется вкладка Edge DevTools: Browser ( Браузер ).

  3. В правом верхнем углу вкладки Edge DevTools: Браузер нажмите кнопку Закрыть средства разработки :

    Кнопка

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

  5. Перетащите вкладку Edge DevTools: Browser, чтобы закрепить ее в любом месте Visual Studio Code, например группировать с помощью редактора исходного кода.

Шаг 4. Изменение CSS в средствах разработки, автоматическое обновление файла .css

На вкладке Edge DevTools на вкладке Стили инструмента >Элементы можно изменять селекторы CSS, правила и значения. Флажок css зеркало редактирования установлен по умолчанию, поэтому .css файл автоматически редактируется, но изменения не сохраняются, поэтому вы можете решить, следует ли сохранять изменения.

  1. В инструменте Элементы на вкладке Стили щелкните значение CSS, например размер шрифта текста.

  2. Измените значение CSS, например с помощью колесика мыши или нажатия клавиш СТРЕЛКА ВВЕРХ и СТРЕЛКА ВНИЗ. Откроется связанный .css файл, например to-do-styles.css и прокручивается до строки, определяющей значение CSS, и автоматически изменяет .css файл, но не сохраняет изменения:

    Редактирование зеркало CSS

  3. .css Закройте файл. Visual Studio Code выводится запрос на сохранение изменений.

  4. Нажмите кнопку Не сохранять .

Шаг 5. Пошаговое выполнение кода JavaScript в отладчике

  1. Выберите панель действий> Обозреватель (значок Обозреватель на панели действий).

  2. В каталоге demo-to-do щелкните to-do.js , чтобы открыть его. Прокрутите changeTask вниз до функции и щелкните влево от номера строки, чтобы задать точку останова:

    Отладка демонстрационного приложения

  3. Если боковая панель Выполнения и отладки не отображается, выберите Просмотреть>выполнение. Боковая панель запуска и отладки содержит панель контрольных значений и другие панели отладчика.

  4. В демонстрационном приложении, отображаемом на вкладке Edge DevTools: Browser , введите задачу, например тест. Отладчик Visual Studio Code приостанавливает работу в точке останова to-do.js в файле:

    Пошаговое выполнение JavaScript в демонстрационном приложении

  5. На панели инструментов Отладка или с помощью меню Выполнить или нажатием клавиш выполните несколько строк кода в to-do.js.

  6. В демонстрационном приложении, отображаемом на вкладке Edge DevTools: Browser , щелкните кружок "Готово" рядом с тестовой задачей. Отладчик Visual Studio Code приостанавливается в точке останова to-do.js в файле.

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

Чтобы завершить отладку и закрыть вкладки Edge DevTools :

  1. На панели инструментов Отладка нажмите кнопку Остановить (SHIFT+F5). Или в меню Выполнить выберите Остановить отладку:

    Кнопка

    Вкладка Edge DevTools закрывается, а вкладка Edge DevTools: Browser (Средства разработки для Edge: браузер ) закроется.

См. также:

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

См. также

Github: