CN109032917B - 页面调试方法和系统、移动终端以及电脑端 - Google Patents

Abstract

本发明实施例提供了一种页面调试方法和系统、移动终端以及电脑端。其中，该页面调试方法用于移动终端，移动终端包括第一浏览器，移动终端与电脑端通信连接；该页面调试方法可以包括：第一浏览器监测第一待调试页面代码中层叠样式表CSS代码是否发生变化；当CSS代码发生变化时，第一浏览器向电脑端发送页面刷新请求；第一浏览器接收电脑端响应于页面刷新请求而反馈的、对第一待调试页面代码修改之后的第二待调试页面代码；第一浏览器基于第二待调试页面代码，进行刷新。通过该技术方案，本发明实施例无需在待调试页面中额外引入JS文件，解决了如何降低移动前端开发产品线上报错可能性的技术问题，可以及时地在移动终端上看到页面显示效果。

Description

页面调试方法和系统、移动终端以及电脑端

技术领域

本发明涉及网络应用技术领域，特别是涉及一种页面调试方法和系统、移动终端以及电脑端。

背景技术

移动互联网越来越融入人们的日常生活中，随着移动互联网的发展，为了提高用户体验，移动前端开发技术越来越受到重视。移动前端的开发离不开页面(也称网页或界面)调试技术。页面调试技术涉及到HTML(Hyper Text Markup Language，超文本标记语言)、CSS(Cascading Style Sheets，层叠样式表)和JS(JavaScript,一种Web编程脚本语言)。其中，HTML用于定义网页的内容和框架。CSS用于描述页面的布局。JavaScript用于定义网页的行为。HTML代码运行在浏览器上并由浏览器来解析。CSS代码嵌入HTML文档中，可以用来定义页面的样式和版面。JavaScript代码插入HTML文档中后可由浏览器执行，以增强网页的动态性和交互性。

移动前端产品的交付基于浏览器。服务器端的资源会通过增量加载的方式运行在浏览器中。在页面调试阶段，当电脑端(即个人计算机端，简称PC端)将页面代码打包后，很难发现错误代码的位置，所以，将电脑端运行在node.js环境(即：事件驱动I/O服务端JavaScript环境)下，以便于修改网页代码。其中，node.js是基于谷歌的开源JavaScript引擎V8而开发到的。node.js采用的编程语言是JavaScript。node.js用于解释JavaScript代码并执行。为了实现页面代码的打包，可以使用webpack工具(一种模块打包器)，用于将页面样式、图片、字体、HTML模板等页面资源进行打包。另外，页面的显示需要对HTML文件进行渲染，所以，在移动前端开发中，电脑端还需要装载java JDK(Java Development Kit，简称Java开发工具)和JSP(java服务器页面)网络应用工具(例如：tomcat)。其中，java JDK用于提供JavaScript的运行环境。JSP网络应用工具用于将JSP文件渲染成HTML文件，以供浏览器运行，从而进行页面显示。

在移动前端开发中的页面调试阶段，当电脑端进行页面代码的修改或增减时，需要根据移动终端的页面显示效果来验证代码的正确性。为了观察移动终端的页面显示效果，现有技术通过在电脑端使用weinre工具(一种远程调试工具)，并在待调试页面中嵌入用于远程调试的JS文件，来实现及时刷新移动终端页面的效果。然而，上述现有方法由于向待调试页面代码中引入了JS文件，所以，在移动前端开发产品上线时，如果忘记删除该JS文件，会造成线上报错问题。

发明内容

本发明实施例的目的在于提供一种页面调试方法，以至少解决如何降低移动前端开发产品线上报错可能性的技术问题。此外，还提供了一种移动终端、电脑端和页面调试系统。

为了实现上述目的，根据本发明的一个方面，提供了以下技术方案：

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

该方法可以包括：

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

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

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

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

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

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

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

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

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

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

为了实现上述目的，根据本发明的另一个方面，提供了以下技术方案：

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

该方法可以包括：

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

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

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

进一步地，第二浏览器基于HTML文档进行刷新，具体可以包括：

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

将脚本元素添加至DOM树；

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

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

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

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

为了实现上述目的，根据本发明的再一个方面，提供了以下技术方案：

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

在修改第四待调试页面代码中的层叠样式表CSS代码的情况下，该方法可以包括：

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

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

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

进一步地，电脑端包括第三浏览器，第三浏览器包括第一控制台；

该页面调试方法还可以包括：

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

为了实现上述目的，根据本发明的又一个方面，提供了以下技术方案：

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

