vscode debuger for chrome 使用

就是这个插件的用法

微软官方提供了两种默认方案

{
    "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"
        },
        	//第二种
    ]
}

大部分同学第二种没问题。但是第一种就会出现 10000毫秒 or 连接被拒绝
的问题。原因是url没有成功配置或http服务器没有被启动。

画黑线的地方需要做一些修改

 		{
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:5500",
            "webRoot": "${workspaceFolder}"
        },
        //修改的地方不多但是比较关键
        "url": "http://localhost:5500",
							^     ^
		localhost:如果没有特殊的需求不需要更改
		5500:是下图的插件开启的web服务器

debuger for chrome 最容易被忽略的问题是这个插件并没有 web server 功能,但是想使用它
，就必须自己开启一个 web server 。 例如：nginx , apache ..... 。
但是我们不用这么麻烦，只用这个插件就好live server

由于他的默认端口是5500所以上面填的端口就是5500
当一切配置好之后就可以愉快的debug了

使用之前需要关闭已经运行的chrome