Làm thế nào để gỡ lỗi Webpack-dev-server (trong bộ nhớ) với WebStorm?

Question

Theo WebStorm họ yêu cầu chúng tôi gỡ lỗi chống lại một thư mục, TP theo quy định tại: https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/

Tuy nhiên, theo Webpack khuyến khích quá trình phát triển, chúng ta nên chạy webpack-dev-server, vì vậy nó tất cả trong bộ nhớ như in :

webpack-dev-server -inline -progress -colors -display-lỗi-chi tiết -display-cache -hot port = 3000

vì vậy không có thư mục dist, mà contridicts ví dụ posted @: https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/

Có cách nào để có webpack-dev-server sử dụng dist dir để WebStorm có thể được ánh xạ tới nó để chúng ta có thể sử dụng bản đồ nguồn để gỡ lỗi trực tiếp không?

FYI này là dự án tôi đang sử dụng để kiểm tra:

https://github.com/ocombe/ng2-webpack

tx

Sean

Answer 1

Như bạn đã biết, bạn sẽ phải tạo ra một bó phân phối/sản xuất với nguồn và sau đó sử dụng nó để gỡ lỗi trong WebStorm. Cá nhân, tôi chạy thử nghiệm với Karma trong khi tôi có webpack-dev-server đang chạy. Thử nghiệm Karma có thể chạy với trình gỡ lỗi và thường đáp ứng bất kỳ nhu cầu gỡ lỗi nào của tôi, trong khi webpack-dev-server cung cấp "kiểm tra thủ công" của tôi để xem cách tôi đang làm.

Tôi đoán những gì tôi đang nói cho trường hợp của bạn ... bạn có thể có máy chủ dev chạy trong khi đó, cùng một lúc, có một số loại xây dựng tự động với bản đồ nguồn đang chạy cùng thời điểm mà bạn có thể chạy và sử dụng trình gỡ rối. Điều này có thể được chuyên sâu mặc dù vì vậy nó phụ thuộc vào bộ nhớ của bạn và sức mạnh xử lý.

Answer 2

tôi đã kết thúc bằng live-server https://github.com/tapio/live-server và theo hướng dẫn này, làm việc ... https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/ (chỉ không thể sử dụng được xây dựng trong máy chủ trong webpack, nhưng đó là ok)

Answer 3

Hiện nay WebStorm cần các tạo Gói + SourceMap từ WebPack để phân tích nó và tìm Điểm ngắt thực tế.

Vì vậy, trong ngắn hạn, bạn không thể ứng dụng debug WebPack chỉ với WebPack DevServer. Tuy nhiên bạn có thể chạy bình thường WebPack xây dựng với tập tin xem tại song song với nó: `

Answer 4

Tôi muốn nói thêm rằng bạn có thể đặt câu lệnh

debugger;

trong javascript của bạn/nguyên cảo tập tin ngay cả trong file khuôn khổ góc hoặc vue2 như * .vue

Vì vậy, ngay cả khi ánh xạ đường dẫn của bạn để URL không làm việc, nó sẽ bước anyway.