«Неперевірена точка зупинки» у Visual Studio Code з розширенням Chrome Debugger


76

Я намагаюся налагодити свій код Typescript у Visual Studio Code, використовуючи розширення Chrome Debugger, але я отримую повідомлення "Неперевірена точка зупинки" на мою точку зупинки, і виконання не зупиняється на моїй точці зупинки.

Ось мій файл launch.json:

{
    linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Версія програми:

  • Код Visual Studio: 1.25.1
  • Хром: 67.0.3396.99

Будь-які інші пропозиції щодо того, як я можу вирішити цю проблему?

Відповіді:


56

Я нарешті з'ясував, що не так:

Коли я читаю визначення '$ {workspaceFolder}', воно говорить наступне:

шлях до папки, відкритої у VS Code

Моя помилка:

Мій шлях до Windows до мого проекту був таким: C:\Users\myusername\Documents\VSCode\Source\ProjectName

За допомогою коду Visual Studio у мене була 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в цьому каталозі.


25
Я читаю це, і я не розумію, що є рішенням;) .... Як встановити $ {workspaceFolder}?
ПК

8
Якщо говорити простіше, у Visual Studio Code відкрийте папку, яка містить package.json.
Філіп Нган,

Як ви читаєте визначення слова ${workspaceFolder}? (Іншими словами, як перевірити значення цієї змінної у VS Code?)
Мет

2
Я підняв це як окреме питання і отримав відповідь . На випадок, якщо комусь потрібна і ця інформація.
Метт

Для людей, які потрапляють сюди за допомогою пошуку, і це не відповідь. Ви також отримаєте Неперевірену точку зупинки, якщо файл, який ви намагаєтесь налагодити, має зміни, які не збережено.
Джейсон Вудс,

29

