“Điểm ngắt chưa được xác minh” trong Visual Studio Code với tiện ích mở rộng Trình gỡ lỗi Chrome

Question 1

Tôi đang cố gắng gỡ lỗi mã Typecript của mình trong Visual Studio Code, bằng cách sử dụng tiện ích Trình gỡ lỗi Chrome, nhưng tôi nhận được thông báo "Điểm ngắt chưa được xác minh" trên điểm ngắt của mình và việc thực thi không dừng trên điểm ngắt của tôi.

Đây là tệp launcher.json của tôi:

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

Phiên bản ứng dụng:

Mã Visual Studio: 1.25.1
Chrome: 67.0.3396.99

Bất kỳ đề xuất nào khác về cách tôi có thể giải quyết vấn đề này?

Question 2

Cuối cùng tôi đã phát hiện ra điều gì sai:

Khi tôi đọc định nghĩa của '$ {workspaceFolder}', nó phát biểu như sau:

đường dẫn của thư mục được mở trong VS Code

Lỗi của tôi:

Đường dẫn của tôi trong Windows đến dự án của tôi như sau: C:\Users\myusername\Documents\VSCode\Source\ProjectName

Thông qua Visual Studio Code, tôi đã Sourcemở thư mục và luôn cần thực hiện lệnh thay đổi thư mục (cd ProjectName) Integrated Terminalthành 'ProjectName'. Điều này dẫn đến việc .vscode folder and launch.json fileđược tạo trong Sourcethư mục, chứ không phải ProjectNamethư mục.

Sai lầm ở trên dẫn đến thực tế ${workspaceFolder}là trỏ đến Sourcethư mục, nơi không có thành phần Angular, thay vì trỏ đến ProjectNamethư mục.

Cách khắc phục:

Trong Visual Studio Code, mở thư mục: C:\Users\myusername\Documents\VSCode\Source\ProjectNamevà thiết lập của tôi launch.jsontrong thư mục đó.

Question 3

Một bản cập nhật khác cho @ angle / cli 9.1.7 28/05/2020 ...

Đây là cấu hình làm việc của tôi cho @ angle / cli 9.1.7. Di chuyển cáisourceMapPathOverrides

    "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}"
  }]
}

Giải pháp của tôi cho vấn đề "Điểm ngắt chưa được xác minh".

Môi trường

Angular CLI 8.1.1
Mã Visual Studio 1.36.1
Trình gỡ lỗi cho tiện ích mở rộng Chrome 4.11.6

.Vscode / khởi chạy.json mặc định được tạo trong VSC thông qua tùy chọn "Thêm cấu hình" sẽ trông tương tự như thế này (tôi đã thay đổi cổng từ 8080 thành 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}"
  }]
}

Thêm mục bên dưới giải quyết vấn đề của tôi với "Điểm ngắt chưa được xác minh".

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