在修改第五待调试页面代码中的JS代码的情况下，该方法可以包括：

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

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

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

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

进一步地，电脑端包括第四浏览器，第四浏览器包括第二控制台；

该页面调试方法还可以包括：

第二控制台跟踪第五待调试页面代码中JS代码的运行步骤。

为了实现上述目的，根据本发明的又一个方面，提供了以下技术方案：

一种移动终端，其与电脑端通信连接；移动终端可以包括第一浏览器，第一浏览器用于：

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

当CSS代码发生变化时，向电脑端发送页面刷新请求；

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

基于第二待调试页面代码，进行刷新。

进一步地，第一浏览器具体可以包括：

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

第一映射模块，用于对DOM树进行映射，得到渲染树结构；

第一构建模块，用于基于样式数据和DOM树节点，构建渲染树节点；

第一生成模块，用于基于渲染树结构和渲染树节点，生成渲染树；

第一处理模块，用于基于渲染树，布局并绘制第二待调试页面。

为了实现上述目的，根据本发明的又一个方面，提供了以下技术方案：

一种移动终端，其与电脑端通信连接；移动终端可以包括第二浏览器，第二浏览器用于：

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

将第三页面代码嵌入第三待调试页面的HTML文档；

基于嵌入了第三页面代码的HTML文档，进行刷新。

进一步地，第二浏览器具体可以包括：

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

添加模块，用于将脚本元素添加至DOM树；

第二映射模块，用于对DOM树进行映射，得到渲染树结构；

第二构建模块，用于基于样式数据和DOM树节点，构建渲染树节点；

第二生成模块，用于基于渲染树结构和渲染树节点，生成渲染树；

第二处理模块，用于基于渲染树，布局并绘制第三待调试页面。

为了实现上述目的，根据本发明的又一个方面，提供了以下技术方案：

一种电脑端，其分别与服务器和移动终端通信连接；电脑端可以包括第一网络协议分析模块和第一基于Express.js框架的网络服务模块；其中，在修改第四待调试页面代码中的层叠样式表CSS代码的情况下：

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

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

进一步地，电脑端可以包括第三浏览器，第三浏览器可以包括第一控制台；其中：

第一控制台，用于跟踪第四待调试页面代码中CSS代码的运行。

为了实现上述目的，根据本发明的又一个方面，提供了以下技术方案：

一种电脑端，其与移动终端通信连接；电脑端可以包括第二网络协议分析模块和第二基于Express.js框架的网络服务模块；在修改第五待调试页面代码中的JS代码的情况下：

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

第二网络协议分析模块，用于将解析后的结果推送至移动终端。

进一步地，电脑端可以包括第四浏览器，第四浏览器可以包括第二控制台；其中：

第二控制台，用于跟踪第五待调试页面代码中JS代码的运行。

为了实现上述目的，根据本发明的又一个方面，提供了以下技术方案：

一种页面调试系统，该系统可以包括上述移动终端和上述电脑端。

本发明实施例提供一种页面调试方法和系统、移动终端以及电脑端，其中，该页面调试方法用于移动终端，移动终端包括第一浏览器，移动终端与电脑端通信连接；该页面调试方法可以包括：第一浏览器监测第一待调试页面代码中层叠样式表CSS代码是否发生变化；当CSS代码发生变化时，第一浏览器向电脑端发送页面刷新请求；第一浏览器接收电脑端响应于页面刷新请求而反馈的、对第一待调试页面代码修改之后的第二待调试页面代码；第一浏览器基于第二待调试页面代码，进行刷新。本发明实施例通过采用上述技术方案，无需在待调试页面中额外引入JS文件，在第一浏览器监测到CSS代码发生变化时，向电脑端发送页面刷新请求，然后，接收来自电脑端的响应，得到待调试页面代码，最后，基于该待调试页面代码进行刷新，从而可以看到修改了CSS代码之后的页面的显示效果。这样，在移动前端开发产品上线时，不会因待调试页面中所嵌入的、用于远程调试的JS文件造成线上报错的问题，降低了移动前端开发产品线上报错的可能性，进而提高了移动前端开发的效率。

当然，实施本发明的任一产品或方法不必一定需要同时达到以上所述的所有优点。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为根据本发明实施例的应用环境示意图；

图2为根据本发明实施例的页面调试方法的流程示意图；

图3为根据本发明另一实施例的页面调试方法的流程示意图；

图4为根据本发明再一实施例的页面调试方法的流程示意图；

图5为根据本发明又一实施例的页面调试方法的流程示意图；

