"Непроверенная точка останова" в коде Visual Studio с расширением Chrome Debugger

Ответ 1

Наконец я узнал, что случилось:

Когда я прочитал определение "$ {workspaceFolder}", в нем указано следующее:

путь к папке, открытый в VS Code

Виноват:

Мой путь в Windows к моему проекту был следующим: C:\Users\myusername\Documents\VSCode\Source\ProjectName

С помощью кода Visual Studio у меня была папка " Source ", и мне всегда нужно было сделать команду change directory (cd ProjectName) в Integrated Terminal на "ProjectName". Это приведет к .vscode folder and launch.json file в папке " Source ", а не папке " ProjectName ".

Вышеприведенная ошибка приводит к тому, что ${workspaceFolder} указывает на папку Source, где не были угловые компоненты, вместо указания на папку ProjectName.

Исправление:

В коде Visual Studio откройте папку: C:\Users\myusername\Documents\VSCode\Source\ProjectName и настройте мой launch.json в этом каталоге.

Ответ 2

Мое решение проблемы "Непроверенная точка останова".

Среда

• Угловой CLI 8.1.1
• Visual Studio Code 1.36.1
• Отладчик для расширения Chrome 4.11.6

По умолчанию .vscode/launch.json, созданный в VSC с помощью параметра "Добавить конфигурацию", будет выглядеть примерно так (я изменил порт с 8080 на 4200).

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}"
  }]
}

Добавление элемента ниже решает мою проблему с "Непроверенная точка останова".

"sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }

Полный и рабочий .vscode/launch.json:

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}",
    "sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }
  }]
}

Есть несколько дополнительных пунктов, которые можно добавить:

 "breakOnLoad": true,
 "sourceMaps": true,

Однако в моем случае они мне не понадобились для решения проблемы.

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}",
    "breakOnLoad": true,
    "sourceMaps": true,
    "sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }
  }]
}

Ответ 3

Приведенный выше ответ, вероятно, решит много проблем, но не решил мою. Моя была намного проще и более раздражающей проблемой...

Параметры конфигурации в файле launch.json чувствительны к регистру.

Моя запись "webRoot" была написана правильно, но у меня была заглавная буква B в одном из слов вместо строчной буквы b.

Например:

"webRoot": "$ {workspaceFolder}/My. F старше"

не будет соответствовать папке в вашем рабочем пространстве с именем:

Мои. ф старше

Я надеюсь, что это помогает кому-то там.

Ответ 4

В моем случае я должен был определить значение sourceMapPathOverrides следующим образом:

Файл launch.json (содержится в папке .vscode):

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "smartStep": true,
      "internalConsoleOptions": "openOnSessionStart",
      "sourceMapPathOverrides": {
        "webpack:///*": "${webRoot}/project/app/*"
      }
    }
  ]
}

Мой источник находится в ${workspaceFolder}/project/app.

Ответ 5

Есть много правильных ответов. В моем случае комбинация всех этих ответов помогла, и мне потребовалось много времени, чтобы понять это. Я надеюсь, что смогу сэкономить вам время головной боли с этим, так

позвольте мне резюмировать это шаг за шагом со ссылкой на ответы выше, что помогло мне:

1. Важно запустить код VS из правильной папки (см. Ответы от CodeChimp и monstertjie_za).
   Откройте окно консоли и cd в папку проекта.
   Пример:
   cd myProject
code.
2. Убедитесь, что вы настраиваете файлы в правильной папке .vscode.
   .vscode папка .vscode - это подкаталог вашей папки проекта.
   Примечание: если вы уже по ошибке открыли код VS слишком глубоко на уровне подпапок, например, в папке src, то там вы найдете папку .vscode (как это было в моем случае), содержащую файлы конфигурации, которые бесполезны для отладки.

