HTML5 page debugging system, method and equipment and storage medium

Abstract

The invention relates to an HTML5 page debugging system, method and device and a storage medium. The system comprises a debugging subsystem and at least one debugging platform, and the debugging subsystem is used for creating a debugging container corresponding to the debugging platform according to a debugging template configured for the debugging platform in advance and address information of a to-be-debugged HTML5 page. The debugging subsystem is further used for obtaining information of the debugging container in response to an information obtaining request of the debugging container and sending the information to the debugging platform, the debugging platform is used for obtaining address information of the HTML5 page according to the information of the debugging container and opening the HTML5 page according to the address information of the HTML5 page, and the debugging platform is further used for debugging the HTML5 page according to the debugging template. By the adoption of the method and device, cross-platform HTML5 page debugging can be achieved.

Description

Technical Field

[0001] This application relates to the field of Internet technologies, and particularly to an HTML5 page debugging system, method, device, and storage medium. Background Art

[0002] With the continuous development of the Internet and the Internet of Things, the application scope of H5 (HyperText Markup Language 5) applications has become increasingly wide. However, H5 was originally limited to browsers and could only be accessed on computer browsers and mobile browsers. The wide application of WebView (web view) technology has changed this situation. Native systems on various platforms can embed H5 pages for access by integrating WebView browsers, enabling the same H5 page system to be applied on multiple platforms, which greatly improves the R & D efficiency and the product iteration rhythm.

[0003] For H5 applications embedded with WebView, when debugging H5, a dedicated debugging tool is generally used. For example, in the scenario where an H5 page is embedded in WeChat. It is necessary to download the WeChat developer tool on the computer, log in to the WeChat account, and access and debug the H5 page in the developer tool to directly call functions within WeChat, such as sharing and obtaining personal avatars. This simulates the real scenario of opening an H5 page within WeChat and eliminates the need for debugging within the mobile WeChat.

[0004] However, the dedicated debugging tool provided by WeChat is limited to H5 of WeChat official accounts and cannot support other platforms, resulting in low debugging efficiency. Summary of the Invention

[0005] Based on this, in view of the above technical problems, it is necessary to provide an HTML5 page debugging system, method, device, and storage medium that can achieve cross-platform debugging.

[0006] In a first aspect, this application provides an HTML5 page debugging system, which includes a debugging subsystem and a debugging platform. The debugging platform includes at least one. Among them,

[0007] The debugging subsystem is used to create a debugging container corresponding to the debugging platform according to a debugging template pre-configured for the debugging platform and the address information of the HTML5 page to be debugged;

[0008] The debugging subsystem is further used to obtain the information of the debugging container in response to an information acquisition request for the debugging container and send it to the debugging platform;

[0009] The debugging platform is used to obtain the address information of the HTML5 page according to the information of the debugging container and open the HTML5 page according to the address information of the HTML5 page;

[0010] The debugging platform is also used to debug the HTML5 page according to the debugging template.

[0011] In one embodiment, the debugging subsystem is used to respond to a creation request of a debugging container, establish a data record corresponding to the debugging container according to the debugging template and the address information of the HTML5 page to be debugged, and call a backend interface to create an independent memory and a file directory to create the debugging container.

[0012] In one embodiment, the debugging subsystem is also used to generate a QR code of the debugging container according to the debugging platform and the address information;

[0013] The information acquisition request of the debugging container includes a QR code scanning request, and the debugging subsystem is used to respond to the QR code scanning request to acquire the information of the debugging container.

[0014] In one embodiment, the debugging subsystem is used to generate a QR code of the debugging container according to the debugging platform, the page jump protocol of the debugging platform and the address information;

[0015] The debugging platform is used to parse the information of the debugging container to obtain the page jump protocol of the debugging platform;

[0016] The debugging platform is used to open the corresponding application in the debugging platform according to the page jump protocol of the debugging platform, and open the HTML5 page in the application according to the address information.

[0017] In one embodiment, the communication function between the HTML5 page and the corresponding application in the debugging platform is configured in the debugging template, and the debugging platform is used to obtain the communication function according to the debugging template and send the communication function to the debugging container through the HTML5 page;

[0018] The debugging container is used to send the communication function to the corresponding application in the debugging platform;

[0019] The corresponding application in the debugging platform is used to execute the communication function and return the execution result to the debugging container;

[0020] The debugging container is used to send the execution result to the HTML5 page to debug the HTML5 page.

[0021] In one embodiment, the debugging platform is also used to pre-inject communication code into the debugging container. When the application is opened, the built-in view control is opened to execute the communication code to establish a first communication link, and the first communication link is a communication link between the debugging container and the corresponding application in the debugging platform;

