一种页面调试预览方法及系统的制作方法

一种页面调试预览方法及系统的制作方法
【专利摘要】本发明实施例公开了页面调试预览方法，包括：获取需要在目标交互平台进行显示的页面信息；通过预设的沙箱环境模拟调用所述目标交互平台的页面显示接口，根据预设的所述目标交互平台的页面显示区域参数，结合所述N个目标调试设备的显示屏区域参数分别渲染所述页面信息；所述N为大于等于2的自然数；在当前显示页面显示渲染后的所述N个目标设备的预览页面。本发明还公开了页面调试预览系统，采用本发明可以实现在前端开发移动页面的时候，只需要一个平台就能够看到不同设备的预览效果，从而节省了不断找设备的烦恼，另外通过预先嵌入的目标脚本代码实现了本地化调试页面，跟本地页面联动修改，实时体验修改后的效果，开发效率大大提高。
【专利说明】
-种页面调试预览方法及系统
技术领域
[0001] 本发明设及计算机互联网领域，尤其页面调试预览方法及页面调试预览系统。
【背景技术】
[0002] 随着电子科技W及移动互联网技术的发展，电子设备(特别是智能手机)的功能越 来越强大，只要用户按照自身的需求在电子设备上安装各种应用程序，便可W完成各种事 务。
[0003] 当前，移动端HTML5页面(简称册)十分火热，不少公司都借着运股热潮去宣传自己 的产品。但是由于移动设备十分多，特别是安卓手机型号不一，手机屏幕的分辨率繁多。为 了确保所有用户可用，在开发移动端网页时经常需要多台手机逐一测试，产品和设计等开 发人员也需要逐台手机体验网页效果，然而运种方式十分低效，且未能覆盖所有手机。

【发明内容】

