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

Я наконец выяснил, в чем дело:

Когда я читаю определение «$ {workspaceFolder}», оно гласит следующее:

the path of the folder opened in VS Code

Моя ошибка:

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

Через Visual Studio Code у меня была открыта папка Source, и мне всегда приходилось выполнять команду изменения каталога (cd ProjectName) в Integrated Terminal на «ProjectName». Это привело к созданию .vscode folder and launch.json file в папке Source, а не в папке ProjectName.

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

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

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

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

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

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

Например:

"webRoot": "${workspaceFolder}/My.Folder"

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

My.folder

Надеюсь, это кому-то поможет.

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

Обновление «webRoot», перезапуск сеанса ng serve и запуск нового сеанса отладки сделали свое дело. Надеюсь, это поможет кому-то с подобным сценарием.

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

В моем случае мне пришлось определить значение 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.

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

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

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

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

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

Для меня были отключены точки останова:

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

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;
}

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

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

Если все выглядит правильно, но точка останова все еще не достигнута, мне нужно было внести изменения, чтобы указать точное имя файла, которое будет обслуживаться. Например, на 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.info('App started on port 3000'));

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

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

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

нуль/

Тогда launch.json

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

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

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

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

xdebug.remote_autostart = 1

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

Надеюсь, это спасет чей-то день.

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 перед отладкой.

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

Очередное обновление для @ angular / cli 9.1.7 28.05.2020 ...

Теперь это моя рабочая конфигурация для @ angular / cli 9.1.7. Удаление sourceMapPathOverrides

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

{
  // 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:21460",
    "webRoot": "${workspaceFolder}"
  }]
}

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

Среда

• Угловой CLI 8.1.1
• Код Visual Studio 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}/*"
    }
  }]
}

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

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

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

"webRoot": "${workspaceFolder}"

к этому

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

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

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

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

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

Я пришел сюда, когда использовал флаттер и дротик. Я не знаю, но удаление launch.json в папке .vscode решило мою проблему

Для меня непроверенная точка останова была вызвана тем, что отладчик работал, когда я пытался установить точку останова. Чтобы решить эту проблему, я просто выключил отладчик, установил нормальную точку останова и перезапустил отладчик.