VS Code调试网页js源代码原理

原理框图：

 

 

 

交互协作图：

用户	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的服务端口，以便受理浏览器的页面请求。