图6为根据本发明实施例的移动终端的结构示意图；

图7为根据本发明实施例的浏览器的结构示意图；

图8为根据本发明另一实施例的移动终端的结构示意图；

图9为根据本发明另一实施例的浏览器的结构示意图；

图10为根据本发明实施例的电脑端的结构示意图；

图11为根据本发明另一实施例的电脑端的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

图1示例性地示出了本发明实施例的应用环境。该应用环境可以包括移动终端10、电脑端20和服务器30。其中，移动终端10与电脑端20处于同一网络环境。例如：可以将移动终端上的IP(Internet Protocol，网络之间互连的协议)地址设置为电脑端的IP地址，使得移动终端10与电脑端20在同一局域网下建立通信连接；移动终端10也可以通过WIFI与电脑端20建立通信连接。在电脑端20与服务器30之间建立通信连接，以使得电脑端20可以向服务器30发送访问请求并可以接收来自服务器30对访问请求的响应。

上述移动终端10包括但不限于手机、平板电脑、个人数字助理等。电脑端20包括但不仅限于个人计算机、膝上型计算机等。上述服务器30也可以替换为服务器集群。服务器30中存储有移动终端10和电脑端20上的浏览器可以访问的资源。

在移动前端开发产品的开发中，当电脑端进行本地调试时，为了解决如何降低移动前端开发产品线上报错可能性的技术问题，本发明实施例提供一种页面调试方法。该页面调试方法可以用于移动终端。该移动终端可以包括第一浏览器；移动终端与电脑端通信连接。如图2所示，该页面调试方法可以通过步骤S200至步骤S230来实现。其中：

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

其中，第一待调试页面代码可以为HTML代码。HTML代码描述了页面的框架和内容。HTML代码中可以嵌入CSS代码。CSS代码可以用来描述页面的样式和版面。移动终端上的第一浏览器会监测CSS代码的变化。这种变化例如可以是电脑端对待调试页面代码中CSS代码进行的修改或增减。

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

本步骤中，在第一浏览器监测到电脑端上的待调试页面代码中CSS代码发生变化时，向电脑端发送页面刷新请求。

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

作为示例，电脑端接收到来自第一浏览器的页面刷新请求后，将修改后的CSS代码所对应的资源加载到电脑端，并将第二待调试页面代码发送至移动终端的第一浏览器。

S230：第一浏览器基于第二待调试页面代码，进行刷新。

本步骤中，第一浏览器接收到第二待调试页面代码即进行刷新。这样，在移动终端的第一浏览器上可以看到页面的显示效果。

本发明实施例通过采取上述技术方案，在电脑端对页面代码中的CSS代码进行修改时，无需在待调试页面中额外引入JS文件，当第一浏览器监测到CSS代码发生变化时，向电脑端发送页面刷新请求，然后，接收来自电脑端的响应，得到待调试页面代码，最后，基于该待调试页面代码进行刷新，从而可以看到修改了CSS代码之后的页面的显示效果。这样，在移动前端开发产品上线时，不会因待调试页面中所嵌入的、用于远程调试的JS文件造成线上报错的问题，降低了移动前端开发产品线上报错的可能性，进而提高了移动前端开发的效率。

在一些可选的实施例中，第一浏览器基于第二待调试页面代码，进行刷新的步骤具体可以包括：

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

其中，第一浏览器解析第二待调试页面代码时，可以将其中的标签抽象成对象，从最外层标签开始，循序渐进，直至最内层标签，逐层进行解析。这一过程也就是第一浏览器从上至下读取第二待调试页面代码中的标签，并把它们分解成节点，从而构建DOM树。第一浏览器解析得到的DOM树与第二待调试页面代码中的HTML标签一一对应。这里，DOM树作为HTML元素的外部接口，以供JS调用。

对于CSS代码的解析，第一浏览器可以按照CSS规范进行。其中，CSS规范中由正则表达式定义了词法和语法文法。CSS规范符合W3C(World Wide Web Consortium,万维网联盟)标准。该标准由结构化标准语言、表现标准语言和行为标准等组成。样式数据也可以成为CSS规则树。

S232：对DOM树进行映射，得到渲染树结构。

本步骤中，第一浏览器会忽略CSS代码中非法的语法。例如：第一浏览器会舍弃诸如header、display:none等标签。

S233：基于样式数据和DOM树节点，构建渲染树节点。

本步骤将样式数据应用于DOM树节点，以使得渲染树节点包含有CSS属性。

