Visual Studio Code debugowanie chrome, punkty przerwania nie będą trafiać

Question

Mam aplikację Angular2/maszynopis, którą rozwijam w VSCode. Używam Gulpa do budowania plików maszynopisu i gulp-sourcemap do tworzenia plików map. Dołączanie/uruchamianie chrome działa dobrze po kilku manipulacjach z rozszerzeniem debugowania chrome dla VSCode, ale nie mogę dostać punktów przerwania do trafienia. Prowadzę witrynę z "dnx web", ale nie sądzę, że powinno to mieć znaczenie.

Moja struktura folderów jest tak:

project/wwwroot/index.html 
project/wwwroot/app/myfile.js 
project/wwwroot/app/myfile.js.map 
project/scripts/myfile.ts 

My launch.json wygląda następująco:

{ 
    "version": "0.2.0", 
    "configurations": [ 
    { 
     "name": "Launch", 
     "type": "chrome", 
     "request": "launch", 
     "url": "http://localhost:8001/portfolios", 
     "runtimeArgs": [ 
      "--new-window", //Open in new window 
      "--user-data-dir=C:/temp/", 
      "--remote-debugging-port=9222" 
     ], 
     "webRoot": "${workspaceRoot}/wwwroot", 
     "sourceMaps": true 
    } 
    ] 
} 

i moim zadaniem łyk build wygląda tak:

gulp.task('ts', function (done) { 
    var files = gulp.src(tsToMove) 
    .pipe(sourcemaps.init()) 
    .pipe(ts(tsConfig), undefined, ts.reporter.fullReporter()); 
    return files.js.pipe(sourcemaps.write(".",{sourceRoot: '../scripts'})) 
    .pipe(gulp.dest('scripts')); 
}) 

Zostały zweryfikowane że pliki map są generowane i przechowywane w tym samym folderze, co pliki js. podczas budowania.

Dzięki za wszelkie wskazówki.

Answer 1

Ustawienie położenia obszaru roboczego na położenie moich plików maszynopisu, a nie moje pliki kompilacji, sprawdziło się.

niezweryfikowane Breakpoint (mój skompilowany lokalizacja pliku)

"webRoot": "${workspaceRoot}/build/client" 

robocza Breakpoint (mój ts plik lokalizacja)

"webRoot": "${workspaceRoot}/client" 

czuję powinienem wspomnieć, że używam debugger dla Chrome rozszerzeniem

Answer 2

Jeśli używasz debuggera dla rozszerzenia chrome, sprawdziłbym czy używasz chrome wi zdalne debugowanie? Po uruchomieniu chrome ze zdalnym debugowaniem udało mi się uruchomić moje. z https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code

Do teraz, Chrome musi być uruchomiony z włączoną zdalnego debugowania i obsługuje tylko jeden jednoczesne połączenia. Oznacza to, że jeśli otworzysz DevTools w Chrome, połączenie z Kodem VS zostanie przerwane przez Chrome. Jest to nieco denerwujące i mamy nadzieję, że problem zostanie wkrótce rozwiązany.

Aby to zrobić, mam plik wsadowy, który otwiera chrome za pomocą tego polecenia.

start /d "C:\Program Files (x86)\Google\Chrome\Application" chrome.exe --remote-debugging-port=9222 

Answer 3

Więc już ingerować w to godzinami i wreszcie to działa: RVCA18 był na jego odpowiedź:

Musisz upewnić się, że webRoot jest ustawiony prawidłowo, a właściwie będzie zależy od miejsca, w którym korzystasz z dnx. Jeśli z folderu "projekt", to to jest rzeczywistej webRoot.

Możesz również użyć pliku sourcemap.Jeśli otworzysz plik, ma on strukturę podobną do tej: {"version":3,"sources":[],"names":[],"sourcesContent":[]}

Znajdź propozycję sources, która jest tablicą wszystkich plików źródłowych. Na przykład, jeśli szukam jednej z nazw mojej klasy, uważam, że źródłem może być coś takiego: "webpack:///./app/components/TargetCard.js". Używam WebPACK i mają strukturę dir jak poniżej (uproszczony):

main 
    app 
    dist 

co oznacza, że ​​mój webRoot miarę VSCode jest zainteresowana powinna równać się dir jeden poziom wyżej „aplikacji”, lub „główny”. To jest także miejsce, w którym uruchamiam webpack, więc ma to sens. Jeśli otworzę folder "główny" w VSCode, to mój ${workspaceRoot} będzie również "główny", więc aby debugger znalazł moje pliki, powinienem ustawić webRoot po prostu jako ${workspaceRoot}.