Typescript + gulp-sourcemaps สร้างแผนที่ได้แต่ DevTools ของเบราว์เซอร์ไม่รู้จัก

การใช้ Typescript 1.8, Gulp 3.9.0, gulp-sourcemaps 1.6.0 และไฟล์ tsconfig.json

เมื่อหลายปีก่อน สิ่งนี้ทำงานได้อย่างปกติดี ช่วงหลัง (และผมไม่สามารถระบุได้ว่าเมื่อไหร่) ทั้ง Chrome และ Firefox ก็ไม่สามารถ ใช้ sourcemap ได้จริง ๆ

ฉันได้เปิดใช้งาน sourcemaps บน Chrome และตรวจพบว่ามี sourcemap บอกฉันในคอนโซลว่า:

"ตรวจพบ Source Map ไฟล์ที่เกี่ยวข้องควรถูกเพิ่มไปยังโครงสร้างไฟล์ คุณสามารถดีบักไฟล์ซอร์สที่แก้ไขแล้วเหล่านี้ได้เหมือนกับไฟล์ JavaScript ปกติ ไฟล์ที่เกี่ยวข้องสามารถเข้าถึงได้ผ่านโครงสร้างไฟล์หรือกด Ctrl + P."

อย่างไรก็ตาม ไฟล์ต้นฉบับไม่สามารถเข้าถึงได้ผ่านวิธีใด ๆ ทั้งสองวิธี

โครงสร้างไฟล์ที่สร้างขึ้นบนการสร้างในเครื่อง (ใช้การเข้าสู่ระบบเป็นตัวอย่าง):

build
  |- resources
      |- js
         |- app.js
         |- app.js.map
         |- typescript
              |- app.ts
              |- sections
                    |- login
                         |- LoginService.ts
                         |- LoginDirective.ts
                         |- LoginController.ts

อย่างไรก็ตาม Chrome จะแสดงสิ่งนี้เฉพาะในต้นไม้ไฟล์:

build
  |- resources
      |- js
         |- app.js

นั่นแหล่ะ ไม่มีโฟลเดอร์ Typescript ไม่มีไฟล์ Ctrl-P ก็หาไม่เจอเช่นกัน ดังนั้นเมื่อฉันกำลังดีบัก ฉันจึงดีบักได้เพียงไฟล์ app.js ที่คอมไพล์แล้วเท่านั้น แทนที่จะเห็นโค้ด Typescript

ส่วนที่เกี่ยวข้องของไฟล์ gulp ของฉัน:

var ts = require( 'gulp-typescript' ); // compiles typescript
var tsProject = ts.createProject( 'tsconfig.json' );

gulp.task( 'compile:typescript', function () {
    var tsResult = tsProject
        .src() // instead of gulp.src(...)
        .pipe( sourcemaps.init() )
        .pipe( ts( tsProject ) );

    return tsResult.js
        .pipe( sourcemaps.write( '.', 
             {
               includeContent: false, 
               sourceRoot: 'typescript'
             }) 
         )
        .pipe( './build' )
        ;
} );

ฉันได้ดูเอกสารและวิธีแก้ปัญหาต่าง ๆ สำหรับสถานการณ์ที่คล้ายกันแล้ว แต่ฉันยังไม่สามารถทำให้ Chrome ใช้ sourcemaps ได้

https://www.npmjs.com/package/gulp-sourcemaps

https://github.com/ivogabe/gulp-typescript/issues/201

https://github.com/floridoo/gulp-sourcemaps/issues/89#issuecomment-73184103

gulp-typescript: ปัญหาในการใช้ createProject ... "และอื่น ๆ อีกมากมาย!"

ไม่แน่ใจว่าทำไมสิ่งนี้ถึงไม่ได้ผลอย่างถูกต้อง ใครมีความเห็นบ้างครับ/คะ?

คำตอบ #1

ในเครื่องมือพัฒนา Chrome เปิดการตั้งค่า (F1 บน Windows)

ตรวจสอบให้แน่ใจว่าตัวเลือก:

แหล่งที่มา :

• เปิดเผยไฟล์ในตัวนำทางโดยอัตโนมัติ
• เปิดใช้งานแผนที่แหล่งที่มาของ JavaScript

ได้รับการตรวจสอบ

คำตอบ #2

อาจจะไม่ใช่สิ่งที่คุณกำลังมองหาอย่างแน่นอน ผมใช้ webpack และ source-map-loader และสามารถทำให้แผนที่ต้นทางแสดงผลได้ถูกต้อง แม้ว่าจะอยู่ภายใต้ "webpack://"

คุณสามารถตรวจสอบการตั้งค่าของฉันได้ที่ https://github.com/unional/aurelia-logging-color

หวังว่ามันจะช่วยได้นะ