[0022] The debugging subsystem is also used to establish a second communication link, and the second communication link is a communication link between the debugging container and the HTML5 page;

[0023] The debugging container is used to send communication functions to the corresponding application in the debugging platform according to the first communication link;

[0024] The debugging container is also used to send the execution result to the HTML5 page according to the second communication link.

[0025] In one embodiment, the debugging subsystem is further used to extract the address information of the new HTML5 page in the update request in response to the update request of the debugging container;

[0026] The debugging subsystem is also used to update the configuration of the debugging container according to the address information of the new HTML5 page, so as to debug the new HTML5 page in the updated debugging container.

[0027] In a second aspect, the present application provides an HTML5 page debugging method, including:

[0028] Create a debugging container corresponding to the current debugging platform according to the debugging template pre-configured for the current debugging platform and the address information of the HTML5 page to be debugged;

[0029] In response to the information acquisition request of the debugging container, acquire the information of the debugging container;

[0030] Acquire the address information of the HTML5 page according to the information of the debugging container;

[0031] Open the HTML5 page in the debugging container according to the address information of the HTML5 page;

[0032] Debug the HTML5 page according to the debugging template.

[0033] In a third aspect, the present application provides a computer device, including a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the computer program, the steps of the HTML5 page debugging method provided in any embodiment of the first aspect of the present application are implemented.

[0034] In a fourth aspect, the present application provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the steps of the HTML5 page debugging method provided in any embodiment of the first aspect of the present application are implemented.

[0035] The above-mentioned HTML5 page debugging system, method, device, and storage medium operate according to the unified process of "creating a debugging container based on the debugging template and the HTML5 page address information" by pre-configuring a debugging template for the debugging platform. Regardless of the platform, developers no longer need to separately learn complex debugging preparation processes for different platforms. Instead, they only need to follow the unified steps of creating a debugging container to quickly enter the debugging process, achieving cross-platform debugging. This solves the problem in traditional technologies where different platforms have their own development specifications, environment configurations, and debugging tools. Each time developers switch the debugging platform, they have to re-familiarize themselves with different operation processes and tool usage methods, resulting in low debugging efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0036] Figure 1 is an internal structure diagram of the HTML5 page debugging system in some embodiments;

[0037] Figure 2 is a flowchart of the HTML5 page debugging method in some embodiments;

[0038] Figure 3 is a structural block diagram of the HTML5 page debugging device in some embodiments;

[0039] Figure 4 is an internal structure diagram of a computer device in some embodiments. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0040] In order to make the objectives, technical solutions, and advantages of the present application clearer, the present application will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0041] In a first aspect, the present application provides an HTML5 page debugging system, as Figure 1 shown, the system includes a debugging subsystem and a debugging platform, where the debugging platform includes at least one. Among them,

[0042] The debugging subsystem is used to create a debugging container corresponding to the debugging platform according to a debugging template pre-configured for the debugging platform and the address information of the HTML5 page to be debugged;

[0043] The debugging subsystem is further configured to obtain the information of the debugging container in response to an information acquisition request for the debugging container and send it to the debugging platform;

[0044] The debugging platform is used to obtain the address information of the HTML5 page according to the information of the debugging container and open the HTML5 page according to the address information of the HTML5 page;

[0045] The debugging platform is also used to debug HTML5 pages according to the debugging template.

[0046] Among them, the debugging subsystem is a comprehensive software system. Its main function is to provide support and environment for comprehensive debugging of applications on the debugging platform by creating debugging containers and other means. It usually includes a series of tools, modules and processes, and can detect, analyze and solve various problems of applications from the code level to the runtime. For example, it can monitor the running state of the application, provide error diagnosis information, support developers to perform code debugging, performance optimization and other operations, and ensure that the application can run stably and efficiently on different debugging platforms.

[0047] The debugging platform is a software platform or system that provides a specific running environment and debugging support for application programs. Specifically, it has a built-in WebView browser and can open H5 pages. The debugging platform can include WeChat, Alipay, and self-developed APPs (Applications), etc. It provides a specific running environment and interfaces for applications. Developers can debug and test applications on this platform to ensure the compatibility and functionality of the applications on this platform and meet the platform specifications and user requirements.

[0048] An HTML5 page refers to a web page built based on the HTML5 technical standard, with features such as rich multimedia support, better semantic tags, and offline storage, and can run on multiple devices and platforms.

[0049] The debugging of HTML5 pages refers to the process of inspecting, analyzing, and correcting web pages built based on HTML5 technology to ensure that they can be normally displayed, run smoothly, and achieve the expected functions on different devices, browsers, and platforms.

[0050] The address information of an HTML5 page, that is, the H5 link, is a uniform resource locator pointing to the storage location of the HTML5 page on the network. Through this link, the corresponding HTML5 page can be accessed and loaded.