S234：基于渲染树结构和渲染树节点，生成渲染树。

其中，本步骤将渲染树节点添加到渲染树结构上，从而形成渲染树。具体来说，第一浏览器解析得到DOM树后，将页面要显示的各个元素(即渲染树节点)加到DOM树上。每添加一个元素时，第一浏览器遍历CSS样式表，查找到与该元素对应的样式规则，并将该样式规则应用到该元素上，以此类推，第一浏览器将需要添加的所有元素所对应的样式规则应用到每个元素上。得到的渲染树由包含颜色、大小等属性的矩形组成。

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

其中，布局操作用来确定渲染树上每个渲染树节点在移动终端的屏幕上的大小和位置。优选地，布局为流式布局。绘制操作用来遍历渲染树，绘制每个渲染树节点，光栅化移动终端屏幕上的像素，从而将页面呈现出来。

在上述实施例中，第一浏览器监测到CSS代码时，便会发起网络请求，下载它们。第一浏览器不必将第二待调试页面代码全部解析完后再去生成渲染树，布局和绘制渲染树。第一浏览器可以解析第二待调试页面代码中的部分代码后就利用该部分代码来生成渲染树，并进行后续的布局和绘制操作。

需要说明的是，上述实施例中虽然按照描述的先后顺序进行了说明，但是实际应用中可以不以上述描述的顺序执行。例如：在实际应用中，考虑到解析出样式数据的过程可能会阻塞渲染树的生成。所以，在具体实施过程中，可以先解析CSS代码，接着执行JS脚本，再解析出DOM树。

基于与图2所示实施例相同的技术构思，本发明实施例还提供一种页面调试方法，该方法应用于移动终端，该移动终端包括第二浏览器；移动终端与电脑端通信连接。如图3所示，该页面调试方法可以包括：

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

举例来说，第三页面代码可以为JS代码。当电脑端对HTML文档中的JS代码进行增加或删减时，将所增加或删减的JS代码推送至移动终端的第二浏览器。

S310：第二浏览器将第三页面代码嵌入第三待调试页面的HTML文档。

举例来说，第二浏览器将JS代码嵌入到HTML文档中的<script>标签内。

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

其中，第二浏览器加载HTML文档进行刷新，显示页面。

作为示例，第二浏览器基于嵌入了第三页面代码的HTML文档，分别解析HTML、CSS和Javascript。其中，第二浏览器解析HTML得到DOM树。第二浏览器解析CSS，得到样式数据。第二浏览器解析Javascript时，分别利用DOM树和AJAX(Asynchronous JavaScript AndXML，一种创建交互式网页应用的网页开发技术)创建<script>元素，再将该<script>元素添加进DOM树中。解析完成之后，第二浏览器通过DOM树和样式数据来构建渲染树。最后，第二浏览器调用操作系统原生(或本地)图形用户界面应用程序编程接口进行绘制，从而显示页面。

本发明实施例通过采取上述技术方案，在电脑端对页面代码中的JS代码进行修改时，无需在待调试页面中额外引入JS文件，电脑端将修改的JS代码推送至移动终端的浏览器。浏览器接收到修改的JS代码后，将其嵌入HTML文档，进行刷新，从而可以看到修改了JS代码之后的页面的显示效果。这样，在移动前端开发产品上线时，不会因待调试页面中所嵌入的、用于远程调试的JS文件造成线上报错的问题，降低了移动前端开发产品线上报错的可能性，进而提高了移动前端开发的效率。

在一些可选的实施例中，第二浏览器基于HTML文档进行刷新的步骤具体可以包括：

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

本步骤中，有关解析HTML文档及其中的CSS代码的说明可以参考步骤S231的说明，在此不再赘述。

对于JS代码的解析，第二浏览器通过<script>标签来识别JS代码，然后，分别通过动态脚本技术和Ajax(Asynchronous JavaScript And XML，一种创建交互式网页应用的网页开发技术)来创建<script>元素。

S322：将脚本元素添加至所述DOM树。

其中，第二浏览器通过动态脚本技术创建<script>元素，并设置资源位置属性值(即src属性值)，再将设置完src属性值的<script>元素添加至DOM树。第二浏览器还通过Ajax来创建<script>元素，并设置文本属性值(即text属性值)，并将设置完文本属性值的<script>元素添加至DOM树。

S323：对DOM树进行映射，得到渲染树结构。

S324：基于样式数据和DOM树节点，构建渲染树节点。

S325：基于渲染树结构和渲染树节点，生成渲染树。

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

