vscode调试html文件,vscode调试html文件

1. vscode调试html文件

主要说明使用使用Debugger for Chrome插件如何配置，以及Nodejs的方式调试.

本文的配置方式是基于deepin系统的，适用于所有debian系的Linux系统

1.1. 使用Debugger for Chrome进行调试

首先下载对应的插件

Ctrl+Shift+x打开插件商店，搜索chrome即可看到该插件，点击安装->重新加载即可

该插件的配置方式分两种，一种是基于本地文件的debug,另一种是基于server-client模式的调试。

本地文件debug即启动chrome读取本地文件，进而根据文件直接渲染出页面

server-client则将待调试的文件加载进入服务容器中(例如tomcat之类的),所有的文件以服务的形式提供。

chrome根据服务的url地址访问文件，之后加载到浏览器。

下面分别介绍两种方式配置方法

1.1.1. 基于本地file配置方式调试

在.vscode文件夹之下新建launch.json文件，添加配置如下

{

"version": "0.2.0",

"configurations": [

{

"type": "chrome",

"request": "launch",

"name": "Launch Chrome 本地调试",

"url": "http://localhost:8080",

"we