7

Tôi đang chạy ứng dụng web node.js bằng javascript và webpack mà tôi đã tạo sau this guide. Tôi đã cài đặt tiện ích mở rộng trình gỡ lỗi chrome.Điểm ngắt bị hỏng khi được đặt trong VSCode/Javascript trên Chrome

tôi chạy server nút bằng cách sử dụng lệnh:

webpack-dev-server --progress --colors 

Tôi cũng đã chạy webpack --devtool nguồn bản đồ

ra mắt cấu hình của tôi trông như thế này:

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

Sau khi chạy webpack-dev-server --progress - màu sắc và nhấn F5 trong VSCode Chrome tải lên với trang web, tất cả các điểm ngắt của tôi xuất hiện màu đỏ chắc chắn nhưng khi đặt chúng nhảy xuống thấp hơn một chút so với vị trí tôi đặt chúng (i ncluding trên dòng đang thực thi mã). Các điểm ngắt cũng không nhấn mà làm cho tôi tin rằng có điều gì đó sai trái với ánh xạ gỡ lỗi. Khi tôi có breakpoints được đặt vào dịp ngẫu nhiên các tập tin có được tải và vô hình breakpoints trong chúng được nhấn, như trong node_modules/firebase/index.js một breakpoint vô hình trên một dòng nhận xét ra là hit.

Tôi cũng nên lưu ý chạy .scripts trong vscode làm năng suất (trong số tất cả các mô-đun) tệp entry.js của tôi mà tôi đang cố gắng để đạt điểm ngắt trong, cụ thể là: -webpack: ///./entry.js (d: \ myproject \ entry.js)

Mọi thứ được đặt trong thư mục gốc của tôi (ảnh chụp màn hình trong trường hợp tôi nhầm lẫn chuyển các thư mục);

enter image description here

Ngoài ra tập tin webpack.config.js tôi:

module.exports = { 
    entry: "./entry.js", 
    output: { 
     path: __dirname, 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { test: /\.css$/, loader: "style-loader!css-loader" } 
     ] 
    } 
}; 
+0

bạn có thể vui lòng hiển thị cấu trúc thư mục gốc, chẳng hạn như vị trí đặt các tệp được nhóm không? –

+0

@AjayGupta Tôi chỉ đính kèm một pic của thư mục thư mục gốc, cho tôi biết nếu đó là những gì bạn muốn xem :) – tweetypi

+0

Vì vậy, 'Build' là nơi mà tất cả các tài sản đi kèm? –

Trả lời

6

Vấn đề giải quyết!

cần thiết để thêm:

devtool: 'inline-source-map' 

Để webpack.config.js module.exports tôi. Bây giờ các điểm ngắt đạt được nội tuyến trên các chức năng ở mọi nơi.

Các vấn đề liên quan