VS Code插件之Debugger for Chrome

        号称2018最火的编辑器,不用用怎么行?

        不多说直接开始踩坑之路。

        要在vs中启动chrome控制台怎么办?vscode并没有集成环境,这里我们需要借助一个插件Debugger for Chrome。


        选择左边安装包选项,点击商店搜索Debugger for Chrome,然后点击安装,重新加载。。。

        安装完之后,点击调试,选择chrome,我们万分激动的等待控制台打开。。。

        结果却是

        这样:


        或者这样:


        反正就是不能启动。无奈去插件主页翻了翻插件说明,才明白问题所在。下面一一给大家讲解问题原因,顺带翻译部分插件说明,以便大家能顺利使用chrome控制台以及一些其他调试插件。

        先贴一张vs官网对debug模块的整体描述图,左侧图标栏第三个就是进入调试面板,右下角是控制台输入输出,最下方式调试工具信息。


        接着是官方推荐的常用调试工具,今天我们主要讲讲Debugger for Chrome。


        下面是重点。。。

        首先我们要搞明白一个重要文件,launch.json。先看下官网对这个文件的描述:


        大致意思就是,要使用大多数调试插件,你得创建一个文件用来保存这些插件的配置。vscode把调试插件的文件保存在.vscode文件夹下面的launch.json文件里。.vscode文件夹作用不用多说,里面基本就是保存用户配置或者工作区配置。(这里再罗嗦一句,用户配置就相当于全局配置,在所有的工作空间都有效,工作区配置只在当前的项目目录中生效。)

        

        从这里打开launch.json配置文件。

        一般来说,一个调试工具的配置大概长这样:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${file}"
        }
    ]
}

