Browser-side web interface analysis method and apparatus

Abstract

The present application relates to a browser-side web interface analysis method and apparatus. The method comprises: when a user performs a predetermined operation in a browser interface, acquiring a keyword on the basis of the predetermined operation; determining a document object model node corresponding to the keyword; acquiring interface data at a predetermined location by means of the document object model node; performing display processing on the interface data; and displaying the interface data in a user interface for analysis by the user. The browser-side web interface analysis method and apparatus involved in the present application can provide a convenient and efficient way to determine the association between a document object model node and information that is returned by an interface, thereby meeting the requirements of developers in a web development process.

Description

Web page interface analysis method and device for browser side Technical Field

[0001] The present disclosure relates to the field of computer information processing, and in particular to a method and device for analyzing a web page interface on a browser side. Background Art

[0002] In modern web development, a front-end and back-end separated architecture has become mainstream. Web pages exchange data with back-end servers through interfaces, and developers often need to understand which interfaces return specific data for debugging and development purposes. Currently, several existing solutions exist for analyzing web interfaces, such as using browser developer tools and proxy tools for data capture and analysis. However, these solutions have limitations and inconveniences, such as complex workflows, the need for additional tools, and dependencies.

[0003] Therefore, a new method and device for analyzing web page interfaces on a browser side are needed.

[0004] The above information disclosed in this Background section is only for enhancement of understanding of the background of the application and therefore it may contain information that does not form the prior art that is already known to a person of ordinary skill in the art.

[0005] Summary of the Invention

[0006] In view of this, the present application provides a web page interface analysis method and device for the browser side, which can provide a convenient and fast way to determine the association between the document object model nodes and the information returned by the interface to meet the needs of developers in the web development process.

[0007] Other features and advantages of the present application will become apparent from the following detailed description, or may be learned in part by practice of the present application.

[0008] According to one aspect of the present application, a web page interface analysis method for a browser is proposed, the method comprising: when a user performs a predetermined operation in a browser interface, obtaining a keyword based on the predetermined operation; determining a document object model node corresponding to the keyword; obtaining interface data at a predetermined position through the document object model node; displaying and processing the interface data; and displaying the interface data in a user interface for user analysis.

[0009] In an exemplary embodiment of the present application, it further includes: installing a preset plug-in into the browser; monitoring the interface request of the browser based on the plug-in; obtaining the return data of the interface request and storing it in a predetermined location.

[0010] In an exemplary embodiment of the present application, obtaining the return data of the interface request and storing it in a predetermined location includes: obtaining the return data; storing the return data in the predetermined location; and parsing the return data at the predetermined location.

[0011] In an exemplary embodiment of the present application, obtaining the return data includes: obtaining the return data by changing the prototype chain; and / or obtaining the return data by using a Fetch API.

[0012] In an exemplary embodiment of the present application, storing the returned data in the predetermined location includes: extracting an association relationship between the returned data and a document object model node; and storing the returned data in the predetermined location based on the association relationship.

[0013] In an exemplary embodiment of the present application, extracting the association relationship between the return data and the document object model node includes: converting the JSON object in the return data into a string; traversing the return data through a regular expression to extract the association relationship between the return data and the document object model node.

[0014] In an exemplary embodiment of the present application, when a user performs a predetermined operation in a browser interface, a keyword is obtained based on the predetermined operation, including: monitoring the browser based on a native API interface of a preset plug-in; when a user performs a predetermined operation in a browser interface, a keyword is obtained based on the predetermined operation.

[0015] In an exemplary embodiment of the present application, interface data is obtained at a predetermined position through the document object model node, including: extracting the parent node of the document object model node; obtaining data at the predetermined position by downward value based on the parent node; and extracting text content containing the document object model node as the interface data.

[0016] In an exemplary embodiment of the present application, display processing is performed on the interface data, including: formatting the interface data; and highlighting the matched keywords.

[0017] According to one aspect of the present application, a web page interface analysis device for a browser is proposed, which includes: a keyword module, which is used to obtain keywords based on a predetermined operation when a user performs a predetermined operation in the browser interface; a node module, which is used to determine the document object model node corresponding to the keyword; a data module, which is used to obtain interface data at a predetermined position through the document object model node; a processing module, which is used to display and process the interface data; and a display module, which is used to display the interface data in a user interface for user analysis.

[0018] According to one aspect of the present application, an electronic device is proposed, which includes: one or more processors; a storage device for storing one or more programs; when the one or more programs are executed by the one or more processors, the one or more processors implement the method as described above.