3. Настройте конфигурацию отладки в .vscode\launch.json.
   Убедитесь, что вы указали правильный порт для своего приложения, в моем случае с портом 4200 все в порядке.
   Также убедитесь, что параметр "webRoot" настроен правильно (см. Ответ Стига Переса). В моем случае необходимо было добавить в него подпапку. Чтобы узнать, каков путь, указанный в переменной $(workspaceFolder), ознакомьтесь с вопросом, который я задал в StackOverflow о том, как отображать значения переменных кода VS.
   Примечание. Если такой конфигурации еще нет, выполните следующие действия, чтобы добавить ее: Перейдите к расширению отладки (т.е. Нажмите на боковой панели). В раскрывающемся списке вашего отладчика выберите "Добавить конфигурацию...", затем нажмите синюю кнопку "Добавить конфигурацию". Выберите "Launch Chrome" в качестве конфигурации, которая будет добавлена.
   Пример конфигурации (launch.json):

   "configurations": [
           {
                   "type": "chrome",
                   "request": "launch",
                   "name": "Launch Chrome",
                   "url": "http://localhost:4200",
                   "webRoot": "${workspaceFolder}/projectsubfolder"
           }]
   

   Замените подпапку projectsubfolder той подпапкой, которая может быть в вашем проекте. Обратите внимание, что это чувствительно к регистру (см. Ответ от Майкла Уолша).

4. Теперь установите точки останова в вашем приложении.

5. Чтобы запустить приложение с помощью отладчика, откройте окно терминала внутри кода VS, введите
   cd projectsubfolder
npm install & ng serve
   Это обеспечивает разрешение и загрузку зависимых пакетов до компиляции вашего приложения. Подождите, пока компиляция не закончится.
   Затем нажмите на зеленый треугольник в отладчике VS, который запустит окно Chrome с подключенным отладчиком.
   Примечание: вам не нужно запускать npm install каждый раз, только когда изменились пакеты/зависимости. В большинстве случаев достаточно выполнить ng serve для повторной компиляции и запуска вашего кода.

Ответ 6

У меня есть структура папок, как показано ниже, и я открыл проект zero в VS Code.

нуля/

Затем запустите .json

  "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}/angular"
        }
    ]

Ответ 7

Я также столкнулся с проблемой после переименования папки проекта, и оказалось, что свойство "webRoot" указывало на "$ {workspaceFolder}/src" вместо "$ {workspaceFolder}". Возможно, это было удобно в рамках обновления для расширения "Отладчик для Chrome", но поскольку я не получил обновления, я не могу это проверить.

Обновление "webRoot", перезапуск сеанса ng serve и начало нового сеанса отладки сделали трюк. Надеюсь, это поможет кому-то с похожим scenerio.

Ответ 8

Unverified breakpoint

Я нашел 3 причины этой проблемы:

1. Автоматически сгенерированный URL-адрес конфигурации launch.json был неверным. Убедитесь, что номер порта совпадает с портом localhost, на котором работает ваше веб-приложение. Я изменил свой на 3000, чтобы решить ошибку:

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

2. Мне нужно было установить правильную папку рабочего пространства.

3. Мне нужно было запустить свое веб-приложение с npm start перед отладкой.

Ответ 9

Если вы используете разделение кода через webpack, ваша точка останова не будет "проверена", пока Chrome не загрузит этот модуль (т.е. Обычно, когда вы переходите к той части приложения)

Ответ 10

Моя проблема заключалась в том, что сопоставление источника не было настроено должным образом. Убедитесь, что ваши фактические источники TS видны на вкладке "Источники" в расширениях отладки Chrome, и попробуйте сначала установить точки останова там. Может быть, это кому-то поможет.

Ответ 11

Для меня мои контрольные точки были отключены:

Ответ 12

В моем случае у меня был файл main.js в корне проекта для запуска в качестве электронного приложения. Если этот файл main.js был удален, проблема была решена.

Ответ 13

Проведя 3 драгоценных часа своей жизни и пройдя через многие из перечисленных выше ответов, моя проблема была такой же простой, как отсутствие следующей строки в моем php.ini:

xdebug.remote_autostart = 1

До этого я уже настроил XDebug на своем XAMPP, но мои контрольные точки просто не пострадали. Просто мой сервер отладки не был настроен на автоматический запуск.