本实施例中，对于与步骤S231至步骤S235相同的步骤，其说明可以互相借鉴，在此不再赘述。

基于与图2和3所示实施例相同的技术构思，本发明实施例提供一种页面调试方法。该页面调试方法应用于电脑端，电脑端包括网络协议分析模块和基于Express.js框架的网络服务模块；电脑端分别与服务器和移动终端通信连接。在修改第四待调试页面代码中的层叠样式表CSS代码的情况下，如图4所示，本实施例提供的页面调试方法可以通过步骤S400至步骤S420来实现。其中：

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

其中，网络协议分析模块例如可以为Charles模块、Fiddler模块，用来转发来自移动终端的页面刷新请求，实现网络代理。这样，在移动终端上可以访问电脑端可以访问的资源。基于Express.js框架的网络服务模块(即Node.Js工具)可以是webpack-dev-server模块，用来实现数据打包和编译，处理成静态资源。这里，基于Express.js框架的网络服务模块可以将来自服务器的响应资源存入电脑端的内存。

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

其中，基于Express.js框架的网络服务模块加载修改后的第四待调试页面代码所对应的资源之后，进行打包和编译，并向移动终端发送编译状态信息，同时还会对来自移动终端的事件做出响应，由此，完成对资源的解析，以供浏览器刷新页面。基于Express.js框架的网络服务模块可以将编译后的结果存储在电脑端的内存中，以用于热替换。

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

本发明实施例通过采取上述技术方案，在对待调试页面代码中的CSS代码进行修改时，无需在待调试页面代码中嵌入JS代码，而是通过网络协议分析模块接收移动终端发来的页面刷新请求，再将该页面刷新请求转发至服务器，然后，接收服务器对该页面刷新请求做出的响应，再利用基于Express.js框架的网络服务模块加载修改后的待调试页面代码所对应的资源，进行打包和编译，完成解析，最后，将解析后的结果发送至移动终端的浏览器，从而使得移动终端的浏览器可以及时刷新页面并进行显示(也即页面热替换)。在移动前端开发产品上线时，不会因待调试页面中所嵌入的、用于远程调试的JS文件造成线上报错的问题，能够降低移动前端开发产品线上报错的可能性，提高了移动前端开发的效率。

在一些可选的实施例中，电脑端可以包括第三浏览器，该第三浏览器可以包括第一控制台。页面调试方法还可以包括：第一控制台跟踪第四待调试页面代码中CSS代码的运行步骤。

本实施例通过控制台可以观察第四待调试页面代码中CSS代码的执行，可以看到代码修改前后的变化，从而跟踪第四待调试页面代码中CSS代码的运行，进而实现了CSS代码的查验。

基于与图2、3和4所示实施例相同的技术构思，本发明实施例还提供一种页面调试方法。该页面调试方法应用于电脑端，电脑端包括网络协议分析模块和基于Express.js框架的网络服务模块；电脑端与移动终端通信连接；在修改第五待调试页面代码中的JS代码的情况下，如图5所示，该页面调试方法可以通过步骤S500至步骤S530来实现。其中：

S500：基于Express.js框架的网络服务模块监测JS代码的修改。

其中，基于Express.js框架的网络服务模块可以实时监测JS代码的修改。例如：基于Express.js框架的网络服务模块监测模块打包器配置文件中的入口文件的变化，当入口文件有变化时，对其进行实时打包和编译。其中，模块打包器安装在电脑端，并与基于Express.js框架的网络服务模块通信连接。

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

本步骤通过对修改前后的JS代码进行对比，以找出区别，从而实现后续的页面热替换。

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

本步骤中，基于Express.js框架的网络服务模块提取出JS代码的区别部分后，可以将该区别部分存储在电脑端的内存中。基于Express.js框架的网络服务模块通过对代码区别部分进行打包和编译，完成解析，以供移动终端的浏览器进行识别。

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

本步骤中，网络协议分析模块通过与移动终端之间建立的网络代理服务，将解析后的结果推送至移动终端，以供移动终端的浏览器刷新页面。

本发明实施例通过采取上述技术方案，在对待调试页面代码中的JS代码进行修改时，无需在待调试页面代码中嵌入JS代码，而是在监测到JS代码的修改之后，修改前后的JS代码进行对比，提取JS代码修改前后的代码区别部分，且对代码区别部分进行解析，并将解析后的结果发送至网络协议分析模块，最后，网络协议分析模块将解析后的结果推送至移动终端，从而使得移动终端的浏览器可以及时刷新页面并进行显示(也即页面热替换)。在移动前端开发产品上线时，不会因待调试页面中所嵌入的、用于远程调试的JS文件造成线上报错的问题，能够降低移动前端开发产品线上报错的可能性，提高了移动前端开发的效率。

