不要再console，使用VSCode调试

曾经终败给现在 2022-04-10 02:58 175阅读 0赞

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

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

### 使用VSCode，调试JavaScript代码。 ###

1.  安装**Debugger for Chrome**插件
    
    ![Image 1][]
    
    20170217148734523042195.png
    
    vscode，是我开发中，使用的主要编辑器。并且一开始就安装了几个流行的插件，**Debugger for Chrome**，这个微软官方的插件也在其中。但一开始，我一直没搞明白，怎么使用它。
2.  开启本地服务运行项目
    
    启本地服务，有许多方法，我选择的是[Browsersync][]。具体安装使用请见官网。
3.  启动vscode，debug模式选择Chrome
    
    ![Image 1][]
    
    20170217148734657344243.png
    
    然后有2种模式如下图
    
    ![Image 1][]
    
    20170218148734721198591.png
    
     *  第一种模式使用
    
    先开启本地服务。我使用的端口默认为3000,**上面配置里就对应是[http://localhost:3000][http_localhost_3000]**.  
    **关闭所有chrome进程**，在项目的index下点击debug三角按钮。就会开启chrome，并可以在vscode进行调试了。
    
    ![Image 1][]
    
    20170218148734748086574.png
    
     
    
     *  第二种模式调试
    
    同上先启动本地服务。使用3000端口。**关闭所有chrome进程**。  
    在终端中输入`/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=3000`  
    此时会开始Chrome，**输入[http://localhost:3000][http_localhost_3000]**，启动项目。在vscode中对需要调试的js文件，下开启第二个 **attach to Chrome**，debug调试就可以愉快的打断点了。
    
    ![Image 1][]
    
    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、金山软件、百姓网等众多知名用户的认可。欢迎免费试用！

[![2018121912254161][]][2018121912254161]

[Fundebug]: https://www.fundebug.com/
[Image 1]: 
[Browsersync]: https://link.jianshu.com?t=http://www.browsersync.cn
[http_localhost_3000]: https://link.jianshu.com?t=http://localhost:3000
[2018121912254161]: /images/20220403/1f3652e71aaa4004af8b70b1a96f52ed.png