原理框图：
交互协作图：
|
用户 |
VS Code |
浏览器 |
WebServer |
|
打开源文件，设置断点 |
|
|
|
|
启动调试 |
|
|
|
|
|
读取调试配置信息 S1：获取浏览器名称及其路径 S2：获取浏览器远程调试TCP端口号 S3：获取WebServer的IP地址/TCP端口 |
|
|
|
|
启动浏览器 |
|
|
|
|
S1：向浏览器(的远程调试TCP端口号)发送命令 S2：告知WebServer的IP地址/TCP端口 S3：告知断点位置 |
S1：受理VS Code命令 S2：接收WebServer的IP地址/TCP端口 S3：向WebServer发送页面请求 |
|
|
|
|
|
向浏览器发送页面 |
|
|
|
S1：处理页面 S2：到达断点处，停止执行 S3：通知VS Code已到达断点位置 |
|
|
|
S1：向浏览器发送命令，获取各种变量的值 |
|
|
|
|
|
受理浏览器命令，返回各种变量的值 |
|
|
|
接收并显示各种变量的值 |
|
|
要点1：VS Code和WebServer必须共享共用同一个源文件夹，由此确保VS Code调试的html页面与WebServer传送给浏览器处理的页面完全相同。
要点2：VS Code必须正确配置以下调试信息：
S1：浏览器名称及其路径，以便VS Code启动浏览器
S2：浏览器远程调试TCP端口号，以便VS Code向浏览器发送命令
S3：WebServer的IP地址/TCP端口，以便浏览器向WebServer发送页面请求。
要点3：浏览器必须启用远程调试，以便受理VS Code的命令
要点4：必须正确配置WebServer的服务端口，以便受理浏览器的页面请求。