[0019] According to one aspect of the present application, a computer-readable medium is provided, on which a computer program is stored. When the program is executed by a processor, the method described above is implemented.

[0020] According to the web page interface analysis method and device for the browser side of the present application, when the user performs a predetermined operation in the browser interface, a keyword is obtained based on the predetermined operation; the document object model node corresponding to the keyword is determined; interface data is obtained at a predetermined position through the document object model node; the interface data is displayed and processed; and the interface data is displayed in the user interface for user analysis. This method can provide a convenient and quick way to determine the association between the document object model node and the information returned by the interface, so as to meet the needs of developers in the Web development process.

[0021] It should be understood that the foregoing general description and the following detailed description are merely illustrative and are not restrictive of the present application. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] The above and other objects, features, and advantages of the present application will become more apparent by describing in detail exemplary embodiments thereof with reference to the accompanying drawings. The drawings described below are merely some embodiments of the present application, and it is apparent to those skilled in the art that other drawings can be derived from these drawings without inventive effort.

[0023] FIG1 is a flow chart showing a method for analyzing a web page interface on a browser side according to an exemplary embodiment.

[0024] FIG2 is a schematic diagram showing a web page interface analysis method for a browser according to an exemplary embodiment.

[0025] FIG3 is a schematic diagram showing a method for analyzing a web page interface on a browser side according to an exemplary embodiment.

[0026] FIG4 is a schematic diagram showing a method for analyzing a web page interface on a browser side according to an exemplary embodiment.

[0027] FIG5 is a flowchart showing a method for analyzing a web page interface on a browser side according to another exemplary embodiment.

[0028] FIG6 is a schematic diagram showing a method for analyzing a web page interface on a browser side according to an exemplary embodiment.

[0029] FIG7 is a block diagram showing a web page interface analysis device for a browser according to an exemplary embodiment.

[0030] Fig. 8 is a block diagram of an electronic device according to an exemplary embodiment.

[0031] Fig. 9 is a block diagram showing a computer-readable medium according to an exemplary embodiment. DETAILED DESCRIPTION

[0032] Example embodiments will now be described more fully with reference to the accompanying drawings. However, example embodiments can be embodied in many forms and should not be construed as limited to the embodiments set forth herein; rather, these embodiments are provided so that this disclosure will be thorough and complete and will fully convey the concepts of the example embodiments to those skilled in the art. Like reference numerals in the drawings represent like or similar parts, and thus repetitive description thereof will be omitted.

[0033] In addition, described feature, structure or characteristic can be combined in one or more embodiments in any suitable manner.In the following description, many specific details are provided so as to provide a full understanding of the embodiments of the present application. However, it will be appreciated by those skilled in the art that the technical scheme of the present application can be put into practice without one or more of the specific details, or other methods, components, devices, steps etc. can be adopted. In other cases, known methods, devices, implementations or operations are not shown or described in detail to avoid blurring the various aspects of the application.

[0034] The block diagrams shown in the accompanying drawings are merely functional entities and do not necessarily correspond to physically separate entities. That is, these functional entities may be implemented in software, in one or more hardware modules or integrated circuits, or in different networks and / or processor devices and / or microcontroller devices.

[0035] The flowcharts shown in the accompanying drawings are for illustrative purposes only and do not necessarily include all contents and operations / steps, nor must they be executed in the order described. For example, some operations / steps may be decomposed, while others may be combined or partially combined. Therefore, the actual execution order may vary depending on the actual situation.

[0036] It should be understood that although the terms first, second, third, etc. may be used herein to describe various components, these components should not be limited by these terms. These terms are used to distinguish one component from another. Thus, the first component discussed below could be referred to as the second component without departing from the teachings of the present invention. As used herein, the term "and / or" includes any one and all combinations of one or more of the associated listed items.

[0037] Those skilled in the art will understand that the drawings are merely schematic diagrams of example embodiments, and the modules or processes in the drawings are not necessarily necessary for implementing the present application, and therefore cannot be used to limit the scope of protection of the present application.

[0038] The technical abbreviations involved in this application are explained as follows:

[0039] The Document Object Model (DOM) is a data representation of the objects that make up the structure and content of web documents. It is a programming interface for web documents. It represents web pages so that programs can modify their structure, style, and content. The DOM represents documents as nodes and objects; this allows programming languages ​​to interact with web pages.