[0051] The debugging platform refers to the specific platform used for debugging HTML5 pages, such as WeChat, Alipay, self-developed APPs, etc. Different platforms have different running environments and characteristics.

[0052] The debugging container refers to an independent memory area that can carry the H5 debugging environment. In the case of a multi-person shared debugging system, an independent memory area is opened each time for debugging to ensure that the debugging operations of different users do not affect each other.

[0053] The debugging templates of the debugging platform refer to the debugging modes pre-configured for specific debugging platforms, including types such as self-developed APP embedded H5, WeChat official account H5, WeChat mini-program embedded H5, Alipay mini-program embedded H5, etc. Different templates are internally configured with different functions according to the platform characteristics to achieve multi-platform and cross-platform debugging of the same H5 page.

[0054] Among them, the information of the debugging container refers to the information related to the debugging container corresponding to the debugging platform. Specifically, the information of the debugging container may include but is not limited to the identification information of the debugging platform, the address information of the HTML5 page to be debugged, and the following content:

[0055] Basic information: creation time, creator account, last update time, unique identifier (ID) of the debugging container, etc.

[0056] Running status information: current running status (such as running, paused, stopped, etc.), resource usage (such as memory occupancy, CPU occupancy, etc.).

[0057] Configuration information: selected debugging platform template identifier, debugging environment related parameter settings, list of loaded debugging tools and scripts, etc.

[0058] Communication information: communication connection status with the debugging system, communication address, port number, etc.

[0059] Error information: error logs, exception information, etc. generated during the debugging process.

[0060] Specifically, the debugging platform in this application may include at least one. Among them, at least one application can be deployed in each debugging platform, each application can create a corresponding debugging container, and each debugging container can be used to debug at least one H5 page.

[0061] Specifically, developers pre-configure corresponding debugging templates for each debugging platform in the debugging subsystem, and these templates contain information such as debugging rules and parameters for different platforms.

[0062] The debugging subsystem creates corresponding debugging containers for each debugging platform according to this information. This may involve allocating resources on the server and creating corresponding data records to be saved in the database.

[0063] Furthermore, when a request for obtaining the information of the debugging container is received (which may come from the debugging platform or other components), the debugging subsystem performs permission verification on the request to ensure that the requester has the permission to obtain the information.

[0064] Further, the debugging subsystem queries and collects relevant information of the debugging container from the database and the runtime environment, such as debugging platform information, address information of the H5 page, running status, configuration parameters, etc., and assembles this information into a suitable data structure. The debugging subsystem sends the assembled debugging container information to the debugging platform.

[0065] The debugging platform receives the debugging container information sent by the debugging subsystem. It parses out the address information (H5 link) of the HTML5 page from the debugging container information. The debugging platform opens the corresponding HTML5 page according to the parsed address information using its own mechanism (such as a built-in browser kernel or by invoking an external browser).

[0066] Further, the debugging platform debugs the opened HTML5 page according to a pre-configured debugging template. This may include checking the page's compatibility, functional correctness, performance metrics, etc. When the debugging platform discovers problems during the debugging process, it records relevant error information, exception logs, etc., and provides them to the developer for analysis and repair. The developer can modify and optimize the code of the HTML5 page according to the feedback information provided by the debugging platform, and then repeat the above debugging process until the page meets the requirements.

[0067] It can be seen that this application can debug HTML5 pages in a debugging container. Debugging tools such as page elements, breakpoint debugging, performance analysis, memory occupancy, and page time consumption are more convenient to use. It is independent of the strong dependence on the debugging platform, can achieve cross-platform debugging, is more convenient, saves time, and improves efficiency.

[0068] In one embodiment, the debugging subsystem is used to respond to a creation request of a debugging container, establish a data record corresponding to the debugging container according to a debugging template and the address information of the HTML5 page to be debugged, and call a backend interface to create an independent memory and a file directory to create the debugging container.

[0069] Among them, the backend interface can be a node.js interface. The node.js interface is a set of functions or method collections provided by the backend. It is called by the debugging subsystem. Its main function is to perform operations to create an independent memory and a file directory on the server, so as to provide a physical running space and a data storage area for the debugging container. This interface may receive some necessary parameters, such as identification information related to the debugging template, address information of the HTML5 page to be debugged, etc., in order to accurately create an environment suitable for the debugging container to run according to these parameters. It is a bridge connecting the creation request of the debugging subsystem and the actual resource allocation operation on the server, enabling the creation of the debugging container to be specifically implemented on the server side.

