[发明专利]页面调试方法和系统、移动终端以及电脑端

权利要求书

1.一种页面调试方法，用于移动终端，所述移动终端包括第一浏览器；所述移动终端与电脑端通信连接；

其特征在于，所述方法包括：

所述第一浏览器监测第一待调试页面代码中层叠样式表CSS代码是否发生变化；

当所述CSS代码发生变化时，所述第一浏览器向所述电脑端发送页面刷新请求；

所述第一浏览器接收所述电脑端响应于所述页面刷新请求而反馈的、对所述第一待调试页面代码修改之后的第二待调试页面代码；

所述第一浏览器基于所述第二待调试页面代码，进行刷新；

所述第一浏览器基于所述第二待调试页面代码，进行刷新，具体包括：

解析所述第二待调试页面代码及其中的CSS代码，得到与所述第二待调试页面代码中的标签对应的文档对象模型DOM树、样式数据；其中，所述DOM树包括DOM树节点；

对所述DOM树进行映射，得到渲染树结构；

基于所述样式数据和所述DOM树节点，构建渲染树节点；

基于所述渲染树结构和所述渲染树节点，生成渲染树；

基于所述渲染树，布局并绘制第二待调试页面。

2.一种页面调试方法，用于移动终端，所述移动终端包括第二浏览器；所述移动终端与电脑端通信连接；

其特征在于，所述方法包括：

所述第二浏览器接收所述电脑端推送来的第三页面代码，所述第三页面代码表示对第三待调试页面代码进行修改的代码；

所述第二浏览器将所述第三页面代码嵌入第三待调试页面的HTML文档；

所述第二浏览器基于嵌入了所述第三页面代码的HTML文档，进行刷新；

所述第二浏览器基于所述HTML文档进行刷新，具体包括：

解析所述HTML文档及其中的CSS代码和JS代码，分别得到与所述HTML文档中的标签对应的文档对象模型DOM树、样式数据、脚本元素；其中，所述DOM树包括DOM树节点；

将所述脚本元素添加至所述DOM树；

对所述DOM树进行映射，得到渲染树结构；

基于所述样式数据和所述DOM树节点，构建渲染树节点；

基于所述渲染树结构和所述渲染树节点，生成渲染树；

基于所述渲染树，布局并绘制所述第三待调试页面。

3.一种页面调试方法，用于电脑端，所述电脑端包括网络协议分析模块和基于Express.js框架的网络服务模块；所述电脑端分别与服务器和移动终端通信连接；

其特征在于，在修改第四待调试页面代码中的层叠样式表CSS代码的情况下，所述方法包括：

所述网络协议分析模块接收所述移动终端发来的页面刷新请求，并将所述页面刷新请求发送至所述服务器，以及接收来自所述服务器对所述页面刷新请求的响应，并将所述响应发送至所述基于Express.js框架的网络服务模块；

所述基于Express.js框架的网络服务模块根据接收到的所述响应，加载修改后的第四待调试页面代码所对应的资源，且对所述资源进行解析，并将解析后的结果发送至所述网络协议分析模块；

所述网络协议分析模块将所述解析后的结果发送至所述移动终端。

4.根据权利要求3所述的页面调试方法，其中，所述电脑端包括第三浏览器，所述第三浏览器包括第一控制台；

其特征在于，所述页面调试方法还包括：

所述第一控制台跟踪所述第四待调试页面代码中CSS代码的运行步骤。

5.一种页面调试方法，用于电脑端，所述电脑端包括网络协议分析模块和基于Express.js框架的网络服务模块；所述电脑端与移动终端通信连接；

其特征在于，在修改第五待调试页面代码中的JS代码的情况下，所述方法包括：

所述基于Express.js框架的网络服务模块监测所述JS代码的修改；

所述基于Express.js框架的网络服务模块将修改前后的JS代码进行对比；

所述基于Express.js框架的网络服务模块提取JS代码修改前后的代码区别部分，且对所述代码区别部分进行解析，并将解析后的结果发送至所述网络协议分析模块；

所述网络协议分析模块将所述解析后的结果推送至所述移动终端。