在一些可选的实施例中，电脑端可以包括第四浏览器，第四浏览器可以包括第二控制台；页面调试方法还可以包括：第二控制台跟踪第五待调试页面代码中JS代码的运行步骤。

本实施例通过控制台可以观察第五待调试页面代码中JS代码的执行，可以看到代码修改前后的变化，从而跟踪第五待调试页面代码中JS代码的运行，进而实现了JS代码的查验。

下面结合图1以一优选实施例来对本发明进行详细说明。

本发明实施例提供的页面调试方法可以包括：

S600：电脑端安装网络协议分析模块和基于Express.js框架的网络服务模块；其中，网络协议分析模块用于实现网络请求和响应以及本地资源映射；基于Express.js框架的网络服务模块用于对数据进行解析。

S601：移动终端进行以下配置：将IP地址设置为电脑端上的IP地址，并将端口设置为电脑端上网络协议分析模块代理的端口，同时，安装网络请求验证证书。

本步骤可以将移动终端上浏览器的访问请求转移到电脑端上发送出去，并将电脑端收到的响应返回给移动终端的浏览器。

S602：移动终端的浏览器监测待调试页面代码中层叠样式表CSS代码是否发生变化。

S603：电脑端修改待调试页面代码中CSS代码。

S604：移动终端的浏览器向电脑端发送页面刷新请求。

S605：网络协议分析模块接收移动终端发来的页面刷新请求，并将页面刷新请求发送至服务器。

S606：网络协议分析模块接收来自服务器对页面刷新请求的响应，并将响应发送至基于Express.js框架的网络服务模块。

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

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

S609：移动终端的浏览器接收基于Express.js框架的网络服务模块解析后的结果。

S610：移动终端的浏览器基于该解析后的结果，进行刷新。

S611：电脑端的控制台跟踪待调试页面代码中CSS代码的运行。

S612：电脑端对待调试页面代码中的JS代码进行增加或删减操作。

S613：基于Express.js框架的网络服务模块监测JS代码的修改。

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

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

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

S617：移动终端的浏览器接收基于Express.js框架的网络服务模块解析后的结果。其中，该解析后的结果表示对待调试页面代码进行修改的代码。

S618：移动终端的浏览器将所修改的代码嵌入待调试页面代码的HTML文档。

S619：移动终端的浏览器基于该HTML文档，进行刷新。

S620：电脑端的控制台跟踪待调试页面代码中JS代码的运行。

本优选实施例中各个步骤的有关说明可以参考前述实施例中的相关说明，在此不再赘述。

本领域技术人员应该能够理解，上述各实施例中各个步骤的执行不一定按照前述描述的顺序执行，各个步骤可以以并行或与描述的顺序相反的顺序来执行。这些简单的替换所形成的技术方案也应包含在本发明的保护范围之内。

基于与方法实施例相同的技术构思，本发明实施例还提供一种移动终端，其与电脑端通信连接。如图6所示，该移动终端60可以包括第一浏览器61，该第一浏览器61可以用于：监测第一待调试页面代码中层叠样式表CSS代码是否发生变化；当CSS代码发生变化时，向电脑端发送页面刷新请求；接收电脑端响应于页面刷新请求而反馈的、对第一待调试页面代码修改之后的第二待调试页面代码；基于第二待调试页面代码，进行刷新。

本发明实施例通过采取上述技术方案，在电脑端对页面代码中的CSS代码进行修改时，无需在待调试页面中额外引入JS文件，当第一浏览器61监测到CSS代码发生变化时，向电脑端发送页面刷新请求，然后，接收来自电脑端的响应，得到待调试页面代码，最后，基于该待调试页面代码进行刷新，从而可以看到修改了CSS代码之后的页面的显示效果。这样，在移动前端开发产品上线时，不会因待调试页面中所嵌入的、用于远程调试的JS文件造成线上报错的问题，降低了移动前端开发产品线上报错的可能性，进而提高了移动前端开发的效率。

在一些可选的实施例中，如图7所示，第一浏览器具体可以包括：第一解析模块71、第一映射模块72、第一构建模块73、第一生成模块74和第一处理模块75。其中，第一解析模块71用于解析第二待调试页面代码及其中的CSS代码，得到与第二待调试页面代码中的标签对应的文档对象模型DOM树、样式数据；其中，DOM树包括DOM树节点。第一映射模块72用于对DOM树进行映射，得到渲染树结构。第一构建模块73用于基于样式数据和DOM树节点，构建渲染树节点。第一生成模块74用于基于渲染树结构和渲染树节点，生成渲染树。第一处理模块75用于基于渲染树，布局并绘制第二待调试页面。

