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代码调试我的Angular App,但似乎Angular和Visual Studio代码存在问题。
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
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'
})
});
3 个解决方案
#1
7
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):
另外,不要忘记在调试模式下启动Chrome(对于Mac):
/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
#2
2
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。在遍历Internet之后,我在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'
- use => devtool:'source-map'
- instead of => devtool: 'cheap-module-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
新的DefinePlugin()之后的插件列表,即
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将绝对根添加到工作空间,并正确解析文件。
#3
0
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"
]
}
]
}
#1
7
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):
另外,不要忘记在调试模式下启动Chrome(对于Mac):
/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
#2
2
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。在遍历Internet之后,我在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'
- use => devtool:'source-map'
- instead of => devtool: 'cheap-module-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
新的DefinePlugin()之后的插件列表,即
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将绝对根添加到工作空间,并正确解析文件。
#3
0
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"
]
}
]
}