Sơ đồ nguồn tắt từng dòng trong Chrome, với Ruby on Rails, Webpack và React JS

Tôi đang gặp sự cố trong đó các bản đồ nguồn do Webpack tạo bằng inline-source-mapcài đặt cấu hình bị tắt một dòng khi tôi sử dụng trình gỡ lỗi Chrome devtools. Webpack được thiết lập bên trong ứng dụng Ruby on Rails để tạo một tệp JavaScript không hợp nhất, được nối với nhau bao gồm một vài mô-đun. Hầu hết các mô-đun đó là các thành phần ReactJS và được phân tích cú pháp bởi jsxtrình tải. Kết quả đầu ra từ Webpack sau đó được đưa vào application.jstệp cùng với một số thư viện JavaScript khác được tạo bởi gems.

Khi tôi sử dụng eval-source-map, không có vấn đề gì. Một cái gì đó về việc sử dụng các inline-source-mapnguyên nhân khiến số dòng bị lệch đi.

Việc kiểm tra JavaScript không phải là thành phần React vẫn có vấn đề này, vì vậy tôi không nghĩ nó liên quan đến việc sử dụng jsx.

— paradasia
nguồn

Nghe như thể một bên coi dòng đầu tiên là dòng 0và bên kia coi nó là dòng 1. Bạn có thể chỉ phải chọn một định nghĩa và điều chỉnh giá trị cho bất kỳ thứ gì hoạt động theo cách khác.

— Carl Smith

Nếu có cách nào đó để điều chỉnh giá trị mà trình duyệt sử dụng cho số dòng trong sơ đồ nguồn, điều đó có thể giải quyết được vấn đề. Cũng kể từ đó, tôi đã thực hiện một chút thử nghiệm và có vẻ như khi sử dụng Rails mà không có Sprockets xử lý JS được tạo bởi webpack, vấn đề sẽ biến mất. Số dòng chỉ tắt khi sử dụng cả webpack và đĩa xích.

— paradasia

Tôi không biết. Tôi đang sử dụng các bản đồ nguồn của CoffeeScript với thư viện JS bản đồ nguồn của Mozilla. Mọi thứ đều tốt, ngoại trừ rằng columnarg trong các mã sau đây được thông qua trong 1 quá cao: window.onerror = function(message, url, line, column){}. Suy giảm nó đã khắc phục điều đó. Lưu ý: Đó là Chrome cụ thể, tôi không biết về các trình duyệt khác.

— Carl Smith

Đây dường như liên quan: github.com/plumberjs/plumber-requirejs/commit/... ở chỗ này khắc phục được prolblem cho require.js

— justingordon

Có thể là bạn thêm một dòng tiêu đề ở đâu đó trong quy trình, ví dụ như tuyên bố bản quyền?

— rogierschouten

Đã xảy ra lỗi trong chrome, hãy thử phiên bản mới nhất, cũng như trên cấu hình webpack của bạn, hãy thử sử dụng các bản đồ nguồn khác nhau trên devtool, hãy thử tất cả những thứ này để xem liệu một bản đồ có hoạt động với bản đồ nguồn nội tuyến không:

inline-source-map
bản đồ giá rẻ

cho các cấu hình khác nhau:

nguồn-bản đồ giá rẻ
giá rẻ-mô-đun-nguồn-bản đồ
giá rẻ-mô-đun-eval-source-map

trên cấu hình webpack:

{

...

devtool:'source-map'

...

}

— Agamennon
nguồn