[0070] Specifically, on the visualization page of the debugging subsystem, the user can select an appropriate debugging template, input the address information of the HTML5 page to be debugged, i.e., the H5 link, click to complete the creation. At this time, the debugging subsystem generates a data record based on key data such as the selected debugging platform template identifier, H5 link, creation time, and creator account, and saves it to the database;

[0071] When the user clicks to start debugging, the system triggers the call of the node.js interface, executes the creation command on the server, and creates independent memory and file directories. This step creates the physical running space and data storage area for the debugging container, which is the hardware foundation support for the existence of the debugging container;

[0072] After creating the independent memory and file directories, continue to use the node.js interface to complete the setting of relevant parameters for the debugging environment, load the necessary debugging tools and scripts, and establish a stable communication mechanism with the debugging system to ensure that the page and file content can interact normally.

[0073] Among them, the role of creating independent memory and file directories is as follows:

[0074] Debugging file storage: The file directory can be used to store various files generated during the debugging process, such as log files, which are used to record various operations, events, and possible error messages during the debugging of the H5 page, facilitating developers to troubleshoot problems.

[0075] Configuration file storage: Configuration files related to debugging can be stored, including debugging parameters, environment configurations, etc. These files can help the debugging container run according to specific requirements and rules.

[0076] Page loading: The independent memory provides space for the loading and running of the H5 page. The code, resources, etc. of the H5 page will be loaded into the memory and executed in this independent environment to ensure isolation from other programs or processes and avoid interference.

[0077] Page - file interaction: Through the node.js interface, the H5 page can write data to the files in the file directory and also read data from them. For example, after a debugging operation on the page is triggered, relevant information can be written to the file, or the previously saved debugging status information can be read from the file to update the page display.

[0078] Support for debugging tool operation: The debugging tools and scripts run in the independent memory, analyze and debug the H5 page, and at the same time can use the file directory to store debugging results, intermediate data, etc. to achieve the debugging function.

[0079] The beneficial effects of this embodiment are as follows:

[0080] Implement resource allocation: By calling the backend interface, independent memory and file directories are created, providing the necessary hardware infrastructure support for the debugging container, ensuring that the debugging container can run independently and stably, avoiding resource conflicts with other applications or processes, and improving the accuracy and stability of debugging.

[0081] Data record management: Establish data records corresponding to the debugging container, store key data such as the debugging template and the address information of the page to be debugged, facilitating subsequent management, query, and traceability of the debugging container, helping developers understand the creation background and related configurations of the debugging container, and providing strong data support for debugging work.

[0082] Support multi-platform debugging: This method of creating a debugging container provides a unified infrastructure for debugging H5 pages on multiple platforms (such as self-developed APPs, WeChat, Alipay, etc.). Regardless of which platform is used for debugging, a debugging container can be created through the same process, improving the versatility and scalability of the debugging system.

[0083] In one embodiment, the debugging subsystem is further configured to generate a QR code for the debugging container according to the debugging platform and the address information. The information acquisition request for the debugging container includes a QR code scanning request, and the debugging subsystem is configured to obtain the information of the debugging container in response to the QR code scanning request.

[0084] Specifically, the debugging subsystem needs to clarify the information to be encoded into the QR code. This information should at least include the identifier of the debugging platform (such as the specific identifier of platforms like WeChat and Alipay) and the address information (H5 link) of the HTML5 page to be debugged. In addition, other necessary information such as the unique identifier (ID) of the debugging container can also be included to accurately identify and obtain the detailed information of the debugging container later.

[0085] Furthermore, according to the programming language and development environment used, select a suitable QR code generation library or tool. Combine the determined information (such as the debugging platform identifier, H5 link, debugging container ID, etc.) in a certain format, and then use the selected QR code generation library or tool to encode the combined information to generate a QR code image. The generated QR code image can be saved in common image formats such as PNG and JPEG for subsequent display or use.

[0086] Furthermore, store the generated QR code image in a specified location (such as the file system or database of the server), or directly display it on the interface of the debugging system to the user for the user to perform a QR code scanning operation.

[0087] Furthermore, the user uses a scanning device (such as a scanning application on a mobile phone) to scan the generated QR code. The scanning device parses the information contained in the QR code and sends a request containing this information (i.e., a QR code scanning request) to the debugging subsystem.

[0088] Furthermore, after receiving the code scanning request, the debugging subsystem parses the information carried in the request and extracts the debugging platform identifier, H5 link, and possible debugging container ID.

[0089] Verify the legitimacy of the parsed request, for example, check whether the debugging platform identifier is valid, whether the H5 link format is correct, etc. If the request is illegal, an error message is returned to the scanning device or user.

[0090] According to the parsed and verified information, the corresponding debugging container information is queried in the database or other storage media. If the debugging container ID is used, the corresponding debugging container record can be quickly located directly according to the ID; if there is no ID, the query can be combined with the debugging platform identifier and H5 link and other information.

