Làm cách nào để có thể theo dõi ngăn xếp javascript được rút gọn và chạy nó trên bản đồ nguồn để nhận được lỗi thích hợp?

Question

Trên máy chủ sản xuất của chúng tôi, tôi đã minified javascript được xuất bản và tôi không bao gồm một tệp bản đồ với nó, bởi vì tôi không muốn người dùng có thể hiểu những gì đang xảy ra dựa trên lỗi.

Tôi có dịch vụ ghi nhật ký mà tôi đã viết để chuyển tiếp ngoại lệ góc (bị $ exceptionHandler) đánh cắp cho chính tôi qua email. Tuy nhiên, vết đống này là gần đọc:

n is not defined 
    at o (http://localhost:9000/build/app.min.js:1:3284) 
    at new NameController (http://localhost:9000/build/app.min.js:1:3412) 
    at e (http://localhost:9000/build/bower.min.js:44:193) 
    at Object.g.instantiate (http://localhost:9000/build/bower.min.js:44:310) 
    at b.$get (http://localhost:9000/build/bower.min.js:85:313) 
    at d.compile (http://localhost:9000/build/bower.min.js:321:23333) 
    at aa (http://localhost:9000/build/bower.min.js:78:90) 
    at K (http://localhost:9000/build/bower.min.js:67:39) 
    at g (http://localhost:9000/build/bower.min.js:59:410) 
    at http://localhost:9000/build/bower.min.js:58:480 <ui-view class="ng-scope"> 

Những gì tôi đang tự hỏi là: Có một chương trình mà tôi có thể phân tích vết đống này để chống lại các mã nguồn không minified thực tế qua tập tin bản đồ (hoặc không thông qua bản đồ nếu có cách khác)

Answer 1

Nối chỉ thị nhận xét cho JS đang chạy trong trang.

// # sourceMappingURL =/path/to/your/sourcemap.map

Trong firefox (không chắc chắn về chrome) để nói với Debugger để sử dụng bản đồ nguồn nếu họ có sẵn, nhấp vào "Cài đặt Debugger" và chọn "Hiển thị nguồn gốc" từ danh sách cài đặt bật lên:

Answer 2

Nếu bạn có quyền truy cập vào tệp bản đồ nguồn bên ngoài và có thể có cùng cấu trúc tệp bạn có thể làm việc đó, nhưng tôi không nhận thức được bất kỳ công cụ nào bên ngoài trình duyệt sẽ giúp bạn thực hiện điều đó.

Lợi thế bổ sung của việc có dữ liệu trong trình duyệt đang chạy sẽ cho phép kiểm tra người dân địa phương mà bạn sẽ không nhận được ngay cả với bản đồ nguồn.

Bạn có thể muốn xem xét một công cụ như rollbar để thực hiện báo cáo lỗi. Điều này sẽ báo cáo tất cả những người dân địa phương trong mỗi khung hình để giúp gỡ lỗi. Nó có hỗ trợ cho sourcemaps outside the browser để giải quyết các vấn đề an ninh của bạn.

Answer 3

Điều bạn muốn làm là phân tích cú pháp bản đồ nguồn. Điều này không liên quan gì đến trình duyệt web. Tất cả những gì bạn cần làm là dịch tham chiếu được rút gọn vào tài nguyên chưa được sửa đổi.

Nếu bạn có bất kỳ trải nghiệm nào với NodeJS thì đã có một gói thực hiện điều này cho bạn.

https://github.com/mozilla/source-map/

Để cài đặt các thư viện

npm install -g source-map 

Tạo một file có tên "issue.js"

fs = require('fs'); 
var sourceMap = require('source-map'); 
var smc = new sourceMap.sourceMapConsumer(fs.readFileSync("./app.min.js.map","utf8")); 
console.log(smc.originalPositionFor({line: 1, column: 3284})); 

Chạy file với nút

node issue.js 

Nó nên xuất vị trí trong tệp gốc vào bảng điều khiển cho dòng đầu tiên từ theo dõi ngăn xếp.

Lưu ý: Tôi bảo bạn cài đặt bản đồ nguồn trên toàn cầu để dễ sử dụng, nhưng bạn có thể tạo dự án nút thực hiện những gì bạn cần và cài đặt cục bộ.