本文摘自PHP中文网，作者藏色散人，侵删。
使用Debugger for Chrome进行调试
首先下载对应的插件
Ctrl+Shift+x打开插件商店，搜索chrome即可看到该插件，点击安装->重新加载即可
该插件的配置方式分两种，一种是基于本地文件的debug,另一种是基于server-client模式的调试。
本地文件debug即启动chrome读取本地文件，进而根据文件直接渲染出页面
server-client则将待调试的文件加载进入服务容器中(例如tomcat之类的),所有的文件以服务的形式提供。
chrome根据服务的url地址访问文件，之后加载到浏览器。
相关推荐：《vscode教程》
下面分别介绍两种方式配置方法
1.1.1. 基于本地file配置方式调试
在.vscode文件夹之下新建launch.json文件，添加配置如下
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
配置解释:
${file}表示打开当前文件
${workspaceRoot}表示vscode当前加载根目录
launch表示新起一个chrome进程加载该文件
相对launch的attach，表示当前文件载入已有的chrome进程
在调试菜单栏选择[Launch Chrome 本地调试]选项，点击[f5]或者[fn+f5]，即可看到页面
可以看到url搜索栏上面是file:///开头的地址，表示文件是从本地读取的。之后，所有的
html文件都可这么调试
1.1.2. 基于服务端配置方式调试
1.1.2.1. 启动server端
基于server-client方式自然是先要将文件加载到server容器中了，这里不使用tomcat，而是
python的方式。
在bash终端，cd进入vscode的根目录，比如我的是~/daily，运行下面指令
cd ~/daily
# 当前目录下文件加载进容器，对外端口为8080，host是本机ip,本地访问使用localhost即可
python3 -m http.server 8080
1.1.2.2. 配置vscode
相关阅读 >>
详解vsCode中如何更简单、有效地调试node.js程序！！
更多相关阅读请进入《vsCode》频道 >>
