插件一：Liver Server

介绍

（可能不全面）Live Server可以在本地启动一个http服务器，并且自动打开浏览器浏览当前页面。

安装

如上图，我们可以在插件商店搜索Live Server直接安装。

使用

在只有Live Server插件的情况下，使用该插件会自动打开一个外部浏览器实时预览页面：

我的Live Server插件配置如下：

    
    "liveServer.settings.port": 9999, //本地服务器端口
    "liveServer.settings.root": "/", //设置根目录，也就是打开的文件会在该目录下找
    "liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器
    
    //按照文档里的意思应该是开启一个进程用来给debugger for chrome  attach使用
    "liveServer.settings.AdvanceCustomBrowserCmdLine":
                                            "chrome --incognito --remote-debugging-port=9222",
    "liveServer.settings.useLocalIp": true,  //使用本地ip访问
    
    //支持Debugger for chrome attach到live server
    "liveServer.settings.ChromeDebuggingAttachment": true, 
    
    //等待多长时间再刷新页面，
    "liveServer.settings.wait": 100,
    
    //还有一些其他配置项，这里没有列出，无关紧要

遗留问题

通过这个插件已经能够实时预览页面效果，但当页面代码多了，可能需要调整窗口宽度，Mac下貌似可以在两个窗口临界处一起调整。windows下总是觉得有点麻烦，这里就用到了下一个插件。

插件二：Browser Preview

介绍

（可能不全面）Browser Preview能够在vscode内部打开一个浏览器面板，用来访问页面，这里配合Live Server使用。

安装

同样直接在插件商店里直接下载。

使用

默认安装之后会在左侧工具栏出现一个图标，我们点击会自动打开一个面板，如下图：

这里不做多说，接下来我们结合Live Server一起使用，在Live Server扩展配置里配置如下：

也就是勾选Use Browser Preview，这样当我们打开Live Server的时候就会自动打开Browser Preview来访问我们的页面。

等价的json配置如下：


"liveServer.settings.useBrowserPreview": true

保存配置之后，我们再打开Live Server可以发现自动打开了Browser Preview，并且访问了当前工作空间下的页面。

好了，我们已经可以修改页面，并在vscode内实时预览我们的页面效果了。接下来我们再看看如何进行debug。

插件三：Debugger for Chrome

介绍

（可能不全面）结合chrome浏览器在vscode内部进行debug代码调试。

安装

同样我们在插件商店里直接下载Debugger for Chrome。

接下来我们打开Live Server扩展配置并配置如下（这里稍有疑惑）：


    "liveServer.settings.AdvanceCustomBrowserCmdLine": 
                    "chrome --incognito --remote-debugging-port=9222",

同时打开（运行）Live Server，利用Browser Preview实时预览。

然后我们打开调试窗口：

然后我们添加配置：

配置如下：


{
    "version": "0.2.0",
    "configurations": [
        {
            //调试类型为chrome
            "type": "chrome",
            //关联另外一个进程进行debug，还有一个选项是lauch，直接启动进程
            "request": "attach",
            "name": "Live Server",
            //访问端口，live server的9222端口，也就是上面配置的
            "port": 9222,
            "webRoot": "${workspaceFolder}",
        }
    ]
}

然后我们点击图中1处的三角形运行，会弹出一个提示，我们选择第一个也就是Live Server当前访问的页面。

使用

这时候我们就可以debug了，我当前工作空间中文件如下,其中.vscode目录以及lanch.json是调试工具自动生成的：

现在我们点击页面中的按钮，就可以正常进行断点调试了。

以上就是全部内容，其中有个疑问是当我修改了Live Server的debug端口时，发现也能正常debug，具体什么原因暂时不太了解了。感谢你的阅读，有问题之处，欢迎指正。