[0040] A web page is a document that can be displayed in a browser window or as HTML source code. In both cases, it is the same document, but the Document Object Model (DOM) representation allows it to be manipulated. As an object-oriented representation of a web page, it can be modified using scripting languages ​​such as JavaScript.

[0041] After research, the applicant in this case found that there are some relevant technologies and tools available to achieve web interface analysis.

[0042] Browser Developer Tools: Mainstream browsers like Google Chrome and Mozilla Firefox offer powerful developer tools, including the Network Panel. This panel allows developers to view HTTP communications between the browser and the server, including API requests and response data. However, API analysis using developer tools can require multiple steps and filtering, making it less intuitive and efficient.

[0043] Proxy tools: Proxy tools such as Charles and Fiddler can intercept network communications between browsers and servers and provide detailed request and response information. Developers can configure proxies to capture API requests and response data. However, using proxy tools may require separate installation and configuration, adding additional complexity and dependencies.

[0044] Custom scripts and debugging tools: Developers can write custom scripts or use debugging tools to analyze interfaces. By inserting debugging statements in the code or adding specific logging output, developers can obtain data returned by the interface. However, this method requires code modification and debugging, which can be cumbersome for complex web pages and interfaces.

[0045] In response to the limitations of the aforementioned prior art, this application proposes a web page interface analysis method for a browser. By monitoring user click events and analyzing DOM nodes, this method provides a simple and efficient way to determine the association between DOM nodes and the information returned by the interface. This device can be directly integrated into the browser, simplifying the operation process and improving analysis efficiency. Users can obtain the data returned by the interface simply by clicking on a node on the page, without the need for additional installation and configuration. This device provides developers with a convenient and reliable web page interface analysis tool.

[0046] The content of this application is described in detail below with the help of specific embodiments.

[0047] Fig. 1 is a flow chart showing a method for analyzing a webpage interface on a browser side according to an exemplary embodiment. The method 10 for analyzing a webpage interface on a browser side includes at least steps S102 to S108.

[0048] As shown in Figure 1, in S102, when a user performs a predetermined operation in a browser interface, a keyword is obtained based on the predetermined operation. The browser can be monitored based on a native API interface of a preset plug-in; when a user performs a predetermined operation in a browser interface, a keyword is obtained based on the predetermined operation.

[0049] In specific application scenarios, developers can register a new plug-in through the browser's preset plug-in management module and define the plug-in's listening logic for specific events. The plug-in includes rules for listening for right-click events. The system communicates with the browser through the native API interface and requests permission to listen for browser events.

[0050] Start monitoring various browser events, including clicks and keyboard actions. When a user right-clicks the browser interface, the event capture module detects the event. Keywords are extracted from the right-click event. Possible keywords include the clicked element and page coordinates. The extracted keywords are passed to the preset plug-in management module via an action trigger.

[0051] In S104, the document object model node corresponding to the keyword is determined. Generally speaking, a right-click operation is associated with an element or area in the page. The DOM structure of the page can be viewed through the developer tools provided by the browser. By analyzing the DOM structure, the node containing the keyword information is found.

[0052] In S106, interface data is obtained at a predetermined location through the document object model node. The parent node of the document object model node may be extracted; data at the predetermined location is obtained by downward deriving values ​​from the parent node; and text content containing the document object model node is extracted as the interface data.

[0053] In one embodiment, the text content of the DOM node can be extracted, the parent node of the current DOM node can be obtained, and then the value is taken downward to obtain all the data of the current node. A text comparison algorithm is used to determine whether the text content of the DOM node contains the data returned by the interface.

[0054] Assume that the Document Object Model (DOM) node corresponding to the keyword is a link ( element nodes), can be further extracted The parent node of the element node obtains the data at a predetermined position and uses the text content of the document object model node as the interface data.

[0055] In S108, the interface data is displayed. For example, the interface data may be formatted; another example is highlighting the matched keywords. By formatting the interface data and highlighting the keywords, the interface data can be made more readable and user-friendly. In actual applications, developers can format and display data more flexibly according to specific needs.

[0056] In S110 , the interface data is displayed in a user interface for user analysis.

[0057] According to the web page interface analysis method for the browser side of the present application, when the user performs a predetermined operation in the browser interface, a keyword is obtained based on the predetermined operation; the document object model node corresponding to the keyword is determined; interface data is obtained at a predetermined position through the document object model node; the interface data is displayed and processed; and the interface data is displayed in the user interface for user analysis. This method can provide a convenient and quick way to determine the association between the document object model node and the information returned by the interface, so as to meet the needs of developers in the Web development process.