[0091] The queried debugging container information (such as debugging platform information, H5 links, running status, configuration parameters, etc.) is assembled into a suitable data structure and returned to the scanning device or the client that initiates the request, so as to perform subsequent operations such as debugging of the HTML5 page.

[0092] The beneficial effects of this embodiment are:

[0093] Shorten the opening link and simplify the operation process: In traditional technologies, the opening link is long and the operation is complicated when debugging H5 pages. For example, the debugging of H5 embedded in WeChat applet requires multiple steps. However, this application generates a debugging container QR code, and users only need to scan the code to trigger the operation of obtaining debugging container information, skipping the tedious steps of opening platform applications and finding corresponding functions in traditional methods, greatly shortening the opening link, making debugging operations simpler and faster, and improving debugging efficiency.

[0094] Adapting to differences in multiple platforms: In the face of multiple platforms such as self-developed APP native applications, WeChat public account H5, WeChat mini-program embedded H5, Alipay mini-program embedded H5, and the differences in functions of each platform, the QR code scanning method provides a unified entrance. No matter which platform is debugged, you can obtain the debugging container information by scanning the corresponding QR code, avoiding the complex and diverse debugging operations caused by platform differences, and reducing the difficulty and learning cost of developers when debugging on multiple platforms.

[0095] Improve debugging convenience and real-time performance: The QR code scanning operation is relatively simple and easy to implement. Developers or testers can scan the QR code to obtain information at any time when debugging is needed, without performing complex navigation and search operations within the platform. This makes the debugging process more convenient, enables more timely debugging of H5 pages, discovers and solves problems in a timely manner, and improves the real-time performance and effectiveness of debugging.

[0096] In one embodiment, the debugging subsystem is used to generate a QR code for the debugging container according to the debugging platform, the page jump protocol of the debugging platform, and the address information. The debugging platform is used to parse the information of the debugging container to obtain the page jump protocol of the debugging platform. The debugging platform is used to open the corresponding application in the debugging platform according to the page jump protocol of the debugging platform, and open the HTML5 page in the application according to the address information.

[0097] Among them, the page jump protocol can be the Scheme protocol. The Scheme protocol is a page-internal jump protocol and plays an important role in mobile application development and web interaction. It can jump to a specified application within the browser and open a specified page. For example, when accessing an H5 page in a browser, the specified page of a WeChat mini-program can be directly opened through the Scheme protocol. The application to be opened must support the Scheme protocol.

[0098] Specifically, the specific steps for the debugging platform to open the corresponding application in the debugging platform according to the page jump protocol of the debugging platform may include:

[0099] Register the Scheme protocol: When developing the debugging platform application, developers will register a specific Scheme protocol in the application's configuration file or code and associate it with the application. For example, in iOS, the URL Schemes will be configured in the Info.plist file; in Android, the supported Scheme protocol will be declared through intent-filter in the AndroidManifest.xml file.

[0100] Recognition and call: When the mobile browser scans the QR code and obtains the Scheme protocol, the system will recognize the protocol and find the corresponding application according to the registered information. If the device installs an application that supports the Scheme protocol, the system will automatically open this application and pass relevant parameters to the application, enabling the application to perform corresponding operations according to these parameters, such as opening a specific page, etc.

[0101] The beneficial effects of this embodiment are as follows:

[0102] Improve the accuracy of page opening: The debugging platform opens the corresponding application according to the parsed page jump protocol and accurately loads the H5 page based on the address information, reducing the situation of page opening errors or failures that may be caused by manual operations, ensuring the accuracy and stability of page loading during the debugging process, and helping to more efficiently discover and solve problems of H5 pages on various debugging platforms.

[0103] Enhance the versatility and expandability of the system: The implementation method of this technology enables the debugging system to be more conveniently adapted to new debugging platforms or applications. When a new platform is added, only the corresponding page jump protocol needs to be configured, and the debugging subsystem can generate a QR code containing the new protocol, and the debugging platform can also parse and operate according to the protocol, improving the versatility and expandability of the system and reducing the difficulty of subsequent maintenance and upgrade.

[0104] In one embodiment, a communication function between the HTML5 page and the corresponding application in the debugging platform is configured in the debugging template. The debugging platform is used to obtain the communication function according to the debugging template, send the communication function to the debugging container through the HTML5 page, the debugging container is used to send the communication function to the corresponding application in the debugging platform, the corresponding application in the debugging platform is used to execute the communication function, and return the execution result to the debugging container, and the debugging container is used to send the execution result to the HTML5 page to debug the HTML5 page.

