插件一：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，具体什么原因暂时不太了解了。感谢你的阅读，有问题之处，欢迎指正。