Hoàn thành và hoạt động .vscode / khởi chạy.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}/*"
    }
  }]
}

Có một số mục bổ sung có thể được thêm vào:

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

Tuy nhiên, tôi không cần những thứ này trong trường hợp của mình để giải quyết vấn đề.

{
  // 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}/*"
    }
  }]
}

Question 4

Câu trả lời trên có lẽ sẽ giải quyết được rất nhiều vấn đề nhưng nó không giải quyết được vấn đề của tôi. Vấn đề của tôi là một vấn đề đơn giản và khó chịu hơn nhiều ...

Cài đặt cấu hình trong tệp khởi chạy.json phân biệt chữ hoa chữ thường.

Mục nhập "webRoot" của tôi đã viết đúng chính tả nhưng tôi đã viết hoa B ở một trong các từ thay vì viết thường b.

Ví dụ:

"webRoot": "$ {workspaceFolder} / Của tôi. F cũ hơn"

sẽ không khớp với một thư mục trong không gian làm việc của bạn với tên:

Của tôi. f cũ

Tôi hy vọng giúp đỡ ai đó ngoài kia.

Question 5

Trong trường hợp của tôi, tôi phải xác định sourceMapPathOverridesgiá trị như sau:

Tệp launch.json(chứa trong .vscodethư mục):

{
  // 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/*"
      }
    }
  ]
}

Nguồn của tôi là trong ${workspaceFolder}/project/app.

Question 6

Có rất nhiều câu trả lời đúng được đưa ra. Trong trường hợp của tôi, sự kết hợp của tất cả những câu trả lời đó đã giúp ích, và tôi đã mất nhiều thời gian để tìm ra nó. Tôi hy vọng tôi có thể giúp bạn tiết kiệm thời gian đau đầu với việc này, vì vậy

hãy để tôi tóm tắt nó từng bước với việc tham khảo các câu trả lời ở trên, những gì đã giúp tôi:

Điều quan trọng là bắt đầu mã VS từ đúng thư mục (xem câu trả lời từ CodeChimp và monstertjie_za ).
Mở cửa sổ bảng điều khiển và cdvào thư mục dự án.
Thí dụ:
cd myProject
code .
Đảm bảo rằng bạn đang định cấu hình các tệp trong đúng .vscodethư mục.
Bên phải.vscodeThư mục là thư mục con của thư mục dự án của bạn.
Lưu ý: nếu bạn đã mở nhầm mã VS ở cấp thư mục con quá sâu, ví dụ như trong srcthư mục, thì bạn sẽ tìm thấy một .vscodethư mục ở đó (như trong trường hợp của tôi), chứa các tệp cấu hình vô dụng để gỡ lỗi.
Thiết lập cấu hình gỡ lỗi trong .vscode\launch.jsontệp.
Đảm bảo rằng bạn đã chỉ định đúng cổng cho ứng dụng của mình, trong trường hợp của tôi, cổng4200 hoạt động tốt.
Đồng thời đảm bảo rằng "webRoot"tham số được định cấu hình chính xác (xem câu trả lời từ Stig Perez ). Trong trường hợp của tôi, cần phải thêm một thư mục con vào nó. Để tìm hiểu đường dẫn được chỉ định bởi biến $(workspaceFolder)là gì, hãy xem câu hỏi tôi đã hỏi tại StackOverflow về cách hiển thị giá trị biến mã VS.
Ghi chú:Nếu chưa có cấu hình nào như vậy, hãy làm như sau để thêm nó: Đi tới phần mở rộng gỡ lỗi (tức là nhấp vào thanh bên). Trong menu thả xuống của trình gỡ lỗi, hãy chọn “Thêm cấu hình ...”, sau đó nhấn nút “Thêm cấu hình” màu xanh lam. Chọn “Khởi chạy Chrome” làm cấu hình được thêm vào.
Cấu hình ví dụ ( launch.json):
```
"configurations": [
        {
                "type": "chrome",
                "request": "launch",
                "name": "Launch Chrome",
                "url": "http://localhost:4200",
                "webRoot": "${workspaceFolder}/projectsubfolder"
        }]
```
Thay thế projectsubfolderbằng thư mục con mà bạn có thể có trong dự án của mình. Lưu ý rằng điều này phân biệt chữ hoa chữ thường (xem câu trả lời của Michael Walsh ).
Bây giờ đặt các điểm ngắt trong ứng dụng của bạn.
Để khởi chạy ứng dụng của bạn với trình gỡ lỗi, hãy mở cửa sổ đầu cuối bên trong mã VS, nhập
cd projectsubfolder
npm install & ng serve
Điều này đảm bảo các gói phụ thuộc được giải quyết và tải xuống trước khi ứng dụng của bạn được biên dịch. Chờ cho đến khi quá trình biên dịch kết thúc.
Sau đó, nhấp vào hình tam giác màu xanh lục trong trình gỡ lỗi VS sẽ khởi chạy cửa sổ Chrome với trình gỡ lỗi đính kèm.
Lưu ý: Bạn không cần phải chạy npm installmọi lúc, chỉ khi các gói / phụ thuộc đã thay đổi. Hầu hết thời gian, chỉ cần thực thi ng serveđể biên dịch lại và chạy mã của bạn.

Question 7

Tôi có cấu trúc thư mục như hình dưới đây và tôi đã mở zerodự án trên VS Code.

số không/

Sau đó, khởi chạy.json

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

Question 8

Unverified breakpoint

Tôi tìm thấy 3 nguyên nhân cho vấn đề này:

Các launch.jsonURL cấu hình tự động tạo ra là không chính xác. Đảm bảo số cổng khớp với cổng máy chủ cục bộ mà ứng dụng web của bạn chạy trên đó. Tôi đã thay đổi của tôi thành 3000 để giải quyết lỗi:

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

Tôi cần đặt đúng thư mục không gian làm việc .
Tôi cần khởi động ứng dụng web của mình npm starttrước khi gỡ lỗi.

Question 9

Tôi cũng gặp phải sự cố sau khi đổi tên thư mục dự án và hóa ra thuộc tính "webRoot" đang trỏ đến "$ {workspaceFolder} / src" thay vì "$ {workspaceFolder}". Có thể đây là một phần của bản cập nhật cho tiện ích mở rộng "Trình gỡ lỗi cho Chrome" nhưng vì tôi không nhận được bất kỳ bản cập nhật nào nên tôi không thể xác minh điều này.

Cập nhật "webRoot", khởi động lại ng servephiên và bắt đầu một phiên gỡ lỗi mới đã thực hiện thủ thuật. Hy vọng điều này sẽ giúp ai đó có một bối cảnh tương tự.

Question 10

Tôi đã phải xóa thư mục .vscode của mình và tạo lại nó. và thư mục cũng trỏ đến đường dẫn sai, tôi phải thay đổi nó trở lại đường dẫn thư mục dự án hiện tại của tôi. Cảm ơn bạn

Question 11

Trong trường hợp của chúng tôi, lỗi này là do liên kết tượng trưng của windows để có thư mục mã nguồn có sẵn trên hai ổ đĩa cục bộ. Đã mở thư mục với vscode từ thư mục gốc, bây giờ việc gỡ lỗi hoạt động tốt.

Question 12

Tôi đến đây trong khi sử dụng máy bay và phi tiêu. Tôi không biết nhưng xóa launch.jsontrong .vscodethư mục đã giải quyết được sự cố của tôi

Question 13

Đối với tôi, điểm ngắt chưa được xác minh là do trình gỡ lỗi đang chạy khi tôi cố gắng đặt điểm ngắt. Để giải quyết, tôi chỉ cần tắt trình gỡ lỗi, đặt điểm ngắt như bình thường, khởi động lại trình gỡ lỗi.

Question 14

Nếu bạn đang sử dụng tính năng tách mã qua webpack, thì điểm ngắt của bạn sẽ không được "xác minh" cho đến khi Chrome tải mô-đun đó (tức là khi bạn điều hướng đến phần đó của ứng dụng)

Question 15

Vấn đề của tôi là ánh xạ nguồn không được định cấu hình đúng cách. Đảm bảo rằng các nguồn TS thực tế của bạn hiển thị trên tab Nguồn trong tiện ích gỡ lỗi của Chrome và trước tiên hãy thử đặt các điểm ngắt của bạn ở đó. Có thể nó sẽ giúp ích cho ai đó.

Question 16

Đối với tôi, các điểm ngắt của tôi đã bị tắt:

Question 17

Giải pháp rất đơn giản:

Nhấp vào Tệp-> Mở Thư mục-> (chọn thư mục của dự án ur - thư mục chứa package.json )
Mở gỡ lỗi-> nhấn nút phát để tạo cấu hình Chrome mới.
Đặt một điểm nghỉ mới!
Thưởng thức!

Question 18

Nếu mọi thứ có vẻ được thiết lập chính xác nhưng điểm ngắt vẫn không được nhấn, thay đổi tôi cần thực hiện là chỉ định tên tệp chính xác sẽ được phân phát. Ví dụ trên NodeJS, Express chỉ xác định localhost:3000sẽ không dừng lại trên các điểm ngắt của tôi, mà chỉ địnhlocalhost:3000/index.html hoạt động như mong đợi

Cấu hình đầy đủ:

Thư mục của tôi mở trong VSCode: learningPixivới vị trí thư mục đầy đủ (Ubuntu Linux):/home/leigh/node/pixi-tut/learningPixi

Cấu trúc thư mục của tôi là:

/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

Nội dung của tệp launcher.json của tôi:

{  
  "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" cũng rất hữu ích nếu không trình gỡ lỗi sẽ thực hiện các bước trong mọi lệnh gọi hàm

Cấu hình máy chủ express (rất cơ bản) của tôi chỉ để gỡ lỗi JavaScript trong các tệp tĩnh là:

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'));

Và theo cấu trúc thư mục ở trên, hãy đảm bảo index.html nằm trong / thư mục chung

Nếu gỡ lỗi JavaScript từ bên trong tệp HTML, bạn cũng có thể cần phải truy cập cài đặt trong VSCode và bật: Cho phép điểm ngắt ở mọi nơi

Question 19

Trong trường hợp của tôi, tôi có tệp main.js trong thư mục gốc của dự án để chạy như một ứng dụng điện tử. Nếu tệp main.js này bị xóa, sự cố đã được giải quyết.

Question 20

Sau khi dành 3 giờ quý giá của cuộc đời mình và trải qua nhiều câu trả lời được liệt kê ở trên, vấn đề của tôi chỉ đơn giản là không có dòng sau trong tôi php.ini:

xdebug.remote_autostart = 1

Trước đó, tôi đã định cấu hình XDebug trên XAMPP của mình, nhưng các điểm ngắt của tôi đơn giản là sẽ không bị tấn công. Chỉ là máy chủ gỡ lỗi của tôi không được định cấu hình để khởi động tự động.

Hy vọng điều này sẽ cứu một ngày của ai đó.

Question 21

Trong trường hợp của tôi, vấn đề là điểm ngắt được đặt trên một dòng nơi một hàm đang được khai báo

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

Giải pháp: di chuyển nó vào bên trong phần thân của hàm

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

Question 22

Tôi gặp lỗi này đơn giản vì tôi không có "sourceMaps": truetrong cấu hình gỡ lỗi của mình.

Question 23

npm iđã sửa nó cho phần của tôi. Đôi khi tôi nhận được các điểm ngắt chưa được xác minh khi tạo một thư mục / tệp mới và điều đó thường xảy ra.

Question 24

Giải pháp cho tôi là thêm vào tệp launcher.json dòng sau: "requestExactSource": false. Sau đó, khởi động lại VSC và thử xem nó có hoạt động không.

Question 25

Tôi đã mở trong VS mã thư mục ứng dụng của tôi , nơi có thư mục máy khách và thư mục máy chủ . Tôi đã phải thay đổi trong launcher.json từ cái này

"webRoot": "${workspaceFolder}"

đến cái này

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

Question 26

Một câu trả lời khác mà tôi vừa khám phá có liên quan đến các mô-đun được tải lười biếng.

Nếu bạn muốn đặt các điểm ngắt trong mã là một phần của mô-đun được tải chậm và bạn chưa tải mô-đun đó trong trình duyệt, mã VS sẽ không có quyền truy cập vào bản đồ nguồn để xác minh các điểm ngắt!

vì vậy chỉ đặt các điểm ngắt khi bạn đã tải mô-đun được tải chậm mà bạn muốn gỡ lỗi!