[0105] Among them, the communication function between the HTML5 page and the corresponding application in the debugging platform can be the JSBridge function. JSBridge is a bridge connecting JavaScript and native applications (such as Java for Android and Objective-C / Swift for iOS), enabling the two to call each other. Through JSBridge, JavaScript code can access the native functions of the device, such as the camera, GPS (Global Positioning System), accelerometer, microphone, etc., call system-level APIs (Application Programming Interface), and access third-party native SDKs (Software Development Kit).

[0106] Specifically, the JSBridge function can include taking pictures, videos, and obtaining locations.

[0107] Among them, the HTML5 page in this application first judges whether the function to be debugged includes a communication function with the corresponding application in the debugging platform, that is, the JSBridge function. The specific judgment method is:

[0108] Since the JSBridge call has a fixed code format (defined by the applications on the debugging platform), for example, for the camera function, window.selfAPP.openPhoto() needs to be called in H5. It can be initially determined whether the JSBridge function is involved by checking whether specific keywords (such as selfAPP here) exist in the code. There are differences among different debugging platforms, and these differences are handled through compatibility judgment in the debugging template. That is, the debugging template sets corresponding judgment logics according to the characteristics of the JSBridge call formats of different platforms to ensure an accurate judgment of whether the JSBridge function is involved.

[0109] Specifically, when the developer operates the debugging function point of the H5 page, the H5 page first checks whether the function to be debugged contains a communication function with the corresponding application on the debugging platform. That is, by checking whether specific keywords (defined according to the application on the debugging platform) exist in the code and combining the compatibility judgment logics for different platforms in the debugging template, it is determined whether the JSBridge function is involved.

[0110] If it is determined that the function in the H5 page involves the JSBridge function of the platform, the H5 page sends the required platform capabilities to the debugging container.

[0111] After receiving the information sent by the H5, the debugging container records the log and automatically sends the information to the corresponding application in the debugging platform.

[0112] The corresponding application in the debugging platform receives the information sent by the debugging container, parses the required JSBridge function and configuration therein, and executes the JSBridge function. The execution result is then sent to the debugging container.

[0113] Furthermore, the debugging container receives the execution result of the corresponding application in the debugging platform and then sends the execution result to the H5 page.

[0114] The H5 page receives the execution result, completes the function debugging according to the result, and judges whether the function is normally implemented or whether there are problems.

[0115] The beneficial effects of this embodiment are as follows:

[0116] Accurately identify JSBridge calls: Through specific keyword judgment and compatibility processing of the debugging template, it is possible to accurately judge whether the H5 page function involves the JSBridge function, providing an accurate basis for the subsequent debugging process and avoiding debugging errors or incompleteness caused by misjudgment.

[0117] Achieve cross-platform debugging compatibility: Although there are differences in JSBridge calls on different debugging platforms, through the compatibility judgment and processing of debugging templates, it is possible to achieve unified judgment and debugging processes on multiple platforms, enabling developers to avoid writing complex judgment logics separately for each platform, thereby improving the efficiency and generality of debugging.

[0118] Complete debugging process loop: From the H5 page judging the JSBridge function, to sending requests, the debugging container recording and forwarding, the platform application executing and returning results, and then to the H5 page receiving the results to complete the debugging, a complete debugging process loop is formed, ensuring that functions involving JSBridge can be effectively debugged, problems can be discovered and solved in a timely manner, and the functional stability and compatibility of the H5 page on different platforms are improved.

[0119] In one embodiment, the debugging platform is further configured to pre-inject communication code into the debugging container. When the application is opened, the built-in view control is opened to execute the communication code to establish a first communication link. The first communication link is the communication link between the debugging container and the corresponding application in the debugging platform. The debugging subsystem is further configured to establish a second communication link. The second communication link is the communication link between the debugging container and the HTML5 page. The debugging container is configured to send the communication function to the corresponding application in the debugging platform according to the first communication link, and the debugging container is further configured to send the execution result to the HTML5 page according to the second communication link.

[0120] Among them, both the first communication link and the second communication link can be two-way communication links.

[0121] The view control can be a webview. A webview is an engine based on webkit that can parse DOM (Document Object Model) elements and display html pages. It has the same principle as a browser for displaying pages and can be regarded as a browser.

[0122] Specifically, the debugging platform pre-injects websocket-based communication code into the debugging container.

[0123] When the application in the debugging platform is opened, the built-in view control webview is opened. The webview executes the injected communication code, enabling a two-way communication first communication link to be established between the debugging container and the corresponding application in the debugging platform based on websocket.

[0124] The beneficial effects of this embodiment are as follows:

[0125] Achieving Efficient Communication: By establishing a two-way communication link, real-time and efficient data transmission and interaction can be carried out between the debugging container, the debugging platform application, and the HTML5 page. For example, sending communication functions to the platform application and sending execution results to the HTML5 page to ensure the smoothness of the debugging process.