通过本实施例，在移动前端开发产品上线时，不会因待调试页面中所嵌入的、用于远程调试的JS文件造成线上报错的问题，能够降低移动前端开发产品线上报错的可能性，可以更好地提高移动前端开发的效率。

为了解决如何降低移动前端开发产品线上报错可能性的技术问题，本发明实施例还提供一种移动终端，其与电脑端通信连接。如图8所示，移动终端80包括第二浏览器81，第二浏览器81用于：接收电脑端推送来的第三页面代码，第三页面代码表示对第三待调试页面代码进行修改的代码；将第三页面代码嵌入第三待调试页面的HTML文档；基于嵌入了第三页面代码的HTML文档，进行刷新。

本发明实施例通过采取上述技术方案，在电脑端对页面代码中的JS代码进行修改时，无需在待调试页面中额外引入JS文件，电脑端将修改的JS代码推送至移动终端的第二浏览器81。第二浏览器81接收到修改的JS代码后，将其嵌入HTML文档，进行刷新，从而可以看到修改了JS代码之后的页面的显示效果。这样，在移动前端开发产品上线时，不会因待调试页面中所嵌入的、用于远程调试的JS文件造成线上报错的问题，降低了移动前端开发产品线上报错的可能性，进而提高了移动前端开发的效率。

在一些可选的实施例中，如图9所示，第二浏览器具体可以包括：第二解析模块91、添加模块92、第二映射模块93、第二构建模块94、第二生成模块95和第二处理模块96。其中，第二解析模块91用于解析HTML文档及其中的CSS代码和JS代码，分别得到与HTML文档中的标签对应的文档对象模型DOM树、样式数据、脚本元素；其中，DOM树包括DOM树节点。添加模块92用于将脚本元素添加至DOM树。第二映射模块93用于对DOM树进行映射，得到渲染树结构。第二构建模块94用于基于样式数据和DOM树节点，构建渲染树节点。第二生成模块95用于基于渲染树结构和渲染树节点，生成渲染树。第二处理模块96用于基于渲染树，布局并绘制第三待调试页面。

通过本实施例，在移动前端开发产品上线时，不会因待调试页面中所嵌入的、用于远程调试的JS文件造成线上报错的问题，能够降低移动前端开发产品线上报错的可能性，可以更好地提高移动前端开发的效率。

为了解决如何降低移动前端开发产品线上报错可能性的技术问题，本发明实施例还提供一种电脑端，其分别与服务器和移动终端通信连接。如图10所示，该电脑端100可以包括第一网络协议分析模块101和第一基于Express.js框架的网络服务模块102；其中，在修改第四待调试页面代码中的层叠样式表CSS代码的情况下：第一网络协议分析模块101用于接收移动终端发来的页面刷新请求，并将页面刷新请求发送至服务器，以及接收来自服务器对页面刷新请求的响应，并将响应发送至第一基于Express.js框架的网络服务模块102；以及用于将第一基于Express.js框架的网络服务模块102解析后的结果发送至移动终端。第一基于Express.js框架的网络服务模块102用于根据接收到的响应，加载修改后的第四待调试页面代码所对应的资源，且对资源进行解析，并将解析后的结果发送至第一网络协议分析模块101。

本发明实施例通过采取上述技术方案，在对待调试页面代码中的CSS代码进行修改时，无需在待调试页面代码中嵌入JS代码，而是通过第一网络协议分析模块101接收移动终端发来的页面刷新请求，再将该页面刷新请求转发至服务器，然后，接收服务器对该页面刷新请求做出的响应，再利用第一基于Express.js框架的网络服务模块102加载修改后的待调试页面代码所对应的资源，进行打包和编译，完成解析，最后，将解析后的结果发送至移动终端的浏览器，从而使得移动终端的浏览器可以及时刷新页面并进行显示。在移动前端开发产品上线时，不会因待调试页面中所嵌入的、用于远程调试的JS文件造成线上报错的问题，能够降低移动前端开发产品线上报错的可能性，提高了移动前端开发的效率。

在一些可选的实施例中，电脑端还可以包括第三浏览器，该第三浏览器包括第一控制台；其中，第一控制台用于跟踪第四待调试页面代码中CSS代码的运行。