Надеюсь, это спасет кого-то день.

Ответ 14

Мне пришлось удалить папку .vscode и восстановить ее. и также папка указывала на неправильный путь, мне пришлось изменить его обратно на путь к папке моего текущего проекта. Спасибо

Ответ 15

В нашем случае эта ошибка произошла из-за символической ссылки Windows, в которой папка с исходным кодом была доступна на двух локальных дисках. Открыл папку с vscode из исходной папки, теперь отладка работает хорошо.

Ответ 16

В моем случае проблема заключалась в том, что точка останова была установлена на строке, где была объявлена функция

openDetails(data: Asset) {         <-- The break point was here
    this.datailsOpen = true;
    this.currentAsset = data;
}

Решение: переместите его внутрь тела функции

openDetails(data: Asset) {         
    this.datailsOpen = true;        <-- Move the break point here
    this.currentAsset = data;
}

Ответ 17

Решение простое:

1. Нажмите File-> Открыть Folder-> (выберите папку вашего проекта - папка, содержащая package.json)
2. Откройте debug-> нажмите кнопку воспроизведения, чтобы создать новую конфигурацию Chrome.
3. Установите новую точку останова!
4. Наслаждайтесь!

Ответ 18

Если все выглядит правильно, но точка останова все еще не достигнута, мне нужно было указать точное имя файла, которое будет обслуживаться. Например, на NodeJS, Express, просто указав localhost:3000, не остановится на моих точках останова, но указав localhost:3000/index.html сработал как ожидалось

Полная конфигурация:

Моя папка открывается в VSCode: learningPixi с полным расположением папки (Ubuntu Linux): /home/leigh/node/pixi-tut/learningPixi

Моя структура папок:

/home/leigh/node/pixi-tut/learningPixi/.vscode/launch.json/home/leigh/node/pixi-tut/learningPixi/public/index.html/home/leigh/node/pixi-tut/learningPixi/server.js

Содержимое моего файла launch.json:

{  
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000/index.html",
      "webRoot": ${workspaceFolder}/public",
      "skipFiles": ["pixi.min.js"]
    }
  ]
}

"skipFiles" также был очень полезен, иначе отладчик шагает в каждый вызов функции

Моя (очень простая) конфигурация экспресс-сервера только для отладки JavaScript в статических файлах была такой:

const express = require('express');
const path = require('path');

const app = express();
app.use(express.static(path.join(__dirname, '/public')));
app.listen(3000, () => console.log('App started on port 3000'));

И в соответствии с приведенной выше структурой папок убедитесь, что index.html находится в папке /public.

При отладке JavaScript из файла HTML вам также может понадобиться перейти к настройкам в VSCode и включить: Разрешить точки останова везде

Ответ 19

Я получал эту ошибку просто потому, что у меня не было "sourceMaps": true в моей конфигурации отладки.

Ответ 20

npm i исправил это со своей стороны. Я иногда получаю непроверенные контрольные точки при создании новой папки/файла, и это обычно происходит.

Ответ 21

Решением для меня было добавить в файл launch.json следующую строку: "requireExactSource": false. После этого перезапустите VSC и попробуйте, если он работает.

Ответ 22

Я открыл в VS code папку my-app, где находились папка клиента и папка сервера. Мне пришлось изменить в launch.json из этого

"webRoot": "${workspaceFolder}"

к этому

"webRoot": "${workspaceFolder}\\client"

Ответ 23

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

Если вы хотите установить точки останова в коде, который является частью лениво загруженного модуля, и вы не загрузили этот модуль в браузер, код VS не будет иметь доступа к исходным картам для проверки точек останова!

поэтому устанавливайте точки останова только тогда, когда вы загрузите ленивый загруженный модуль, который хотите отлаживать!

Ответ 24

React Native: если вы работаете с несколькими ветвями, убедитесь, что код, который вы открыли в коде Visual Studio, является той ветвью, в которой работает Metro Bundler.