VS Code 折腾记 - (7) 内置Debug功能深入【调教angular-cli 最新版】

前端之家收集整理的这篇文章主要介绍了VS Code 折腾记 - (7) 内置Debug功能深入【调教angular-cli 最新版】前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

很多小伙伴说用了打包工具(Webpack)之后,断点调试相当痛苦;
常规的方式无非是debugger,console.log()大法;
但是,vscode这货天生支持debug功能,不用白不用,今天我就说说怎么调教angular-cli;


题外话(号外)

最近vscode又更新了。。最新的版本是1.10.2;不详细解释,点一下;

  1. 引入了minimap(这个好啊)。在配置文件里面启用"editor.minimap.enabled": true;当然还有一些额外的小地图参数
  2. 内置JSDOC功能,又可以少掉一个插件,**触发
  3. 复制内容保持格式化,逼格满满,适用于复制到文档什么的
  4. 目录树引入了命令控制,可以自定义绑定按键啦,比如新建目录和文件
  5. Debug功能强化,支持列断点,溜的飞起额
  6. 某些编程语言默认执行的配置文件设置
  7. terminal输出链接可以直接点击访问啦
  8. HTML DOM快速跳转
  9. Debug的配置项更多了,天生支持gulp这些了。这些需要自行去研究文档哈
  10. @H_403_49@

    剩下的亮点自行去看发行日志啦…..


    Vs Code Debug(Ctrl + Shift +D)

    再来一次截图解释,怪我咯,不然不好说。。。

    部分快捷键

    1. 继续(F5)
    2. 单步跳过(F10)
    3. 单步调试(F11)
    4. 单步跳出(Shift + F11)
    5. 重启(Ctrl + Shift + F5 )
    6. 停止/结束(Shift + F5)
    7. @H_403_49@

      安装插件

      Debugger for Chrome : Debug your JavaScript code in the Chrome browser,or any other target that supports the Chrome Debugger protocol.

      简言之:就是让你的代码在chrome上调试,为什么vscode不集成这个,可能控制体积大小什么的。。

      记得ng serve要先行启动,调试是调试,不包括引导angular-cli的启动;

      配置文件很简单:

      {
        "version": "0.2.0","configurations": [{
          "name": "LaunchChrome","type": "chrome","request": "launch","url": "http://localhost:4200","sourceMaps": true,"webRoot": "${workspaceRoot}","userDataDir": "${workspaceRoot}/.vscode/chrome"
        }]
      }

      配置解释

      • version : 你定义这个配置文件的版本,默认是0.2.0,生成的时候
      • configuration:配置域
      • name:配置文件的名字,比如你可以叫做Debug Angular-cli
      • type:调试的类型,vscode天生支持node,比如go,PHP,chrome这些就依赖插件
      • request : 配置文件的请求类型,有launchattach两种,具体看官方文档
      • url:这个是chrome插件带的,指定访问的链接
      • webRoot:也是chrome插件带的,指定根目录或者执行文件
      • ${workspaceRoot}:就是你打开vscode读取的项目目录
      • sourceMaps:默认是启用的,对于打包的调试,小伙伴们必须开启
      • userDataDir:临时目录,专门保存调试过程产生的东西

      启动调试

      1. 正确的情况下就会弹窗一个新的chrome页面
      2. 打断点很简单,就直接在你需要断点的页面,点行号靠左的地方,有个小红点的地方,点击出来红色就是打上了(小红点再点击一次就是取消),如图:
      3. 打开相应的页面,执行到响应的代码块就会触发debug了。。然后vscode就可以看到你想瞅瞅的数据了。。调试过程(单步什么的),对应的本地文件显示数据变动在你的
      4. @H_403_49@

        总结

        VS Code的Debug功能相当好用,若是想引导程序启动再打开chrome这种也可以实现,就是需要写的配置文件比较繁琐,很花时间;

        除了天生支持node内置debug,以下的都需要借助插件才可以

        1. C#
        2. Python
        3. Chrome
        4. C/C++
        5. Go
        6. @H_403_49@

猜你在找的Angularjs相关文章