wizualne debugowanie kodu Studio z angularjs

Question

Chcę debugowania aplikacji z mojego kątowa nowego kodu Visual Studio, ale wydaje się, że jest problem z Kątowymi i Visual Studio Code ..

To mój launch.json:

{ 
    "version": "0.1.0", 
    // List of configurations. Add new configurations or edit existing ones. 
    // ONLY "node" and "mono" are supported, change "type" to switch. 
    "configurations": [ 
     { 
      // Name of configuration; appears in the launch configuration drop down menu. 
      "name": "Manager", 
      // Type of configuration. Possible values: "node", "mono". 
      "type": "node", 
      // Workspace relative or absolute path to the program. 
      "program": "/Volumes/Transcend/WorkArea/Manager/app/app.js", 
      // Automatically stop program after launch. 
      "stopOnEntry": true, 
      // Command line arguments passed to the program. 
      "args": [], 
      // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace. 
      "cwd": ".", 
      // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH. 
      "runtimeExecutable": null, 
      // Optional arguments passed to the runtime executable. 
      "runtimeArguments": [], 
      // Environment variables passed to the program. 
      "env": { }, 
      // Use JavaScript source maps (if they exist). 
      "sourceMaps": false 
     }, 
     { 
      "name": "Attach", 
      "type": "node", 
      // TCP/IP address. Default is "localhost". 
      "address": "localhost", 
      // Port to attach to. 
      "port": 5858, 
      "sourceMaps": false 
     } 
    ] 
} 

mam ten błąd przy próbie debugowania mój kątowa aplikację

błąd:

ReferenceError: angular is not defined 
    at Object.<anonymous> (/Volumes/Transcend/WorkArea/Manager/app/app.js:1:79) 
    at Module._compile (module.js:456:26) 
    at Object.Module._extensions..js (module.js:474:10) 
    at Module.load (module.js:356:32) 
    at Function.Module._load (module.js:312:12) 
    at Module.runMain [as _onTimeout] (module.js:497:10) 
    at Timer.listOnTimeout [as ontimeout] (timers.js:112:15) 
MacBook-Pro:Manager user$ cd '/Volumes/Transcend/WorkArea/Manager'; 'node' '--debug-brk=55539' '/Volumes/Transcend/WorkArea/Manager/app/app.js' 
debugger listening on port 55539 

Killed: 9 

app.js

/// <reference path="../typings/angularjs/angular.d.ts"/> 

var routerApp = angular.module('uiRouter', ['ui.router', 'uiRouter.dmvs']); 

routerApp.config(function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/home'); 

    $stateProvider 

     .state('home', { 
      url: '/home', 
      templateUrl: 'app/dmvs/partial-d.html', 
      controller:'dController' 
     }) 

}); 

Answer 1

Dobra, z pomocą osób z @code, udało mi się. Teraz mogę w pełni zdebugować klienta Angular z IDE! Mamy nadzieję, że to pomoże komuś innemu ...

Najpierw musisz pobrać rozszerzenie "Debugger for Chrome". Można to zrobić wpisując w ten sposób:

F1 
ext Install Extensions 
debug (then select Debugger For Chrome) 

Raz, że jest zainstalowany, kiedyś znaleźć instrukcje msft tu:

https://marketplace.visualstudio.com/items/msjsdiag.debugger-for-chrome

mogę tylko dostać „Dołącz” metoda pracy, więc używam tego z Chrome. Oto ostateczna wersja pliku launch.son używać:

{ 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      // Use this to get debug version of Chrome running: 
      // /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 
      "name": "Attach", 
      "type": "chrome", 
      "request": "attach", 
      "port": 9222, 
      "webRoot": "./www" 
     } 
    ] 
} 

Ponadto, nie zapomnij, aby uruchomić Chrome w trybie debugowania z tym (Mac):

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 

Wielkiej redaktor @ kod!

OBS: Nie zapomnij zabić instancji ALL Chrome jak wspomniano tutaj: https://github.com/Microsoft/vscode-chrome-debug/issues/111#issuecomment-189508090

Answer 2

miałem podobny problem, ale mój projekt obejmował również WebPACK który spowodował powyższe rozwiązania nie powiedzie się. Po przejściu przez internet znalazłem rozwiązanie w wątku na github:

https://github.com/AngularClass/angular2-webpack-starter/issues/144#issuecomment-218721972

W każdym razie, jest to, co zostało zrobione.

Uwaga: - Przed rozpoczęciem należy sprawdzić, czy masz najnowszą wersję kodu Visual Studio, a także zainstalowane rozszerzenie o nazwie „Debugger for Chrome” w Kodeksie VS.

Po pierwsze w "./config/webpack.dev.Js

• zastosowanie =>devtool: 'źródło-map'
• zamiast =>devtool: 'tani-module-source-map'

Następnie w instalacji i obsłudze write-file-WebPack-plugin:

• npm zainstalować --save write-file-WebPACK-plugin

Dodaj wtyczkę do”./config/webpack.dev.js' dodając:

• const WriteFilePlugin = require ('write-file-WebPack-plugin');

pod wtyczkami Webpack u góry. Kontynuuj, aby dodać:

• nowy WriteFilePlugin()

do listy wtyczek po Nowym nowego DefinePlugin(), tj

plugins:[ 
    new DefinePlugin({....}), 
    new WriteFilePlugin(), 
    .... 
] 

Gwarantuje to, że mapy źródłowe są zapisywane na dysku

Wreszcie, mój launch.json jest podany poniżej.

{ 
    "version": "0.2.0", 
    "configurations": [{ 
     "name": "Launch Chrome against localhost, with sourcemaps", 
     "type": "chrome", 
     "request": "launch", 
     "url": "http://localhost:3000/", 
     "runtimeArgs": [ 
      "--user-data-dir", 
      "--remote-debugging-port=9222" 
     ], 
     "sourceMaps": true, 
     "diagnosticLogging": true, 
     "webRoot": "${workspaceRoot}", 
     "userDataDir": "${workspaceRoot}/.vscode/chrome" 
    }, 
    { 
     "name": "Attach to Chrome, with sourcemaps", 
     "type": "chrome", 
     "request": "attach", 
     "url": "http://localhost:3000/", 
     "port": 9222, 
     "sourceMaps": true, 
     "diagnosticLogging": true, 
     "webRoot": "${workspaceRoot}" 
    }] 
} 

Zauważ brak "/ dist /" w webroot. z tą konfiguracją, mapy źródłowe są w ./dist/, ale wskazują na ./src/. vscode dodaje bezwzględny katalog główny do obszaru roboczego i poprawnie rozpoznaje plik.

Answer 3

Używaliśmy Gulp.js i musiał dodać:

"sourceMapPathOverrides": { 
    "/source/*":"${workspaceRoot}/[directory where all of our mappings are located]/*" 
} 

Hope this helps kogoś, kto stara się debugować angularjs aplikację z kodu VS.

Oto przykładowy config:

{ 
"version": "0.2.0", 
"configurations": [ 
    { 
     "type": "chrome", 
     "request": "launch", 
     "name": "Launch Chrome", 
     "url": "[your url here]", 
     "webRoot": "${workspaceRoot}/[directory where your app is located]", 
     "sourceMaps": true,   
     "sourceMapPathOverrides": { 
      "/source/*":"${workspaceRoot}/[directory where your app is located and any additional .js files that are required by your app]/*" 
     },   
     "userDataDir": "${workspaceRoot}/.vscode/chrome", 
     "runtimeArgs": [ 
      "--disable-session-crashed-bubble" 
     ] 
    } 
] 
}