Чергове оновлення для @ 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}/*"
    }
  }]
}

Це спрацювало для мене, якщо я вперше запускаю сеанс налагодження Chrome, але якщо я змінюю точки зупинку, вони не потрапляють.
Shamshiel

ДЯКУЮ! У мене ніколи раніше не було цієї проблеми, але раптом я виявив, що не можу налагодити нещодавно створений проект Angular 8. Це виправило це.
IRCraziestTaxi

13

Наведена вище відповідь, мабуть, вирішить багато проблем, але не вирішила мою. Моя проблема була набагато простішою і прикрішою ...

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

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

Наприклад:

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

не буде відповідати папці у вашій робочій області з іменем:

Мій. f старше

Я сподіваюся, це допоможе комусь там.


Моя була ще простіша: у мене була додаткова коса риса після "workspaceFolder" "webRoot": "$ {workspaceFolder /}"
Jake OPJ

10

У моєму випадку мені довелося визначити 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.


1
додавання атрибута webpack повинно працювати, але мені довелося знайти шлях, запустивши команду: .scripts у консолі налагодження VSCODE під час запуску / запуску програми
AbhishekS

10

Дано багато правильних відповідей. У моєму випадку поєднання всіх цих відповідей допомогло, і мені знадобилось багато часу, щоб це зрозуміти. Сподіваюсь, я зможу врятувати вам час на головний біль цим

дозвольте підсумувати це поетапно з посиланням на відповіді вище, що мені допомогло:

  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для повторної компіляції та запуску коду.


ця робота для мене, дякую:{ "name": "Chrome", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}/src", }
тег

5

У мене є структура папок, як показано нижче, і я відкрив zeroпроект на VS Code.

нуль /

введіть тут опис зображення

Потім запустити .json

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

3
Unverified breakpoint


Я виявив 3 причини цієї проблеми:

  1. launch.jsonURL - конфігурації автоматично генерується був неправильним. Переконайтеся, що номер порту відповідає порту localhost, на якому працює ваша веб-програма. Я змінив свій на 3000, щоб вирішити помилку:
"configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
  1. Мені потрібно було встановити правильну папку робочої області .

  2. Мені потрібно було запустити веб-програму npm startперед налагодженням.


1
Мені допомогло останнє "запуску в хвилину" перед налагодженням.
himanshupareek66

2

Я також зіткнувся з проблемою після перейменування папки проекту, і виявилося, що властивість "webRoot" вказувало на "$ {workspaceFolder} / src" замість "$ {workspaceFolder}". Можливо, це було затишно в рамках оновлення розширення "Налагоджувач для Chrome", але оскільки я не отримав жодного оновлення, я не можу це перевірити.

Оновлення "webRoot", перезапуск ng serveсеансу та запуск нового сеансу налагодження зробили свою справу. Сподіваюся, це допоможе комусь із подібним сценарієм.


2

Мені довелося видалити свою папку .vscode і відновити її. а також папка вказувала на неправильний шлях, я повинен був змінити його назад на мій поточний шлях до папки проекту. Дякую


2

У нашому випадку ця помилка виникла через символічне посилання Windows, щоб папка вихідного коду була доступна на двох локальних дисках. Відкрив папку з vscode з вихідної папки, тепер налагодження працює добре.


2

Я прийшов сюди, використовуючи флетер і дротик. Не знаю, але видалення launch.jsonв .vscodeпапці вирішило мою проблему


2

Для мене неперевірена точка зупинки була спричинена тим, що налагоджувач працював, коли я намагався встановити точку зупинки. Для вирішення проблеми я просто вимкнув налагоджувач, встановив точку зупинки як звичайну, перезапустив налагоджувач.


1

Якщо ви використовуєте розбиття коду через веб-пакет, точку зупинки не буде "перевірено", поки Chrome не завантажить цей модуль (тобто, як правило, коли ви переходите до цієї частини програми)


1

Моя проблема полягала в тому, що відображення джерела було налаштовано неправильно. Переконайтеся, що ваші фактичні джерела TS відображаються на вкладці Джерела в розширеннях налагодження Chrome і спробуйте спершу розмістити там свої точки зупинки. Можливо, це комусь допоможе.



1

Рішення просте:

  1. Клацніть Файл-> Відкрити папку-> (виберіть папку проекту ur - папку, яка містить package.json )
  2. Відкрийте налагодження-> натисніть кнопку відтворення, щоб створити нову конфігурацію Chrome.
  3. Встановіть нову точку розриву!
  4. Насолоджуйтесь!

1

Якщо все виглядає налаштовано правильно, але точка перерви все ще не вражена, зміною, яку мені потрібно було зробити, було вказати точну назву файлу, який буде обслуговуватися. Наприклад, на 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 folder

Якщо ви налагоджуєте JavaScript із HTML-файлу, вам також може знадобитися перейти до налаштувань у VSCode і увімкнути: Дозволити точки зупинку скрізь


1

У моєму випадку у мене був файл main.js у корені проекту для запуску як електронна програма. Якщо цей файл main.js було видалено, проблема була вирішена.


1

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

xdebug.remote_autostart = 1

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

Сподіваюся, це економить чийсь день.


0

У моєму випадку проблема полягала в тому, що точку зупинки встановлювали на рядку, де оголошувалася функція

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

0

Я отримував цю помилку просто тому, що не мав "sourceMaps": trueу конфігурації налагодження.


0

npm iвиправив це зі свого боку. Іноді я отримую неперевірені точки зупинки під час створення нової папки / файлу, і це зазвичай це робить.


0

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


0

Я відкрив у коді VS папку my-app, де була папка клієнта та папка сервера . Мені довелося змінити в launch.json з цього

"webRoot": "${workspaceFolder}"

до цього

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

0

Ще одна відповідь, яку я щойно виявив, пов’язана з ледачими завантаженими модулями.

Якщо ви хочете встановити точки зупинку в коді, який є частиною модуля, який ледаче завантажується, і ви не завантажили цей модуль у браузері, код VS не матиме доступу до вихідних карт для перевірки точок зупинки!

тому встановлюйте точки зупинку лише тоді, коли ви завантажили ледачий завантажений модуль, який ви хочете налагодити!


Це справедливо і для мого випадку. Я встановлюю точки зупинку у файлах, що називаються після index.js, що є моїм вхідним файлом js, і вони ніколи не потрапляють. Але я спочатку встановлюю точки зупинки для функцій у index.js, і це, безумовно, зупиняється на цьому, потім я встановлюю точки зупинки для інших файлів, вони також зупиняються, і здається, як activatedпісля index.js.
Яо Лі

поки ви запускаєте маршрут, який завантажує модуль у браузер із відповідними точками зупинки у vscode, він повинен працювати
Том,
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.