Отладка отдельного файла JavaScript с помощью кода VS

Question

У меня есть отдельный фрагмент кода JS, который делает HTTP-запрос и выполняет над ним некоторую работу.Теперь обычно я отлаживаю такие скрипты, запуская их в repl.it, а затем console.log с данными.Тем не менее, VS Code имеет аккуратную боковую панель с «Переменными», «Watch», «Call stack», которые я хотел бы использовать.

Я использовал расширение «Отладчик для Chrome» из VS Marketplace.Однако каждый раз, когда я нажимаю F5, браузер Chrome открывается и пытается подключиться к локальному узлу, который не нужен моему JS-коду.Это мой launch.json файл (сгенерированный по умолчанию):

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "/FolderName"
        }
    ]
}

Я ожидаю, что мой код JS должен работать внутри кода VS, а стек вызовов и переменные моего кода должны отображатьсяв левой боковой панели.

Итак, как решить эту задачу?

---

Пример: Следующий скрипт представляет то, что мой скрипт выполняет в определенной степени:

var xhttp = new XMLHttpRequest();
xhttp.open("GET", "https://some.website.org/numbers/", true);
xhttp.setRequestHeader("Content-type", "text/plain");
xhttp.send();

xhttp.onload = function (e) {
    var numbers = JSON.parse(e.srcElement.response));
    add(numbers);
};

function add(numbers){
    console.log(numbers);
}

Это, конечно, сложнее, но суть та же: сделать один вызов API и выполнить некоторые манипуляции с полученными данными.

Answer 1

Можете ли вы попытаться открыть страницу HTML с вашим сценарием в Chrome, а затем использовать функцию «Присоединить» отладчика для Chrome?

В качестве примера настройки запуска можно указать https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome, где вы можетеукажите файл:

{
    "version": "0.1.0",
    "configurations": [         
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceFolder}/index.html"
        },
    ]
}