不要再console，使用VSCode，调试。

从iOS，转到前端，一直觉得在Chrome中打断点调试是一件烦人的是，因为我要重新去Sources中定位代码。😅，然后我就孜孜不倦的console。

使用VSCode，调试JavaScript代码。

1. 安装Debugger for Chrome插件

   20170217148734523042195.png

   vscode，是我开发中，使用的主要编辑器。并且一开始就安装了几个流行的插件，Debugger for Chrome，这个微软官方的插件也在其中。但一开始，我一直没搞明白，怎么使用它。

2. 开启本地服务运行项目

   启本地服务，有许多方法，我选择的是Browsersync。具体安装使用请见官网。

3. 启动vscode，debug模式选择Chrome

   20170217148734657344243.png

   然后有2种模式如下图

   20170218148734721198591.png
   • 第一种模式使用

   先开启本地服务。我使用的端口默认为3000,上面配置里就对应是http://localhost:3000.
   关闭所有chrome进程，在项目的index下点击debug三角按钮。就会开启chrome，并可以在vscode进行调试了。
   

   20170218148734748086574.png
   • 第二种模式调试

   同上先启动本地服务。使用3000端口。关闭所有chrome进程。
   在终端中输入/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=3000
   此时会开始Chrome，输入http://localhost:3000，启动项目。在vscode中对需要调试的js文件，下开启第二个 attach to Chrome，debug调试就可以愉快的打断点了。

   20170218148734792275055.png

个人比较推荐第二种，调试与本地运行项目互补影响，并且第一种模式不允许再在Chrome中再开启Developer Tools。