Как отлаживать HTML и JavaScript вместе в VSCode (код Visual Studio)?

У меня есть действительно простой проект в VSCode, файл index.html, связанный с одним файлом app.js.

Я хочу запустить и отладить этот мини-сайт, когда я нажму F5.

Как настроить VSCode для открытия index.html в браузере, а затем разрешить мне устанавливать точки останова в app.js, которые будут вызваны моим взаимодействием с приложением в браузере?

В Visual Studio это "просто сработает", потому что он запускает собственный веб-сервер IIS Express. В VSCode я не уверен, как настроить start.json и/или tasks.json для создания простого веб-сервера node.js и обслуживать index.html.

Я видел несколько примеров отладки javascript-приложений, например this.json:

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch Bjarte app",
            "type": "node",
            "program": "app.js",
            "stopOnEntry": true,
            "args": [],
            "cwd": ".",
            "runtimeExecutable": null,
            "runtimeArguments": [],
            "env": {},
            "sourceMaps": false
        },
        {
            "name": "Attach",
            "type": "node",
            "address": "localhost",
            "port": 5858,
            "sourceMaps": false
        }
    ]
}

Это запустит js файл, но я не понимаю, как я могу взаимодействовать с этим приложением.

Ответы

Ответ 1

Теперь можно отлаживать веб-страницы Chrome в vscode через удаленную отладку Chrome с расширением, выпущенным Microsoft. Отладчик для Chrome

Как вы можете видеть на этой странице, есть два режима отладки: "Запуск и присоединение". Мне удалось использовать режим Attach, возможно, потому, что у меня нет сервера. Это расширение имеет все важные инструменты отладки: локальные переменные, точки останова, консоль, стек вызовов.

Еще одна причина для пересмотра vscode заключается в том, что теперь он поддерживает IntelliSense для ECMAScript 6, который отображает методы, невидимые в других решениях "IntelliSense", которые я пробовал, например SublimeCodeIntel или последнюю версию WebStorm.

Ответ 2

Кажется, что я хочу сделать в VSCode (пока?) невозможно. Мое решение на данный момент заключается в использовании Live-сервера пакета node. Установите с помощью

> npm install -g live-server

Затем откройте VSCode, щелкните правой кнопкой мыши любой файл в корневой папке вашего проекта и выберите "Открыть в консоли". Затем введите

> live-server

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

Я должен упомянуть, что мое решение с использованием live-сервера не позволяет мне отлаживать мое приложение в VSCode, а запускать его только в браузере. Я отлаживаю в Chrome.

Ответ 3

VSCode будет использовать node для запуска вашего приложения, что означает, что ваше приложение работает на каком-то порту. Вы можете взаимодействовать с вашим приложением, посетив http://localhost:PORT/ Если вы установите точку останова в app.js, она должна быть удалена, когда вы заходите на свой сайт, работающий локально через node. Вот хорошая демонстрация https://channel9.msdn.com/Blogs/cloud-with-a-silver-lining/hello-visual-studio-code-nodejs

Ответ 4

Как и другие говорили, вы устанавливаете это:

Вы можете использовать https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome.

И если вы используете не localhost, а какой-то HTML и JavaScript, вы можете использовать этот код launch.json.

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch index.html",
        "type": "chrome",
        "request": "launch",
        "file": "${workspaceFolder}/index.html"
    }
]

}

Ответ 5

Вы можете использовать https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

В start.json вам просто нужно указать значение URL сервера, который вы используете, и затем вы можете отлаживать свой html + js с помощью кода визуальной студии редактора.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://127.0.0.1:8081",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Ответ 6

Я не хотел запускать сервер только для некоторого HTML и JavaScript (в отличие от аналогичного примера), эта конфигурация запуска VS Code вместе с расширением "Отладчик для Chrome" сработала на моей машине с Windows 10:

  {
     "version": "0.2.0",
        "configurations": [
            {
                "name": "Launch HTML file",
                "type": "chrome",
                "request": "launch",
                "file": "${file}"
            }
        ]
    }

Ответ 7

Если у вас есть # в пути, например C:\С#\mypage.htm, вы можете использовать FF & ex. fileBasename или аналогичная переменная - не работает в Chrome:

.vscode\launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch HTML file",
            "type": "firefox",
            "request": "launch",
            "file": "C:/C%23/${fileBasename}"
         }
    ]
}

Или простой полный путь, проверенный с помощью node.js:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/${fileBasename}"
        }
    ]
}