[0004] 本发明实施例所要解决的技术问题在于，提供一种页面调试预览方法及页面调试 预览系统，可W同时模拟多设备环境下调试和预览移动端页面，大大提高开发效率。
[0005] 为了解决上述技术问题，本发明实施例第一方面公开了一种页面调试预览方法， 包括：
[0006] 获取需要在目标交互平台进行显示的页面信息；
[0007] 通过预设的沙箱环境模拟调用所述目标交互平台的页面显示接口，根据预设的所 述目标交互平台的页面显示区域参数，结合所述N个目标调试设备的显示屏区域参数分别 擅染所述页面信息;所述N为大于等于2的自然数；
[0008] 在当前显示页面显示擅染后的所述N个目标设备的预览页面。
[0009] 结合第一方面，在第一种可能的实现方式中，所述根据预设的所述目标交互平台 的页面显示区域参数，结合所述N个目标调试设备的显示屏区域参数分别擅染所述页面信 息，包括：
[0010] 根据预设的所述目标交互平台的页面显示区域参数，W及所述目标调试设备的显 示屏的宽高参数，匹配生成所述目标交互平台在所述目标调试设备的操作系统中运行时的 显示页面上部结构信息和/或下部结构信息；
[0011] 根据所述显示页面上部结构信息和/或下部结构信息，擅染生成所述目标调试设 备的预览页面。
[0012] 结合第一方面，在第二种可能的实现方式中，还包括：
[0013] 对所述目标调试设备及其显示属性信息进行更新操作，并通过HTML5的本地存储 技术LOCAL STORAGE将更新后的目标设备及其显示属性信息保存在本地；
[0014] 所述显示属性信息包括所述显示屏区域参数;所述更新操作包括W下至少一项： 增加目标调试设备及其显示属性信息、修改目标调试设备的显示属性信息、删除目标调试 设备及其显示属性信息。
[0015] 结合第一方面，在第=种可能的实现方式中，所述在当前显示页面显示擅染后的 所述N个目标设备的预览页面之后，还包括：
[0016] 通过统一资源定位符的哈希技术，生成针对所述当前显示页面的页面地址分享信 息。
[0017] 结合第一方面，在第四种可能的实现方式中，所述在当前显示页面显示擅染后的 所述N个目标设备的预览页面之后，还包括：
[0018] 通过调用预设全屏开闭接口对所述当前显示页面进行全屏显示的开闭操作。
[0019] 结合第一方面，或者第一方面的第一种可能的实现方式，或者第一方面的第二种 可能的实现方式，或者第一方面的第=种可能的实现方式，或者第一方面的第四种可能的 实现方式，在第五种可能的实现方式中，所述需要在目标交互平台进行显示的页面信息包 括基于file协议的本地调试页面；
[0020] 所述通过预设的沙箱环境模拟调用所述目标交互平台的页面显示接口，包括：
[0021] 通过预先嵌入的目标脚本代码，将所述基于file协议的本地调试页面复制N份，并 新建N个沙箱环境；
[0022] 分别将所述N份本地调试页面对应一一放进所述N个沙箱环境中来模拟调用所述 目标交互平台的页面显示接口。
[0023] 结合第一方面的第五种可能的实现方式，在第六种可能的实现方式中，所述N个目 标设备的预览页面同时显示在所述当前显示页面中；所述在当前显示页面显示擅染后的所 述N个目标设备的预览页面，包括：
[0024] 在所述当前显示页面的预设区域显示所述本地调试页面的原始代码；
[0025] 将针对所述原始代码的修改自动联动到所述本地调试页面的文件中，并在所述当 前显示页面中实时显示所述N个目标设备的预览页面修改后的显示效果。
[0026] 本发明实施例第二方面公开了一种页面调试预览系统，包括：
[0027] 获取模块，用于获取需要在目标交互平台进行显示的页面信息；
[0028] 擅染模块，用于通过预设的沙箱环境模拟调用所述目标交互平台的页面显示接 口，根据预设的所述目标交互平台的页面显示区域参数，结合所述N个目标调试设备的显示 屏区域参数分别擅染所述页面信息;所述N为大于等于2的自然数；
[0029] 显示模块，用于在当前显示页面显示擅染后的所述N个目标设备的预览页面。
[0030] 结合第二方面，在第一种可能的实现方式中，所述擅染模块包括：
[0031] 匹配生成单元，用于根据预设的所述目标交互平台的页面显示区域参数，W及所 述目标调试设备的显示屏的宽高参数，匹配生成所述目标交互平台在所述目标调试设备的 操作系统中运行时的显示页面上部结构信息和/或下部结构信息；
[0032] 擅染生成单元，用于根据所述显示页面上部结构信息和/或下部结构信息，擅染生 成所述目标调试设备的预览页面。
[0033] 结合第二方面，在第二种可能的实现方式中，还包括：
[0034] 更新模块，用于对所述目标调试设备及其显示属性信息进行更新操作；
[0035] 信息保存模块，用于通过HTML5的本地存储技术LOCAL STORAGE将更新后的目标设 备及其显示属性信息保存在本地；
[0036] 所述显示属性信息包括所述显示屏区域参数;所述更新操作包括W下至少一项： 增加目标调试设备及其显示属性信息、修改目标调试设备的显示属性信息、删除目标调试 设备及其显示属性信息。
[0037] 结合第二方面，在第=种可能的实现方式中，还包括：
[0038] 分享信息生成模块，用于在所述显示模块在当前显示页面显示擅染后的所述N个 目标设备的预览页面之后，通过统一资源定位符的哈希技术，生成针对所述当前显示页面 的页面地址分享信息。
[0039] 结合第二方面，在第四种可能的实现方式中，还包括：
[0040] 全屏控制模块，用于在所述显示模块在当前显示页面显示擅染后的所述N个目标 设备的预览页面之后，通过调用预设全屏开闭接口对所述当前显示页面进行全屏显示的开 闭操作。
[0041] 结合第二方面，或者第二方面的第一种可能的实现方式，或者第二方面的第二种 可能的实现方式，或者第二方面的第=种可能的实现方式，或者第二方面的第四种可能的 实现方式，在第五种可能的实现方式中，所述需要在目标交互平台进行显示的页面信息包 括基于file协议的本地调试页面；
[0042] 所述擅染模块包括：
[0043] 复制新建单元，用于通过预先嵌入的目标脚本代码，将所述基于file协议的本地 调试页面复制N份，并新建N个沙箱环境；
[0044] 模拟调试单元，用于分别将所述N份本地调试页面对应一一放进所述N个沙箱环境 中来模拟调用所述目标交互平台的页面显示接口。
[0045] 结合第二方面的第五种可能的实现方式，在第六种可能的实现方式中，所述N个目 标设备的预览页面同时显示在所述当前显示页面中；所述显示模块包括：
[0046] 代码显示单元，用于在所述当前显示页面的预设区域显示所述本地调试页面的原 始代码；
[0047] 联动显示单元，用于将针对所述原始代码的修改自动联动到所述本地调试页面的 文件中，并在所述当前显示页面中实时显示所述N个目标设备的预览页面修改后的显示效 果。
[0048] 本发明实施例第=方面公开了一种计算机存储介质，所述计算机存储介质存储有 程序，所述程序执行时包括本发明实施例第一方面、或者第一方面的第一种可能的实现方 式，或者第一方面的第二种可能的实现方式，或者第一方面的第=种可能的实现方式，或者 第一方面的第四种可能的实现方式，或者第一方面的第五种可能的实现方式，或者第一方 面的第六种可能的实现方式中的页面调试预览方法的全部步骤。
[0049] 实施本发明实施例，通过预设的沙箱环境模拟调用目标交互平台的页面显示接 口，根据预设的该目标交互平台的页面显示区域参数，结合该N个目标调试设备的显示屏区 域参数分别擅染所述页面信息;在当前显示页面显示擅染后的该N个目标设备的预览页面， 可W实现在前端开发移动页面的时候，只需要一个平台就能够看到不同设备的预览效果， 从而节省了不断找设备的烦恼;并且，可W方便地自定义设备，当需要更多特殊的电子设备 的时候可W手动添加，维护属于自己的测试设备;而且，通过预先嵌入的目标脚本代码实现 了本地化调试页面，跟本地页面联动修改，实时体验修改后的效果，开发效率大大提高。另 夕h通过统一资源定位符的哈希技术，可W把当前预览的页面通过复制网址直接进行分享， 更加利于各开发人员在页面开发进程的讨论和研究，进一步提高开发效率。
【附图说明】
[0050] 为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现 有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本 发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可W 根据运些附图获得其他的附图。
[0051] 图1是本发明实施例提供的页面调试预览方法的流程示意图；
[0052] 图2是本发明实施例提供的在线调试预览页面的界面示意图；
[0053] 图3是本发明实施例提供的div包裹的完整设备结构的信息；
[0054] 图4是本发明实施例提供的页面分享的界面示意图；
[0055] 图5是本发明实施例提供的化rome浏览器的界面示意图；
[0056] 图6是本发明实施例提供的化rome浏览器的联动修改的界面示意图；
[0057] 图7是本发明实施例提供的页面调试预览系统的结构示意图；
[0058] 图8是本发明实施例提供的擅染模块的结构示意图；
[0059] 图9是本发明提供的页面调试预览系统的另一实施例的结构示意图；
[0060] 图10是本发明实施例提供的显示模块的结构示意图；
[0061] 图11是本发明提供的页面调试预览系统的另一实施例的结构示意图。
【具体实施方式】
[0062] 下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完 整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于 本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他 实施例，都属于本发明保护的范围。
[0063] 如图1示出的本发明实施例提供的页面调试预览方法的流程示意图，包括如下步 骤：
[0064] 步骤SlOO:获取需要在目标交互平台进行显示的页面信息；
[0065] 具体地，本发明实施例中的目标交互平台即可需要进行页面调试预览的交互平 台，用户将需要在目标交互平台进行显示（即页面调试预览）的页面信息输入给页面调试预 览系统后，该页面调试预览系统即获取到该页面信息。该页面调试预览系统可W使用HTML 和CSS制作好在线页面，该在线页面可W提供用户输入需要进行页面调试预览的URL的输入 框，如图2示出的本发明实施例提供的在线调试预览页面的界面示意图，那么用户通过浏览 器登录该在线页面，并在该输入框输入需要进行页面调试预览的抓L后，该页面调试预览系 统即捕获到输入的URL，该并通过该U化抓取待调试预览的页面信息。
[0066] 步骤S102:通过预设的沙箱环境模拟调用该目标交互平台的页面显示接口，根据 预设的该目标交互平台的页面显示区域参数，结合该N个目标调试设备的显示屏区域参数 分别擅染所述页面信息；
[0067] 具体地，本发明实施例的页面调试预览系统可W使用IFRAME为设备环境，通过预 先研究多个交互平台的页面显示区域参数(可W包括交互平台的可展示内容宽高），并可W 预先设置好或默认设置好多个调试设备，形成调试设备列表，并设置好了每个调试设备的 显示屏区域参数；当该页面调试预览系统获取到需要进行页面调试预览的页面信息后，即 使用IFRAME沙箱技术模拟调用目标交互平台的页面显示接口，根据该目标交互平台的页面 显示区域参数，W及N个目标调试设备的显示屏区域参数来分别擅染出符合显示需求的页 面信息。其中，该N个目标调试设备为从调试设备列表中选定进行调试的N个设备，本发明各 个实施例中的N为大于等于2的自然数。
[0068] 再具体地，本发明实施例中目标调试设备的显示屏区域参数包括该目标调试设备 的显示屏的宽高参数，该页面调试预览系统根据预设的所述目标交互平台的可展示内容宽 高，W及该目标调试设备的显示屏的宽高参数，配生成该目标交互平台在该目标调试设备 的操作系统中运行时的显示页面上部结构信息和/或下部结构信息；然后根据该显示页面 上部结构信息和/或下部结构信息，擅染生成该目标调试设备的预览页面。如图2所示，W目 申不调试设备为iPhoneS为例，iF*hone5的显不屏的宽局参数是320x568，在微f目、手Q等目柄；义 互平台下，针对iPhones的IOS操作系统的显示页面上部结构信息（例如微信的头部导航栏） 需要64px高，因此计算出的iPhoneS的可用预览面积应该是320x504;可选地，还可W为目标 调试设备加上目标交互平台特有的一些导航栏信息，例如手Q的特有底部导航栏，用户可W 通过点击图2在线页面中的"展示手Q底部"按钮来选择开启或关闭手Q特有底部导航栏的呈 现。
[0069] 步骤S104:在当前显示页面显示擅染后的所述N个目标设备的预览页面。
[0070] 具体地，该页面调试预览系统可W使用一个div包裹的IFRAME擅染出预览页面结 果，如图3示出的本发明实施例提供的div包裹的完整设备结构的信息，里面包括了头部、尾 部、设备名字、设备内容模拟窗口等。
[0071] 实施本发明实施例，通过预设的沙箱环境模拟调用目标交互平台的页面显示接 口，根据预设的该目标交互平台的页面显示区域参数，结合该N个目标调试设备的显示屏区 域参数分别擅染所述页面信息;在当前显示页面显示擅染后的该N个目标设备的预览页面， 可W实现在前端开发移动页面的时候，只需要一个平台就能够看到不同设备的预览效果， 从而节省了不断找设备的烦恼。
[0072] 进一步地，本发明实施例的页面调试预览方法可W对调试设备列表进行更新，也 就是说可W方便用户定制调试设备，包括对调试设备的增加、修改和删除，具体地，本发明 实施例的页面调试预览方法还可W包括：
[0073] 对目标调试设备及其显示属性信息进行更新操作，并通过HTML5的本地存储技术 LOCAL STORAGE将更新后的目标设备及其显示属性信息保存在本地；
[0074] 具体地，本发明实施例中的显示属性信息包括该显示屏区域参数;该更新操作包 括W下至少一项:增加目标调试设备及其显示属性信息、修改目标调试设备的显示属性信 息、删除目标调试设备及其显示属性信息;所述显示属性信息包括所述显示屏区域参数。
[0075] 再具体地，本发明实施例可W把调试设备都当成json格式保存，维护一个调试设 备列表或队列其实就是维护一个大的json数组，结构如下：
[0076]
[0077] 其中，每一个结点的name表示设备名，width/hei曲t代表可用宽高，type为设备的 类型（苹果/安卓），is_show字段表示是否显示出来，通过运个字段可W实现设备隐藏和打 开功能。将所有设备变成json对象后，维护调试设备的增删改就是维护运一个对象数组了。 本发明实施例还可W在设备增加和修改的时候也加入了输入检验，包括：1、设备名称不能 为空，也不能重复;2、设备类型只能是iPhone和Amlroid; W及，3、设备宽高只能是合理的数 字。
[0078] 需要说明的是，在通过HTML5的LOCAL STORAGE本地存储技术来实现保存时，用户 在第一次使用时，可W提供默认的9个调试设备(例如4个打开5个隐藏），然后初始化保存到 本地，Iocalstorage.setltem(name，ary);用户获取调试设备列表时，可W使用 Iocalstorage . getltem(name)获取调试设备列表；用户增加、删除、修改设备，可W同时覆 盖原来的保存项;并可W提供"重置"按钮，让本地保存设备列标回归到刚开始的9个调试设 备。通过HTML5的本地存储技术LOCAL STORAGE将更新后的目标设备及其显示属性信息保存 在本地，不但可W跨平台，保证每一个现代浏览器、操作系统都能够正常保存。
[0079] 再进一步地，本发明实施例的步骤S104之后，还可W包括:通过统一资源定位符的 哈希HASH技术，生成针对该当前显示页面的页面地址分享信息。
[0080] 具体地，如图4示出的本发明实施例提供的页面分享的界面示意图，用户在初次进 入在线网页时，等待用户输入的URL地址是空的，例如在线网页的地址是http:// ton}ftony. club/tool/hSviewer/;当用户输入URL地址后，网址URL后会带上fturl = xxx，xxx 的值就是网站地址。例如：
[0081 ] http://tonytony. club/tool/h5viewer/#url=http://act.qzone.qq. com/ 2015/haloween-m/in dex.html;运样，只要分享运个页面链接，其他用户打开也会是跟原 来预览的页面显示一样的状态，从而实现分享的目的。
[0082] 再进一步地，本发明实施例的步骤S104之后，还可W包括:通过调用预设全屏开闭 接口对所述当前显示页面进行全屏显示的开闭操作。
[0083] 具体地，本发明实施例的全屏技术可W使用了HTML5的即化SCREEN接口，通过调用 W下方法实现开启和关闭全屏：
[0084] do 州 ment .requestFullscreen()打开全屏；
[00 化]do 州 ment. exitF^illscreenl；)关闭全屏；
[0086] 再进一步地，本发明实施例中需要在目标交互平台进行显示的页面信息可W包括 基于file协议的本地调试页面。本发明实施例可W通过预先在浏览器内嵌入目标脚本代 码，也就是说预先开发了一个插件，通过该插件即可W解决现有技术中由于本地调试页面 是基于file协议，对于服务器来说属于跨域，不能够请求的问题。那么，本发明实施例的步 骤S102中通过预设的沙箱环境模拟调用所述目标交互平台的页面显示接口时，可W具体包 括:通过预先嵌入的目标脚本代码，将所述基于file协议的本地调试页面复制N份，并新建N 个沙箱环境;分别将所述N份本地调试页面对应一一放进所述N个沙箱环境中来模拟调用所 述目标交互平台的页面显示接口。
[0087] 具体地，例如可W如图2所示的"收藏夹调试工具"，用户在打开在线网页时，可W 通过预先将"收藏夹调试工具"拖入收藏栏，来实现在浏览器内嵌入该目标脚本代码，从而 在该在线网页获取到了 "收藏夹调试工具"插件，然后，打开一个本地调试页面（例如 fiIe://D: Axxx)，接着点击收藏栏中的"收藏夹调试工具"插件，那么浏览器通过运行该目 标脚本代码，将该基于file协议的本地调试页面复制N份，并新建N个沙箱环境;分别将该N 份本地调试页面对应一一放进所述N个沙箱环境中来模拟调用该目标交互平台的页面显示 接口，从而使得该浏览器能自动擅染N个目标调试设备，完成预览效果的显示。
[0088] 再进一步地，本发明实施例中N个目标设备的预览页面同时显示在当前显示页面 中，本发明实施例的步骤S104中在当前显示页面显示擅染后的所述N个目标设备的预览页 面的步骤，可W包括:在当前显示页面的预设区域显示该本地调试页面的原始代码;将针对 所述原始代码的修改自动联动到所述本地调试页面的文件中，并在当前显示页面中实时显 示该N个目标设备的预览页面修改后的显示效果。
[0089] 具体地，W^rome浏览器为例，可W通过化rome浏览器的Sources-map功能来匹配 本地的文件，实现在浏览器端修改代码，自动保存在本地文件，并能实时看到多终端上修改 的效果。具体如图5示出的本发明实施例提供的化rome浏览器的界面示意图，首先用户可W 打开化rome浏览器开发者工具(快捷键F12 )，然后选择"Sources"标签，找到目标文件，例如 index.html;右键选择"Map to file system resource…"然后点击选择本地的文件，例如 test.html;那么就可W呈现如图6所示的本发明实施例提供的化rome浏览器的联动修改的 界面示意图，用户可W在右侧代码窗口修改代码，在左侧目标调试设备界面动态显示修改 效果，而且通过按压乂 ?l+s"还可W自动联动保存到本地文件，无需刷新无需复制，十分方 便。
[0090] 实施本发明实施例，通过预设的沙箱环境模拟调用目标交互平台的页面显示接 口，根据预设的该目标交互平台的页面显示区域参数，结合该N个目标调试设备的显示屏区 域参数分别擅染所述页面信息;在当前显示页面显示擅染后的该N个目标设备的预览页面， 可W实现在前端开发移动页面的时候，只需要一个平台就能够看到不同设备的预览效果， 从而节省了不断找设备的烦恼;并且，可W方便地自定义设备，当需要更多特殊的电子设备 的时候可W手动添加，维护属于自己的测试设备;而且，通过预先嵌入的目标脚本代码实现 了本地化调试页面，跟本地页面联动修改，实时体验修改后的效果，开发效率大大提高。另 夕h通过统一资源定位符的哈希技术，可W把当前预览的页面通过复制网址直接进行分享， 更加利于各开发人员在页面开发进程的讨论和研究，进一步提高开发效率。
[0091] 为了便于更好地实施本发明实施例的上述方案，本发明还对应提供了一种页面调 试预览系统，如图7示出的本发明实施例提供的页面调试预览系统的结构示意图，页面调试 预览系统70可W包括:获取模块700、擅染模块702和显示模块704，其中，
[0092] 获取模块700用于获取需要在目标交互平台进行显示的页面信息；
[0093] 擅染模块702用于通过预设的沙箱环境模拟调用所述目标交互平台的页面显示接 口，根据预设的所述目标交互平台的页面显示区域参数，结合所述N个目标调试设备的显示 屏区域参数分别擅染所述页面信息;所述N为大于等于2的自然数；
[0094] 显示模块704用于在当前显示页面显示擅染后的所述N个目标设备的预览页面。 [00%]具体地，如图8示出的本发明实施例提供的擅染模块的结构示意图，擅染模块702 可W包括:匹配生成单元7020和擅染生成单元7022,其中，
[0096] 匹配生成单元7020用于根据预设的所述目标交互平台的页面显示区域参数，W及 所述目标调试设备的显示屏的宽高参数，匹配生成所述目标交互平台在所述目标调试设备 的操作系统中运行时的显示页面上部结构信息和/或下部结构信息；
[0097] 擅染生成单元7022用于根据所述显示页面上部结构信息和/或下部结构信息，擅 染生成所述目标调试设备的预览页面。
[0098] 进一步地，如图9示出的本发明提供的页面调试预览系统的另一实施例的结构示 意图，页面调试预览系统70包括获取模块700、擅染模块702和显示模块704外，还可W包括： 更新模块706、信息保存模块708、分享信息生成模块7010和全屏控制模块7012,其中，
[0099] 更新模块706用于对所述目标调试设备及其显示属性信息进行更新操作；
[0100] 信息保存模块708用于通过HTML5的本地存储技术LOCAL STORAGE将更新后的目标 设备及其显示属性信息保存在本地；
[0101] 所述显示属性信息包括所述显示屏区域参数;所述更新操作包括W下至少一项： 增加目标调试设备及其显示属性信息、修改目标调试设备的显示属性信息、删除目标调试 设备及其显示属性信息。
[0102] 分享信息生成模块7010用于在显示模块704在当前显示页面显示擅染后的所述N 个目标设备的预览页面之后，通过统一资源定位符的哈希技术，生成针对所述当前显示页 面的页面地址分享信息。
[0103] 全屏控制模块7012用于在显示模块704在当前显示页面显示擅染后的所述N个目 标设备的预览页面之后，通过调用预设全屏开闭接口对所述当前显示页面进行全屏显示的 开闭操作。
[0104] 再进一步地，本发明实施例的需要在目标交互平台进行显示的页面信息包括基于 file协议的本地调试页面;擅染模块702还可W包括复制新建单元和模拟调试单元，其中，
[0105] 复制新建单元，用于通过预先嵌入的目标脚本代码，将所述基于file协议的本地 调试页面复制N份，并新建N个沙箱环境；
[0106] 模拟调试单元，用于分别将所述N份本地调试页面对应一一放进所述N个沙箱环境 中来模拟调用所述目标交互平台的页面显示接口。
[0107] 再进一步地，本发明实施例的N个目标设备的预览页面同时显示在所述当前显示 页面中；如图10示出的本发明实施例提供的显示模块的结构示意图，显示模块704可W包 括:代码显示单元7040和联动显示单元7042，其中，
[0108] 代码显示单元7040用于在所述当前显示页面的预设区域显示所述本地调试页面 的原始代码；
[0109] 联动显示单元7042用于将针对所述原始代码的修改自动联动到所述本地调试页 面的文件中，并在所述当前显示页面中实时显示所述N个目标设备的预览页面修改后的显 示效果。
[0110] 请参阅图11，图11是本发明提供的页面调试预览系统的另一实施例的结构示意 图。其中，如图11所示，页面调试预览系统110可W包括:至少一个处理器1101，例如CPU,至 少一个网络接口 1104,用户接口 1103,存储器1105,至少一个通信总线1102 W及显示屏 1106。其中，通信总线1102用于实现运些组件之间的连接通信。其中，用户接口 1103可W包 括显示屏、键盘或鼠标等等。网络接口 1104可选的可W包括标准的有线接口、无线接口（如 WI-FI接口）。存储器1105可W是高速RAM存储器，也可W是非不稳定的存储器（non? volatile memo 巧）， 例如至少一个磁盘存储器， 存储器1105 包括本发明实施例中的flash。 存储器1105可选的还可W是至少一个位于远离前述处理器1101的存储系统。如图11所示， 作为一种计算机存储介质的存储器1105中可W包括操作系统、网络通信模块、用户接口模 块W及页面调试预览程序。
[0111] 在图11所示的页面调试预览系统110中，处理器1101可W用于调用存储器1105中 存储的页面调试预览程序，并执行W下操作：
[0112] 通过用户接口 1103获取需要在目标交互平台进行显示的页面信息；
[0113] 通过预设的沙箱环境模拟调用所述目标交互平台的页面显示接口，根据预设的所 述目标交互平台的页面显示区域参数，结合所述N个目标调试设备的显示屏区域参数分别 擅染所述页面信息;所述N为大于等于2的自然数；
[0114] 通过显示屏1106在当前显示页面显示擅染后的所述N个目标设备的预览页面。
[0115] 具体地，处理器1101根据预设的所述目标交互平台的页面显示区域参数，结合所 述N个目标调试设备的显示屏区域参数分别擅染所述页面信息，可W包括：
[0116] 根据预设的所述目标交互平台的页面显示区域参数，W及所述目标调试设备的显 示屏的宽高参数，匹配生成所述目标交互平台在所述目标调试设备的操作系统中运行时的 显示页面上部结构信息和/或下部结构信息；
[0117] 根据所述显示页面上部结构信息和/或下部结构信息，擅染生成所述目标调试设 备的预览页面。
[0118] 具体地，处理器1101还可W执行：
[0119] 对所述目标调试设备及其显示属性信息进行更新操作，并通过HTML5的本地存储 技术LOCAL STORAGE将更新后的目标设备及其显示属性信息保存在本地；
[0120] 所述显示属性信息包括所述显示屏区域参数;所述更新操作包括W下至少一项： 增加目标调试设备及其显示属性信息、修改目标调试设备的显示属性信息、删除目标调试 设备及其显示属性信息。
[0121] 具体地，处理器1101在当前显示页面显示擅染后的所述N个目标设备的预览页面 之后，还可W执行：
[0122] 通过统一资源定位符的哈希技术，生成针对所述当前显示页面的页面地址分享信 息。
[0123] 具体地，处理器1101在当前显示页面显示擅染后的所述N个目标设备的预览页面 之后，还可W执行：
[0124] 通过调用预设全屏开闭接口对所述当前显示页面进行全屏显示的开闭操作。
[0125] 具体地，需要在目标交互平台进行显示的页面信息包括基于file协议的本地调试 页面;处理器1101通过预设的沙箱环境模拟调用所述目标交互平台的页面显示接口，可W 具体包括：
[0126] 通过预先嵌入的目标脚本代码，将所述基于file协议的本地调试页面复制N份，并 新建N个沙箱环境；
[0127] 分别将所述N份本地调试页面对应一一放进所述N个沙箱环境中来模拟调用所述 目标交互平台的页面显示接口。
[01%]具体地，N个目标设备的预览页面同时显示在所述当前显示页面中；处理器1101在 当前显示页面显示擅染后的所述N个目标设备的预览页面，可W具体包括：
[0129] 通过显示屏1106在所述当前显示页面的预设区域显示所述本地调试页面的原始 代码；
[0130] 将针对所述原始代码的修改自动联动到所述本地调试页面的文件中，并在所述当 前显示页面中实时显示所述N个目标设备的预览页面修改后的显示效果。
[0131] 需要说明的是，本发明实施例中的页面调试预览系统70或页面调试预览系统110 可W为个人计算机或移动智能终端、平板电脑等电子设备;可理解的是，页面调试预览系统 70或页面调试预览系统110中各模块的功能可对应参考上述各方法实施例中图1至图6任意 实施例的具体实现方式，运里不再寶述。
[0132] 综上所述，实施本发明实施例，通过预设的沙箱环境模拟调用目标交互平台的页 面显示接口，根据预设的该目标交互平台的页面显示区域参数，结合该N个目标调试设备的 显示屏区域参数分别擅染所述页面信息；在当前显示页面显示擅染后的该N个目标设备的 预览页面，可W实现在前端开发移动页面的时候，只需要一个平台就能够看到不同设备的 预览效果，从而节省了不断找设备的烦恼;并且，可W方便地自定义设备，当需要更多特殊 的电子设备的时候可W手动添加，维护属于自己的测试设备;而且，通过预先嵌入的目标脚 本代码实现了本地化调试页面，跟本地页面联动修改，实时体验修改后的效果，开发效率大 大提高。另外，通过统一资源定位符的哈希技术，可W把当前预览的页面通过复制网址直接 进行分享，更加利于各开发人员在页面开发进程的讨论和研究，进一步提高开发效率。
[0133] 本领域普通技术人员可W理解实现上述实施例方法中的全部或部分流程，是可W 通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质 中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁 碟、光盘、只读存储记忆体（Read-Only Memoir ,ROM)或随机存储记忆体（Random Access Memory ,RAM)等。
[0134] W上所掲露的仅为本发明较佳实施例而已，当然不能W此来限定本发明之权利范 围，因此依本发明权利要求所作的等同变化，仍属本发明所涵盖的范围。
【主权项】
1. 一种页面调试预览方法，其特征在于，包括： 获取需要在目标交互平台进行显示的页面信息； 通过预设的沙箱环境模拟调用所述目标交互平台的页面显示接口，根据预设的所述目 标交互平台的页面显示区域参数，结合所述N个目标调试设备的显示屏区域参数分别渲染 所述页面信息;所述N为大于等于2的自然数； 在当前显示页面显示渲染后的所述N个目标设备的预览页面。2. 如权利要求1所述的方法，其特征在于，所述根据预设的所述目标交互平台的页面显 示区域参数，结合所述N个目标调试设备的显示屏区域参数分别渲染所述页面信息，包括： 根据预设的所述目标交互平台的页面显示区域参数，以及所述目标调试设备的显示屏 的宽高参数，匹配生成所述目标交互平台在所述目标调试设备的操作系统中运行时的显示 页面上部结构信息和/或下部结构信息； 根据所述显示页面上部结构信息和/或下部结构信息，渲染生成所述目标调试设备的 预览页面。3. 如权利要求1所述的方法，其特征在于，还包括： 对所述目标调试设备及其显示属性信息进行更新操作，并通过HTML5的本地存储技术 LOCAL STORAGE将更新后的目标设备及其显示属性信息保存在本地； 所述显示属性信息包括所述显示屏区域参数;所述更新操作包括以下至少一项：增加 目标调试设备及其显示属性信息、修改目标调试设备的显示属性信息、删除目标调试设备 及其显示属性信息。4. 如权利要求1所述的方法，其特征在于，所述在当前显示页面显示渲染后的所述N个 目标设备的预览页面之后，还包括： 通过统一资源定位符的哈希技术，生成针对所述当前显示页面的页面地址分享信息。5. 如权利要求1所述的方法，其特征在于，所述在当前显示页面显示渲染后的所述N个 目标设备的预览页面之后，还包括： 通过调用预设全屏开闭接口对所述当前显示页面进行全屏显示的开闭操作。6. 如权利要求1-5任一项所述的方法，其特征在于，所述需要在目标交互平台进行显示 的页面信息包括基于file协议的本地调试页面； 所述通过预设的沙箱环境模拟调用所述目标交互平台的页面显示接口，包括： 通过预先嵌入的目标脚本代码，将所述基于file协议的本地调试页面复制N份，并新建 N个沙箱环境； 分别将所述N份本地调试页面对应一一放进所述N个沙箱环境中来模拟调用所述目标 交互平台的页面显示接口。7. 如权利要求6所述的方法，其特征在于，所述N个目标设备的预览页面同时显示在所 述当前显示页面中；所述在当前显示页面显示渲染后的所述N个目标设备的预览页面，包 括： 在所述当前显示页面的预设区域显示所述本地调试页面的原始代码； 将针对所述原始代码的修改自动联动到所述本地调试页面的文件中，并在所述当前显 示页面中实时显示所述N个目标设备的预览页面修改后的显示效果。8. -种页面调试预览系统，其特征在于，包括： 获取模块，用于获取需要在目标交互平台进行显示的页面信息； 渲染模块，用于通过预设的沙箱环境模拟调用所述目标交互平台的页面显示接口，根 据预设的所述目标交互平台的页面显示区域参数，结合所述N个目标调试设备的显示屏区 域参数分别渲染所述页面信息;所述N为大于等于2的自然数； 显示模块，用于在当前显示页面显示渲染后的所述N个目标设备的预览页面。9. 如权利要求8所述的系统，其特征在于，所述渲染模块包括： 匹配生成单元，用于根据预设的所述目标交互平台的页面显示区域参数，以及所述目 标调试设备的显示屏的宽高参数，匹配生成所述目标交互平台在所述目标调试设备的操作 系统中运行时的显示页面上部结构信息和/或下部结构信息； 渲染生成单元，用于根据所述显示页面上部结构信息和/或下部结构信息，渲染生成所 述目标调试设备的预览页面。10. 如权利要求8所述的系统，其特征在于，还包括： 更新模块，用于对所述目标调试设备及其显示属性信息进行更新操作； 信息保存模块，用于通过HTML5的本地存储技术LOCAL STORAGE将更新后的目标设备及 其显示属性信息保存在本地； 所述显示属性信息包括所述显示屏区域参数;所述更新操作包括以下至少一项：增加 目标调试设备及其显示属性信息、修改目标调试设备的显示属性信息、删除目标调试设备 及其显示属性信息。11. 如权利要求8所述的系统，其特征在于，还包括： 分享信息生成模块，用于在所述显示模块在当前显示页面显示渲染后的所述N个目标 设备的预览页面之后，通过统一资源定位符的哈希技术，生成针对所述当前显示页面的页 面地址分享信息。12. 如权利要求8所述的系统，其特征在于，还包括： 全屏控制模块，用于在所述显示模块在当前显示页面显示渲染后的所述N个目标设备 的预览页面之后，通过调用预设全屏开闭接口对所述当前显示页面进行全屏显示的开闭操 作。13. 如权利要求8-12任一项所述的系统，其特征在于，所述需要在目标交互平台进行显 示的页面信息包括基于file协议的本地调试页面； 所述渲染模块包括： 复制新建单元，用于通过预先嵌入的目标脚本代码，将所述基于file协议的本地调试 页面复制N份，并新建N个沙箱环境； 模拟调试单元，用于分别将所述N份本地调试页面对应一一放进所述N个沙箱环境中来 模拟调用所述目标交互平台的页面显示接口。14. 如权利要求13所述的系统，其特征在于，所述N个目标设备的预览页面同时显示在 所述当前显示页面中；所述显示模块包括： 代码显示单元，用于在所述当前显示页面的预设区域显示所述本地调试页面的原始代 码； 联动显示单元，用于将针对所述原始代码的修改自动联动到所述本地调试页面的文件 中，并在所述当前显示页面中实时显示所述N个目标设备的预览页面修改后的显示效果。
【文档编号】G06F11/36GK105955888SQ201610288880
【公开日】2016年9月21日
【申请日】2016年5月4日
【发明人】谭照强
【申请人】腾讯科技（深圳）有限公司