页面呈现方法、装置、电子设备及存储介质制造方法及图纸

本公开关于一种页面呈现方法、装置、电子设备及存储介质，该页面呈现方法包括：响应于对启用了页面展示功能的代码编辑器的地址输入操作，获取目标页面的页面地址；通过代码编辑器调用无界面浏览器访问页面地址，获取目标页面的第一页面内容数据；基于第一页面内容数据，生成目标页面的第一页面快照；在代码编辑器中呈现第一页面快照。本公开实现了在代码编辑器界面中显示目标页面的目的，有助于提升前端开发的效率。端开发的效率。端开发的效率。

【技术实现步骤摘要】
页面呈现方法、装置、电子设备及存储介质


[0001]本公开涉及计算机
，尤其涉及一种页面呈现方法、装置、电子设备及存储介质。

技术介绍

[0002]随着互联网技术和应用的快速发展，大量前端开发的需求和应用不断地出现。
[0003]代码编辑器是一种用来进行前端开发的主要工具，通过代码编辑器中的代码编辑界面，开发人员可以输入前端代码，并且，通过一个称为live preview(实时预览)的代码编辑器插件开启node(节点)服务，以在代码编辑器中预览本地的页面内容，能够实现在代码编辑器的同一个窗口下查看所开发的前端代码和与前端代码相对应的页面效果。
[0004]然而，live preview插件只能访问本地的静态资源，不能打开本地服务端渲染的页面和非本地的页面链接。因此，如何在代码编辑器的窗口中实现对本地和非本地的网页浏览便成为亟待解决的问题。

技术实现思路

