A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 郝永亮 于 2018-1-25 16:40 编辑

这一节讲解使用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 才能进入断点!


0 个回复

您需要登录后才可以回帖 登录 | 加入黑马