Làm thế nào để gỡ lỗi Typescript trong Visual Studio 2015 asp.net 5?

Question

Có cách nào để gỡ lỗi các tệp bản ghi từ ứng dụng studio trực quan 2015 CTP6 asp.net 5 không? Nếu không thì có thể có một cách để cấu hình các tệp bản đồ nguồn, vì vậy khi tôi gỡ lỗi chúng trong trình duyệt và có thể tự động lưu các thay đổi vào tệp .ts của tôi trên máy chủ? Điều này có thể khó, vì các tệp .ts được biên dịch bởi gulp, nhưng có lẽ ai đó đã tìm ra giải pháp tốt cho điều đó?

Answer 1

Gỡ lỗi TypeScript bằng Visual Studio hoạt động với cài đặt phù hợp.

1. Trước tiên, bạn hãy chắc chắn rằng bạn tạo nguồn bản đồ khi biên dịch typescript để JavaScript. Vì vậy, bạn cần có tệp xxx.js.map gần mọi xxx.js.

   Bắt bản đồ nguồn bằng cách chạy trình biên dịch nguyên cảo bên ngoài của Visual Studio không gây bất kỳ khó khăn, tại tsc dòng lệnh add:

   --sourcemap %1.ts 
   

   kịch bản ngụm của bạn thường sẽ tạo ra sourcemaps theo mặc định.

2. Định cấu hình ứng dụng web của bạn trong Visual Studio.

   Đặt Internet Explorer làm trình duyệt bắt đầu. Tôi nhận được nó chỉ làm việc với IE và không nghĩ rằng bất kỳ trình duyệt khác sẽ làm việc. (chỉnh sửa: Một nơi nào đó tôi đọc rằng có một cây cầu gỡ lỗi Webkit, vì vậy có thể gỡ lỗi Chrome, nhưng tôi không nhớ nguồn.)

   Trong thuộc tính dự án, hãy chuyển đến tab "Web" và định cấu hình Phần "Gỡ rối" ở dưới cùng: Vô hiệu hóa tất cả các trình gỡ rối! Điều này là phản đối intutitive và bạn có thể thấy thông báo lỗi này:

   Bạn đã cố gắng khởi động trình gỡ lỗi, nhưng dựa trên cài đặt gỡ lỗi hiện tại của bạn trên trang thuộc tính Web không có quá trình gỡ lỗi.

   Điều này xảy ra khi tùy chọn "Không mở trang. Chờ yêu cầu từ một quy trình khác" được chọn và gỡ lỗi ASP.NET bị tắt. Vui lòng kiểm tra cài đặt của bạn trên trang thuộc tính web và thử lại. Khi thông báo lỗi cho biết, Hành động Bắt đầu ở đầu thuộc tính Web phải là một tùy chọn khác, như "Trang hiện tại".

   Đặt điểm ngắt trong mã .ts bên trong Visual Studio của bạn ngay hoặc sau đó.

   Hit F5

Trong khi bạn có thể sử dụng Visual Studio Editor để gỡ lỗi và sửa .ts tác phẩm, "Chỉnh sửa và tiếp tục" sẽ không hoạt động, hiện nay không có trình duyệt có thể tải lại .js và .js.map và tiếp tục. (Sửa tôi bất cứ ai nếu tôi sai và tôi sẽ hạnh phúc.)

Answer 2

Cách đơn giản nhất tôi tìm được là đặt tất cả các tệp bản ghi trong thư mục wwwroot/app và để lại các tệp js được tạo bởi studio trực quan.Sử dụng gulp chỉ đơn giản là tiêm chúng vào tập tin html. Trong cuối cùng phát hành Visual Studio 2015 nó hoạt động tuyệt vời và với nhiệm vụ gulp tôi cũng có thể dễ dàng cấu hình js kèm theo cho sản xuất.

Answer 3

Khi bạn đang sử dụng gulp bạn có thể viết các sourcemaps với một thư mục tương đối. Bằng cách này, các tệp TS của bạn được giải quyết một cách chính xác bởi Visual Studio. Tôi sử dụng gulp-typescript và gulp-sourcemaps cho trình biên dịch TypeScript của tôi.

Bên dưới phần soạn thảo tập tin gulpfile.js của tôi (nhớ để vô hiệu hóa việc lập bản sao vào tập tin dự án của bạn)

var tsProject = ts.createProject({ 
    declarationFiles: false, 
    noExternalResolve: false, 
    target: 'ES5', 
    sortOutput: true, 
    noEmitOnError: false, 
    sourceMap:true 
}); 

gulp.task('script', function() { 
    var tsResult = gulp.src('App/Ts/**/*.ts') 
      .pipe(sourcemaps.init()) 
      .pipe(ts(tsProject)); 
    return tsResult.js.pipe(concat('App.js')) 
      .pipe(sourcemaps.write('.', {includeContent:false, sourceRoot: '../../App/Ts/'})) 
      .pipe(gulp.dest('wwwroot/js')); 
}); 

(tôi sửa đổi gulpfile của tôi để có thể đọc, vì vậy kiểm tra bất kỳ biên soạn/mã lỗi)

Answer 4

Trong ASP.NET 5 RC1, bạn có thể hướng dẫn trình biên dịch TypeScript tạo tệp .map bằng cách thêm tệp có tên tsconfig.json vào thư mục gốc của dự án. Visual Studio thậm chí có một mẫu cho điều này được gọi là "File cấu hình JSON TypeScript". Theo mặc định, nó có các nội dung sau:

{ 
    "compilerOptions": { 
    "noImplicitAny": false, 
    "noEmitOnError": true, 
    "removeComments": false, 
    "sourceMap": true, 
    "target": "es5" 
    }, 
    "exclude": [ 
    "node_modules", 
    "wwwroot" 
    ] 
} 

Cài đặt "sourceMap" chỉ thị trình biên dịch TypeScript tạo tệp bản đồ cần thiết để gỡ lỗi.

Trong trường hợp của tôi, tôi đã xóa giá trị "wwwroot" khỏi phần "loại trừ" vì tệp nguồn Angular TypeScript của tôi nằm trong wwwroot \ App.

lời giải thích chi tiết về các thiết lập tsconfig.json có thể được tìm thấy ở đây: https://github.com/Microsoft/typescript/wiki/tsconfig.json

Answer 5

Cách tốt nhất để xử lý các file bản đồ tôi thấy là để bao gồm các nguồn bên trong tạo ra .js tập tin bản thân. Đây rõ ràng là một giải pháp cho một môi trường dev.

tôi tsconfig.json dưới đây:

{ 
    "compilerOptions": { 
     "noImplicitAny": false, 
     "noEmitOnError": true, 
     "removeComments": false, 
     "target": "es5", 
     "module": "system", 
     "moduleResolution": "node", 
     "outDir": "./wwwroot/scripts", 
     "experimentalDecorators": true, 
     "emitDecoratorMetadata": true, 
     "inlineSourceMap": true, 
     "inlineSources": true 
    }, 
    "exclude": [ 
     "node_modules", 
     "wwwroot" 
    ] 
} 

Các cài đặt bạn đang theo đuổi là inlineSourceMap và inlineSources.

Điều này cũng giúp giải quyết các sự cố bằng cách di chuyển .js được tạo ra đến các đường dẫn khác nhau và không phải lo lắng về nơi tệp bản đồ sẽ đến.