Visual Studio Mã gỡ lỗi với AngularJS

Question

Tôi muốn gỡ lỗi App góc của tôi với Visual Studio mới Mã, nhưng Dường như có một vấn đề với góc và Visual Studio Mã ..

Đây là launch.json tôi:

{ 
    "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 
     } 
    ] 
} 

tôi có lỗi này khi tôi cố gắng để gỡ lỗi ứng dụng kiễu góc của tôi,

lỗi:

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

Được rồi, với sự trợ giúp của những người viết mã @, tôi hiểu nó hoạt động. Bây giờ tôi có thể gỡ lỗi hoàn toàn một máy khách Angular từ IDE! Hy vọng rằng, điều này sẽ giúp người khác ...

Trước tiên, bạn cần tải xuống "Trình gỡ lỗi cho tiện ích mở rộng của Chrome". Bạn làm điều này bằng cách gõ này:

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

Khi đã được cài đặt, tôi đã sử dụng hướng dẫn MSFT đã tìm thấy ở đây:

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

tôi chỉ có thể nhận được "đính kèm" phương pháp làm việc, vì vậy tôi sử dụng với Chrome. Đây là phiên bản cuối cùng của tập tin launch.son tôi sử dụng:

{ 
    "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" 
     } 
    ] 
} 

Ngoài ra, đừng quên để bắt đầu Chrome trong chế độ gỡ lỗi với điều này (dành cho Mac):

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

lớn editor @ mã!

OBS: Đừng quên để giết Instances ALL Chrome như đã đề cập ở đây: https://github.com/Microsoft/vscode-chrome-debug/issues/111#issuecomment-189508090

Answer 2

Tôi đã gặp một vấn đề tương tự nhưng dự án của tôi cũng bao gồm webpack gây ra các giải pháp trên thất bại. Sau khi vượt qua Internet Tôi tìm thấy một giải pháp trong một thread trên github:

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

Dù sao, đây là những gì đã được thực hiện.

Lưu ý: - Trước khi bắt đầu, bạn phải kiểm tra xem bạn có phiên bản mã studio trực quan mới nhất hay chưa và đã cài đặt phần mở rộng có tên 'Debugger for Chrome' trong Mã VS.

Thứ nhất, trong './config/webpack.dev.js'

• sử dụng =>devtool: 'nguồn bản đồ'
• thay vì =>devtool: 'rẻ-mô-đun-source-bản đồ'

Sau đó, cài đặt và sử dụng write-file-webpack-plugin:

• NPM cài đặt --save ghi-file-webpack-plugin

Thêm plugin' ./config/webpack.dev.js' bằng cách thêm:

• const WriteFilePlugin = require ('viết-file-webpack-plugin');

trong plugin Webpack ở trên cùng. Tiếp tục để thêm:

• WriteFilePlugin mới()

vào danh sách các plugin sau DefinePlugin mới mới(), ví dụ:

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

này đảm bảo rằng các bản đồ nguồn được ghi vào đĩa

Cuối cùng, launch.json của tôi được đưa ra dưới đây.

{ 
    "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}" 
    }] 
} 

chú ý sự vắng mặt của '/ dist /' trong webroot. với cấu hình này, các bản đồ nguồn nằm trong ./dist/, nhưng chúng trỏ tới ./src/. vscode thêm trước gốc tuyệt đối vào vùng làm việc và giải quyết chính xác tệp.

Answer 3

Chúng tôi đã sử dụng Gulp.js và phải thêm như sau:

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

Hope this helps ai đó đang cố gắng để gỡ lỗi một ứng dụng angularjs với VS Mã.

Dưới đây là một cấu hình mẫu:

{ 
"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" 
     ] 
    } 
] 
}