2014-05-22 34 views
94

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

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 inline-source-map làm cho các số dòng được ném ra bởi một.

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ĩ rằng nó liên quan đến việc sử dụng jsx.

+4

Có vẻ như một bên coi dòng đầu tiên là dòng '0' và các dòng khác xem xét nó dòng '1'. Bạn có thể chỉ cần 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. –

+3

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

+1

Tôi không biết. Tôi đã sử dụng sourcemaps của CoffeeScript với thư viện JS bản đồ nguồn của Mozilla. Mọi thứ đều ổn, ngoại trừ 'cột' arg trong đoạn mã sau được truyền vào 1 quá cao:' window.onerror = function (message, url, line, column) {} '. Decrementing nó cố định đó. Lưu ý: Đó là Chrome cụ thể, tôi không biết về các trình duyệt khác. –

Trả lời

3

Có một lỗi trong chrome, hãy thử phiên bản mới nhất, cũng trên cấu hình webpack bạn hãy thử sử dụng sourcemaps khác nhau trên devtool thử tất cả trong số này để xem nếu ai làm việc cho nguồn inline bản đồ:

  • inline- nguồn bản đồ

  • rẻ-inline-nguồn-map

cho configs khác nhau khác:

012.
  • rẻ-source-bản đồ

  • rẻ-mô-đun-source-bản đồ

  • rẻ-module-eval-source-bản đồ

trên webpack config:

{ 

... 

devtool:'source-map' 

... 

}