javascript 使用 AngularJS 调试 Visual Studio Code
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31075856/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Visual Studio Code debugging with AngularJS
提问by miofino
I want to debug my Angular App with the new Visual Studio Code, but It seems there is a problem with Angular and Visual Studio Code..
我想使用新的 Visual Studio Code 调试我的 Angular 应用程序，但似乎 Angular 和 Visual Studio Code 存在问题。
This is my launch.json:
这是我的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
}
]
}
I have this error when I try to debug my Angular app,
当我尝试调试我的 Angular 应用程序时出现此错误，
Error:
错误：
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
应用程序.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'
})
});
回答by Dicer
Okay, with the help of the @code folks, I got it working. I'm now able to fully debug an Angular client from the IDE! Hopefully, this will help someone else...
好的，在@code 人员的帮助下，我让它工作了。我现在可以从 IDE 完全调试 Angular 客户端了！希望这会帮助别人......
First, you need to download the "Debugger for Chrome Extension." You do this by typing this:
首先，您需要下载“Debugger for Chrome Extension”。您可以通过键入以下内容来执行此操作：
F1
ext Install Extensions
debug (then select Debugger For Chrome)
Once that is installed, I used MSFT's instructions found here:
安装后，我使用了此处找到的 MSFT 说明：
https://marketplace.visualstudio.com/items/msjsdiag.debugger-for-chrome
https://marketplace.visualstudio.com/items/msjsdiag.debugger-for-chrome
I only can get the "attach" method working, so I use that with Chrome. Here is the final version of the launch.son file I use:
我只能让“附加”方法起作用，所以我在 Chrome 中使用它。这是我使用的 launch.son 文件的最终版本：
{
"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"
}
]
}
Also, don't forget to start Chrome in debug mode with this (for Mac):
另外，不要忘记用这个（对于 Mac）在调试模式下启动 Chrome：
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
Great editor @code!
伟大的编辑器@code！
OBS: Don't forget to kill ALL Chrome Instances as mentioned here: https://github.com/Microsoft/vscode-chrome-debug/issues/111#issuecomment-189508090
OBS：不要忘记杀死这里提到的所有 Chrome 实例：https: //github.com/Microsoft/vscode-chrome-debug/issues/111#issuecomment-189508090
回答by malmike21
I was having a similar issue but my project also included webpack that caused the above solutions to fail. After traversing the Internet I found a solution in a thread on github:
我遇到了类似的问题，但我的项目还包含导致上述解决方案失败的 webpack。上网查了一下，在github上的一个帖子里找到了解决办法：
https://github.com/AngularClass/angular2-webpack-starter/issues/144#issuecomment-218721972
https://github.com/AngularClass/angular2-webpack-starter/issues/144#issuecomment-218721972
Anyway, this is what was done.
无论如何，这就是所做的。
Note:-Before you start you must check whether you have the latest version of visual studio code and also have installed the extension called 'Debugger for Chrome' within VS Code.
注意：-在开始之前，您必须检查您是否拥有最新版本的 Visual Studio 代码，并且是否已经在 VS Code 中安装了名为“ Debugger for Chrome”的扩展程序。
Firstly, in './config/webpack.dev.js'
首先，在'./config/webpack.dev.js'
- use => devtool: 'source-map'
- instead of => devtool: 'cheap-module-source-map'
- 使用 => devtool: 'source-map'
- 而不是 => devtool: 'cheap-module-source-map'
Then install and use the write-file-webpack-plugin:
然后安装并使用 write-file-webpack-plugin：
- npm install --save write-file-webpack-plugin
- npm install --save write-file-webpack-plugin
Add the plugin to './config/webpack.dev.js' by adding:
通过添加以下内容将插件添加到“./config/webpack.dev.js”：
- const WriteFilePlugin = require('write-file-webpack-plugin');
- const WriteFilePlugin = require('write-file-webpack-plugin');
under the Webpack Plugins at the top. Continue to add:
在顶部的 Webpack 插件下。继续补充：
- new WriteFilePlugin()
- 新的 WriteFilePlugin()
to the list of plugins after new new DefinePlugin(), i.e
到新的新定义插件（）后的插件列表，即
plugins:[
new DefinePlugin({....}),
new WriteFilePlugin(),
....
]
This ensures that the source maps are written to disk
这可确保将源映射写入磁盘
Finally, my launch.json is given below.
最后，下面给出了我的launch.json。
{
"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}"
}]
}
notice the absence of '/dist/' in the webroot. with this config, source-maps are in ./dist/, but they point to ./src/. vscode prepends the absolute root to the workspace, and correctly resolves the file.
注意 webroot 中没有“/dist/”。使用此配置，源映射位于 ./dist/，但它们指向 ./src/。vscode 将绝对根添加到工作区，并正确解析文件。
回答by cr1pto
We were using Gulp.js and had to add the following:
我们正在使用 Gulp.js 并且必须添加以下内容：
"sourceMapPathOverrides": {
"/source/*":"${workspaceRoot}/[directory where all of our mappings are located]/*"
}
Hope this helps someone who is trying to debug an angularjs app with VS Code.
希望这对尝试使用 VS Code 调试 angularjs 应用程序的人有所帮助。
Here's a sample 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"
]
}
]
}