[0058] It should be clearly understood that this application describes how to form and use specific examples, but the principles of this application are not limited to any details of these examples. On the contrary, based on the teaching of the content disclosed in this application, these principles can be applied to many other embodiments.

[0059] As shown in Figure 2, in a specific scenario, the browser listens for requests from users who right-click on matching data sources. Based on this request, as shown in Figure 3, the browser retrieves the keyword and determines the DOM node corresponding to the keyword. The node information is then compared with the data stored in a preset location to obtain matching data. Finally, the matching data is processed, and the keyword is highlighted and displayed in the user interface.

[0060] Users can view and analyze interface-related data through the plug-in's built-in interface.

[0061] This application's webpage interface analysis method for browsers aims to address the technical problem of quickly and accurately determining the association between DOM nodes on a webpage and information returned by an interface during web development. Using this method, developers can easily analyze webpage interfaces and quickly obtain interface return data associated with specific DOM nodes.

[0062] This application monitors user click events and analyzes DOM nodes, simulates interface calls, obtains the data returned by the interface, and feeds the data back to the user. Through the method of this application, developers can more easily analyze web page interfaces, speed up the development and debugging process, and improve development efficiency.

[0063] Fig. 5 is a flow chart showing a method for analyzing a webpage interface on a browser side according to another exemplary embodiment. The process 50 shown in Fig. 5 is a supplementary description of the process shown in Fig. 1 .

[0064] As shown in Figure 5, in S502, the preset plug-in is installed in the browser. As shown in Figure 6, for example, you can select XX browser, go to Settings -> More Tools -> Extensions -> Click Developer Mode -> Load the unzipped extension to install the plug-in.

[0065] In the method of the present application, a plug-in installation package is provided, which users can download and install offline. After installation, the plug-in runs in the browser's sandbox environment, ensuring that it does not affect other browser functions or user security. The plug-in operates and communicates through the API provided by the browser, such as manipulating the DOM, capturing network requests, reading and writing local storage, etc. The browser UI is integrated, and the plug-in interface can be integrated into the browser's toolbar, right-click menu, and other parts, providing convenient user access and operation.

[0066] In S504, the browser's interface request is monitored based on the plug-in, for example, by capturing API requests and responses, parsing and storing data returned by the API, and analyzing the association between the API data and the DOM nodes.

[0067] In S506, the return data of the interface request is obtained and stored in a predetermined location. For example, the return data may be obtained; the return data may be stored in the predetermined location; and the return data may be parsed at the predetermined location.

[0068] In a specific embodiment, the plugin's native API can be used to monitor the right-click selection of keywords, which can be passed to the plugin to capture and analyze DOM nodes in real time, marking and classifying DOM elements. Afterwards, the API data can be mapped to the relevant DOM node text.

[0069] In one embodiment, the returned data may be obtained by changing the prototype chain or by using a Fetch API. More specifically, the association between the returned data and the document object model node may be extracted, and the returned data may be stored in the predetermined location based on the association.

[0070] The JSON object in the returned data may be converted into a string; and the returned data may be traversed using a regular expression to extract the association relationship between the returned data and the document object model node.

[0071] More specifically, all requests can be intercepted by changing the prototype chain XMLHttpRequest and Fetch API and put into the allData array.

[0072] After that, use JavaScript’s JSON.stringfy() function to convert the JSON object into a string.

[0073] Then, the regular expression new RegExp(request.data,'g') is used to traverse the data item.responseBody.match(regex) that matches allData. If the data is matched, it proves that the return value is included in this set of returned data.

[0074] Through the above complete technical solution, this application provides a convenient and efficient plug-in for implementing web page interface analysis, enabling developers to quickly and accurately determine the association between DOM nodes and the information returned by the interface. This solution is based on the design and implementation of a browser plug-in, and users can use the device by installing and enabling the plug-in. The plug-in is integrated with the browser and provides an intuitive user interface for easy user operation and control.

[0075] In terms of technical implementation, the plug-in of this application uses an efficient DOM node analysis algorithm. This algorithm can accurately determine whether a node contains the information returned by the interface by analyzing the node's attributes, class name, or other identification information.

[0076] The plug-in of this application can accurately extract the required data. A variety of technologies such as regular expressions, XPath or JSON can be used to extract and parse data to adapt to different types of interface return data.