[0005]本公开提供一种页面呈现方法、装置、电子设备及存储介质，以至少解决相关技术中在代码编辑器的窗口中实现对本地和非本地的网页浏览的技术问题。
[0006]根据本公开实施例的一方面，提供一种页面呈现方法，包括：
[0007]响应于对启用了页面展示功能的代码编辑器的地址输入操作，获取目标页面的页面地址；
[0008]通过所述代码编辑器调用无界面浏览器访问所述页面地址，获取所述目标页面的第一页面内容数据；
[0009]基于所述第一页面内容数据，生成所述目标页面的第一页面快照；
[0010]在所述代码编辑器中呈现所述第一页面快照。
[0011]在一种可能实施方式中，所述在所述代码编辑器中呈现所述第一页面快照之后，还包括：
[0012]响应于对所述第一页面快照的页面操作，确定所述页面操作在所述第一页面快照的操作位置；
[0013]确定所述目标页面中对应于所述操作位置的目标页面元素，其中，所述目标页面元素用于表征所述页面操作的操作对象；
[0014]通过所述无界面浏览器，对所述目标页面的所述目标页面元素执行所述页面操作。
[0015]在一种可能实施方式中，所述通过所述无界面浏览器，对所述目标页面的所述目标页面元素执行所述页面操作之后，还包括：
[0016]获取所述目标页面在所述页面操作生效后的第二页面内容数据；
[0017]基于所述第二页面内容数据，生成所述目标页面的第二页面快照；
[0018]将所述代码编辑器中呈现的所述第一页面快照，替换为所述第二页面快照。
[0019]在一种可能实施方式中，所述将所述代码编辑器中呈现的所述第一页面快照，替换为所述第二页面快照之后，还包括：
[0020]响应于对所述代码编辑器的第一切换操作，将所述代码编辑器中当前呈现的快照从所述第二页面快照切换为所述第一页面快照。
[0021]在一种可能实施方式中，所述将所述代码编辑器中当前呈现的快照从所述第二页面快照切换为所述第一页面快照之后，还包括：
[0022]响应于对所述代码编辑器的第二切换操作，将所述代码编辑器中当前呈现的快照从所述第一页面快照切换为所述第二页面快照。
[0023]在一种可能实施方式中，所述方法还包括：
[0024]获取访问所述目标页面所使用的访问凭证；
[0025]存储所述访问凭证，所述访问凭证用于所述无界面浏览器对所述目标页面的免登录访问。
[0026]在一种可能实施方式中，所述基于所述第一页面内容数据，生成所述目标页面的第一页面快照，包括：
[0027]通过所述代码编辑器调用快照插件对所述第一页面内容数据执行快照操作，生成所述第一页面快照。
[0028]在一种可能实施方式中，所述方法还包括：
[0029]响应于所述页面展示功能的启动操作，在所述代码编辑器的代码编辑界面中呈现用于实现所述页面展示功能的插件视窗；
[0030]所述响应于对启用了页面展示功能的代码编辑器的地址输入操作，获取目标页面的页面地址，包括：响应于在所述插件视窗内的所述地址输入操作，获取所述页面地址；
[0031]所述在所述代码编辑器中呈现所述第一页面快照，包括：将所述第一页面快照呈现在所述插件视窗中。
[0032]根据本公开实施例的另一方面，提供一种页面呈现装置，包括：
[0033]地址获取模块，被配置为执行响应于对启用了页面展示功能的代码编辑器的地址输入操作，获取目标页面的页面地址；
[0034]页面内容获取模块，被配置为执行通过所述代码编辑器调用无界面浏览器访问所述页面地址，获取所述目标页面的第一页面内容数据；
[0035]快照模块，被配置为执行基于所述第一页面内容数据，生成所述目标页面的第一页面快照；
[0036]页面呈现模块，被配置为执行在所述代码编辑器中呈现所述第一页面快照。
[0037]在一种可能实施方式中，所述装置还包括：
[0038]位置确定模块，被配置为执行响应于对所述第一页面快照的页面操作，确定所述页面操作在所述第一页面快照的操作位置；
[0039]页面元素确定模块，被配置为执行确定所述目标页面中对应于所述操作位置的目标页面元素，其中，所述目标页面元素用于表征所述页面操作的操作对象；
[0040]页面操作模块，被配置为执行通过所述无界面浏览器，对所述目标页面的所述目标页面元素执行所述页面操作。
[0041]在一种可能实施方式中，所述页面内容获取模块进一步被配置为执行获取所述目标页面在所述页面操作生效后的第二页面内容数据；
[0042]所述快照模块进一步被配置为执行基于所述第二页面内容数据，生成所述目标页面的第二页面快照；
[0043]所述页面呈现模块进一步被配置为执行将所述代码编辑器中呈现的所述第一页面快照，替换为所述第二页面快照。
[0044]在一种可能实施方式中，所述装置还包括：
[0045]页面切换模块，被配置为执行响应于对所述代码编辑器的第一切换操作，将所述代码编辑器中当前呈现的快照从所述第二页面快照切换为所述第一页面快照。
[0046]在一种可能实施方式中，所述页面切换模块进一步被配置为执行响应于对所述代码编辑器的第二切换操作，将所述代码编辑器中当前呈现的快照从所述第一页面快照切换为所述第二页面快照。
[0047]在一种可能实施方式中，所述装置还包括：
[0048]凭证获取模块，被配置为执行获取访问所述目标页面所使用的访问凭证；
[0049]凭证存储模块，被配置为执行存储所述访问凭证，所述访问凭证用于所述无界面浏览器对所述目标页面的免登录访问。
[0050]在一种可能实施方式中，所述快照模块进一步被配置为执行通过所述代码编辑器调用快照插件对所述第一页面内容数据执行快照操作，生成所述第一页面快照。
[0051]在一种可能实施方式中，所述装置还包括：
[0052]视窗呈现模块，被配置为执行响应于所述页面展本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面呈现方法，其特征在于，包括：响应于对启用了页面展示功能的代码编辑器的地址输入操作，获取目标页面的页面地址；通过所述代码编辑器调用无界面浏览器访问所述页面地址，获取所述目标页面的第一页面内容数据；基于所述第一页面内容数据，生成所述目标页面的第一页面快照；在所述代码编辑器中呈现所述第一页面快照。2.根据权利要求1所述的页面呈现方法，其特征在于，所述在所述代码编辑器中呈现所述第一页面快照之后，还包括：响应于对所述第一页面快照的页面操作，确定所述页面操作在所述第一页面快照的操作位置；确定所述目标页面中对应于所述操作位置的目标页面元素，其中，所述目标页面元素用于表征所述页面操作的操作对象；通过所述无界面浏览器，对所述目标页面的所述目标页面元素执行所述页面操作。3.根据权利要求2所述的页面呈现方法，其特征在于，所述通过所述无界面浏览器，对所述目标页面的所述目标页面元素执行所述页面操作之后，还包括：获取所述目标页面在所述页面操作生效后的第二页面内容数据；基于所述第二页面内容数据，生成所述目标页面的第二页面快照；将所述代码编辑器中呈现的所述第一页面快照，替换为所述第二页面快照。4.根据权利要求1至3任一项所述的页面呈现方法，其特征在于，所述方法还包括：获取访问所述目标页面所使用的访问凭证；存储所述访问凭证，所述访问凭证用于所述无界面浏览器对所述目标页面的免登录访问。5.根据权利要求1所述的页面呈现方法，其特征在于，所述基于所述第一页面内容数据，生成所述目标页面的第一页面快照，包括：通过所述代码编辑器调用快照插件对所述第一页面内容数据执行...

【专利技术属性】
技术研发人员：董天琦，
申请(专利权)人：北京达佳互联信息技术有限公司，
类型：发明
国别省市：