[0126] In one embodiment, the debugging subsystem is further configured to, in response to an update request of the debugging container, extract the address information of the new HTML5 page in the update request. The debugging subsystem is also configured to update the configuration of the debugging container according to the address information of the new HTML5 page, so as to debug the new HTML5 page in the updated debugging container.

[0127] Among them, the debugging subsystem listens for and receives an update request from the debugging container, which may be manually triggered by the developer or automatically generated according to specific conditions.

[0128] The debugging subsystem parses the update request and extracts the address information (H5 link) of the new HTML5 page from it. This may involve judging and processing the request data format to ensure that the address information can be accurately obtained.

[0129] Furthermore, the extracted new address information is verified. For example, checking whether its format conforms to the URL specification and whether it can be accessed normally. If the address is invalid, it may be necessary to record an error log and notify relevant personnel for processing.

[0130] Furthermore, the debugging subsystem updates the configuration of the debugging container according to the address information of the new HTML5 page. This may include modifying the H5 link information stored in the debugging container and adjusting other relevant configuration parameters (such as debugging templates, environment variables, etc.) according to the characteristics of the new page and debugging requirements.

[0131] Furthermore, after completing the configuration update of the debugging container, the debugging subsystem ensures that the updated debugging container is in a runnable state, preparing for debugging the new HTML5 page. For example, it may be necessary to reload relevant debugging tools and scripts, establish a communication connection with the new page, etc.

[0132] The beneficial effect of this embodiment is that:

[0133] The debugging container can be updated according to the address information of the new HTML5 page, enabling developers to conveniently switch different H5 pages for debugging in the same debugging container. After successfully creating the container, there is no need to recreate the debugging container every time. Subsequent debugging can be reused, and only the debugging H5 link needs to be changed, improving convenience.

[0134] Improve debugging efficiency: By quickly updating the configuration of the debugging container, the time for repeated settings and preparations caused by switching the debugging page is reduced, and the debugging process of the new page can be entered more quickly, thus improving the overall debugging efficiency.

[0135] Reduce resource consumption: Avoid the resource consumption caused by frequently creating and destroying debugging containers, such as the occupation of resources such as memory and CPU. Switching pages and debugging in the same debugging container makes more effective use of the system.

[0136] In one of the embodiments, the debugging subsystem is further configured to call a backend interface to create an independent memory and a file directory to start the debugging container, and the independent memory and the file directory are used for the data generated during the debugging process of the debugging container.

[0137] In a second aspect, a method for debugging an HTML5 page is provided. As Figure 2 shown, taking the application of this method to a terminal as an example for illustration, the method includes:

[0138] Step S21, create a debugging container corresponding to the current debugging platform according to the debugging template pre-configured for the current debugging platform and the address information of the HTML5 page to be debugged;

[0139] Step S22, in response to an information acquisition request of the debugging container, acquire the information of the debugging container;

[0140] Step S23, acquire the address information of the HTML5 page according to the information of the debugging container;

[0141] Step S24, open the HTML5 page in the debugging container according to the address information of the HTML5 page;

[0142] Step S25, debug the HTML5 page according to the debugging template.

[0143] In a third aspect, the present application provides a device for debugging an HTML5 page. As Figure 3 shown, the device for debugging an HTML5 page includes: a creation module 31, an acquisition module 32, a processing module 33, an opening module 34, and a debugging module 35, where:

[0144] The creation module 31 is configured to create a debugging container corresponding to the current debugging platform according to the debugging template pre-configured for the current debugging platform and the address information of the HTML5 page to be debugged;

[0145] The acquisition module 32 is configured to acquire the information of the debugging container in response to an information acquisition request of the debugging container;

[0146] A processing module 33, configured to obtain the address information of the HTML5 page according to the information of the debug container;

[0147] An opening module 34, configured to open the HTML5 page in the debug container according to the address information of the HTML5 page;

[0148] A debugging module 35, configured to debug the HTML5 page according to a debug template.

[0149] In a third aspect, the present application provides a computer device, which includes a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the computer program, the steps of the HTML5 page debugging method provided in any embodiment of the first aspect of the present application are implemented.

[0150] In one embodiment, the computer device may be a terminal, and its internal structure diagram may be as Figure 4 shown. The computer device includes a processor, a memory, a network interface, a display screen, and an input device connected through a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the computer device is used to communicate with an external terminal through a network connection. The computer program, when executed by the processor, implements an HTML5 page debugging method. The display screen of the computer device may be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer device may be a touch layer covered on the display screen, or may be a button, a trackball, or a touchpad provided on the housing of the computer device, or may also be an external keyboard, a touchpad, or a mouse, etc.