[0077] The browser plug-in proposed in this application provides an intuitive and easy-to-use user interface, allowing developers to easily operate and control the device. Users can easily install, enable, and use the plug-in to view the data returned by the interface and display the data in a user-friendly manner, such as data tables, charts, or log records, making the data easier to understand and analyze.

[0078] The technical solution of this application is based on the design and implementation of a browser plug-in, and is applicable to various mainstream browsers such as Chrome, Firefox, and Safari. Whether developing web applications, debugging front-end code, or performing interface testing, developers can benefit from this technical solution to improve work efficiency and development quality.

[0079] In summary, the technical solution of the present invention brings many beneficial effects, including improved development efficiency, precise data association, a user-friendly interface, and wide applicability. These effects enable developers to perform web interface analysis more quickly and accurately, speeding up the development and debugging process, and improving development efficiency and quality.

[0080] Those skilled in the art will appreciate that all or part of the steps implementing the above embodiments can be implemented as a computer program executed by a CPU. When executed by the CPU, the computer program performs the functions defined in the above method provided herein. The program can be stored in a computer-readable storage medium, such as a read-only memory, a magnetic disk, or an optical disk.

[0081] Furthermore, it should be noted that the aforementioned figures are merely illustrative of the processes included in the methods according to exemplary embodiments of the present application and are not intended to be limiting. It is readily understood that the processes illustrated in the aforementioned figures do not indicate or limit the temporal order of these processes. Furthermore, it is readily understood that these processes may be executed synchronously or asynchronously, for example, in multiple modules.

[0082] The following are device embodiments of the present application, which can be used to implement the method embodiments of the present application. For details not disclosed in the device embodiments of the present application, please refer to the method embodiments of the present application.

[0083] Figure 7 is a block diagram of a webpage interface analysis device for a browser, according to an exemplary embodiment. As shown in Figure 7, the webpage interface analysis device 70 for a browser includes a keyword module 702, a node module 704, a data module 706, a processing module 708, and a presentation module 710. The webpage interface analysis device 70 for a browser may also include a plug-in module 712.

[0084] The keyword module 702 is used to obtain keywords based on the predetermined operation when the user performs the predetermined operation in the browser interface; the keyword module 702 is also used to monitor the browser based on the native API interface of the preset plug-in; when the user performs the predetermined operation in the browser interface, the keyword is obtained based on the predetermined operation.

[0085] The node module 704 is used to determine the document object model node corresponding to the keyword;

[0086] The data module 706 is used to obtain interface data at a predetermined position through the document object model node; the data module 706 is also used to extract the parent node of the document object model node; obtain the data at the predetermined position by downward value based on the parent node; and extract the text content containing the document object model node as the interface data.

[0087] The processing module 708 is used to display the interface data; the processing module 708 is also used to format the interface data; and highlight the matched keywords.

[0088] The display module 710 is used to display the interface data in a user interface for user analysis.

[0089] The plug-in module 712 is configured to install a preset plug-in into the browser; monitor the browser's interface requests based on the plug-in; obtain the return data of the interface request and store it in a predetermined location. The plug-in module 712 is also configured to obtain the return data; store the return data in the predetermined location; and parse the return data at the predetermined location.

[0090] According to the web page interface analysis device for the browser side of the present application, when the user performs a predetermined operation in the browser interface, a keyword is obtained based on the predetermined operation; a document object model node corresponding to the keyword is determined; interface data is obtained at a predetermined position through the document object model node; the interface data is displayed and processed; and the interface data is displayed in the user interface for user analysis. This method can provide a convenient and quick way to determine the association between the document object model node and the information returned by the interface, so as to meet the needs of developers in the Web development process.

[0091] Fig. 8 is a block diagram of an electronic device according to an exemplary embodiment.

[0092] The electronic device 800 according to this embodiment of the present application is described below with reference to Figure 8. The electronic device 800 shown in Figure 8 is merely an example and should not limit the functions and scope of use of the embodiments of the present application.

[0093] As shown in FIG8 , electronic device 800 is implemented as a general-purpose computing device. Components of electronic device 800 may include, but are not limited to, at least one processing unit 810, at least one storage unit 820, a bus 830 connecting various system components (including storage unit 820 and processing unit 810), a display unit 840, and the like.

[0094] The storage unit stores program code, which can be executed by the processing unit 810, so that the processing unit 810 performs the steps described in this specification according to various exemplary embodiments of the present application. For example, the processing unit 810 can perform the steps shown in Figures 1 and 5.

