отладка html+js в Visual Studio Code. брейк-поинты

[Герасим]

Здравствуйте!
как совсем начинающий я пишу html+js в качестве IDE использую Notepad++ (есть подсветка синтаксиса)
Так же, я экспериментирую с Node.js но как IDE использую Visual Studio Code (VSC). Из VSC я могу запустить на отладку node проект, и вопросов тут не возникает.

VSC всем хороша, а подсветка, и автодополнение кода, но как отладить, например, js скрипты в index.html файле?
Сейчас я это делаю по F12 в Chrom.
VSC Есть возможность отладки через Debuger from Chrome. Я установил этот плагин, в launch.json настроил абсолютный путь до моего файлика
"url": "http://localhost:8020/dragdrop/r000/index1.html",
Результат:
1) Chrom запустился
2) вывод в консоль работает
3) VSC показал строку с ошибкой в JS.

Но остались вопросы, наверняка связанные с инфой в launch.json :
1) не могу в VSC ставить брейк-поинты - они не ставятся
2) каждый раз писать в launch.json пути (вроде "http://localhost:8020/dragdrop/r000/index1.html") до запускаемого html затруднительно и чревато ошибками. Как автоматизировать? типа url:html_файл_выбранный_в_VSC
Такие у меня вопросы для начала.

[Герасим]

Сложно назвать Chrome DevTools (F12) нормальным отладчиком, там элементарно даже события на нужном элементе так просто не посмотреть, имхо хром слился в этом плане уже, нода только его и спасает, странно что здесь в Учебнике это до сих не исправили, вводят новичков в заблуждение.

Без него было бы вообще тоскливо.
Конкретизирую вопрос.
Отладчик настраивается через launch.json, и вот его содержимое:

// Используйте IntelliSense, чтобы узнать о возможных атрибутах.
    // Наведите указатель мыши, чтобы просмотреть описания существующих атрибутов.
    // Для получения дополнительной информации посетите: [url]https://go.microsoft.com/fwlink/?linkid=830387[/url]
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:8020/dragdrop/r000/index1.html",
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8020/dragdrop/r000/index1.html",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

начнём с установки брейк-поинтов, что надо тут прописать чтобы они в VSC проставлялись?

[Rise]

Герасим,
Попробовал данный редактор, на первый взгляд довольно шустрый и дружелюбный, Microsoft порадовали, плюсую, просто в свое время пробовал подобные редакторы сперва Atom от GitHub, который был какой-то тяжелый и тормозной (тема еще была), потом Brackets от Adobe, тот тоже притормаживал еще и обновления криво ставил, не знаю как сейчас у них дела обстоят, но первое впечатление было испорчено. По теме:

как отладить, например, js скрипты в index.html файле?

По умолчанию брейкпойнты разрешены в js файлах, для разрешения в любых файлах есть опция в параметрах редактора: "debug.allowBreakpointsEverywhere": true

Как автоматизировать? типа url:html_файл_выбранный_в_VSC

Относительно ${workspaceRoot} есть переменная ${relativeFile} текущий открытый файл (отсюда), launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:8020/${relativeFile}",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

[Герасим]

Премного благодарен! Добавил Вам кармы ;-)
с относительным путём не получилось только, так как не директория используется а localhost но это не проблема.