不要再console，使用VSCode调试

小编推荐：Fundebug专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

从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。

作者：icbbetter
链接：https://www.jianshu.com/p/9e18230839ef
 

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了9亿+错误事件，得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用！