VS CODE 调试HTML

作者：IT知元
原文：https://www.itzhi365.com/tech-goods/tech-goods-7.html

 

安装扩展，在扩展商店搜索Debugger for Chrome

配置调试文件launch.json

点击左侧调试菜单，在下拉框中选择Add Configuration，然后选择Chrome

launch.json配置文件内容如下:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "file": "${workspaceFolder}/index.html"
        }
    ]
}

Copy

安装工具live-server

live-server是一个具有实时重新加载功能的小型开发服务器。使用它来加载调试HTML/JavaScript/CSS文件，但不能用于部署最终站点。

使用live-server的两个原因：

• file://由于安全限制，AJAX请求不能与协议一起使用，即如果您的站点通过JavaScript获取内容，则需要服务器。
• 更改文件后需要自动重新加载页面可以加快开发速度。

使用npm安装live-server，在VS Code终端运行下面命令:

npm install -g live-server

在VS Code终端运行命令live-server，会自动启动默认浏览器，并加载launch.json配置项file指向的html文件。当修改CSS文件时，会直接应用修改到页面；当修改其他非CSS文件时，浏览器将会重新加载整个页面。

页面显示效果如下图：