Angular2使用vscode断点调试ts文件的方法

VSCode自带debugger工具，管理后台项目使用angular2，试了下调试ts文件十分方便。下面是具体的实现步骤以及踩的坑。当你调试出来后，回头看这个设置还是十分简单的。我使用的是ng-cli创建的项目。后面再补充一般项目的调试，感觉也差不多。

解决了 “由于未找到生成的代码，已忽略断点(是否是源映射问题?) ” ，参考下面的 我的环境配置

我的环境配置

1. node v7.3.0

2. npm 3.10.10

3. 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-cli
npm uninstall --save-dev angular-cli
//2. 全局安装
npm uninstall -g @angular/cli
npm 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@latest

2. 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窗口页面，刷新该页面后即可如下调试

这是最后可调试的页面

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • VsCode新建VueJs项目的详细步骤

    VsCode新建VueJs项目的详细步骤

    本文介绍了VsCode新建VueJs,分享给大家,具体如下: 使用vue-cli快速构建项目 ( vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 安装vue-cli之前,需要先安装了vue和webpack ) · node -v //(版本低引起:bash: npm: command not found) · npm -v //以上帮助检查是否安装 node npm · 输入vue,//测试vue是否安装成功 · 输入vue list //看vue中有哪些子类 np

  • vscode 远程调试python的方法

    vscode 远程调试python的方法

    本文介绍了vscode 远程调试python的方法,分享给大家,具有如下: 实验环境 远程服务器:京东云,1核2G,centos7.3 64bit 本地环境配置 安装vscode,实验用的版本是1.10.2 vscode配置python插件,实验用的python插件版本是0.7.0 vscode配置python远程调试环境 在.vscode文件夹新建一个launch.json文件,然后填写下面的代码 { "version": "0.2.0", "confi

  • VsCode插件整理（小结）

    VsCode插件整理（小结）

    1.VsCode官方插件地址: https://marketplace.visualstudio.com/vscode http://code.visualstudio.com/docs 官网下载地址:http://code.visualstudio.com/ 2.使用方法,可以在官网中搜索需要的插件或者在VsCode的""扩展""中搜索需要的插件 添加方法使用Ctrl+P, 输入 ext install xxxx ,搜索要安装的插件,点击安装按钮即可 3.常用插件

  • VS Code转换大小写、修改选中文字或代码颜色的方法

    VS Code转换大小写、修改选中文字或代码颜色的方法

    一 .默认情况下VS Code的编辑菜单或快捷键中没有 转换为大写,转换为小写的功能 解决方案1:使用键盘配置,开启转换为小写,转换为大写的快捷键 以VS中的 快捷键为例: 小写 ->Ctrl+U 大写=>Ctrl+Shift+U 解决方案2,直接修改keybings.json 添加配置 { "key": "ctrl+shift+u", "command": "editor.action.transformToUpperca

  • 利用VS Code开发你的第一个AngularJS 2应用程序

    利用VS Code开发你的第一个AngularJS 2应用程序

    前言 之前已经给大家介绍了Angular2开发环境搭建教程之VS Code,本文将详细介绍利用VS Code如何开发AngularJS2应用程序的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 运行环境: 1.Windows 10 2.Node 6.7.0 3.npm 3.10.8 4.TypeScript 2.0.3 创建项目 1.创建文件夹:angular2-quickstart,启动VS Code,打开刚创建的文件夹:angular2-quickstart. 2

  • 利用vscode编写vue的简单配置详解

    前言 本文主要给大家介绍的是关于vscode编写vue简单配置的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: PS:现在推荐使用vetur插件 win10崩溃,重装win7,结果sublime text插件无法安装,各种心塞,于是决定转战vscode. 与sublime text相比,vscode有不少优点: 中文输入法支持更好.在windows平台下,需要st支持中文输入需要安装各种插件,而且效果也是差强人意. 基础功能更全面.vscode自带插件管理.git.sidebar.

  • 使用vs code开发Nodejs程序的使用方法

    最近再研究nodejs,苦苦再选一款轻量级的编辑器,由于本人一直从事.net开发,虽然微软推出了Visual Studio 开发node js的插件,而且用着也不错,但是总感觉这个编辑器体量太大(一装就是几个G)!webstore是目前最受欢迎的Nodejs开发IDE之一.受欢迎的原因,当然是对于Nodejs IDE的集成开发环境,集项目创建.编辑.调试于一体,简单的配置,强大的智能提示.因为前面说过我一直做.net开发,刚好微软在2016年推出了vs code 一款轻量级的文本编辑器,可以编写

  • Angular2开发环境搭建教程之VS Code

    Angular2开发环境搭建教程之VS Code

    前言 VSCode是微软推出的一款轻量编辑器,采取了和VS相同的UI界面,搭配合适的插件可以优化前端开发的体验. 布局:左侧是用于展示所要编辑的所有文件和文件夹的文件管理器,依次是`资源管理器`,`搜索`,`GIT`,`调试`,`插件`,右侧是打开文件的编辑区域,最多可同时打开三个编辑区域到侧边. 底栏:依次是`Git Branch`,`error&warning`,`编码格式`等. 一.设置开发环境Node  Js Angular2开发环境主要依赖Node Js和Npm, 需要node 6.9

  • Angular2使用vscode断点调试ts文件的方法

    VSCode自带debugger工具,管理后台项目使用angular2,试了下调试ts文件十分方便.下面是具体的实现步骤以及踩的坑.当你调试出来后,回头看这个设置还是十分简单的.我使用的是ng-cli创建的项目.后面再补充一般项目的调试,感觉也差不多. 解决了 "由于未找到生成的代码,已忽略断点(是否是源映射问题?) " ,参考下面的 我的环境配置 我的环境配置 1. node v7.3.0 2. npm 3.10.10 3. ng >= 1.3 // 这一点非常重要,我一开始的

  • VSCode断点调试CMake工程项目的实现步骤

    VSCode断点调试CMake工程项目的实现步骤

    断点调试在[排查代码错误]时,发挥着巨大的作用!本文旨在使用VS Code实现对CMake工程项目的[断点调试]. 初始状态 假设我们已经有一个CMake工程项目(比如从github上直接下载并做了一些修改),且我们可以保证能够编译.运行(换言之,能保证无语法错误,但不能保证无逻辑错误). mkdir build && cd build cmake .. make -j2 ./run_test 以上命令在终端中输入.被(一气呵成从头至尾地)执行. 此时,我们的目标是,在VS Code中实现

  • 利用Pycharm断点调试Python程序的方法

    1.代码 准备没有语法错误的Python程序: #!/usr/bin/python import numpy as np class Network: def __init__(self,sizes): self.num_layers=len(sizes) self.sizes=sizes self.biases=[np.random.randn(y,1) for y in sizes[1:]] self.weights=[np.random.randn(x,y) \ for x,y in zi

  • VSCode中如何利用d.ts文件进行js智能提示

    VSCode中如何利用d.ts文件进行js智能提示

    自动补全(智能提示) 因为之前微软推出了typescript语言,结合tsd文件,用visual studio写typescript代码是相当爽的,智能提示的功能非常nb. 这个功能理所应当也被vsc继承了. vsc的自动补全用的是typings. 先上效果图: 安装 nodejs 因为需要使用到node里面的npm去安装别人写好的d.ts文件,所以要先安装nodejs.具体步骤不说了,去nodejs官网上下载相应的程序,点击下一步下一步安装就行了. 添加项目的配置文件 在项目的根目录,创建一个

  • JavaScript必备的断点调试技巧总结（推荐）

    JavaScript必备的断点调试技巧总结（推荐）

    目录 为什么要使用 debugger Chrome debugger 基本用法 VS Code 调试 SPA 应用 Chrome 调试 Nodejs 使用 VS Code 调试 Nodejs Conditional Breakpoint 条件断点 总结 为什么要使用 debugger 这篇文章将介绍如何使用断点来进行 JavaScript 调试.在读这篇文章之前,需要问一个问题:为什么要使用断点来进行调试? 我们需要了解使用断点的必要性,否则下文介绍的所有断点调试方法都会是废话.console.

  • 详解使用Visual Studio Code对Node.js进行断点调试

    详解使用Visual Studio Code对Node.js进行断点调试

    在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. 作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可以方便的进行源码断点调试.其步骤有四,详情不表,粗略概括如下: 打开Chrome开发者工具: 点击进入Sources标签页,在页面的左侧就能看到JS代码的目录: 找到需要设置断点的源文件,在需要中断的哪行代码左侧单击鼠标左键,就可以设置断点,如果你的代码是uglify过的,则需导入相应的source

  • 浅析Visual Studio Code断点调试Vue

    很多人习惯在 Chrome 的调试窗口中调试 Vue 代码, 或者直接使用 console.log 来观察变量值, 这是非常痛苦的一件事,需要同时打开至少 3 个窗体.个人还是更加习惯于断点调试.这篇文章将介绍如何配置 Visual Studio Code 和 Chrome 来完成直接在 VS Code 断点调试代码, 并且在VS Code的调试窗口看到Chrome中console相同的值. 设置 Chrome 远程调试端口 首先我们需要在远程调试打开的状态下启动 Chrome, 这样 VS C

  • 详解如何在vscode里面调试js和node.js的方法步骤

    在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. 作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可以方便的进行源码断点调试.其步骤有四,详情不表,粗略概括如下: 1.打开Chrome开发者工具: 2.点击进入Sources标签页,在页面的左侧就能看到JS代码的目录: 3.找到需要设置断点的源文件,在需要中断的哪行代码左侧单击鼠标左键,就可以设置断点,如果你的代码是uglify过的,则需导入相应的

  • vscode调试django项目的方法

    这几天研究HUE,这个东西是基于Django开发的,于是又看了一眼Django,学着写个demo.微软开源的vscode在业界反应不错,以前也没用过,借着这次机会用用vscode,和pycharm比起来各有千秋,不过总体来说还是不错的.新工具各种不熟悉,连怎么调试都得研究研究,现在记录一下vscode 怎么弄Django项目的调试. 下载Django模块 进入vscode 先下载django,点击左侧最下面图标,搜索Django,点击下图2的位置的install 添加Django模块到vscod

随机推荐