[0095] The storage unit 820 may include a readable medium in the form of a volatile storage unit, such as a random access memory unit (RAM) 8201 and / or a cache memory unit 8202 , and may further include a read-only memory unit (ROM) 8203 .

[0096] The storage unit 820 may also include a program / utility 8204 having a set (at least one) of program modules 8205, such program modules 8205 including but not limited to: an operating system, one or more application programs, other program modules and program data, each of which or some combination may include an implementation of a network environment.

[0097] Bus 830 may represent one or more of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, a processing unit, or a local bus using any of a variety of bus architectures.

[0098] The electronic device 800 can also communicate with one or more external devices 800' (e.g., a keyboard, a pointing device, a Bluetooth device, etc.), devices that allow a user to interact with the electronic device 800, and / or any device that allows the electronic device 800 to communicate with one or more other computing devices (e.g., a router, a modem, etc.). This communication can occur via an input / output (I / O) interface 850. Furthermore, the electronic device 800 can communicate with one or more networks (e.g., a local area network (LAN), a wide area network (WAN), and / or a public network such as the Internet) via a network adapter 860. The network adapter 860 can communicate with other modules of the electronic device 800 via the bus 830. It should be understood that, although not shown in the figures, other hardware and / or software modules can be used in conjunction with the electronic device 800, including but not limited to microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0099] In general, the present disclosure provides a browser plug-in-based device for performing web page interface analysis. This disclosure aims to address the technical problem in web development, where developers need to quickly and accurately determine the association between DOM nodes on a web page and the information returned by the interface. Using the browser plug-in-based device provided by the present disclosure, developers can conveniently perform web page interface analysis and quickly obtain the interface return data associated with a specific DOM node. Traditional interface analysis methods have several limitations and inconveniences. Using browser developer tools or proxy tools may require multiple steps and filtering operations, which is not intuitive and efficient. Using custom scripts or debugging tools requires code modifications and debugging, which can be cumbersome for complex web pages and interfaces. The present disclosure aims to provide developers with a simple and efficient solution by developing a browser plug-in device to quickly and accurately determine the association between DOM nodes and the information returned by the interface. This device monitors user click events and analyzes DOM nodes, simulating interface calls and obtaining the data returned by the interface, which is then fed back to the user. By using the device provided by the present disclosure, developers can more easily perform web page interface analysis, accelerate the development and debugging process, and improve development efficiency. Therefore, the present invention aims to solve the technical problems in web page interface analysis and provide a convenient and quick way to determine the association between DOM nodes and the information returned by the interface to meet the needs of developers in the web development process. Specifically, the browser plug-in installation package can be downloaded by users and installed offline. Plug-in operating environment: sandbox environment, the plug-in runs in the sandbox environment of the browser to ensure that it will not affect other functions of the browser and the safety of users. Communication between plug-in and browser: the plug-in operates and communicates through the API provided by the browser, such as operating DOM, capturing network requests, reading and writing local storage, etc. User interface and interaction: browser UI integration, the plug-in interface can be integrated into the browser's toolbar, right-click menu, etc., to provide convenient user access and operation. DOM node analysis performs node association judgment, describing how to accurately judge whether the node contains the information returned by the interface by analyzing the node's attributes, class name or other identification information. Extract the text content of the DOM node, obtain the parent node of the current DOM node, and then get the value of all the data of the current node downward, and use the text comparison algorithm to judge whether the text content of the DOM node contains the data returned by the interface. During data extraction and parsing, detailed instructions are provided on how to extract the required data from the response returned by the API. This may involve techniques such as regular expressions, XPath, and JSON parsing. All requests are intercepted using the XMLHttpRequest and Fetch APIs, altering the prototype chain, and placed into the allData array. The JSON object is then converted to a string using JavaScript's JSON.stringify() function.Then, using the regular expression new RegExp(request.data,'g'), iterates over the data matching allData using item.responseBody.match(regex). If a match is found, it proves that the return value is included. During the data feedback and display process, interface data feedback: describes how to feed back the data returned by the interface to the user, which can be displayed through a pop-up window, plug-in interface, or other forms. After matching the data, the entire information of the current interface is displayed on the page, and the return value information is formatted, with the matched keywords highlighted. Data display and analysis: describes how to display interface data in a user-friendly manner, which can include data tables, charts, log records, etc. As previously described, the present disclosure provides a convenient and efficient device for implementing web interface analysis, enabling developers to quickly and accurately determine the association between DOM nodes and the information returned by the interface. This solution is based on the design and implementation of a browser plug-in, which users can use by installing and enabling the plug-in. The plug-in is integrated with the browser and provides an intuitive user interface for easy user operation and control. In terms of technical implementation, the device adopts an efficient DOM node analysis algorithm. By analyzing the node's attributes, class name, or other identification information, the algorithm can accurately determine whether the node contains the information returned by the interface. The device can accurately extract the required data. For data extraction and parsing, the device can employ a variety of techniques, such as regular expressions, XPath, or JSON parsing, to accommodate different types of interface return data. Regarding data feedback and display, the device provides flexible methods for feedback and display of interface data. Users can view the data returned by the interface through a pop-up window, plug-in interface, or other means. Key features of this technical solution include the design and implementation of a browser plug-in, an efficient DOM node analysis algorithm, the implementation of interface request simulation and data extraction, and the methods for data feedback and display. These key features collectively constitute the core technology of the present invention, enabling rapid and accurate determination of the association between DOM nodes and information returned by the interface. Therefore, the present disclosure improves development efficiency: by using the browser plug-in-based device provided by the present invention, developers can quickly and accurately determine the association between DOM nodes and information returned by the interface. This greatly simplifies the web interface analysis process, reducing developer workload and time costs. Developers no longer need to manually analyze and match DOM nodes with interface returned data; instead, the device automatically completes this process, accelerating development and debugging. Accurate data association: The technical solution of the present invention ensures accurate data association by analyzing DOM nodes. Developers can accurately determine which interface returns data associated with a specific DOM node, thereby better understanding the interaction logic and data flow of the web page, helping them troubleshoot and debug.User-friendly interface: The browser plug-in device of the present invention provides an intuitive and easy-to-use user interface, allowing developers to easily operate and control the device. Users can easily install, enable and use the plug-in, view the data returned by the interface, and display the data in a user-friendly manner, such as in the form of data tables, charts or log records, making the data easier to understand and analyze. Wide applicability: The technical solution of the present invention is based on the design and implementation of browser plug-ins and is applicable to various mainstream browsers, such as Chrome, Firefox and Safari. Whether developing web applications, debugging front-end code or performing interface testing, developers can benefit from this technical solution to improve work efficiency and development quality. In summary, the technical solution of the present invention brings many beneficial effects, including improved development efficiency, precise data association, user-friendly interface and wide applicability. These effects enable developers to perform web interface analysis more quickly and accurately, speed up the development and debugging process, and improve development efficiency and quality.