通过本实施例，在移动前端开发产品上线时，不会因待调试页面中所嵌入的、用于远程调试的JS文件造成线上报错的问题，能够降低移动前端开发产品线上报错的可能性，可以提高移动前端开发的效率。

为了解决如何降低移动前端开发产品线上报错可能性的技术问题，本发明实施例还提供一种电脑端，其与移动终端通信连接；如图11所示，该电脑端110可以包括第二网络协议分析模块111和第二基于Express.js框架的网络服务模块112；在修改第五待调试页面代码中的JS代码的情况下：第二基于Express.js框架的网络服务模块112用于监测JS代码的修改，并将修改前后的JS代码进行对比，以及提取JS代码修改前后的代码区别部分，且对代码区别部分进行解析，并将解析后的结果发送至第二网络协议分析模块111。第二网络协议分析模块111用于将解析后的结果推送至移动终端。

本发明实施例通过采取上述技术方案，在对待调试页面代码中的JS代码进行修改时，无需在待调试页面代码中嵌入JS代码，而是在第二基于Express.js框架的网络服务模块112监测到JS代码的修改之后，修改前后的JS代码进行对比，提取JS代码修改前后的代码区别部分，且对代码区别部分进行解析，并将解析后的结果发送至第二网络协议分析模块111，最后，第二网络协议分析模块111将解析后的结果推送至移动终端，从而使得移动终端的浏览器可以及时刷新页面并进行显示。在移动前端开发产品上线时，不会因待调试页面中所嵌入的、用于远程调试的JS文件造成线上报错的问题，能够降低移动前端开发产品线上报错的可能性，提高了移动前端开发的效率。

在一些可选的实施例中，电脑端还可以包括第四浏览器，该第四浏览器包括第二控制台；其中，第二控制台用于跟踪第五待调试页面代码中JS代码的运行。

为了解决如何降低移动前端开发产品线上报错可能性的技术问题，本发明实施例还提供一种页面调试系统。该系统可以包括上述任一移动终端实施例和上述任一电脑端实施例。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims (13)

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代码修改前后的代码区别部分，且对所述代码区别部分进行解析，并将解析后的结果发送至所述网络协议分析模块；

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

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

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

所述第二控制台跟踪所述第五待调试页面代码中JS代码的运行步骤。

7.一种移动终端，其与电脑端通信连接；其特征在于，所述移动终端包括第一浏览器，所述第一浏览器用于：

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

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

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

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

所述第一浏览器具体包括：

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

第一映射模块，用于对所述DOM树进行映射，得到渲染树结构；

第一构建模块，用于基于所述样式数据和所述DOM树节点，构建渲染树节点；

第一生成模块，用于基于所述渲染树结构和所述渲染树节点，生成渲染树；

第一处理模块，用于基于所述渲染树，布局并绘制第二待调试页面。

8.一种移动终端，其与电脑端通信连接；其特征在于，所述移动终端包括第二浏览器，所述第二浏览器用于：

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

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

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

所述第二浏览器具体包括：

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

添加模块，用于将所述脚本元素添加至所述DOM树；

第二映射模块，用于对所述DOM树进行映射，得到渲染树结构；

第二构建模块，用于基于所述样式数据和所述DOM树节点，构建渲染树节点；

第二生成模块，用于基于所述渲染树结构和所述渲染树节点，生成渲染树；

第二处理模块，用于基于所述渲染树，布局并绘制所述第三待调试页面。

9.一种电脑端，其分别与服务器和移动终端通信连接；其特征在于，所述电脑端包括第一网络协议分析模块和第一基于Express.js框架的网络服务模块；其中，在修改第四待调试页面代码中的层叠样式表CSS代码的情况下：

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

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

10.根据权利要求9所述的电脑端，其特征在于，所述电脑端包括第三浏览器，所述第三浏览器包括第一控制台；其中：

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

11.一种电脑端，其与移动终端通信连接；其特征在于，所述电脑端包括第二网络协议分析模块和第二基于Express.js框架的网络服务模块；在修改第五待调试页面代码中的JS代码的情况下：

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

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

12.根据权利要求11所述的电脑端，其特征在于，所述电脑端包括第四浏览器，所述第四浏览器包括第二控制台；其中：

所述第二控制台，用于跟踪所述第五待调试页面代码中JS代码的运行。

13.一种页面调试系统，其特征在于，所述系统包括如权利要求7-8中任一所述的移动终端和如权利要求9-12中任一所述的电脑端。

Images