×

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

96
icbbetter
2017.02.18 10:39* 字数 442

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

学习笔记
Web note ad 1