光盘安装win7系统步骤:Angular2使用vscode断点调试ts文件的方法
光盘安装win7系统步骤VSCode自带debugger工具，管理后台项目使用angular2，试了下调试ts文件十分方便。下面是具体的实现步骤以及踩的坑。当你调试出来后，回头看这个设置还是十分简单的。我使用的是ng-cli创建的项目。后面再补充一般项目的调试，感觉也差不多。解决了 “由于未找到生成的代码，已忽略断点(是否是源映射问题?) ” ，参考下面的 我的环境配置我的环境配置1. node v7.3.02. npm 3.10.103. ng &= 1.3 // 这一点非常重要，我一开始的版本低于这个版本，就一直报 “由于未找到生成的代码，已忽略断点(是否是源映射问题?) ” 4. 在vscode中安装 vscode for chome 插件， 版本要3.1.4以上5. 生成launch.json， 文件内容改为以下内容{ "version": "0.2.0", "configurations": [ // 这个数组里包含了可以包含多个配置对象
"name": "ng serve", // 配置对象的名称，你可以选择其中一个配置运行调试
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200/#",
"webRoot": "${workspaceRoot}"
"name": "ng test",
"type": "chrome",
"request": "launch",
"url": "http://localhost:9876/debug.html",
"webRoot": "${workspaceRoot}"
"name": "ng e2e",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
"protocol": "inspector",
"args": ["${workspaceRoot}/protractor.conf.js"]
]}1. ng-cli版本更新//1. 先卸载npm uninstall -g angular-clinpm uninstall --save-dev angular-cli//2. 全局安装npm uninstall -g @angular/clinpm cache clean# if npm version is & 5 then use `npm cache verify` to avoid errors (or to avoid using --force)npm install -g @angular/cli@latest//3. 本地安装npm install --save-dev @angular/cli@latest2. launch.json配置修改第一步先要安装vscode for chrome这个插件：插件安装第二步修改launch.json配置：在项目中生成chrome的launch.json文件第三步更改lauch.json文件配置：更改后的launch.json第四步启动调试：注意：该调试需要你在vscode的终端中已经执行过ng serve启动过项目，否则无法调试这里会生成三个select选项，依次是launch.json里三个对象的name启动调试第五步启动后展示：先在需要调试的ts页面中打下断点，点击启动调试按钮后， 会为项目打开一个新的chrome页面，然后需要刷新页面才能开始断点调试vscode自动打开新的chrome窗口页面，刷新该页面后即可如下调试这是最后可调试的页面以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。为了账号安全，请及时绑定邮箱和手机
点击这里，将文章分享到自己的动态
用VSCode可以直接调试Angular代码
从VS Code 1.14版本开始，可以直接调试Angular代码。
这篇文章很短，但是非常重要，请仔细看哦！
第一步：环境配置
确保你的Chrome安装在默认位置
确保你的VS Code里面安装了Debugger for Chrome这个插件
把@angular/cli安装到全局空间npm install -g @angular/cli，国内用户请使用cnpm进行安装。注意，你最好升级到最新版本的@angular/cli，避免版本兼容问题。
用@angular/cli创建新项目ng new my-app ，本来就已经用@angular/cli创建的项目请忽略这一步，继续往下走，因为只要是cli创建的项目，后面的步骤都是有效的。
用VS Code打开项目，进入项目根目录
第二步：配置launch.json
请参照以上步骤打开launch.json配置文件。
如果你是Windows用户，那么应该是这样的：
请把你本地launch.json文件里面的内容先删光，然后把以下内容贴进去：
"version": "0.2.0",
"configurations": [
"type": "chrome",
"request": "launch",
"name": "Chrome",
"url": "http://localhost:4200",
"webRoot": "${workspaceRoot}"
第三步：开始Debug
在你的app.component.ts的构造函数里面打个断点，我本地是这样打断点的：
打开终端，进入项目根目录，运行ng serve启动项目，然后从VS Code的debug界面启动Chrome：
请注意，一定要用F5再次刷新一下Chrome才能进入断点！
最后：补充说明
VS Code最强的地方在于：单元测试代码也是可以Debug的哦！
国内大多数企业并不做单元测试，我就先不写了吧，如果你想对单元测试代码进行Debug，请参考英文原版https://github.com/weinand/vscode-recipes/tree/master/Angular-CLI ，最后一小节Debug Unit Tests。
本文使用的测试项目代码请到这里下载：
更多参考资源请看这里：
若觉得本文不错，就分享一下吧！
评论加载中...
相关文章推荐
正在加载中
作者相关文章23:07 提问
angular4中使用谷歌地图googlemap，地图不展示的问题
在angular4里，构建了一个网页应用，在一个地图组件里，我试图调用googlemap的api使用地图服务，但是地图始终不展示出来：
下面是component.html文件的完整代码：
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2RsTJUIjfDXs7N2sBIWCE8HPGEu6nxB0&callback=initMap"&&br&
alert(&s&);&br&
// This example adds a marker to indicate the position of Bondi Beach in Sydney,&br&
// Australia.&br&
function initMap() {&br&
var map = new google.maps.Map(document.getElementById('map'), {&br&
alert(&sss&);&br&
zoom: 4,&br&
center: {lat: -33, lng: 151}&br&
&pre&&code&
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var beachMarker = new google.maps.Marker({
position: {lat: -33.890, lng: 151.274},
icon: image
&/code&&/pre&
&p&&style&&br&
#map {&br&
height: 400&br&
width: 200&br&
&/style&&/p&
&p&有意思的是，这一段我放在在线js工具里，都能出来地图，为什么这里就是出不来呢？可能是什么问题？在css文件里我也定义了宽高了。&/p&
按赞数排序
1楼的回答别浪费大家时间了。。。我肯定搜过了才会来csdn提问啊。
我找到的一个比较类似的问题是这个链接：
但是具体解决方案是什么，我没有看懂。因为我是angular4，不是angularjs
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐Angular JavaScript Tutorial in VS Code
This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Learn more
Dismiss this update
Using Angular in VS Code
is a popular JavaScript library for building web application user interfaces developed by Google. The Visual Studio Code editor supports Angular IntelliSense and code navigation out of the box.
Welcome to Angular
We'll be using the
for this tutorial. To install and use the command line interface as well as run the Angular application server, you'll need the
JavaScript runtime and
(the Node.js package manager) installed. npm is included with Node.js which you can install from .
Tip: To test that you have Node.js and npm correctly installed on your machine, you can type node --version and npm --version.
To install the Angular CLI, in a terminal or command prompt type:
npm install -g @angular/cli
This may take a few minutes to install. You can now create a new Angular application by typing:
ng new my-app
my-app is the name of the folder for your application. This may take a few minutes to create the Angular application in
and install its dependencies.
Let's quickly run our Angular application by navigating to the new folder and typing ng serve to start the web server and open the application in a browser:
You should see &Welcome to app!!& on http://localhost:4200 in your browser. We'll leave the web server running while we look at the application with VS Code.
To open your Angular application in VS Code, open another terminal (or command prompt) and navigate to the my-app folder and type code .:
Syntax highlighting and bracket matching
Now expand the src\app folder and select the app.component.ts file. You'll notice that VS Code has syntax highlighting for the various source code elements and, if you put the cursor on a parentheses, the matching bracket is also selected.
IntelliSense
As you hover your mouse over text in the file, you'll see that VS Code gives you information about key items in your source code. Items such as variables, classes and Angular decorators are a few examples where you'll be presented with this information.
As you start typing in app.component.ts, you'll see smart suggestions and code snippets.
You can click the information button (i) to see a flyout with more documentation.
VS Code uses the TypeScript language service for code intelligence () and it has a feature called
(ATA). ATA pulls down the npm Type Declaration files (*.d.ts) for the npm modules referenced in the package.json.
Go to Definition, Peek definition
Through the TypeScript language service, VS Code can also provide type definition information in the editor through Go to Definition (F12) or Peek Definition (??F12 (Windows, Linux Ctrl+Shift+F12)). Open the app.module.ts file and put the cursor over AppComponent in the bootstrap property declaration, right click and select Peek Definition. A
will open showing the AppComponent definition from app.component.ts.
Press Escape to close the Peek window.
Hello World!
Let's update the sample application to &Hello World&. Go back to the app.component.ts file and change the title string in AppComponent to &Hello World&.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
export class AppComponent {
title = 'Hello World';
Once you save the app.component.ts file, the running instance of the server will update the web page and you'll see &Welcome to Hello World!!&.
Tip: VS Code supports Auto Save, which by default saves your files after a delay. Check the Auto Save option in the File menu to turn on Auto Save or directly configure the files.autoSave user .
Debugging Angular
To debug the client side Angular code, we'll need to install the
extension.
Note: This tutorial assumes you have the Chrome browser installed. The builders of the Debugger for Chrome extension also have versions for the
Open the Extensions view (??X (Windows, Linux Ctrl+Shift+X)) and type 'chrome` in the search box. You'll see several extensions which reference Chrome.
Press the Install button for Debugger for Chrome. The button will change to Installing then, after completing the installation, it will change to Reload. Press Reload to restart VS Code and activate the extension.
Set a breakpoint
To set a breakpoint in app.component.ts, click on the gutter to the left of the line numbers. This will set a breakpoint which will be visible as a red circle.
Configure the Chrome debugger
We need to initially configure the . To do so, go to the Debug view (??D (Windows, Linux Ctrl+Shift+D)) and click on gear button to create a launch.json debugger configuration file. Choose Chrome from the Select Environment dropdown. This will create a launch.json file in a new .vscode folder in your project which includes a configuration to launch the website.
We need to make one change for our example: change the port of the url from 8080 to 4200. Your launch.json should look like this:
"version": "0.2.0",
"configurations": [
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
Press F5 or the green arrow to launch the debugger and open a new browser instance. The source code where the breakpoint is set runs on startup before the debugger was attached so we won't hit the breakpoint until we refresh the web page. Refresh the page and you should hit your breakpoint.
You can step through your source code (F10), inspect variables such as AppComponent, and see the call stack of the client side Angular application.
The Debugger for Chrome extension README has lots of information on other configurations, working with sourcemaps, and troubleshooting. You can review it directly within VS Code from the Extensions view by clicking on the extension item and opening the Details view.
Popular Starter Kits
In this tutorial, we used the Angular CLI to create a simple Angular application. There are lots of great samples and starter kits available to help build your first Angular application.
The VS Code team has created
for more complex debugging scenarios. There you'll find the
recipe which also uses the Angular CLI and goes into detail on debugging the generated project's unit tests.
MEAN Starter
If you'd like to see a full MEAN (MongoDB, Express, Angular, Node.js) stack example, look at . They have documentation and an application generator for a sample MEAN project. You'll need to install and start , but you'll quickly have a MEAN application running. VS Code also has great
through the
extension.
is another popular web framework. If you'd like to see an example of React working with VS Code, check out the
tutorial. It will walk you through creating an React application and configuring the launch.json file for the
extension.
Angular Extensions
In addition to the functionality VS Code provides out of the box, you can install VS Code extensions for greater functionality.
Click on an extension tile above to read the description and reviews on the .
To find other Angular extensions, open the Extensions view (??X (Windows, Linux Ctrl+Shift+X)) and type 'angular' to see a filtered list of Angular extensions.
The community has also created &Extension Packs& which bundle useful extensions together (for example, a linter, debugger, and snippets) into a single download. To see available Angular extension packs, add the &extension packs& category to your filter (angular @category:&extension packs&).
Hello from Seattle.angularjs - Visual Studio Code Chrome Debugger Extension - [webkit-debug-adapter] Got response from target app, but no valid target pages found - Stack Overflow
to customize your list.
This site uses cookies to deliver our services and to show you relevant ads and job listings.
By using our site, you acknowledge that you have read and understand our , , and our .
Your use of Stack Overflow’s Products and Services, including the Stack Overflow Network, is subject to these policies and terms.
Join Stack Overflow to learn, share knowledge, and build your career.
or sign in with
I Have an Angular/TypeScript app. I can debug the TypeScript in Chrome because I use map files.
Today I installed Debugger for Chrome from Visual Studio Marketplace.
In theory I should be able to set break points in vscode but I keep getting this error when I run the debugger:
[webkit-debug-adapter] Got response from target app, but no valid target pages found
The reason for this is because I do not know how to set it up properly.
I have my app running on port 9000 using Grunt. Here is the debugger config file:
"version": "0.2.0",
"configurations": [
"name": "Attach",
"type": "chrome",
"request": "attach",
"port": 9000,
"webRoot": "./app/scripts"
Does anyone know how to attach the debugger?
I managed to get this working myself. For anyone else who comes across this problem, here is the config file.
"version": "0.2.0",
"configurations": [
"name": "Launch",
"type": "chrome",
"request": "launch",
"url": "http://localhost:9000/",//Change to whatever you homepage is
"runtimeArgs": [
"--new-window", //Open in new window
"--user-data-dir=C:/dev/", //Can be any directory. Makes chrome load in a different directory so that it opens in a new instance.
"--remote-debugging-port=9222" //Open in port 9222 (standard chrome debug port)
"webRoot": "src/app/", //The directory that contains js, ts and map files
"sourceMaps": true
I got it working with angular-cli with following launch.json
"version": "0.2.0",
"configurations": [
"name": "Launch localhost with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200/", //your application running with ng serve
"sourceMaps": true,
"diagnosticLogging": true,
"runtimeArgs": [
"--new-window", //Open in new window
"--user-data-dir=remote-profile",
"--remote-debugging-port=9222" //Open in port 9222 (standard chrome debug port)
"webRoot": "${workspaceRoot}/src/"
"name": "Attach with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"diagnosticLogging": true,
"webRoot": "${workspaceRoot}/src/"
5,87453954
If Code can't find the target, you can always verify that it is actually available by navigating to :& port >/json in a browser. If you get a response with a bunch of JSON, and can find your target page in that JSON, then the target should be available to this extension.
I'm guessing you are getting a Cannot GET /json but how to fix that i have no idea.
"version": "0.2.0",
"configurations": [
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://www.xgqfrms.xyz/HTML5/Web-Front-End-Job-Interviews/absolutely-center/01.html",
"sourceMaps": true,
"webRoot": "${wwwroot}"
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${wwwroot}"
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Post as a guest
Post as a guest
Post Your Answer
By clicking &Post Your Answer&, you acknowledge that you have read our updated ,
and , and that your continued use of the website is subject to these policies.
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabled