一种页面调试预览方法及系统技术方案

本发明专利技术实施例公开了页面调试预览方法，包括：获取需要在目标交互平台进行显示的页面信息；通过预设的沙箱环境模拟调用所述目标交互平台的页面显示接口，根据预设的所述目标交互平台的页面显示区域参数，结合所述N个目标调试设备的显示屏区域参数分别渲染所述页面信息；所述N为大于等于2的自然数；在当前显示页面显示渲染后的所述N个目标设备的预览页面。本发明专利技术还公开了页面调试预览系统，采用本发明专利技术可以实现在前端开发移动页面的时候，只需要一个平台就能够看到不同设备的预览效果，从而节省了不断找设备的烦恼，另外通过预先嵌入的目标脚本代码实现了本地化调试页面，跟本地页面联动修改，实时体验修改后的效果，开发效率大大提高。

【技术实现步骤摘要】

本专利技术涉及计算机互联网领域，尤其页面调试预览方法及页面调试预览系统。
技术介绍
随着电子科技以及移动互联网技术的发展，电子设备(特别是智能手机)的功能越来越强大，只要用户按照自身的需求在电子设备上安装各种应用程序，便可以完成各种事务。当前，移动端HTML5页面(简称H5)十分火热，不少公司都借着这股热潮去宣传自己的产品。但是由于移动设备十分多，特别是安卓手机型号不一，手机屏幕的分辨率繁多。为了确保所有用户可用，在开发移动端网页时经常需要多台手机逐一测试，产品和设计等开发人员也需要逐台手机体验网页效果，然而这种方式十分低效，且未能覆盖所有手机。
技术实现思路
本专利技术实施例所要解决的技术问题在于，提供一种页面调试预览方法及页面调试预览系统，可以同时模拟多设备环境下调试和预览移动端页面，大大提高开发效率。为了解决上述技术问题，本专利技术实施例第一方面公开了一种页面调试预览方法，包括：获取需要在目标交互平台进行显示的页面信息；通过预设的沙箱环境模拟调用所述目标交互平台的页面显示接口，根据预设的所述目标交互平台的页面显示区域参数，结合所述N个目标调试设备的显示屏区域参数分别渲染所述页面信息；所述N为大于等于2的自然数；在当前显示页面显示渲染后的所述N个目标设备的预览页面。结合第一方面，在第一种可能的实现方式中，所述根据预设的所述目标交互平台的页面显示区域参数，结合所述N个目标调试设备的显示屏区域参数分
别渲染所述页面信息，包括：根据预设的所述目标交互平台的页面显示区域参数，以及所述目标调试设备的显示屏的宽高参数，匹配生成所述目标交互平台在所述目标调试设备的操作系统中运行时的显示页面上部结构信息和/或下部结构信息；根据所述显示页面上部结构信息和/或下部结构信息，渲染生成所述目标调试设备的预览页面。结合第一方面，在第二种可能的实现方式中，还包括：对所述目标调试设备及其显示属性信息进行更新操作，并通过HTML5的本地存储技术LOCAL STORAGE将更新后的目标设备及其显示属性信息保存在本地；所述显示属性信息包括所述显示屏区域参数；所述更新操作包括以下至少一项：增加目标调试设备及其显示属性信息、修改目标调试设备的显示属性信息、删除目标调试设备及其显示属性信息。结合第一方面，在第三种可能的实现方式中，所述在当前显示页面显示渲染后的所述N个目标设备的预览页面之后，还包括：通过统一资源定位符的哈希技术，生成针对所述当前显示页面的页面地址分享信息。结合第一方面，在第四种可能的实现方式中，所述在当前显示页面显示渲染后的所述N个目标设备的预览页面之后，还包括：通过调用预设全屏开闭接口对所述当前显示页面进行全屏显示的开闭操作。结合第一方面，或者第一方面的第一种可能的实现方式，或者第一方面的第二种可能的实现方式，或者第一方面的第三种可能的实现方式，或者第一方面的第四种可能的实现方式，在第五种可能的实现方式中，所述需要在目标交互平台进行显示的页面信息包括基于file协议的本地调试页面；所述通过预设的沙箱环境模拟调用所述目标交互平台的页面显示接口，包括：通过预先嵌入的目标脚本代码，将所述基于file协议的本地调试页面复制N份，并新建N个沙箱环境；分别将所述N份本地调试页面对应一一放进所述N个沙箱环境中来模拟调
用所述目标交互平台的页面显示接口。结合第一方面的第五种可能的实现方式，在第六种可能的实现方式中，所述N个目标设备的预览页面同时显示在所述当前显示页面中；所述在当前显示页面显示渲染后的所述N个目标设备的预览页面，包括：在所述当前显示页面的预设区域显示所述本地调试页面的原始代码；将针对所述原始代码的修改自动联动到所述本地调试页面的文件中，并在所述当前显示页面中实时显示所述N个目标设备的预览页面修改后的显示效果。本专利技术实施例第二方面公开了一种页面调试预览系统，包括：获取模块，用于获取需要在目标交互平台进行显示的页面信息；渲染模块，用于通过预设的沙箱环境模拟调用所述目标交互平台的页面显示接口，根据预设的所述目标交互平台的页面显示区域参数，结合所述N个目标调试设备的显示屏区域参数分别渲染所述页面信息；所述N为大于等于2的自然数；显示模块，用于在当前显示页面显示渲染后的所述N个目标设备的预览页面。结合第二方面，在第一种可能的实现方式中，所述渲染模块包括：匹配生成单元，用于根据预设的所述目标交互平台的页面显示区域参数，以及所述目标调试设备的显示屏的宽高参数，匹配生成所述目标交互平台在所述目标调试设备的操作系统中运行时的显示页面上部结构信息和/或下部结构信息；渲染生成单元，用于根据所述显示页面上部结构信息和/或下部结构信息，渲染生成所述目标调试设备的预览页面。结合第二方面，在第二种可能的实现方式中，还包括：更新模块，用于对所述目标调试设备及其显示属性信息进行更新操作；信息保存模块，用于通过HTML5的本地存储技术LOCAL STORAGE将更新后的目标设备及其显示属性信息保存在本地；所述显示属性信息包括所述显示屏区域参数；所述更新操作包括以下至少一项：增加目标调试设备及其显示属性信息、修改目标调试设备的显示属性信息、删除目标调试设备及其显示属性信息。结合第二方面，在第三种可能的实现方式中，还包括：分享信息生成模块，用于在所述显示模块在当前显示页面显示渲染后的所述N个目标设备的预览页面之后，通过统一资源定位符的哈希技术，生成针对所述当前显示页面的页面地址分享信息。结合第二方面，在第四种可能的实现方式中，还包括：全屏控制模块，用于在所述显示模块在当前显示页面显示渲染后的所述N个目标设备的预览页面之后，通过调用预设全屏开闭接口对所述当前显示页面进行全屏显示的开闭操作。结合第二方面，或者第二方面的第一种可能的实现方式，或者第二方面的第二种可能的实现方式，或者第二方面的第三种可能的实现方式，或者第二方面的第四种可能的实现方式，在第五种可能的实现方式中，所述需要在目标交互平台进行显示的页面信息包括基于file协议的本地调试页面；所述渲染模块包括：复制新建单元，用于通过预先嵌入的目标脚本代码，将所述基于file协议的本地调试页面复制N份，并新建N个沙箱环境；模拟调试单元，用于分别将所述N份本地调试页面对应一一放进所述N个沙箱环境中来模拟调用所述目标交互平台的页面显示接口。结合第二方面的第五种可能的实现方式，在第六种可能的实现方式中，所述N个目标设备的预览页面同时显示在所述当前显示页面中；所述显示模块包括：代码显示单元，用于在所述当前显示页面的预设区域显示所述本地调试页面的原始代码；联动显示单元，用于将针对所述原始代码的修改自动联动到所述本地调试页面的文件中，并在所述当前显示页面中实时显示所述N个目标设备的预览页面修改后的显示效果。本专利技术实施例第三方面公开了一种计算机存储介质，所述计算机存储介质存储有程序，所述程序执行时包括本专利技术实施例第一方面、或者第一方面的第一种可能的实现方式，或者第一方面的第二种可能的实现方式，或者第一方面的第三种可能的实现方式，或者第一方面的第四种可能的实现方式，或者第一方面的第五种可能的实现方式，或者第一方面的第六种可能的实现方式中的页
面调试预览方法的全部步骤。实施本专利技术实施例，通过预设本文档来自技高网...

【技术保护点】
一种页面调试预览方法，其特征在于，包括：获取需要在目标交互平台进行显示的页面信息；通过预设的沙箱环境模拟调用所述目标交互平台的页面显示接口，根据预设的所述目标交互平台的页面显示区域参数，结合所述N个目标调试设备的显示屏区域参数分别渲染所述页面信息；所述N为大于等于2的自然数；在当前显示页面显示渲染后的所述N个目标设备的预览页面。

【技术特征摘要】
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.一种页面调试预览系统，其特征在...

【专利技术属性】
技术研发人员：谭照强，
申请(专利权)人：腾讯科技深圳有限公司，
类型：发明
国别省市：广东;44