Gỡ lỗi máy chủ webpack dev trong mã vs?

Question

Có thể định cấu hình launch.json để gỡ lỗi máy chủ webpack dev không? Trong trường hợp của tôi, tôi đang làm việc trên một ứng dụng React phổ quát (được cung cấp bởi máy chủ thông qua Express) và nó sẽ thực sự tốt đẹp để có thể gỡ lỗi phía máy chủ trực tiếp trong VS Code.

Answer 1

Tôi đã làm việc trên một ứng dụng VueJS bằng cách sử dụng Webpack và tôi đã có thể gỡ lỗi thành công nó bằng cách sử dụng trình gỡ lỗi chrome VSCode sau khi đào bới trong vài giờ. Tôi biết ứng dụng của bạn là một ứng dụng Phản hồi, nhưng tôi sẽ thử và giải thích các bước mà tôi đã thực hiện để gỡ lỗi hoạt động. Hy vọng rằng sẽ giúp bạn cấu hình launch.json của bạn để gỡ lỗi một ứng dụng phản ứng/webpack trong VSCode. Đây là lần launch.json cuối cùng của tôi:

{ 
     // Using the chrome debugger to debug a Vue application 
     "type": "chrome", 
     "request": "launch", 
     "name": "Chrome launch", 
     // Set the URL to match the root URL of your application 
     "url":"http://localhost:8000/#/", 
     "webRoot": "${workspaceRoot}", 
     /** Configure source map paths using the instructions below */ 
     "sourceMapPathOverrides": { 
      "webpack:///./src/*.js": "${workspaceRoot}/src/*.js", 
      "webpack:///src/*.vue": "${workspaceRoot}/src/*.vue", 
      "webpack:///./node_modules/*": "${workspaceRoot}/node_modules/*" 
     } 
    } 

Chìa khóa để tôi định cấu hình đúng tùy chọn soureMapPathOverrides trong launch.json. Trước tiên, hãy chắc chắn rằng tùy chọn "devtool" trong cấu hình webpack đã được đặt thành "nguồn bản đồ" hoặc "giá rẻ-eval-source-map" (tôi đã sử dụng "bản đồ nguồn", các cài đặt khác cũng có thể hoạt động, nhưng Tôi chưa thử nghiệm chúng).

--Setting các sourceMapPathOverrides--

Những gì bạn muốn làm là lập bản đồ các tập tin bản đồ nguồn (mà dường như được ánh xạ không đúng theo mặc định, ít nhất là đối với tôi) đến vị trí tương ứng của họ trên máy tính địa phương của bạn. Để làm điều này, hãy chạy chương trình thông thường bằng cách sử dụng webpack-dev-server hoặc webpack. Sau đó, mở nó trong Chrome và mở tab "nguồn" của devtools. Trong tab "nguồn", trong trình điều hướng (ở bên trái theo mặc định), mở tab mạng và xem cấu trúc thư mục.

Bạn sẽ thấy một cấu trúc thư mục đó là một cái gì đó như:

top 
    localhost:8000 
     assets 
     src 
     ... 
    (no domain) 
     ... 
    webpack:// 
     (webpack) 
      ... 
     (webpack)-dev-server 
      ... 
     . 
      ... 
     src 
      ... 

Bây giờ, bạn sẽ có thể tìm thấy cả các tập tin transpiled và các tập tin nguồn gốc của mình ở đâu đó ở đây (Nếu không, hãy kiểm tra "devtool của bạn "đã được đặt thành" bản đồ nguồn "hoặc" giá rẻ-eval-source-map ". Bây giờ, bạn cần ánh xạ từng tệp nguồn đến vị trí của chúng trên ổ cứng của bạn. Tốt hơn là bạn muốn ánh xạ chúng theo đuôi tệp, thay vì Trong trường hợp của Vue, tôi đã phải ánh xạ các tệp .js và .vue đến các vị trí tương ứng của chúng, với thư mục node-modules được ánh xạ riêng (như bạn có thể thấy trong tệp launch.json của tôi). lập bản đồ để phản ứng.

Đặt url launch.json để khớp với URL của ứng dụng webpack của bạn và tệp launch.json của bạn nên được đặt!

Bây giờ, bạn sẽ có thể chạy tệp bằng cách sử dụng webpack-dev-server (hoặc webpack) và sau đó bắt đầu trình gỡ lỗi. Bạn sẽ có thể thiết lập các điểm ngắt trong VSCode và gỡ lỗi như bình thường. Hy vọng rằng điều này sẽ giúp một ai đó.