官网对于配置选项的描述如下:


        俺带着高中水平都不如的英文加上百度翻译,给大家说下大致意思,造福下英文水平跟我一样的渣渣,英文好的略过。。。

        这些选项中,其中最上面的3条是必须的。

        type:就是debugger工具的类型,每一个安装好的调试插件都有自己的类型。比如说node调试工具的type就是node,同理php调试工具的type就是php,我们安装的Debugger for Chrome的type就是chrome。

       request:可以理解为调试工具的启动方式,目前官网提供两种,launchattach,翻译过来就是“启动”和“附加”。就是直接启动或者挂载到进程启动,稍后在插件配置中再详细说明两种方式的差别。

        name:给调试器起一个名字,这个可以自己随便写,就是调试器启动以后最下面显示的名字。

        preLaunchTask:控制台启动一次调试之前需要执行的任务,可以把任务命令写到  文件夹中的  文件,在调试器启动前会先执行这些任务。

    postDebugTask:跟上面差不多,不同的是结束后执行。

    internalConsoleOptions:控制调试台的标签是否在调试过程可见。

    port:当调试工具需要挂载到进程的时候,就要配置端口号了。

        Debugger for Chrome插件用到的配置也不多,其他配置有兴趣的同学自己了解。上面这些配置是所有调试工具的通用配置。下面开始重点说明 Debugger for Chrome插件的配置。

        附上插件地址:https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

        type选项没啥说的,就是“chrome”;

    request:启动方式官网给了两种。关于启动要先搞明白一件事,vscode并没有集成chorme控制台,而这个插件也没有集成控制台,那么插件如何做到使用chrome控制台呢?很简单,插件会打开chrome浏览器,然后挂载到chrome进程,挂载完成之后,你在vscode中输入的命令,比如“var a=1”,vscode是并不能识别的,它会把这条语句传送给chrome进程,由浏览器处理这条语句并输出结果,然后再显示给vscode的调试器。明白这个原理之后我们就知道:调试器必须要启动浏览器程序。

        事实上,调试器控制浏览器打开指定html文件,我们手动一样能完成,它只是帮我们省略了频繁切换和自己手动打开浏览器控制台的过程。我们知道,浏览器打开html文件有两种方式:1、本地打开。2、通过http服务打开(这两种方式不用我解释了吧。。。)

        下面先说第一种launch,官网给出两种方案:

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/mypage.html",
            "webRoot": "${workspaceFolder}/wwwroot"
        },
        {
            "name": "Launch index.html",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceFolder}/index.html"
        },
    ]
}

        其实就是对应浏览器打开html文件的两种方式:有url选项的时候,表示在本地用http服务打开(怎样在本机开启http服务不用多说了吧,apache或者iis或者node都可以,反正必须开启本地http服务);如果不想开启服务器,就选择file配置,这样浏览器会打开本地html文件。

         注意:不管选用哪个方式,指定一个文件都是必须的。如果是url,webRoot选项用于将url解析到磁盘上的文件。比如写localhost/app.js会解析到工作目录里面的app.js文件。本地的话,也就是file,直接设置要打开的html文件路径,${workspaceFolder}意思就是当前工作目录,如果你写了${workspaceFolder}/index.html,就必须确保在相应的工作目录下有这个index.html文件才行。如果找不到这个文件,那么控制台是不会启动成功的。

        举例来说,如果我的工作空间是PRACTICE文件夹,创建好index.html后,调试器打开浏览器,地址栏像这样才是正确的打开了文件。


        如果像是这样,about:blank


        那就是没有找到对应文件,调试器打开肯定会失败!只有找到正确文件路径,才能打开控制台。

        再说说attach如果选择了这个选项,就意味着chrome要连接到远程服务器,所以在浏览器启动的时候要在选项中加上--remote-debugging-port=9222。这个选项是要连接到远程调试服务器上的,如果不是chrome内核,就没法连接。还有被墙的话也可能会有影响,反正我是没有用这个。

        attach选项不能设置runtimeExecutable。这个远程调用时chrome特有的,不允许自己设置浏览器。

        具体做法就是:

        windows下:找到浏览器图标,右键单击,选择属性,在目标这一栏加上


        Linux:在启动命令后面直接加上就行。

        下面我写一个常用配置:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "这里随便写名字1",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/index.html",            "runtimeExecutable":"D:/Program Files/360safebrowser/360Chrome/Chrome/Application/360chrome.exe"        },        {            "name": "这里随便写名字2",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}",            "runtimeExecutable":"D:/Program Files/360safebrowser/360Chrome/Chrome/Application/360chrome.exe"              },         {             "name": "这里随便写名字3",            "type": "chrome",            "request": "attach",             "port": 9222,            "webRoot": "${workspaceRoot}"         }    ]}

上面这3种配置你可以选择一个适合自己的,也可以3个都选上,如果3个都写上


        随后可以在左上角选择切换要启动的方式,由于我写了3个,左上角就有了3个,对应也就是name属性。

        再说下你可能会遇到和我一样的问题:

        1、当出现Error processing "launch": Error: 找不到 Chrome,的提示时,意味着vscode找不到默认的chrome路径,此时

需要我们手动添加浏览器路径,runtimeExecutable后面写上你要使用的浏览器路径,上面图中我写的是我自己的路径,你们换成自己的就好。

        2、无法连接到运行中的进程,将在10000毫秒后超时 - (原因:无法连接到目标:connect ECONNREFUSED 127.0.0.1:9229)

        按照理论来说,只有使用attach的时候才会出现这个问题。而事实是,即是你采用哪种方式都有可能会出现这个问题,原因在插件主页找到答案。


        我们看第三条,如果你使用launch出现了这个报错,因为chrome实例存在,所以无法挂载到chrome进程,需要关闭正在运行的chrome程序,也就是关掉浏览器,必须要关掉全部窗口,然后再从vscode调试工具启动浏览器,这样就可以愉快的玩耍了。

让我们来打个window对象试一下:


         最后再强调一点,文件路径非常重要,很多问题都是路径有问题,要记着,必须找到对应的文件才能启动浏览器控制台。

评论 21
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值