[0100] It should be pointed out that, alternatively, manual analysis and matching: developers can manually analyze and match DOM nodes with the information returned by the interface. This alternative requires developers to have in-depth understanding and proficient technical skills to manually identify and associate DOM nodes with interface data. However, this method is prone to errors and time-consuming, especially in the case of complex web page structures and large amounts of interface data, which can easily lead to incorrect association and analysis. Custom scripts or tools: Developers can write custom scripts or use other existing tools to implement web page interface analysis. They can use scripting languages ​​(such as JavaScript) to write code to traverse DOM nodes and match the data returned by the interface. This method requires developers to have programming skills and relevant script development experience. However, the writing and maintenance of custom scripts or tools may add additional workload and complexity. Use existing web debugging tools: Some browser developer tools provide web debugging functions that can view DOM nodes and network requests and perform related data analysis. Developers can use these tools to manually analyze and match DOM nodes with interface data. However, these tools generally provide relatively limited functions and may not be flexible and efficient enough.

[0101] Through the description of the above embodiments, it is easy for those skilled in the art to understand that the example embodiments described here can be implemented by software or by combining software with necessary hardware. Therefore, as shown in Figure 9, the technical solution according to the embodiment of the present application can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, etc.) or on a network, and includes several instructions to enable a computing device (which can be a personal computer, a server, or a network device, etc.) to execute the above method according to the embodiment of the present application.

[0102] The software product can be any combination of one or more readable media. The readable medium can be a readable signal medium or a readable storage medium. The readable storage medium can be, for example, but not limited to, a system, device or component of electricity, magnetism, light, electromagnetic, infrared, or semiconductor, or any combination thereof. More specific examples (non-exhaustive list) of readable storage media include: an electrical connection with one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof.

[0103] The computer-readable storage medium may include a data signal propagated in baseband or as part of a carrier wave, wherein the readable program code is carried. The data signal propagated may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. The readable storage medium may also be any readable medium other than a readable storage medium, which may send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, device, or component. The program code contained on the readable storage medium may be transmitted using any suitable medium, including but not limited to wireless, wired, optical cable, RF, etc., or any suitable combination thereof.

