Breakpoints trong WebStorm không đánh để gỡ lỗi JavaScript

Question

tôi có các thiết lập cấu hình sau đây trong WebStorm:

Khi tôi bấm debug, nó sẽ khởi động Chrome tốt và điều hướng tới trang, nhưng breakpoint tôi không bao giờ có được hit . Nó được kết nối bằng cách nào đó mặc dù bởi vì tôi thấy tất cả các đầu ra console.log() trong WebStorm.

Tôi đang cố điều hướng đến URL được chỉ định trong ảnh chụp màn hình và có điểm ngắt trong main.js bị trúng, nhưng nó không hoạt động như mong đợi (xem: ở tất cả). Tôi không chắc chắn những gì tôi đang thiếu. Tôi đã thử đặt một URL từ xa cho tệp main.js cụ thể trong phần URL từ xa, nhưng điều đó cũng không giúp ích gì.

Để tham khảo, tôi chạy ứng dụng qua bra run và npm run watch.

Cập nhật nhanh

Vì vậy, tôi đã có thể thực sự có được một breakpoint để đánh, nhưng đó là trong một tập tin khác nhau (trong một con đường khác nhau):

../public/app/core/routes/dashboard_loaders.ts cho phép tôi dừng lại ở breakpoint , nhưng ../public/dashboards thì không.

Khi tôi hướng đến http://localhost:3000/dashboard/script/main.js?orgId=1, nó chạm con đường:

.when('/dashboard/:type/:slug', { 
    templateUrl: 'public/app/partials/dashboard.html', 
    controller : 'LoadDashboardCtrl', 
    reloadOnSearch: false, 
    pageClass: 'page-dashboard', 
    }) 

Mà cuối cùng không tải file ../public/dashboards/multi.js - nhưng không có breakpoint là hit.

cập nhật thêm

Dường như kịch bản được phục vụ qua the following command (trong ../public/app/features/dashboard/dashboardLoaderSrv.js):

/*jshint -W054 */ 
var script_func = new Function('ARGS','kbn','dateMath','_','moment','window','document','$','jQuery', 'services', result.data); 
var script_result = script_func($routeParams, kbn, dateMath, _ , moment, window, document, $, $, services); 

đâu $routeParams là type:script và slug:main.js - Nếu tôi bước vào chức năng này, tôi nhận được một tệp ẩn danh (?) giống với tệp thực tế main.js của tôi, nhưng tên giống như 43550 thay vì main.js - Tôi nghĩ rằng điều này đang sôi xuống một ack kiến ​​thức trong cách JavaScript xử lý một cái gì đó về phía tôi. :)

Answer 1

Chỉnh sửa: Tôi tìm thấy điều này issue for using webstorm with grafana (chỉnh sửa thứ hai) trông giống như đây là bạn. Tôi nghĩ rằng những gì ông liên kết giải quyết nó với tuyên bố một sourceUrl sau đó tập tin của bạn không phải là "vô danh" hoặc khá năng động.

//# sourceURL=filename.js 

tức là

//# sourceURL=main.js 

Reference How to debug dynamically loaded JavaScript (with jQuery) in the browser's debugger itself?

---

Dưới đây là tài liệu và video trên gỡ lỗi trong webstorm để đảm bảo mọi thứ được thiết lập đúng cách.(I.E Cài đặt mặc định của tôi là gỡ lỗi tệp chỉ mục của tôi thay vì dự án của tôi). Hãy chắc chắn rằng bạn có họ Chrome extension hoặc Firefox Extension

General JS Debugging in Webstorm

Debugging for Chrome in Webstorm

Debugging for Firefox in Webstorm

Debugging Node.JS in Webstorm