黑马程序员技术交流社区

标题: 【太原校区】零基础学习angular5.0(四)【每周更新】 [打印本页]

---

作者: 郝永亮    时间: 2017-12-11 16:20
标题: 【太原校区】零基础学习angular5.0(四)【每周更新】

这一节讲解使用VS Code开发工具调试代码

如你所知，一直以来，前端开发领域并没有一款特别好用的开发和调试工具。

• WebStorm 很强大，但是吃资源很严重。
• Sublime Text 插件很多，可惜要收费，而国内的企业还没有养成花钱购买开发工具的习惯。
• Chrome 的开发者工具很好用，但是要直接调试 TypeScript 很麻烦。
  

所以，Visual Studio Code（简称 VS Code）才会呈现出爆炸性增长的趋势。它是微软开发的一款前端编辑器，完全开源免费。VS Code 底层是 Electron，界面本身是用 TypeScript 开发的。对于 Angular 开发者来说，当然要强烈推荐 VS Code。最值得一提的是，从1.14开始，可以直接在 VS Code 里面调试 TypeScript 代码。

第一步：环境配置

• 确保你的 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 配置文件。
  
  请把你本地 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 才能进入断点！
  
  
  

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2