[0104] The program code for performing the operations of the present application can be written in any combination of one or more programming languages, including object-oriented programming languages ​​such as Java, C++, and the like, as well as conventional procedural programming languages ​​such as "C" or similar programming languages. The program code can be executed entirely on the user computing device, partially on the user device, as a stand-alone software package, partially on the user computing device and partially on a remote computing device, or entirely on a remote computing device or server. In the case of a remote computing device, the remote computing device can be connected to the user computing device through any type of network, including a local area network (LAN) or a wide area network (WAN), or can be connected to an external computing device (e.g., via the Internet using an Internet service provider).

[0105] The above-mentioned computer-readable medium carries one or more programs. When the above-mentioned one or more programs are executed by a device, the computer-readable medium realizes the following functions: when a user performs a predetermined operation in the browser interface, a keyword is obtained based on the predetermined operation; a document object model node corresponding to the keyword is determined; interface data is obtained at a predetermined position through the document object model node; the interface data is displayed and processed; and the interface data is displayed in the user interface for user analysis.

[0106] Those skilled in the art will appreciate that the modules described above can be distributed in the device according to the description of the embodiment, or can be modified accordingly to be used in one or more devices that are different from the embodiment. The modules of the above embodiment can be combined into one module or further divided into multiple submodules.

[0107] Through the description of the above embodiments, it is easy for those skilled in the art to understand that the example embodiments described herein can be implemented by software or by combining software with necessary hardware. Therefore, the technical solution according to the embodiments of the present application can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, etc.) or on a network, and includes several instructions to enable a computing device (which can be a personal computer, a server, a mobile terminal, or a network device, etc.) to execute the method according to the embodiments of the present application.

[0108] While the exemplary embodiments of the present application have been specifically illustrated and described above, it should be understood that the present application is not limited to the detailed structures, configurations, or implementations described herein; rather, the present application is intended to encompass various modifications and equivalent configurations within the spirit and scope of the appended claims.

Claims

1. A web page interface analysis method for a browser, characterized in that: include: When the user performs a predetermined operation in the browser interface, a keyword is obtained based on the predetermined operation; Determining a document object model node corresponding to the keyword; Acquiring interface data at a predetermined location through the document object model node; Performing display processing on the interface data; The interface data is displayed in a user interface for user analysis.

2. The method according to claim 1, wherein Also includes: Install the preset plug-in into your browser; Monitoring the browser's interface request based on the plug-in; Get the return data of the interface request and store it in a predetermined location.

3. The method according to claim 2, wherein Get the return data of the interface request and store it in a predetermined location, including: Get the returned data; storing the returned data in the predetermined location; The returned data is parsed at the predetermined location.

4. The method according to claim 3, wherein Get the returned data, including: Obtaining return data by changing the prototype chain; and / or Get the returned data through the Fetch API.

5. The method according to claim 3, wherein Storing the returned data in the predetermined location includes: Extracting the association relationship between the returned data and the document object model node; The returned data is stored in the predetermined location based on the association relationship.

6. The method according to claim 5, wherein Extracting the association relationship between the returned data and the document object model node includes: Convert the JSON object in the returned data into a string; The returned data is traversed by using a regular expression to extract the association relationship between the returned data and the document object model node.

7. The method according to claim 1, wherein When a user performs a predetermined operation in a browser interface, a keyword is obtained based on the predetermined operation, including: Monitor the browser based on the native API interface of the preset plug-in; When the user performs a predetermined operation in the browser interface, a keyword is obtained based on the predetermined operation.

8. The method according to claim 1, wherein Acquiring interface data at a predetermined location through the document object model node includes: Extracting the parent node of the document object model node; Acquire data at a predetermined position based on the parent node by taking values downward; The text content containing the document object model node is extracted as the interface data.

9. The method according to claim 1, wherein The interface data is displayed and processed, including: formatting the interface data; The matching keywords are highlighted.

10. A web page interface analysis device for a browser, characterized in that: include: A keyword module, configured to obtain keywords based on a predetermined operation when a user performs the predetermined operation in a browser interface; A node module, configured to determine a document object model node corresponding to the keyword; A data module, configured to obtain interface data at a predetermined location through the document object model node; A processing module, configured to display and process the interface data; The display module is used to display the interface data in the user interface for user analysis.

Images