CN114924723A - 页面呈现方法、装置、电子设备及存储介质 - Google Patents
页面呈现方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN114924723A CN114924723A CN202210498194.7A CN202210498194A CN114924723A CN 114924723 A CN114924723 A CN 114924723A CN 202210498194 A CN202210498194 A CN 202210498194A CN 114924723 A CN114924723 A CN 114924723A
- Authority
- CN
- China
- Prior art keywords
- page
- snapshot
- code editor
- target
- address
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 64
- 238000009877 rendering Methods 0.000 claims description 59
- 230000006870 function Effects 0.000 claims description 27
- 230000004044 response Effects 0.000 claims description 20
- 230000000694 effects Effects 0.000 claims description 9
- 230000015654 memory Effects 0.000 claims description 8
- 238000004590 computer program Methods 0.000 claims description 6
- 238000011161 development Methods 0.000 abstract description 29
- 230000009286 beneficial effect Effects 0.000 abstract description 2
- 238000010586 diagram Methods 0.000 description 9
- 230000008569 process Effects 0.000 description 6
- 235000014510 cooky Nutrition 0.000 description 5
- 238000005516 engineering process Methods 0.000 description 3
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 230000003252 repetitive effect Effects 0.000 description 1
- 238000013515 script Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本公开关于一种页面呈现方法、装置、电子设备及存储介质，该页面呈现方法包括：响应于对启用了页面展示功能的代码编辑器的地址输入操作，获取目标页面的页面地址；通过代码编辑器调用无界面浏览器访问页面地址，获取目标页面的第一页面内容数据；基于第一页面内容数据，生成目标页面的第一页面快照；在代码编辑器中呈现第一页面快照。本公开实现了在代码编辑器界面中显示目标页面的目的，有助于提升前端开发的效率。
Description
技术领域
本公开涉及计算机技术领域，尤其涉及一种页面呈现方法、装置、电子设备及存储介质。
背景技术
随着互联网技术和应用的快速发展，大量前端开发的需求和应用不断地出现。
代码编辑器是一种用来进行前端开发的主要工具，通过代码编辑器中的代码编辑界面，开发人员可以输入前端代码，并且，通过一个称为live preview(实时预览)的代码编辑器插件开启node(节点)服务，以在代码编辑器中预览本地的页面内容，能够实现在代码编辑器的同一个窗口下查看所开发的前端代码和与前端代码相对应的页面效果。
然而，live preview插件只能访问本地的静态资源，不能打开本地服务端渲染的页面和非本地的页面链接。因此，如何在代码编辑器的窗口中实现对本地和非本地的网页浏览便成为亟待解决的问题。
发明内容
本公开提供一种页面呈现方法、装置、电子设备及存储介质，以至少解决相关技术中在代码编辑器的窗口中实现对本地和非本地的网页浏览的技术问题。
根据本公开实施例的一方面，提供一种页面呈现方法，包括：
响应于对启用了页面展示功能的代码编辑器的地址输入操作，获取目标页面的页面地址；
通过所述代码编辑器调用无界面浏览器访问所述页面地址，获取所述目标页面的第一页面内容数据；
基于所述第一页面内容数据，生成所述目标页面的第一页面快照；
在所述代码编辑器中呈现所述第一页面快照。
在一种可能实施方式中，所述在所述代码编辑器中呈现所述第一页面快照之后，还包括：
响应于对所述第一页面快照的页面操作，确定所述页面操作在所述第一页面快照的操作位置；
确定所述目标页面中对应于所述操作位置的目标页面元素，其中，所述目标页面元素用于表征所述页面操作的操作对象；
通过所述无界面浏览器，对所述目标页面的所述目标页面元素执行所述页面操作。
在一种可能实施方式中，所述通过所述无界面浏览器，对所述目标页面的所述目标页面元素执行所述页面操作之后，还包括：
获取所述目标页面在所述页面操作生效后的第二页面内容数据；
基于所述第二页面内容数据，生成所述目标页面的第二页面快照；
将所述代码编辑器中呈现的所述第一页面快照，替换为所述第二页面快照。
在一种可能实施方式中，所述将所述代码编辑器中呈现的所述第一页面快照，替换为所述第二页面快照之后，还包括：
响应于对所述代码编辑器的第一切换操作，将所述代码编辑器中当前呈现的快照从所述第二页面快照切换为所述第一页面快照。
在一种可能实施方式中，所述将所述代码编辑器中当前呈现的快照从所述第二页面快照切换为所述第一页面快照之后，还包括：
响应于对所述代码编辑器的第二切换操作，将所述代码编辑器中当前呈现的快照从所述第一页面快照切换为所述第二页面快照。
在一种可能实施方式中，所述方法还包括：
获取访问所述目标页面所使用的访问凭证；
存储所述访问凭证，所述访问凭证用于所述无界面浏览器对所述目标页面的免登录访问。
在一种可能实施方式中，所述基于所述第一页面内容数据，生成所述目标页面的第一页面快照，包括：
通过所述代码编辑器调用快照插件对所述第一页面内容数据执行快照操作，生成所述第一页面快照。
在一种可能实施方式中，所述方法还包括：
响应于所述页面展示功能的启动操作，在所述代码编辑器的代码编辑界面中呈现用于实现所述页面展示功能的插件视窗；
所述响应于对启用了页面展示功能的代码编辑器的地址输入操作，获取目标页面的页面地址，包括：响应于在所述插件视窗内的所述地址输入操作，获取所述页面地址；
所述在所述代码编辑器中呈现所述第一页面快照，包括：将所述第一页面快照呈现在所述插件视窗中。
根据本公开实施例的另一方面，提供一种页面呈现装置，包括：
地址获取模块，被配置为执行响应于对启用了页面展示功能的代码编辑器的地址输入操作，获取目标页面的页面地址；
页面内容获取模块，被配置为执行通过所述代码编辑器调用无界面浏览器访问所述页面地址，获取所述目标页面的第一页面内容数据；
快照模块，被配置为执行基于所述第一页面内容数据，生成所述目标页面的第一页面快照；
页面呈现模块，被配置为执行在所述代码编辑器中呈现所述第一页面快照。
在一种可能实施方式中，所述装置还包括：
位置确定模块，被配置为执行响应于对所述第一页面快照的页面操作，确定所述页面操作在所述第一页面快照的操作位置；
页面元素确定模块，被配置为执行确定所述目标页面中对应于所述操作位置的目标页面元素，其中，所述目标页面元素用于表征所述页面操作的操作对象；
页面操作模块，被配置为执行通过所述无界面浏览器，对所述目标页面的所述目标页面元素执行所述页面操作。
在一种可能实施方式中，所述页面内容获取模块进一步被配置为执行获取所述目标页面在所述页面操作生效后的第二页面内容数据；
所述快照模块进一步被配置为执行基于所述第二页面内容数据，生成所述目标页面的第二页面快照；
所述页面呈现模块进一步被配置为执行将所述代码编辑器中呈现的所述第一页面快照，替换为所述第二页面快照。
在一种可能实施方式中，所述装置还包括：
页面切换模块，被配置为执行响应于对所述代码编辑器的第一切换操作，将所述代码编辑器中当前呈现的快照从所述第二页面快照切换为所述第一页面快照。
在一种可能实施方式中，所述页面切换模块进一步被配置为执行响应于对所述代码编辑器的第二切换操作，将所述代码编辑器中当前呈现的快照从所述第一页面快照切换为所述第二页面快照。
在一种可能实施方式中，所述装置还包括：
凭证获取模块，被配置为执行获取访问所述目标页面所使用的访问凭证；
凭证存储模块，被配置为执行存储所述访问凭证，所述访问凭证用于所述无界面浏览器对所述目标页面的免登录访问。
在一种可能实施方式中，所述快照模块进一步被配置为执行通过所述代码编辑器调用快照插件对所述第一页面内容数据执行快照操作，生成所述第一页面快照。
在一种可能实施方式中，所述装置还包括：
视窗呈现模块，被配置为执行响应于所述页面展示功能的启动操作，在所述代码编辑器的代码编辑界面中呈现用于实现所述页面展示功能的插件视窗；
所述地址获取模块进一步被配置为执行响应于在所述插件视窗内的所述地址输入操作，获取所述页面地址；
所述页面呈现模块进一步被配置为执行将所述第一页面快照呈现在所述插件视窗中。
根据本公开实施例的另一方面，提供一种电子设备，包括：
处理器；
用于存储所述处理器的可执行指令的存储器；
其中，所述处理器被配置为执行所述可执行指令，以实现如上述任一实施方式所述的页面呈现方法。
根据本公开实施例的另一方面，提供一种计算机可读存储介质，当所述计算机可读存储介质中的至少一条指令被电子设备的处理器执行时，使得所述电子设备能够实现上述任一实施方式所述的页面呈现方法。
根据本公开实施例的另一方面，提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述任一实施方式所述的页面呈现方法。
本公开的实施例提供的技术方案至少带来以下有益效果：
本公开实施例的页面呈现方法、装置、电子设备及存储介质，通过代码编辑器调用无界面浏览器访问目标页面的页面地址而获取目标页面的页面内容数据，基于所获取的页面内容数据生成页面快照并呈现在代码编辑器中，实现了在代码编辑器界面中显示目标页面的目的，在显示有代码界面的代码编辑器的当前窗口即可呈现所开发的页面或者网络上的其他页面，有助于提升前端开发的效率，提升了前端开发过程中的开发体验。
应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。
图1是根据一示意性实施例示出的一种页面呈现方法的流程图；
图2是根据一示意性实施例示出的对页面快照的内容进行操作的流程图；
图3是根据一示意性实施例示出的更新页面快照的流程图；
图4是根据一示意性实施例示出的一种页面呈现方法的应用场景流程图；
图5是根据一示意性实施例示出的一种页面呈现装置的第一逻辑结构框图；
图6是根据一示意性实施例示出的一种页面呈现装置的第二逻辑结构框图；
图7是根据一示意性实施例示出的一种页面呈现装置的第三逻辑结构框图；
图8是本公开实施例提供的一种电子设备的结构示意图。
具体实施方式
为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。
需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
需要说明的是，本公开所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)，均为经用户授权或者经过各方充分授权的信息。
在开发人员进行前端开发时，编写出新的网页代码后，需要及时的在浏览器中进行查看开发出的网页效果是否符合要求，因此，开发人员每完成一段前端代码后，都需要将当前的代码编辑器切换到浏览器，并通过浏览器访问或者刷新所开发的网页。另外，在开发人员进行前端开发时，也存在通过网络查询、检索、学习相关技术的需求，所以也进一步增加了在代码编辑器和浏览器之间切换的频率，这种切换、操作的动作额外地增加了对开发设备的操作，并且当开发设备中打开的窗口数量众多的情况下，还需要开发人员在众多的窗口中查看所需要切换出的浏览器窗口或者代码编辑器窗口，从而给前端程序的开发过程带来了过多的干扰。
存在一个称为live preview的vscode(一种代码编辑器)插件，其可开启一个node服务，能够实现在代码编辑器的编辑区预览开发机本地的页面内容，但是该插件只能访问开发机本地的静态资源，因此，其无法从根本上提升前端开发的效率。
有鉴于此，本公开实施例提供一种页面呈现方法、装置、电子设备及存储介质，将由浏览器呈现的目标页面在代码编辑器界面中进行显示，以消除需要查看页面效果或者通过网络进行资源浏览和资料查询而在代码编辑器和浏览器之间的频繁切换，提升前端开发的效率，提升前端开发过程中的开发体验。
图1是根据一示意性实施例示出的一种页面呈现方法的流程图，参见图1所示，该页面呈现方法应用于计算机设备，下面以计算机设备为开发机终端为例进行说明。该页面呈现方法主要包括以下步骤：
步骤101、响应于对启用了页面展示功能的代码编辑器的地址输入操作，获取目标页面的页面地址；
步骤102、通过代码编辑器调用无界面浏览器访问页面地址，获取目标页面的第一页面内容数据；
步骤103、基于第一页面内容数据，生成目标页面的第一页面快照；
步骤104、在代码编辑器中呈现第一页面快照。
本公开实施例的页面呈现方法，通过代码编辑器调用无界面浏览器访问目标页面的页面地址而获取目标页面的页面内容数据，基于所获取的页面内容数据生成页面快照并呈现在代码编辑器中，实现了在代码编辑器界面中显示目标页面的目的，在显示有代码界面的代码编辑器的当前窗口即可呈现所开发的页面或者网络上的其他页面，有助于提升前端开发的效率，提升了前端开发过程中的开发体验。
在一些实施例中，无界面浏览器采用puppeteer浏览器。其中，puppeteer是一个Node库，它提供了一个高级API(Application Programming Interface，应用程序编程接口)来通过DevTools(开发工具)协议控制Chrome浏览器(谷歌浏览器)，puppeteer能够实现浏览器的各种功能。
在一些实施例中，页面快照可以通过相关的快照插件实现，在此情况下，步骤103可以进一步包括：
通过代码编辑器调用快照插件对第一页面内容数据执行快照操作，生成第一页面快照。
在一些实施例中，快照插件可以是canvas(画布)。其中，canvas为HTML5(HyperText Markup Language 5，超文本标记语言5)中新增的标签，用于在网页实时生成图像。即直接使用canvas绘制生成页面快照。
由于代码编辑器并非是专用于网页浏览的浏览器，所以代码编辑器和浏览器呈现网页内容的数据处理方面并不相同。在浏览器中呈现网页的过程中，在生成DOM(DocumentObject Model，文本对象模型)元素后直接对DOM元素进行渲染并呈现，但在代码编辑器的页面展示区中呈现的页面模板中的页面展示区中呈现网页效果时，直接对DOM元素进行渲染会严重降低代码编辑器所在的开发机本地的性能。为解决这一问题，本公开实施例的页面呈现方法通过步骤103生成页面快照，在此基础上，在一些实施例中，在执行步骤104的在代码编辑器的页面展示区中呈现页面快照之前，本公开实施例的页面呈现方法还进一步包括：对页面快照进行渲染。
采用上述对页面快照进行渲染的方式能够快速在代码编辑器的页面展示区中呈现所访问网页的网页效果。
图2是根据一示意性实施例示出的对页面快照的内容进行操作的流程图。在一些实施例中，除了需要在代码编辑器中呈现页面快照以外，还需要像浏览器正常浏览网页一样，对呈现的页面快照中的内容进行操作，而直接对页面快照进行例如点击、输入的操作是无法实现的。因此，在这种情况下，在一些实施例中，参见图2所示，在步骤104之后，本公开实施例的页面呈现方法还进一步包括如下对页面快照的内容进行操作的步骤：
步骤201、响应于对第一页面快照的页面操作，确定页面操作在第一页面快照的操作位置；
步骤202、确定目标页面中对应于操作位置的目标页面元素，其中，目标页面元素用于表征页面操作的操作对象；
步骤203、通过无界面浏览器，对目标页面的目标页面元素执行页面操作。
在一些实施例中，步骤201可以包括通过监听页面展示区中的鼠标移动、点击、键盘输入等事件来检测针对页面快照的页面操作的操作位置。步骤202的确定目标页面中对应于操作位置的目标页面元素可以包括通过计算鼠标当前所在的位置P，并确定页面快照的位置P处对应的DOM元素，步骤203的通过所述无界面浏览器，对所述目标页面的所述目标页面元素执行所述页面操作可以包括对此DOM元素执行相应的点击、悬停等操作。其中，可以通过如下方法找到页面快照的位置P处对应的DOM元素：利用puppeteer的CDPSession对象的send(发送)方法，发送一个称为DOM.getNodeForLocation的事件以找到页面快照的位置P处对应的DOM元素。其中，CDPSession是由puppeteer创建的用于与Chrome Devtools(开发者工具)协议的原生通信的对象。
上述实施例中，页面元素即为DOM元素。DOM是HTML(Hyper Text MarkupLanguage，超文本标记语言)和XML(Extensible Markup Language，可扩展标记语言)文档的编程接口。DOM提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构、样式和内容。DOM将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之，DOM会将web(网络)页面和脚本或程序语言连接起来。
在一些情况下，除了需要对呈现的页面快照中的内容进行操作以外，还需要得到响应于操作而获取到所呈现的新的页面内容。图3是根据一示意性实施例示出的更新页面快照的流程图，如图3所示，在一些实施例中，在步骤203之后，本公开实施例的页面呈现方法还包括：
步骤301、获取目标页面在页面操作生效后的第二页面内容数据；
步骤302、基于第二页面内容数据，生成目标页面的第二页面快照；
步骤303、将代码编辑器中呈现的第一页面快照，替换为第二页面快照。
在一些实施例中，为了便于对页面的浏览，还需要具备在前后呈现的不同页面快照之间切换展示的功能，在这种情况下，在步骤303之后，本公开实施例的页面呈现方法还可以进一步包括：
响应于对代码编辑器的第一切换操作，将代码编辑器中当前呈现的快照从第二页面快照切换为第一页面快照。
在此基础上，在将代码编辑器中当前呈现的快照从第二页面快照切换为第一页面快照之后，本公开实施例的页面呈现方法还可以进一步包括：
响应于对代码编辑器的第二切换操作，将代码编辑器中当前呈现的快照从第一页面快照切换为第二页面快照。
通过上述两个步骤实现了在第一页面快照和第二页面快照之间的切换展示。
在一些情况下，为了便于对页面和网站的浏览，还需要对浏览的网站、网页进行访问凭证的记录，基于此，本公开实施例的页面呈现方法还可进一步包括：
获取访问所述目标页面所使用的访问凭证；
存储访问凭证，该访问凭证用于无界面浏览器对目标页面的免登录访问。
在一些实施例中，访问凭证为cookie。cookie是一些储存在用户本地终端上的数据，存储于本地终端上的文本文件中。当服务器向无界面浏览器发送页面时，在连接关闭后，服务器不会记录用户的登录信息，在本实施例中，可采用puppeteer获取页面的登录态cookie，把登录态cookie记录到代码编辑器中，达到再次访问免登录的效果。
为了实现在代码编辑器的代码边界界面中的页面展示，在一些实施例中，本公开的页面呈现方法还进一步包括：
响应于页面展示功能的启动操作，在代码编辑器的代码编辑界面中呈现用于实现页面展示功能的插件视窗。
在此基础上，步骤101进一步包括：响应于在插件视窗内的地址输入操作，获取页面地址；步骤104进一步包括：将第一页面快照呈现在插件视窗中。
在一些实施例中，可以在代码编辑器的扩展插件中，使用代码编辑器插件提供的webview(网页浏览)功能呈现插件视窗。
在一些实施例中，插件视窗包括地址输入区域、以及内容展示区域。其中，地址输入区用于执行地址输入操作，并且，内容展示区域用于呈现被渲染的第一页面快照和第二页面快照。其中，页面地址也可称为URL(Uniform Resource Locator，统一资源定位器)地址，所以地址输入区域也可称为URL输入区。
为了实现在代码编辑器的代码边界界面中的页面展示及切换，在一些实施例中，本公开实施例的页面呈现方法还可进一步包括：
响应于页面展示功能的启动操作，在代码编辑器的编辑界面中呈现用于实现页面展示功能的插件视窗；该插件视窗包括内容展示区域以及切换操作区；其中，代码编辑器中当前呈现的快照位于内容展示区，并且，切换操作区用于执行第一切换操作和第二切换操作。
在一些实施例中，切换操作区可以是以浏览器访问页面的前进、后退的呈现方式而展现，前进、后退的呈现方式可以是以按钮图标的形式呈现在切换操作区中。其中，第一切换操作是对应于前进按钮的触发而执行，第二切换操作是对应于后退按钮的触发而执行。
上述所有可选技术方案，可以采用任意结合形成本公开的可选实施例，在此不再一一赘述。
图4是根据一示意性实施例示出的一种页面呈现方法的应用场景流程图，参见图4所示，该页面呈现方法的应用场景应用于电子设备，下面以电子设备为开发机终端为例进行说明。该页面呈现方法应用场景主要包括以下步骤。
步骤401、在代码编辑器的扩展插件中，使用代码编辑器插件提供的webview功能，划分出URL输入区和页面展示区。
在一些实施例中，为了便于对页面浏览的需要，在划分出地址输入区域和页面展示区的同时还可以划分出前进后退按钮区。
步骤402、调用puppeteer访问URL输入区输入的页面地址，获取页面地址所指向的目标页面的DOM元素集合。
其中，DOM元素集合即为页面内容数据。
在一些实施例中，也可以将puppeteer替换成node服务，但是node服务不具备操作DOM元素的能力，无法做到交互。
步骤403、采用canvas绘制DOM元素集合生成页面快照。
步骤404、对页面快照进行渲染。
步骤405、在页面展示区呈现渲染后的页面快照。
步骤406、监听页面展示区中的鼠标移动、点击、键盘输入等事件。
步骤407、计算鼠标当前所在位置P，并确定页面快照的位置P处对应的DOM元素。
其中，步骤407可以利用puppeteer的CDPSession对象的send方法，发送一个称为DOM.getNodeForLocation的事件可以找到对应的DOM元素。
步骤408、对DOM元素执行相应的点击、悬停等操作。
步骤409、响应于对DOM元素的操作，调用puppeteer获取更新DOM元素集合。
步骤410、采用canvas绘制更新DOM元素集合生成更新页面快照。
步骤411、在页面展示区呈现渲染后的更新页面快照。
步骤412、在访问需要登录的页面的情况下，利用puppeteer获取页面的登录态cookie，并将登录态cookie记录于代码编辑器中，并在再次访问该页面时利用所记录的cookie登录该页面，实现免登录的效果。
在一些实施例中，可以使用iframe(框架)替换puppeteer，但是使用iframe会被一些代码编辑器插件提供的webview功能限制，且做不到登录态的存储。
本公开实施例的页面呈现方法，提高了前端开发效率，在代码编辑区实现结果展示避免了频繁切换浏览器和代码编辑器的重复性工作。
上述所有可选技术方案，可以采用任意结合形成本公开的可选实施例，在此不再一一赘述。
图5是根据一示意性实施例示出的一种页面呈现装置的第一逻辑结构框图，参见图5所示，该装置包括地址获取模块501、页面内容获取模块502、快照模块503和页面呈现模块504。
地址获取模块501，被配置为执行通过代码编辑器调用无界面浏览器访问页面地址，获取目标页面的第一页面内容数据。
页面内容获取模块502，被配置为执行基于页面地址，获取目标页面的页面元素集合。
快照模块503，被配置为执行基于第一页面内容数据，生成目标页面的第一页面快照。
页面呈现模块504，被配置为执行在代码编辑器中呈现第一页面快照。
本公开实施例的页面呈现装置，通过代码编辑器调用无界面浏览器访问目标页面的页面地址而获取目标页面的页面内容数据，基于所获取的页面内容数据生成页面快照并呈现在代码编辑器中，实现了在代码编辑器界面中显示目标页面的目的，在显示有代码界面的代码编辑器的当前窗口即可呈现所开发的页面或者网络上的其他页面，有助于提升前端开发的效率，有助于提升前端开发过程中的开发体验。
在一些实施例中，快照模块503进一步被配置为执行利用被代码编辑器调用的渲染工具，生成包含页面元素集合的页面快照。
图6是根据一示意性实施例示出的一种页面呈现装置的第二逻辑结构框图，参见图6所示，该装置除包括图5所示的逻辑结构中的地址获取模块501、页面内容获取模块502、快照模块503和页面呈现模块504以外，还进一步包括位置确定模块601、页面元素确定模块602和页面操作模块603。
位置确定模块601，被配置为执行响应于对第一页面快照的页面操作，确定页面操作在第一页面快照的操作位置。
页面元素确定模块602，被配置为执行确定目标页面中对应于操作位置的目标页面元素，其中，目标页面元素用于表征页面操作的操作对象。
页面操作模块603，被配置为执行通过无界面浏览器，对目标页面的目标页面元素执行页面操作。
在一些实施例中，基于图5和图6所示的装置组成，页面内容获取模块502进一步被配置为执行获取目标页面在页面操作生效后的第二页面内容数据；
快照模块503进一步被配置为执行基于第二页面内容数据，生成目标页面的第二页面快照；
页面呈现模块504进一步被配置为执行将代码编辑器中呈现的第一页面快照，替换为第二页面快照。
在此基础上，本公开实施例的页面呈现装置还可进一步包括：
页面切换模块，被配置为执行响应于对代码编辑器的第一切换操作，将代码编辑器中当前呈现的快照从第二页面快照切换为第一页面快照。
在一些实施例中，页面切换模块进一步被配置为执行响应于对代码编辑器的第二切换操作，将代码编辑器中当前呈现的快照从第一页面快照切换为第二页面快照。
图7是根据一示意性实施例示出的一种页面呈现装置的第三逻辑结构框图，参见图7所示，该装置除包括上述图5所示的各逻辑结构中的各个模块以外，还进一步包括：
凭证获取模块701，被配置为执行获取访问目标页面所使用的访问凭证；
凭证存储模块702，被配置为执行存储访问凭证，该访问凭证用于无界面浏览器对目标页面的免登录访问。
在一些实施例中，快照模块503进一步被配置为执行通过代码编辑器调用快照插件对第一页面内容数据执行快照操作，生成第一页面快照。
在一些实施例中，本公开的页面呈现装置还可进一步包括：
视窗呈现模块，被配置为执行响应于页面展示功能的启动操作，在代码编辑器的代码编辑界面中呈现用于实现页面展示功能的插件视窗；
在此基础上，地址获取模块501进一步被配置为执行响应于在插件视窗内的地址输入操作，获取页面地址；
页面呈现模块504进一步被配置为执行将第一页面快照呈现在插件视窗中。
上述所有可选技术方案，可以采用任意结合形成本公开的可选实施例，在此不再一一赘述。
关于上述实施例中的页面呈现装置，其中各个单元执行操作的具体方式已经在有关该页面呈现方法的实施例中进行了详细描述，此处将不作详细阐述说明。
需要说明的是：上述实施例仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。
图8是本公开实施例提供的一种电子设备的结构示意图。在一些实施例中，该电子设备为作为开发机的终端或者服务器。该电子设备800可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(Central Processing Units，CPU)801和一个或一个以上的存储器802，其中，该存储器802中存储有至少一条程序代码，该至少一条程序代码由该处理器1101加载并执行以实现上述各个实施例提供的页面呈现方法。当然，该电子设备1100还可以具有有线或无线网络接口、键盘以及输入输出接口等部件，以便进行输入输出，该电子设备800还可以包括其他用于实现设备功能的部件，在此不做赘述。
在示例性实施例中，还提供了一种包括至少一条指令的计算机可读存储介质，例如包括至少一条指令的存储器，上述至少一条指令可由计算机设备中的处理器执行以完成上述实施例中的页面呈现方法。
可选地，上述计算机可读存储介质可以是非临时性计算机可读存储介质，例如，该非临时性计算机可读存储介质可以包括ROM(Read-Only Memory，只读存储器)、RAM(Random-Access Memory，随机存取存储器)、CD-ROM(Compact Disc Read-Only Memory，只读光盘)、磁带、软盘和光数据存储设备等。
在示例性实施例中，还提供了一种计算机程序产品，包括一条或多条指令，该一条或多条指令可以由计算机设备的处理器执行，以完成上述各个实施例提供的页面呈现方法。
本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。
应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。
Claims (10)
1.一种页面呈现方法，其特征在于，包括：
响应于对启用了页面展示功能的代码编辑器的地址输入操作，获取目标页面的页面地址；
通过所述代码编辑器调用无界面浏览器访问所述页面地址，获取所述目标页面的第一页面内容数据；
基于所述第一页面内容数据，生成所述目标页面的第一页面快照；
在所述代码编辑器中呈现所述第一页面快照。
2.根据权利要求1所述的页面呈现方法，其特征在于，所述在所述代码编辑器中呈现所述第一页面快照之后，还包括：
响应于对所述第一页面快照的页面操作，确定所述页面操作在所述第一页面快照的操作位置；
确定所述目标页面中对应于所述操作位置的目标页面元素，其中，所述目标页面元素用于表征所述页面操作的操作对象；
通过所述无界面浏览器，对所述目标页面的所述目标页面元素执行所述页面操作。
3.根据权利要求2所述的页面呈现方法，其特征在于，所述通过所述无界面浏览器，对所述目标页面的所述目标页面元素执行所述页面操作之后，还包括：
获取所述目标页面在所述页面操作生效后的第二页面内容数据；
基于所述第二页面内容数据，生成所述目标页面的第二页面快照；
将所述代码编辑器中呈现的所述第一页面快照，替换为所述第二页面快照。
4.根据权利要求1至3任一项所述的页面呈现方法，其特征在于，所述方法还包括：
获取访问所述目标页面所使用的访问凭证；
存储所述访问凭证，所述访问凭证用于所述无界面浏览器对所述目标页面的免登录访问。
5.根据权利要求1所述的页面呈现方法，其特征在于，所述基于所述第一页面内容数据，生成所述目标页面的第一页面快照，包括：
通过所述代码编辑器调用快照插件对所述第一页面内容数据执行快照操作，生成所述第一页面快照。
6.根据权利要求1所述的页面呈现方法，其特征在于，所述方法还包括：
响应于所述页面展示功能的启动操作，在所述代码编辑器的代码编辑界面中呈现用于实现所述页面展示功能的插件视窗；
所述响应于对启用了页面展示功能的代码编辑器的地址输入操作，获取目标页面的页面地址，包括：响应于在所述插件视窗内的所述地址输入操作，获取所述页面地址；
所述在所述代码编辑器中呈现所述第一页面快照，包括：将所述第一页面快照呈现在所述插件视窗中。
7.一种页面呈现装置，其特征在于，包括：
地址获取模块，被配置为执行响应于对启用了页面展示功能的代码编辑器的地址输入操作，获取目标页面的页面地址；
页面内容获取模块，被配置为执行通过所述代码编辑器调用无界面浏览器访问所述页面地址，获取所述目标页面的第一页面内容数据；
快照模块，被配置为执行基于所述第一页面内容数据，生成所述目标页面的第一页面快照；
页面呈现模块，被配置为执行在所述代码编辑器中呈现所述第一页面快照。
8.一种电子设备，其特征在于，包括：
处理器；
用于存储所述处理器的可执行指令的存储器；
其中，所述处理器被配置为执行所述可执行指令，以实现如权利要求1至6任一项所述的页面呈现方法。
9.一种计算机可读存储介质，其特征在于，当所述计算机可读存储介质中的至少一条指令被电子设备的处理器执行时，使得所述电子设备能够实现如权利要求1至6任一项所述的页面呈现方法。
10.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至6任一项所述的页面呈现方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210498194.7A CN114924723A (zh) | 2022-05-09 | 2022-05-09 | 页面呈现方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210498194.7A CN114924723A (zh) | 2022-05-09 | 2022-05-09 | 页面呈现方法、装置、电子设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114924723A true CN114924723A (zh) | 2022-08-19 |
Family
ID=82808787
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210498194.7A Pending CN114924723A (zh) | 2022-05-09 | 2022-05-09 | 页面呈现方法、装置、电子设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114924723A (zh) |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105740304A (zh) * | 2014-12-12 | 2016-07-06 | 阿里巴巴集团控股有限公司 | 可视化页面编辑方法、装置及a/b测试方法、装置 |
| CN109299001A (zh) * | 2018-08-22 | 2019-02-01 | 深圳点猫科技有限公司 | 一种编程平台下的表单的自动化测试方法及电子设备 |
| CN109710224A (zh) * | 2019-01-17 | 2019-05-03 | 宜创(北京)科技有限公司 | 页面处理方法、装置、设备及存储介质 |
| CN112068824A (zh) * | 2020-09-16 | 2020-12-11 | 杭州海康威视数字技术股份有限公司 | 一种网页开发预览方法、装置及电子设备 |
| CN113032707A (zh) * | 2021-03-25 | 2021-06-25 | 成都新希望金融信息有限公司 | 生成网页截图的方法、装置及电子设备 |
| CN113050936A (zh) * | 2021-04-20 | 2021-06-29 | 中国工商银行股份有限公司 | 基于集成开发环境的前端数据处理方法及装置 |
| CN113050942A (zh) * | 2021-03-31 | 2021-06-29 | 北京字节跳动网络技术有限公司 | 页面生成方法、装置、可读介质及电子设备 |
| US11119896B1 (en) * | 2020-04-30 | 2021-09-14 | Microsoft Technology Licensing, Llc | Browser based visual debugging |
-
2022
- 2022-05-09 CN CN202210498194.7A patent/CN114924723A/zh active Pending
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105740304A (zh) * | 2014-12-12 | 2016-07-06 | 阿里巴巴集团控股有限公司 | 可视化页面编辑方法、装置及a/b测试方法、装置 |
| CN109299001A (zh) * | 2018-08-22 | 2019-02-01 | 深圳点猫科技有限公司 | 一种编程平台下的表单的自动化测试方法及电子设备 |
| CN109710224A (zh) * | 2019-01-17 | 2019-05-03 | 宜创(北京)科技有限公司 | 页面处理方法、装置、设备及存储介质 |
| US11119896B1 (en) * | 2020-04-30 | 2021-09-14 | Microsoft Technology Licensing, Llc | Browser based visual debugging |
| CN112068824A (zh) * | 2020-09-16 | 2020-12-11 | 杭州海康威视数字技术股份有限公司 | 一种网页开发预览方法、装置及电子设备 |
| CN113032707A (zh) * | 2021-03-25 | 2021-06-25 | 成都新希望金融信息有限公司 | 生成网页截图的方法、装置及电子设备 |
| CN113050942A (zh) * | 2021-03-31 | 2021-06-29 | 北京字节跳动网络技术有限公司 | 页面生成方法、装置、可读介质及电子设备 |
| CN113050936A (zh) * | 2021-04-20 | 2021-06-29 | 中国工商银行股份有限公司 | 基于集成开发环境的前端数据处理方法及装置 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11755346B2 (en) | Method and apparatus for user interface modification | |
| CN109739717B (zh) | 一种页面数据采集的方法及装置、服务器 | |
| US9456019B2 (en) | Web page load time prediction and simulation | |
| WO2018053620A1 (en) | Digital communications platform for webpage overlay | |
| JP6514244B2 (ja) | 差異検出装置及びプログラム | |
| US20110167332A1 (en) | System and Method for Generating Web Pages | |
| CN108415804B (zh) | 获取信息的方法、终端设备及计算机可读存储介质 | |
| CN111008051B (zh) | 基于多维规则的动态布局 | |
| CN110727429B (zh) | 一种前端页面的生成方法、装置及设备 | |
| JP2017504129A (ja) | ウェブブラウザにおいて表わされる状態表現の構築 | |
| CN109284488B (zh) | 基于本地存储修改前端表格列数据的方法、装置及介质 | |
| CN110598135A (zh) | 网络请求处理方法、装置、计算机可读介质及电子设备 | |
| CN113704590A (zh) | 网页数据获取方法、装置、电子设备及存储介质 | |
| CN111783019A (zh) | 浏览器子页面创建方法、装置、计算机设备和存储介质 | |
| US10560524B2 (en) | System and method providing local development of executable content pages normally run on a server within a user session | |
| CN111679976A (zh) | 一种页面对象的查找方法及装置 | |
| JP6723976B2 (ja) | テスト実行装置及びプログラム | |
| CN112817817A (zh) | 埋点信息查询方法、装置、计算机设备和存储介质 | |
| CN111782999A (zh) | 一种页面展示方法、装置、设备及系统 | |
| CN114924723A (zh) | 页面呈现方法、装置、电子设备及存储介质 | |
| CN114185795A (zh) | 埋点配置方法、装置、电子设备及存储介质 | |
| KR20200079024A (ko) | 웹 데이터 수집 장치 및 방법 | |
| US11960560B1 (en) | Methods for analyzing recurring accessibility issues with dynamic web site behavior and devices thereof | |
| CN114238837A (zh) | 网页访问状态确定方法、装置、存储介质及电子设备 | |
| CN114238816A (zh) | 一种浏览器页面截取方法及装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |