Page debugging system and method, electronic equipment and storage medium
The information collection, transmission, and display modules of the page debugging system solve the problem of difficulty in discovering details during page debugging, and achieve efficient page development and maintenance.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-09-20
- Publication Date
- 2026-03-24
AI Technical Summary
In existing technologies, it is difficult to discover detailed problems during page debugging, resulting in low debugging efficiency. Furthermore, relying on surface observation of the device can easily overlook potential detailed problems, increasing the difficulty of error troubleshooting.
A page debugging system is adopted, which includes an information acquisition module, an information transmission module, and a front-end display module. By acquiring page parameters, it converts them into page layout files and displays the debugging page in the front-end display module, including information such as page attributes and control tree.
It improves the intuitive display of interface information and the ability to grasp details, promotes the accuracy of interface design and page development efficiency, and enhances the ease of page maintenance.
Smart Images

Figure CN121722656A_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of page debugging technology, and in particular to a page debugging system, a page debugging method, an electronic device, and a computer-readable storage medium. Background Technology
[0002] GRT (General Runtime) is a general-purpose runtime rendering system developed by WeTab. It is designed to provide efficient rendering solutions, potentially including graphics rendering, data processing, and other runtime-related functions. Such systems are typically used to optimize the performance of various applications, ensuring stable and high-quality rendering results under different environments and conditions.
[0003] During page development, developers can only observe the final rendered page through the device's surface. That is, they can only observe the final result of the page rendering through the terminal's graphical user interface, making it difficult to view the page layout. This is especially true when page controls are not drawn, requiring developers to spend a significant amount of time and effort on in-depth debugging and analyzing the root cause of problems, easily leading to low overall debugging efficiency. Furthermore, relying solely on observation of the device's surface can easily overlook potential details, increasing the difficulty of error troubleshooting and reducing page development efficiency. Summary of the Invention
[0004] The present invention provides a page debugging system, method, electronic device, and computer-readable storage medium to solve or partially solve the problems of difficulty in discovering detailed problems and low debugging efficiency during page debugging.
[0005] This invention discloses a page debugging system, which includes at least an information acquisition module, an information transmission module, and a front-end display module; wherein,
[0006] The information acquisition module is used to respond to the debugging command for the target page and obtain the page parameters corresponding to the target page. The page parameters include at least the data or configuration information passed to the page during page loading or interaction. The target page includes at least a number of page controls.
[0007] The information transmission module is used to convert the page parameters into a page layout file;
[0008] The front-end display module is used to extract the page parameters from the page layout file and display a debug page corresponding to the page parameters. The debug page includes at least one of the target page, the page attributes corresponding to the target page, and the page control tree corresponding to the page control.
[0009] In some optional embodiments, the front-end display module is further configured to, in response to a selection operation on any page control in the debugging page, display the target control properties corresponding to the selected target page control in the debugging page.
[0010] In some optional embodiments, the information acquisition module includes at least an instruction receiving module and an information generation module; wherein,
[0011] The instruction receiving module is configured to generate a debugging instruction for the target page based on the debugging information received for the target page.
[0012] The information generation module is used to respond to the debugging command, read the memory information in each control tree corresponding to the target page, extract the page layout of the target page, the control attributes of each control and the page state from the memory information, and combine at least one of the page layout information, the control attributes and the page state to form the page parameters corresponding to the target page.
[0013] In some optional embodiments, the instruction receiving module is specifically used to receive debugging information for the target page. If the debugging information is command line information, then a debugging instruction for the target page is generated based on the broadcast information in the command line information; if the debugging information is a key trigger event, then debugging information for the target page is generated based on the key trigger event.
[0014] In some optional embodiments, the page layout information includes at least the control type, ID information, position information, and size information corresponding to each control; the control attributes include at least the control state and control style; and the page state is either a loading state or a display state.
[0015] The information generation module is specifically used to convert at least one of the control type, the ID information, the location information, and the size information into a first string of the target data format, and to convert at least one of the control type, the control state, the size information, and the control style into a second string of the target data format, and to convert one of the loading state or the display state into a third string of the target data format, and to merge the first string, the second string, and the third string into the target string corresponding to the target page.
[0016] In some optional embodiments, the information transmission module includes at least an information capture module; wherein,
[0017] The information capture module is used to extract target logs that meet predetermined conditions in response to the log output for the page parameters, parse the target logs to obtain the page parameters, and the predetermined conditions are at least conditions associated with page loading, interface interaction and preset page events.
[0018] The page parameters are output to a file in a specified format to obtain a page layout file corresponding to the page parameters.
[0019] In some optional embodiments, the information transmission module further includes a file processing module, which includes an access interface corresponding to the front-end display module; wherein,
[0020] The file processing module is used to obtain the page layout file, parse the page layout file to obtain the page parameters, and send the page parameters to the front-end display module through the access interface.
[0021] This invention discloses a page debugging method applied to a debugging system. The debugging system includes at least an information acquisition module, an information transmission module, and a front-end display module. The method includes:
[0022] The information acquisition module responds to the debugging command for the target page and obtains the page parameters corresponding to the target page, wherein the target page includes at least a number of page controls;
[0023] The information transmission module converts the page parameters into a page layout file.
[0024] The front-end display module extracts the page parameters from the page layout file and displays a debug page corresponding to the page parameters. The debug page includes at least the target page, the page attributes corresponding to the target page, and the page control tree corresponding to the page controls.
[0025] In some optional embodiments, after extracting the page parameters from the page layout file and displaying the debug page corresponding to the page parameters, the method further includes:
[0026] In response to a selection operation on any page control in the debugging page, the front-end display module displays the target control properties corresponding to the selected target page control in the debugging page.
[0027] In some optional embodiments, the information acquisition module includes at least an instruction receiving module and an information generation module. The step of obtaining page parameters corresponding to the target page in response to a debugging instruction for the target page includes:
[0028] If the instruction receiving module receives debugging information for the target page, it generates debugging instructions for the target page based on the debugging information.
[0029] The information generation module responds to the debugging command by reading the memory information in each control tree corresponding to the target page.
[0030] The information generation module extracts the page layout, control attributes of each control, and page state of the target page from the memory information, and combines at least one of the page layout information, control attributes, and page state to form the page parameters corresponding to the target page.
[0031] In some optional embodiments, if the instruction receiving module receives debugging information for the target page, generating debugging instructions for the target page based on the debugging information includes:
[0032] The instruction receiving module receives debugging information for the target page.
[0033] If the debugging information is command-line information, then the instruction receiving module generates debugging instructions for the target page based on the broadcast information in the command-line information;
[0034] If the debugging information is a key-triggered event, then the instruction receiving module generates debugging information for the target page based on the key-triggered event.
[0035] In some optional embodiments, the page layout information includes at least the control type, ID information, position information, and size information corresponding to each control; the control attributes include at least the control state and control style; the page state is either a loading state or a display state; and the step of assembling at least one of the page layout information, the control attributes, and the page state into page parameters corresponding to the target page includes:
[0036] Convert at least one of the control type, the ID information, the position information, and the size information into a first string of the target data format;
[0037] Convert at least one of the control type, the control state, the size information, and the control style into a second string of the target data format;
[0038] Convert either the loading state or the display state into a third string of the target data format;
[0039] The first string, the second string, and the third string are merged into the target string corresponding to the target page.
[0040] In some optional embodiments, converting the page parameters into a page layout file includes:
[0041] In response to the log output for the page parameters, target logs that meet predetermined conditions are extracted, the target logs are parsed to obtain the page parameters, and the predetermined conditions are at least conditions associated with page loading, interface interaction and preset page events.
[0042] The page parameters are output to a file in a specified format to obtain a page layout file corresponding to the page parameters.
[0043] In some optional embodiments, the information transmission module further includes a file processing module, which includes an access interface corresponding to the front-end display module. After obtaining the page layout file corresponding to the page parameters, the method further includes:
[0044] The page layout file is obtained through the file processing module, the page layout file is parsed to obtain the page parameters, and the page parameters are sent to the front-end display module through the access interface.
[0045] This invention also discloses an electronic device, including a processor, a communication interface, a memory, and a communication bus, wherein the processor, the communication interface, and the memory communicate with each other through the communication bus;
[0046] The memory is used to store computer programs;
[0047] When the processor executes a program stored in the memory, it implements the method described in the embodiments of the present invention.
[0048] This invention also discloses a computer-readable storage medium storing instructions that, when executed by one or more processors, cause the processors to perform the methods described in this invention.
[0049] The embodiments of the present invention have the following advantages:
[0050] In this embodiment of the invention, a debugging system can be used to debug the corresponding page. The debugging system may include an information acquisition module, an information transmission module, and a front-end display module. During the debugging of the target page, the information acquisition module can respond to the debugging command for the target page and obtain the page parameters corresponding to the target page. The page parameters include at least the data or configuration information passed to the page during page loading or interaction. The target page includes at least several page controls. Then, the information transmission module converts the page parameters into a page layout file. The front-end display module then extracts the page parameters from the page layout file and displays the debugging page corresponding to the page parameters. The debugging page includes at least one of the following: the target page, the page attributes corresponding to the target page, and the page control tree corresponding to the page controls. Thus, during the page debugging process, based on the acquired page parameters, the front-end display module can display the corresponding page attributes, page control tree, and other information while displaying the target page. This improves the intuitive display and detail control of interface information, making interface design and optimization more accurate, effectively improving the efficiency of page development and the convenience of page maintenance. Attached Figure Description
[0051] To more clearly illustrate the technical solution of the present invention, the accompanying drawings used in the description of the present invention will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0052] Figure 1 This is a structural block diagram of a page debugging system provided in an embodiment of the present invention;
[0053] Figure 2 This is a schematic diagram of the debugging system provided in an embodiment of the present invention;
[0054] Figure 3 This is a schematic diagram of the debugging page provided in an embodiment of the present invention;
[0055] Figure 4 This is a flowchart of the steps of a page debugging method provided in an embodiment of the present invention;
[0056] Figure 5 This is a block diagram of an electronic device provided in an embodiment of the present invention. Detailed Implementation
[0057] To make the above-mentioned objects, features and advantages of the present invention more apparent and understandable, the present invention will be further described in detail below with reference to the accompanying drawings and specific embodiments.
[0058] As an example, during page development, developers can only observe the final rendered page through the device's surface. That is, they can only observe the final result of the page rendering through the terminal's graphical user interface, making it difficult to view the page layout. This is especially true when page controls are not drawn, requiring developers to spend a significant amount of time and effort on in-depth debugging and analyzing the root cause of problems, easily leading to low overall debugging efficiency. Furthermore, relying solely on observation of the device's surface can easily overlook potential details, increasing the difficulty of error troubleshooting and reducing page development efficiency.
[0059] In this invention, a debugging system is used to debug the corresponding page. This system includes an information acquisition module, an information transmission module, and a front-end display module. During the debugging process, the information acquisition module responds to debugging commands for the target page and acquires page parameters corresponding to the target page. These parameters include at least the data or configuration information passed to the page during loading or interaction. The target page contains at least several page controls. The information transmission module then converts the page parameters into a page layout file. The front-end display module extracts the page parameters from the layout file and displays the corresponding debugging page. The debugging page includes at least the target page, its corresponding page attributes, and the page control tree corresponding to the page controls. Thus, during page debugging, based on the acquired page parameters, the front-end display module can display the target page while simultaneously displaying the corresponding page attributes, page control tree, and other information. This improves the intuitive display and detailed understanding of interface information, enabling more accurate interface design and optimization, effectively improving page development efficiency and page maintenance convenience.
[0060] Reference Figure 1 This diagram illustrates a structural block diagram of a page debugging system provided in an embodiment of the present invention. The debugging system includes at least an information acquisition module, an information transmission module, and a front-end display module; wherein,
[0061] The information acquisition module is used to respond to the debugging command for the target page and obtain the page parameters corresponding to the target page. The page parameters include at least the data or configuration information passed to the page during page loading or interaction. The target page includes at least a number of page controls.
[0062] The information transmission module is used to convert the page parameters into a page layout file;
[0063] The front-end display module is used to extract the page parameters from the page layout file and display a debug page corresponding to the page parameters. The debug page includes at least one of the target page, the page attributes corresponding to the target page, and the page control tree corresponding to the page control.
[0064] In this embodiment of the invention, the debugging system can be used to debug the user interface to ensure that it can function normally under various conditions and provide a good user experience. Optionally, debugging the user interface may include functional testing, visual testing, performance testing, error testing, and user testing, etc., and multiple tests can effectively ensure the stability of the user interface operation.
[0065] Functional testing can include interaction testing: checking whether all buttons, sliders, switches and other controls work as expected, and ensuring that clicks, drags and other interactive operations respond normally; state testing: verifying the display effects under different UI states, such as loading, error, active and sleep states; and data verification: ensuring that all displayed data (such as navigation information, media playback status) is accurate and can be updated in real time.
[0066] For visual testing, this can include layout checks: confirming the consistency of the interface layout across different screen resolutions and sizes, ensuring all controls display correctly on various devices. Color and font checks: verifying that the interface's color contrast, font size, and style conform to design specifications and remain legible under different lighting conditions. Responsive design: verifying that the interface can adjust its layout and elements according to screen orientation (landscape / portrait) and size.
[0067] Performance testing can include loading speed: testing the response speed of the interface during loading to ensure there is no noticeable delay or lag; memory usage: monitoring the memory usage of the interface to avoid system performance degradation due to resource leaks or overuse; and smoothness: checking the smoothness of animations and transitions to ensure they do not affect the user experience.
[0068] Error detection can include logging: using logging tools to track and record UI (User Interface) related error information to help developers identify and fix problems; and exception handling: verifying whether the system can handle exceptions or errors gracefully and provide user-friendly error messages.
[0069] User testing can include user feedback: collecting feedback through actual user testing to understand the real user experience during use, and to discover and resolve potential usability issues; and usability testing: conducting A / B testing and other methods to evaluate the impact of different UI designs on user experience and optimize interface design.
[0070] In this embodiment of the invention, the debugging system may include an information acquisition module, an information transmission module, and a front-end display module. The information acquisition module can be used to listen to and receive various instructions generated by information, as well as collect and process UI information currently running in the system. The information transmission module can be used to monitor the system's log output in real time through a background process, parse and upload related files, and provide front-end access interfaces. The front-end display module can be used to comprehensively display the UI information of the current page, including the display of interface element trees, control attribute information, and visualization of control positions. Thus, during the page debugging process, based on the collected page parameters, the front-end display module can display the corresponding page attributes, page control trees, and other information while displaying the target page, improving the intuitive display and detailed understanding of interface information, enabling more accurate interface design and optimization, effectively improving the efficiency of page development, and the convenience of page maintenance.
[0071] The target page can be a page displayed in a graphical user interface, such as the application page displayed when an application is running on a terminal device, or the main page of the terminal device. For the terminal device, this could be an in-vehicle central control screen, which runs corresponding applications to provide users with a user interface. The target page can include several page controls, such as buttons, text boxes, drop-down menus, checkboxes, radio buttons, sliders, labels, progress bars, images, and tables—various elements used to control or display page content. By obtaining the page parameters corresponding to the target page, which at least include data or configuration information passed to the page during page loading or interaction, the page layout, page hierarchy, and control attributes of the target page can be determined based on these parameters, allowing for debugging of the target page.
[0072] In one example, the information acquisition module in the debugging system can be deployed on the vehicle's infotainment system, while the front-end display module can be deployed on a terminal device (such as a tablet, mobile phone, or computer). The information acquisition module collects the page parameters corresponding to the page currently displayed on the in-vehicle central control screen. The debugging system then processes the page parameters and transmits them to the front-end display module on the terminal device, displaying the debugging page corresponding to the page parameters. This allows developers to perform corresponding debugging on the target page based on the debugging interface displayed on the terminal device, thereby enabling page development and maintenance.
[0073] In some feasible implementations, the information acquisition module includes at least an instruction receiving module and an information generation module; wherein,
[0074] The instruction receiving module is configured to generate a debugging instruction for the target page based on the debugging information received for the target page.
[0075] The information generation module is used to respond to the debugging command, read the memory information in each control tree corresponding to the target page, extract the page layout of the target page, the control attributes of each control and the page state from the memory information, and combine at least one of the page layout information, the control attributes and the page state to form the page parameters corresponding to the target page.
[0076] In this embodiment of the invention, the instruction receiving module can be used to listen for and receive various instructions generated by information. Furthermore, depending on the device to which the system belongs, the instruction receiving module can perform different instruction processing operations based on the differences in the device or operating system. Specifically, the instruction receiving module can be used to receive debugging information for a target page. If the debugging information is command-line information, then debugging instructions for the target page are generated based on the broadcast information in the command-line information; if the debugging information is a key-triggered event, then debugging information for the target page is generated based on the key-triggered event. Thus, by receiving and processing instructions from different platform devices, the system's usability is enhanced, meeting the needs of different operating environments.
[0077] In some feasible implementations, on Android devices, the instruction receiving module can determine whether to generate an instruction by receiving broadcast information sent by ADB commands. If the determination result is to generate an instruction, the instruction receiving module can generate the corresponding debugging instruction. On computer devices (including Windows, Mac, and Linux systems), the instruction receiving module can determine whether to generate an instruction by monitoring specified keys on the keyboard. If the determination result is to generate an instruction, the instruction receiving module can generate the corresponding debugging instruction. This allows the system to listen to and respond to external commands in real time, improving the flexibility and real-time performance of instruction processing, while ensuring the wide applicability of the debugging system and stable operation in various operating environments. Furthermore, the efficient instruction receiving mechanism of this module greatly improves the system's response speed, ensuring that user operations are quickly responded to and corresponding information is generated. In addition, the design of the instruction receiving module fully considers ease of use and scalability, allowing developers to easily perform debugging and functional expansion. By introducing this module, the debugging system achieves a high degree of automation and intelligence in the listening and processing of information generation instructions, not only improving the overall performance of the system but also providing users with a smoother and more efficient user experience.
[0078] Optionally, the in-vehicle central control screen can be an in-vehicle device running the Android operating system, or it can be a computer device, that is, a device running one of the following operating systems: Windows, macOS, Linux, Chrome OS, HarmonyOS, etc. The present invention does not limit this.
[0079] In one example, the implementation process on an Android device may include the following steps:
[0080] 1. ADB command broadcast information:
[0081] On Android devices, the module needs to listen for broadcast messages sent by ADB commands. Use Android's BroadcastReceiver to receive system broadcasts. Define a custom broadcast action, such as com.example.ACTION_GENERATE_COMMAND.
[0082] 2. Receiving and processing broadcasts:
[0083] In the `onReceive` method of `BroadcastReceiver`, handle the received broadcast messages. Based on the content of the broadcast message, determine whether to generate a command. If a command needs to be generated, perform the corresponding operation.
[0084] In another example, the implementation process on a computer device may include the following process:
[0085] 1. Monitor keyboard key presses:
[0086] On computer devices, the module needs to monitor specified keyboard keys. This is done using APIs provided by the operating system to listen for keyboard events. For example, the SetWindowsHookEx function can be used on Windows, the Carbon framework on Mac, and the Xlib library on Linux.
[0087] 2. Receive and process key events:
[0088] The received key press information is processed in the callback function of the key press event. Based on the content of the key press information, it is determined whether to generate a command. If a command needs to be generated, the corresponding operation is executed.
[0089] Through the above process, the system's scope of application is enhanced by receiving and processing instructions from different platform devices, thus meeting the needs of different operating environments.
[0090] In some feasible implementations, the debugging system can trigger data collection on the target page based on debugging instructions to obtain page information related to the target page. This page layout information includes at least the control type, ID information, position information, and size information corresponding to each control; control attributes include at least the control state and control style; and the page state (also the UI state) is either a loading state or a display state. The debugging system can then use an information generation module to convert at least one of the control type, ID information, position information, and size information into a first string of the target data format; convert at least one of the control type, control state, size information, and control style into a second string of the target data format; and convert one of the loading state or display state into a third string of the target data format. The first, second, and third strings are then merged into the target string corresponding to the target page. This allows the system to obtain detailed layout and attribute data of the interface and convert it into a string according to a pre-defined format. Based on the formatted data, not only is subsequent processing and analysis beneficial, but the consistency and integrity of the information are also ensured. Optionally, the target data format can be JSON format, etc., and this invention does not limit this.
[0091] Furthermore, after converting the data into string format, the information generation module can output it to the terminal system for further operation or display. During the aforementioned data acquisition and conversion process, by accurately reading the control tree information in memory, it can effectively capture every detail of the target interface. Whether it's the layout structure, control attributes, or UI state, everything can be reflected in detail by the information generation module. Precise information collection not only helps developers with debugging and optimization but also provides strong data support for automated testing and performance monitoring of the system. In addition, the output format of the information generation submodule is designed to ensure that data is not lost or erroneous during transmission and parsing. Through standardized string formats, the terminal system can quickly and accurately receive and process this information, improving the overall system efficiency and reliability.
[0092] In some feasible implementations, the information transmission module can at least include an information capture module and a file processing module. The information capture module can be used to monitor the system's log output in real time through a background process, while the file processing module can be used to parse the information files uploaded by the log capture module and save them to the database according to a specified format. It also provides a corresponding front-end access interface so that the front-end display module can obtain the relevant data through the access interface. Optionally, the information capture module can be deployed on the vehicle's infotainment system, and the file processing module can be deployed in the cloud. The file processing module in the cloud can parse the files uploaded by the information capture module and store the relevant data to ensure the stability of data storage.
[0093] In its implementation, the debugging system can respond to log output related to page parameters through the information capture module, extract target logs that meet predetermined conditions, parse the target logs to obtain page parameters, and ensure that the predetermined conditions are at least related to page loading, UI interaction, and preset page events. The page parameters are then output to a file in a specified format to obtain the corresponding page layout file. Next, the debugging system can obtain the page layout file through the file processing module, parse the page layout file to obtain page parameters, and send the page parameters to the front-end display module via an access interface. Finally, the debugging system can respond to the selection operation of any page control on the debugging page through the front-end display module, displaying the target control properties corresponding to the selected target page control on the debugging page.
[0094] Among them, the conditions corresponding to page loading refer to the recording of debugging information when specific conditions are met during the page loading process. For example, when the page is fully loaded, the corresponding page parameters are recorded and the corresponding logs are output, or when a specific resource (such as an image or script) is fully loaded, the corresponding page parameters are recorded and the corresponding logs are output. The conditions corresponding to interface interaction refer to the recording of debugging information triggered when specific conditions are met when the user interacts with the page. For example, when the user clicks on a relevant control, the changes of the control on the page, the triggering results, etc., the corresponding page change parameters are recorded, and the corresponding logs are output. The preset page events can be the recording of debugging information triggered when preset conditions are met during the page operation. For example, when a specific interface request is successful, debugging information is recorded and the corresponding logs are output. This invention does not limit this.
[0095] During the debugging process, various operations and events can generate corresponding log information. The generated log information can play an effective role in debugging, monitoring and optimizing system performance. The information capture module continuously monitors these log outputs through a background process. When it captures log content that matches the predetermined generated information, it can parse it. For example, when the debugging system collects page information, the information capture module can detect the corresponding collection event, obtain the corresponding target log based on the collection event, and then parse the target log to obtain the corresponding information.
[0096] During log parsing, the information capture module can extract and organize key information, and convert the extracted information into a format that facilitates subsequent processing and analysis. This formatted file not only facilitates storage and management but also allows for rapid integration into other modules of the debugging system for further processing. The real-time monitoring mechanism of the background process ensures that the debugging system can capture important information in the logs as soon as possible, reducing the possibility of delays or omissions. At the same time, the formatted file writing strategy during the parsing and output stages ensures rapid data processing and output, improving the overall performance of the system.
[0097] In some examples, the process of log parsing and outputting involves the information capture module first identifying the target log corresponding to the page parameters and parsing it to obtain the string format log generated by the information generation module. Then, a JSON parser is used to parse the string into a JSON object, extracting relevant key information such as page layout information, control properties, and page status. The extracted information is then organized to ensure its completeness and accuracy. For example, control properties and page status information can be associated with page layout information. After information extraction and organization, the information capture module can further output data using CSV (Comma-Separated Values) or XML (Extensible Markup Language) formats for easier storage and management, and for rapid integration into other modules of the system. Specifically, the organized information can be converted into CSV or XML strings, and then written into a file, ensuring proper file paths and naming conventions for easy subsequent management and integration. This approach ensures accurate parsing through the use of an efficient JSON parser, while allowing for selection of CSV or XML formats based on actual needs and system integration requirements. This enables efficient extraction and organization of key information from logs, transforming it into formatted files suitable for subsequent processing and analysis, facilitating storage and management.
[0098] The front-end display module can be used to comprehensively display the UI information of the target page, as well as the relevant underlying parameters involved in the target page. This allows developers to associate UI information with underlying parameters, quickly perceive the relationship between the "surface presentation" and the "underlying implementation" of the page, improve the intuitive display of interface information and the ability to grasp details, and make interface design and optimization more accurate. This effectively improves the efficiency of page development and the convenience of page maintenance.
[0099] In practice, the front-end display module can display the following content in the graphical user interface of the terminal:
[0100] 1. Structure presentation of interface element tree: This module can generate and display the complete control tree structure of the current page. Through a clear hierarchical view, users can intuitively understand the relationship and layout between various elements of the interface.
[0101] 2. Control Property Information Display: For each control on the interface, the module can display its detailed property information. This information includes, but is not limited to, the control's type, ID, state, size, style, etc., helping users to fully understand the characteristics and current configuration of each control.
[0102] 3. Visualized Control Positions: The front-end display module further provides the precise location of controls on the screen, down to the pixel level. This feature, using coordinate markers, allows developers to accurately locate the actual position of controls within the interface, enabling more detailed adjustments and optimizations.
[0103] For the front-end display module, the displayed debugging interface can include the target page, the page attributes corresponding to the target page, and the page control tree corresponding to the page controls. Displaying the target page can intuitively present the currently debugged page to the developers. Displaying page attributes allows developers to intuitively perceive the page-related attributes, such as the viewport settings, global styles, global scripts, and global management status of the target page. Displaying the page control tree allows developers to intuitively perceive the hierarchical interfaces between various controls on the target page. This improves the intuitive display of interface information and the ability to grasp details, making interface design and optimization more accurate, effectively improving the efficiency of page development and the convenience of page maintenance.
[0104] The page control tree can be a hierarchical structure used to represent and manage the organization of UI controls (components) within the application interface. Specifically, the page control tree can be organized in a tree structure, where each node represents a control or component. The root node typically represents the entire window or main container, and other nodes represent child controls or components within that container. Each control has a parent control (if any) and may have multiple child controls. The layout and behavior of child controls are usually influenced by their parent controls. Furthermore, events in the control tree (such as clicks, scrolling, keyboard input, etc.) typically propagate upwards through the tree, from child controls to parent controls. This allows parent controls to handle or intercept events, performing necessary actions or responses. By managing the control tree, the layout of controls can be effectively managed, determining the display position and size of each control. The layout can be static or dynamic, depending on the application's design requirements.
[0105] In one example, refer to Figure 2The diagram illustrates the structure of the debugging system provided in this embodiment of the invention. The debugging system may include a GRT (General Runtime, a self-developed general runtime rendering system) system instruction receiving module, a GRT system information generation module, an information capture module, a file processing service (i.e., a file processing module), and a front-end display module. The GRT system instruction receiving module, GRT system information generation module, information capture module, and file processing service can be deployed in the vehicle terminal to perform corresponding data processing on the pages displayed in real time on the vehicle terminal. The front-end display module can be deployed in the terminal device to display the corresponding debugging page based on the received page parameters, so that developers can test the target page currently displayed on the vehicle terminal based on the debugging page.
[0106] Among them, the front-end display module can be used for web display, the file processing service can be a service module in the cloud, the information capture module can be a capture application, and the instruction receiving module and information generation module can be on the GRT system. This invention does not limit these.
[0107] Specifically, the GRT system command receiving module can determine whether the currently displayed page on the vehicle-mounted terminal is being debugged through ADB commands or events triggered by physical keys on the keyboard. If the determination result indicates that the page is being debugged, the GRT system information generation module can collect the page parameters corresponding to the currently displayed target page. Simultaneously, the information capture module detects corresponding debugging events and collection events, obtains corresponding log information, parses the log information to obtain the page parameters corresponding to the target page, and then writes the page parameters into a predefined format file to obtain a page layout file. This file is then uploaded to the cloud via a file processing service, and the uploaded file is parsed, with the parsed data stored in the database. Further, the terminal device can obtain the corresponding page parameters through the access interface provided by the file processing service. Then, the front-end display module displays the corresponding debugging page based on the page parameters. The debugging page displays the target page, the page attributes corresponding to the target page, and the page control tree corresponding to the page controls. It also supports developers to perform operations on the target page. For example, when a developer selects a corresponding control on the target page, the terminal device can display the control attributes of the selected target control on the debugging page. Figure 3 The diagram shown illustrates a debugging page provided in an embodiment of the present invention. Figure 3The debug page 30 shown may include a target page 310, a page control tree 320, and page properties 340. Several page controls 350 are displayed on the target page 310. When a developer selects page control A, the control properties 330 can be displayed on the debug page. Thus, while displaying the target page, the corresponding page properties, page control tree, control properties, and other information are displayed, which improves the intuitive display of interface information and the ability to grasp details. This makes interface design and optimization more accurate, effectively improves the efficiency of page development, and enhances the convenience of page maintenance.
[0108] It should be noted that the embodiments of the present invention include, but are not limited to, the examples described above. It is understood that those skilled in the art can make further settings according to actual needs under the guidance of the ideas in the embodiments of the present invention, and the present invention does not limit such settings.
[0109] In this embodiment of the invention, a debugging system can be used to debug the corresponding page. The debugging system may include an information acquisition module, an information transmission module, and a front-end display module. During the debugging of the target page, the information acquisition module can respond to the debugging command for the target page and obtain the page parameters corresponding to the target page. The target page includes at least several page controls. Then, the information transmission module converts the page parameters into a page layout file. Then, the front-end display module extracts the page parameters from the page layout file and displays the debugging page corresponding to the page parameters. The debugging page includes at least the target page, the page attributes corresponding to the target page, and the page control tree corresponding to the page controls. Thus, during the page debugging process, based on the acquired page parameters, the front-end display module can display the corresponding page attributes, page control tree, and other information while displaying the target page. This improves the intuitive display of interface information and the ability to grasp details, making interface design and optimization more accurate, effectively improving the efficiency of page development and the convenience of page maintenance.
[0110] Reference Figure 4 This diagram illustrates a flowchart of a page debugging method provided in an embodiment of the present invention, applied to a debugging system. The debugging system includes at least an information acquisition module, an information transmission module, and a front-end display module, and may specifically include the following steps:
[0111] Step 401: In response to the debugging command for the target page, the information acquisition module obtains the page parameters corresponding to the target page. The page parameters include at least the data or configuration information passed to the page during page loading or interaction. The target page includes at least a number of page controls.
[0112] Step 402: The page parameters are converted into a page layout file through the information transmission module;
[0113] Step 403: Extract the page parameters from the page layout file through the front-end display module, and display the debug page corresponding to the page parameters. The debug page includes at least one of the target page, the page attributes corresponding to the target page, and the page control tree corresponding to the page control.
[0114] In some feasible implementations, after extracting the page parameters from the page layout file and displaying the debug page corresponding to the page parameters, the method further includes:
[0115] In response to a selection operation on any page control in the debugging page, the front-end display module displays the target control properties corresponding to the selected target page control in the debugging page.
[0116] In some feasible implementations, the information acquisition module includes at least an instruction receiving module and an information generation module. The step of obtaining page parameters corresponding to the target page in response to a debugging instruction for the target page includes:
[0117] If the instruction receiving module receives debugging information for the target page, it generates debugging instructions for the target page based on the debugging information.
[0118] The information generation module responds to the debugging command by reading the memory information in each control tree corresponding to the target page.
[0119] The information generation module extracts the page layout, control attributes of each control, and page state of the target page from the memory information, and combines at least one of the page layout information, control attributes, and page state to form the page parameters corresponding to the target page.
[0120] In some feasible implementations, the step of generating debugging instructions for the target page based on the debugging information when the instruction receiving module receives debugging information for the target page includes:
[0121] The instruction receiving module receives debugging information for the target page.
[0122] If the debugging information is command-line information, then the instruction receiving module generates debugging instructions for the target page based on the broadcast information in the command-line information;
[0123] If the debugging information is a key-triggered event, then the instruction receiving module generates debugging information for the target page based on the key-triggered event.
[0124] In some feasible implementations, the page layout information includes at least the control type, ID information, position information, and size information corresponding to each control; the control attributes include at least the control state and control style; the page state is either a loading state or a display state; and the step of assembling at least one of the page layout information, the control attributes, and the page state into page parameters corresponding to the target page includes:
[0125] Convert at least one of the control type, the ID information, the position information, and the size information into a first string of the target data format;
[0126] Convert at least one of the control type, the control state, the size information, and the control style into a second string in the target data format;
[0127] Convert either the loading state or the display state into a third string of the target data format;
[0128] The first string, the second string, and the third string are merged into the target string corresponding to the target page.
[0129] In some feasible implementations, converting the page parameters into a page layout file includes:
[0130] In response to the log output for the page parameters, target logs that meet predetermined conditions are extracted, the target logs are parsed to obtain the page parameters, and the predetermined conditions are at least conditions associated with page loading, interface interaction and preset page events.
[0131] The page parameters are output to a file in a specified format to obtain a page layout file corresponding to the page parameters.
[0132] In some feasible implementations, the information transmission module further includes a file processing module, which includes an access interface corresponding to the front-end display module. After obtaining the page layout file corresponding to the page parameters, the method further includes:
[0133] The page layout file is obtained through the file processing module, the page layout file is parsed to obtain the page parameters, and the page parameters are sent to the front-end display module through the access interface.
[0134] In this embodiment of the invention, a debugging system can be used to debug the corresponding page. The debugging system may include an information acquisition module, an information transmission module, and a front-end display module. During the debugging of the target page, the information acquisition module can respond to the debugging command for the target page and obtain the page parameters corresponding to the target page. The target page includes at least several page controls. Then, the information transmission module converts the page parameters into a page layout file. Then, the front-end display module extracts the page parameters from the page layout file and displays the debugging page corresponding to the page parameters. The debugging page includes at least the target page, the page attributes corresponding to the target page, and the page control tree corresponding to the page controls. Thus, during the page debugging process, based on the acquired page parameters, the front-end display module can display the corresponding page attributes, page control tree, and other information while displaying the target page. This improves the intuitive display of interface information and the ability to grasp details, making interface design and optimization more accurate, effectively improving the efficiency of page development and the convenience of page maintenance.
[0135] It should be noted that, for the sake of simplicity, the method embodiments are all described as a series of actions. However, those skilled in the art should understand that the embodiments of the present invention are not limited to the described order of actions, because according to the embodiments of the present invention, some steps can be performed in other orders or simultaneously. Furthermore, those skilled in the art should also understand that the embodiments described in the specification are preferred embodiments, and the actions involved are not necessarily essential to the embodiments of the present invention.
[0136] As the method embodiments are basically similar to the system embodiments, the description is relatively simple, and relevant parts can be found in the description of the system embodiments.
[0137] In addition, this invention also provides an electronic device, including: a processor, a memory, and a computer program stored in the memory and executable on the processor. When the computer program is executed by the processor, it implements the various processes of the above-described page debugging method embodiments and achieves the same technical effect. To avoid repetition, it will not be described again here.
[0138] This invention also provides a computer-readable storage medium storing a computer program. When the computer program is executed by a processor, it implements the various processes of the debugging method embodiment described above, achieving the same technical effect. To avoid repetition, it will not be described again here. The computer-readable storage medium may be a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.
[0139] Figure 5 A schematic diagram of the hardware structure of an electronic device for implementing various embodiments of the present invention.
[0140] The electronic device 500 includes, but is not limited to, components such as: a radio frequency unit 501, a network unit 502, an audio output unit 503, an input unit 504, a sensor 505, a display unit 506, a user input unit 507, an interface unit 508, a memory 509, a processor 510, and a power supply 511. Those skilled in the art will understand that the electronic device structure involved in the embodiments of the present invention does not constitute a limitation on the electronic device. An electronic device may include more or fewer components than illustrated, or combine certain components, or have different component arrangements. In the embodiments of the present invention, the electronic device includes, but is not limited to, mobile phones, tablet computers, laptop computers, PDAs, in-vehicle terminals, wearable devices, and pedometers.
[0141] It should be understood that, in this embodiment of the invention, the radio frequency unit 501 can be used for receiving and transmitting signals during information transmission or calls. Specifically, it receives downlink data from the base station and processes it with the processor 510; additionally, it transmits uplink data to the base station. Typically, the radio frequency unit 501 includes, but is not limited to, an antenna, at least one amplifier, a transceiver, a coupler, a low-noise amplifier, a duplexer, etc. Furthermore, the radio frequency unit 501 can also communicate with networks and other devices through a wireless communication system.
[0142] The electronic device provides users with wireless broadband internet access through the network unit 502, such as helping users send and receive emails, browse web pages, and access streaming media.
[0143] The audio output unit 503 can convert audio data received by the radio frequency unit 501 or the network unit 502 or stored in the memory 509 into audio signals and output them as sound. Furthermore, the audio output unit 503 can also provide audio output related to specific functions performed by the electronic device 500 (e.g., call signal reception sound, message reception sound, etc.). The audio output unit 503 includes a speaker, a buzzer, and a receiver, etc.
[0144] Input unit 504 is used to receive audio or video signals. Input unit 504 may include a graphics processing unit (GPU) 5041 and a microphone 5042. The GPU 5041 processes image data of still images or videos acquired by an image capture device (such as a camera) in video capture mode or image capture mode. The processed image frames can be displayed on display unit 506. The image frames processed by GPU 5041 can be stored in memory 509 (or other storage medium) or transmitted via radio frequency unit 501 or network unit 502. Microphone 5042 can receive sound and process such sound into audio data. The processed audio data can be converted into a format that can be transmitted to a mobile communication base station via radio frequency unit 501 in telephone call mode.
[0145] The electronic device 500 also includes at least one sensor 505, such as a light sensor, a motion sensor, and other sensors. Specifically, the light sensor includes an ambient light sensor and a proximity sensor. The ambient light sensor can adjust the brightness of the display panel 5061 according to the ambient light level, and the proximity sensor can turn off the display panel 5061 and / or backlight when the electronic device 500 is moved to the ear. As a type of motion sensor, an accelerometer sensor can detect the magnitude of acceleration in various directions (generally three axes). When stationary, it can detect the magnitude and direction of gravity and can be used to identify the posture of the electronic device (such as landscape / portrait switching, related games, magnetometer posture calibration), vibration recognition related functions (such as pedometer, tapping), etc. The sensor 505 may also include a fingerprint sensor, pressure sensor, iris sensor, molecular sensor, gyroscope, barometer, hygrometer, thermometer, infrared sensor, etc., which will not be described in detail here.
[0146] The display unit 506 is used to display information input by the user or information provided to the user. The display unit 506 may include a display panel 5061, which may be configured in the form of a liquid crystal display (LCD), an organic light-emitting diode (OLED), or the like.
[0147] User input unit 507 can be used to receive input numerical or character information, and to generate key signal inputs related to user settings and function control of electronic devices. Specifically, user input unit 507 includes a touch panel 5071 and other input devices 5072. Touch panel 5071, also known as a touch screen, can collect touch operations performed by the user on or near it (such as operations performed by the user using a finger, stylus, or any suitable object or accessory on or near touch panel 5071). Touch panel 5071 may include two parts: a touch detection device and a touch controller. The touch detection device detects the user's touch position and the signal generated by the touch operation, and transmits the signal to the touch controller; the touch controller receives touch information from the touch detection device, converts it into touch point coordinates, and sends it to the processor 510, which receives and executes commands from the processor 510. In addition, touch panel 5071 can be implemented using various types such as resistive, capacitive, infrared, and surface acoustic wave. Besides touch panel 5071, user input unit 507 may also include other input devices 5072. Specifically, other input devices 5072 may include, but are not limited to, physical keyboards, function keys (such as volume control buttons, power buttons, etc.), trackballs, mice, joysticks, etc., which will not be described in detail here.
[0148] Furthermore, the touch panel 5071 can cover the display panel 5061. When the touch panel 5071 detects a touch operation on or near it, it transmits the information to the processor 510 to determine the type of touch event. Subsequently, the processor 510 provides corresponding visual output on the display panel 5061 according to the type of touch event. It is understood that in one embodiment, the touch panel 5071 and the display panel 5061 are implemented as two independent components to realize the input and output functions of the electronic device. However, in some embodiments, the touch panel 5071 and the display panel 5061 can be integrated to realize the input and output functions of the electronic device. The specific implementation is not limited here.
[0149] Interface unit 508 serves as an interface for connecting external devices to electronic device 500. For example, external devices may include a wired or wireless headphone port, an external power supply (or battery charger) port, a wired or wireless data port, a memory card port, a port for connecting a device with an identification unit, an audio input / output (I / O) port, a video I / O port, a headphone port, and so on. Interface unit 508 can be used to receive input from external devices (e.g., data, power, etc.) and transmit the received input to one or more components within electronic device 500, or it can be used to transmit data between electronic device 500 and external devices.
[0150] The memory 509 can be used to store software programs and various data. The memory 509 may primarily include a program storage area and a data storage area. The program storage area may store the operating system, applications required for at least one function (such as sound playback, image playback, etc.), etc.; the data storage area may store data created based on the use of the mobile phone (such as audio data, phonebook, etc.). Furthermore, the memory 509 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, or other volatile solid-state storage device.
[0151] The processor 510 is the control center of the electronic device. It connects various parts of the electronic device via various interfaces and lines. By running or executing software programs and / or units stored in the memory 509, and by calling data stored in the memory 509, it performs various functions and processes data, thereby providing overall monitoring of the electronic device. The processor 510 may include one or more processing units; preferably, the processor 510 may integrate an application processor and a modem processor. The application processor mainly handles the operating system, user interface, and applications, while the modem processor mainly handles wireless communication. It is understood that the modem processor may not be integrated into the processor 510.
[0152] The electronic device 500 may also include a power supply 511 (such as a battery) for supplying power to various components. Preferably, the power supply 511 can be logically connected to the processor 510 through a power management system, thereby enabling functions such as managing charging, discharging, and power consumption through the power management system.
[0153] In addition, the electronic device 500 includes some functional units not shown, which will not be described in detail here.
[0154] It should be noted that, in this document, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.
[0155] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) and includes several instructions to cause a terminal (which may be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in the various embodiments of the present invention.
[0156] The embodiments of the present invention have been described above with reference to the accompanying drawings. However, the present invention is not limited to the specific embodiments described above. The specific embodiments described above are merely illustrative and not restrictive. Those skilled in the art can make many other forms under the guidance of the present invention without departing from the spirit and scope of the claims, and all of these forms are within the protection scope of the present invention.
[0157] Those skilled in the art will recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed in this invention can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementations should not be considered beyond the scope of this invention.
[0158] Those skilled in the art will understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.
[0159] In the embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative. For instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.
[0160] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.
[0161] In addition, the functional units in the various embodiments of the present invention can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.
[0162] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this invention, essentially, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, ROM, RAM, magnetic disks, or optical disks.
[0163] The above description is merely a specific embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the technical scope disclosed in the present invention should be included within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.
Claims
1. A page debugging system, characterized in that, The debugging system includes at least an information acquisition module, an information transmission module, and a front-end display module; wherein... The information acquisition module is used to respond to the debugging command for the target page and obtain the page parameters corresponding to the target page. The page parameters include at least the data or configuration information passed to the page during page loading or interaction. The target page includes at least a number of page controls. The information transmission module is used to convert the page parameters into a page layout file; The front-end display module is used to extract the page parameters from the page layout file and display a debug page corresponding to the page parameters. The debug page includes at least one of the target page, the page attributes corresponding to the target page, and the page control tree corresponding to the page control.
2. The debugging system according to claim 1, characterized in that, The front-end display module is also used to respond to a selection operation on any page control in the debugging page by displaying the target control properties corresponding to the selected target page control in the debugging page.
3. The debugging system according to claim 1, characterized in that, The information acquisition module includes at least an instruction receiving module and an information generation module; wherein... The instruction receiving module is configured to generate a debugging instruction for the target page based on the debugging information received for the target page. The information generation module is used to respond to the debugging command, read the memory information in each control tree corresponding to the target page, extract the page layout of the target page, the control attributes of each control and the page state from the memory information, and combine at least one of the page layout information, the control attributes and the page state to form the page parameters corresponding to the target page.
4. The debugging system according to claim 3, characterized in that, The instruction receiving module is specifically used to receive debugging information for the target page. If the debugging information is command line information, it generates debugging instructions for the target page based on the broadcast information in the command line information. If the debugging information is a key trigger event, it generates debugging information for the target page based on the key trigger event.
5. The debugging system according to claim 3, characterized in that, The page layout information includes at least the control type, ID information, position information, and size information corresponding to each control; the control attributes include at least the control state and control style; and the page state is either a loading state or a display state. The information generation module is specifically used to convert at least one of the control type, the ID information, the location information, and the size information into a first string of the target data format, and to convert at least one of the control type, the control state, the size information, and the control style into a second string of the target data format, and to convert one of the loading state or the display state into a third string of the target data format, and to merge the first string, the second string, and the third string into the target string corresponding to the target page.
6. The debugging system according to claim 1, 3, 4, or 5, characterized in that, The information transmission module includes at least an information capture module; wherein... The information capture module is used to extract target logs that meet predetermined conditions in response to the log output for the page parameters, parse the target logs to obtain the page parameters, and the predetermined conditions are at least conditions associated with page loading, interface interaction and preset page events. The page parameters are output to a file in a specified format to obtain a page layout file corresponding to the page parameters.
7. The debugging system according to claim 6, characterized in that, The information transmission module further includes a file processing module, which includes an access interface corresponding to the front-end display module; wherein... The file processing module is used to obtain the page layout file, parse the page layout file to obtain the page parameters, and send the page parameters to the front-end display module through the access interface.
8. A method for debugging a webpage, characterized in that, The method is applied to a debugging system, which includes at least an information acquisition module, an information transmission module, and a front-end display module, and includes: The information acquisition module responds to the debugging command for the target page and obtains the page parameters corresponding to the target page. The page parameters include at least the data or configuration information passed to the page during page loading or interaction. The target page includes at least a number of page controls. The information transmission module converts the page parameters into a page layout file. The front-end display module extracts the page parameters from the page layout file and displays a debug page corresponding to the page parameters. The debug page includes at least one of the following: the target page, the page attributes corresponding to the target page, and the page control tree corresponding to the page control.
9. An electronic device, characterized in that, It includes a processor, a communication interface, a memory, and a communication bus, wherein the processor, the communication interface, and the memory communicate with each other through the communication bus; The memory is used to store computer programs; When the processor executes a program stored in the memory, it implements the method as described in claim 8.
10. A computer-readable storage medium having instructions stored thereon that, when executed by one or more processors, cause the processors to perform the method of claim 8.