[0151] In a fourth aspect, the present application provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the steps of the HTML5 page debugging method provided in any embodiment of the first aspect of the present application are implemented.

[0152] The computer-readable storage medium may be Figure 4 the computer-readable storage medium in the computer device shown.

[0153] Those of ordinary skill in the art can understand that all or part of the processes in the methods of the above embodiments can be completed by instructing relevant hardware through a computer program. The above computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above various methods. Among them, any reference to a memory, storage, database, or other medium used in the various embodiments provided in the present application can include non-volatile and / or volatile memories. Non-volatile memories can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memories can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDR SDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), Rambus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and Rambus dynamic RAM (RDRAM), etc.

[0154] The technical features of the above embodiments can be combined arbitrarily. For the sake of concise description, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, it should be considered as the scope described in this specification.

[0155] The above embodiments only represent several implementation manners of the present application. The description is relatively specific and detailed, but it should not be construed as a limitation on the scope of the invention patent. It should be noted that for those of ordinary skill in the art, without departing from the concept of the present application, several modifications and improvements can still be made, and these all belong to the protection scope of the present application. Therefore, the protection scope of the patent of the present application should be subject to the appended claims.

Claims

1. An HTML5 page debugging system, characterized in that The system includes a debugging subsystem and a debugging platform, where the debugging platform includes at least one. Among them, the debugging subsystem is used to create a debugging container corresponding to the debugging platform according to a debugging template pre-configured for the debugging platform and the address information of the HTML5 page to be debugged; the debugging subsystem is also used to obtain the information of the debugging container in response to an information acquisition request of the debugging container and send it to the debugging platform; the debugging platform is used to obtain the address information of the HTML5 page according to the information of the debugging container and open the HTML5 page according to the address information of the HTML5 page; the debugging platform is also used to debug the HTML5 page according to the debugging template.

2. The system according to claim 1, characterized in that The debugging subsystem is used to establish a data record corresponding to the debugging container according to the debugging template and the address information of the HTML5 page to be debugged in response to a creation request of the debugging container, and call a backend interface to create an independent memory and a file directory to create the debugging container.

3. The system according to claim 1, characterized in that, The debugging subsystem is also used to generate a QR code of the debugging container according to the debugging platform and the address information; The information acquisition request of the debugging container includes a QR code scanning request. The debugging subsystem is used to obtain the information of the debugging container in response to the QR code scanning request.

4. The system according to claim 3, characterized in that, The debugging subsystem is used to generate a QR code of the debugging container according to the debugging platform, the page jump protocol of the debugging platform, and the address information; The debugging platform is used to parse the information of the debugging container to obtain the page jump protocol of the debugging platform; The debugging platform is used to open the corresponding application in the debugging platform according to the page jump protocol of the debugging platform and open the HTML5 page in the application according to the address information.

5. The system according to claim 4, wherein The communication function between the HTML5 page and the corresponding application in the debugging platform is configured in the debugging template. The debugging platform is used to obtain the communication function according to the debugging template and send the communication function to the debugging container through the HTML5 page; the debugging container is used to send the communication function to the corresponding application in the debugging platform; the corresponding application in the debugging platform is used to execute the communication function and return the execution result to the debugging container; the debugging container is used to send the execution result to the HTML5 page to debug the HTML5 page.

6. The system according to claim 5, wherein The debugging platform is also used to pre-inject communication code into the debugging container. When the application is opened, an internal view control is opened to execute the communication code to establish a first communication link, and the first communication link is the communication link between the debugging container and the corresponding application in the debugging platform; the debugging subsystem is also used to establish a second communication link, and the second communication link is the communication link between the debugging container and the HTML5 page; the debugging container is used to send the communication function to the corresponding application in the debugging platform according to the first communication link; The debug container is further configured to send the execution result to the HTML5 page according to the second communication link.

7. The system according to claim 1, characterized in that, The debug subsystem is further configured to extract the address information of the new HTML5 page in the update request in response to the update request of the debug container; The debug subsystem is further configured to update the configuration of the debug container according to the address information of the new HTML5 page, so as to debug the new HTML5 page in the updated debug container.

8. A method for debugging an HTML5 page, characterized in that, The method includes: creating a debug container corresponding to the current debug platform according to a debug template pre-configured for the current debug platform and the address information of the HTML5 page to be debugged; obtaining the information of the debug container in response to the information acquisition request of the debug container; obtaining the address information of the HTML5 page according to the information of the debug container; opening the HTML5 page in the debug container according to the address information of the HTML5 page; debugging the HTML5 page according to the debug template.

9. A computer device, comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the steps of the method according to any one of claims 8.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 8.

Images