Variable debugging method and device
By building a component tree and marking associated components, the problem of difficult to clarify the relationship between state variables and component in UI development is solved, and debugging efficiency is improved.
Patent Information
- Application Number
- CN202310820365.8
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2023-07-05
- Publication Date
- 2025-01-10
AI Technical Summary
During the UI development process, it is difficult for users to quickly clarify the relationship between state variables and components, and the existing methods are cumbersome and inefficient.
By building a component tree, state variables and associated components are displayed in a tree structure, key-value pairs are used to store the association relationship, and associated components are marked through colors, fonts, etc., to clearly present the association relationship between state variables and components.
Improves user debugging efficiency, enables users to quickly understand the relationship between state variables and components, and simplifies the debugging process.
Smart Images
Figure CN119292902A_ABST
Abstract
Description
Technical Field
[0001] The embodiments of the present application relate to the field of computer technology, and in particular to a variable debugging method and device. Background Art
[0002] With the continuous promotion of the Hongmeng open source system ecosystem, the number of application developments has increased and become increasingly large, and state variables often appear on various pages of applications. In the process of user interface (UI) development, if users want to understand the components affected by a certain state variable, they can only use development tools to record the IDs of each component and the associated state variable, and then print the association between the combination and the state variable by printing logs. Only in this way can users observe the changes in state variables and components. This method is relatively cumbersome to debug and cannot quickly clarify the association between state variables and components. Summary of the invention
[0003] The embodiments of the present application provide a variable debugging method and device, which enable users to quickly understand the relationship between state variables and components by displaying each state variable and components associated with the state variables in the form of a component tree, thereby improving the user's debugging efficiency.
[0004] In a first aspect, an embodiment of the present application provides a variable debugging method, comprising:
[0005] After detecting that the debugging mode is turned on, obtain each state variable in the code to be debugged and each component containing the state variable;
[0006] Determine the components associated with each state variable based on the running logic of the code to be debugged;
[0007] Obtaining a first state variable contained in a selected area in the code to be debugged;
[0008] The first state variable and a component associated with the first state variable are displayed in a debugging area.
[0009] In one embodiment, after determining the components associated with each state variable based on the running logic of the code to be debugged, the method further includes:
[0010] Get the state variables and component identification information;
[0011] The associated state variables and component identification information are stored in the form of key-value pairs.
[0012] In one embodiment, storing the associated state variables and component identification information in the form of key-value pairs includes:
[0013] For any state variable, the components associated with the state variable are divided into root components and common components;
[0014] The mapping Map function is called to store the identification information of the root component as the key Key, and to store the identification information of the state variable and the identification information of the common component as the value Value.
[0015] In one embodiment, before displaying the first state variable and the component associated with the first state variable in the debugging area, the method further includes:
[0016] Retrieving a key-value pair including the identification information of the first state variable according to the identification information of the first state variable;
[0017] The component associated with the first state variable is determined according to the identification information contained in the retrieved key-value pair.
[0018] In one embodiment, displaying the first state variable and the component associated with the first state variable in the debugging area includes:
[0019] Building a component tree based on the first state variable and the components associated with the first state variable, wherein the component tree includes a root node and leaf nodes, the root node is used to display the root component in the components associated with the first state variable, and the leaf node is used to display the first state variable and the common components associated with the first state variable;
[0020] The component tree is displayed in the debugging area.
[0021] In one embodiment, the component tree further includes a non-associated component that has no association relationship with the first state variable;
[0022] The step of displaying the first state variable and the component associated with the first state variable in the debugging area includes:
[0023] Marking nodes in the component tree for displaying the first state variable and components associated with the first state variable, wherein the marked nodes can be distinguished from unmarked nodes;
[0024] The marked component tree is displayed in the debugging area.
[0025] In one embodiment, the manner of marking the component tree node includes one or more of the following combinations:
[0026] Modify the color of the node for displaying the first state variable and the component associated with the first state variable in the component tree;
[0027] Adjusting a first state variable in a component tree and a font model of a component associated with the first state variable;
[0028] Marking information is added next to a node for displaying the first state variable and a component associated with the first state variable.
[0029] In an embodiment of the present application, by constructing a component tree, the user can clearly see the architectural relationship between the components. By marking the first state variable and the component associated with the first state variable, the association relationship between the state variable and the component can be presented to the user in a visual image, thereby improving the user's debugging efficiency.
[0030] In one embodiment, the method further comprises:
[0031] Acquire a second state variable in the code to be debugged that is affected by the first state variable;
[0032] The second state variable and a component associated with the second state variable are displayed in the debugging area.
[0033] In a second aspect, an embodiment of the present application provides a variable debugging device, including:
[0034] The acquisition module is used to acquire each state variable in the code to be debugged and each component containing the state variable after detecting that the debug mode is turned on;
[0035] A determination module, used to determine components associated with each state variable based on the running logic of the code to be debugged;
[0036] The acquisition module is further used to acquire a first state variable contained in a selected area in the code to be debugged;
[0037] The display module is used to display the first state variable and the components associated with the first state variable in the debugging area.
[0038] In a third aspect, an embodiment of the present application provides an electronic device, including:
[0039] at least one processor; and
[0040] at least one memory in communication with the processor, wherein:
[0041] The memory stores program instructions, and the processor calls the program instructions to execute the method provided by the first aspect.
[0042] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, wherein the computer-readable storage medium includes a stored program, wherein the program implements the method provided in the first aspect when executed by a processor.
[0043] In the embodiment of the present application, after detecting that the debugging mode is turned on, each state variable in the code to be debugged and each component containing the state variable are obtained, and then the components associated with each state variable are determined based on the running logic of the code to be debugged, and the first state variable contained in the selected area of the code to be debugged is obtained, and the first state variable and the components associated with the first state variable are displayed in the debugging area. By constructing a component tree of each state variable and the associated components, the user can quickly understand the association between the state variable and the component, thereby improving the debugging efficiency. BRIEF DESCRIPTION OF THE DRAWINGS
[0044] Figure 1 A flow chart of a variable debugging method provided in an embodiment of the present application;
[0045] Figure 2 A schematic diagram of another variable debugging method provided in an embodiment of the present application;
[0046] Figure 3 A flowchart of another variable debugging method provided in an embodiment of the present application;
[0047] Figure 4 A schematic diagram of another variable debugging method provided in an embodiment of the present application;
[0048] Figure 5 A schematic diagram of the structure of a variable debugging device provided in an embodiment of the present application;
[0049] Figure 6 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION
[0050] In order to better understand the technical solution of this specification, the embodiments of the present application are described in detail below with reference to the accompanying drawings.
[0051] It should be clear that the described embodiments are only part of the embodiments of this specification, not all of the embodiments. Based on the embodiments in this specification, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this specification.
[0052] The terms used in the embodiments of the present application are only for the purpose of describing specific embodiments, and are not intended to limit this specification. The singular forms of "a", "said" and "the" used in the embodiments of the present application and the appended claims are also intended to include plural forms, unless the context clearly indicates other meanings.
[0053] In view of the problem that the user cannot quickly confirm the association between state variables and components when debugging the code during UI development, an embodiment of the present application provides a variable debugging method. By displaying a component tree built based on state variables and components, the user can quickly and clearly understand the association between each state variable and component, effectively improving the efficiency of code debugging. In the embodiment of the present application, the state variable is a data type unique to the declarative UI, and the component is mainly used in UI design, and may specifically include: button components, drop-down menu components, radio button components, and input box components. Changing the state variable can cause the component associated with the state variable to refresh and render. Taking the drop-down menu component as an example, after the user clicks the drop-down menu switch, the electronic device can refresh the page and display the menu. The action of the user clicking the drop-down menu switch can change the internal state variable, and the electronic device refreshes the page to display the page associated with the changed state variable.
[0054] Figure 1 The following is a flow chart of a variable debugging method provided in an embodiment of the present application. The method can be applied to electronic devices capable of software development, such as personal computers. Figure 1 As shown, the method may include:
[0055] Step 101, after detecting that the debugging mode is turned on, obtain each state variable in the code to be debugged and each component containing the state variable.
[0056] When users develop UI, they can write code through certain development tools loaded on electronic devices, such as DevEco Studio. Development tools usually include a debug mode, and users can start the debug mode by selecting the debug mode switch. After turning on the debug mode, users can manually debug the written code to detect problems that may occur or have occurred. After the electronic device detects that the debug mode is turned on, it will obtain each state variable in the code to be debugged and each component containing the state variable.
[0057] Step 102: Determine the components associated with each state variable based on the running logic of the code to be debugged.
[0058] When a state variable changes, the affected component is the component associated with the state variable. In some cases, the component that directly contains the state variable may be the component associated with the state variable. If the component is contained by another component, the component that contains the component may also be associated with the state variable. For example, component A contains component B, and component B contains state variable C, then both component A and component B may be components associated with state variable C.
[0059] After the electronic device determines the association between the state variable and the component, the association can be stored in the form of a key-value pair. Specifically, the electronic device obtains the identification information of the state variable and the component, and stores the identification information of the state variable and the component with the association in the form of a key-value pair. Among them, the identification information is used to distinguish the information of different state variables and components, and the identification information of each state variable or component is different and unique. In actual storage, for any state variable, the electronic device can divide the components associated with the state variable into root components and ordinary components, and then call the mapping Map function to store the identification information of the root component as the key Key, and the identification information of the state variable and the identification information of the ordinary component as the value Value. Among them, the root component has the largest range, and there may be other ordinary components inside the root component. Taking the above-mentioned component A and component B as an example, component B is an ordinary component. If component A is located inside other components, then component A is the root component.
[0060] Step 103: Obtain a first state variable contained in a selected region in the code to be debugged.
[0061] The user can manually select an area for debugging. Usually, the user makes the selection in units of behavior. After the electronic device detects the selected area in the code to be debugged, it obtains the state variable (i.e., the first state variable) contained in the area. The electronic device can retrieve the component associated with the first state variable in the above key-value pair based on the identification information of the first state variable. Specifically, the corresponding Key can be determined based on the identification information of the state variable, that is, the identification information of the root component associated with the first state variable, and then the corresponding Value can be determined based on the Key, that is, the identification information of the common component associated with the first state variable, so as to determine all components associated with the first state variable.
[0062] Step 104: Display the first state variable and the component associated with the first state variable in the debugging area.
[0063] After the electronic device retrieves all components associated with the first state variable, it displays the retrieved components and the first state variable in the debugging area, so that the association between the first state variable and each component can be clearly seen in the debugging area. After the debugging of the currently selected area is completed, the user can manually select other areas for debugging. Every time the electronic device detects that a certain area is selected, it will execute the above steps of obtaining the state variables in the area and displaying the state variables and the components associated with the state variables.
[0064] In one embodiment, when displaying a first state variable and a component associated with the first state variable, the electronic device first constructs a component tree based on the first state variable and the component associated with the first state variable, wherein the component tree includes a root node and a leaf node, the root node is used to display the root component in the component associated with the first state variable, the leaf node is used to display the first state variable and the common component associated with the first state variable, and then displays the component tree in the debugging area. By constructing the component tree, the electronic device can clearly display the association relationship between the state variable and the component and the association relationship between different components.
[0065] In one embodiment, the component tree constructed by the electronic device also includes non-associated components that have no association relationship with the first state variable. When the electronic device displays the component tree in the debugging area, the nodes of the first state variable and the components associated with the first state variable are marked dirty (i.e., marked as dirty nodes), wherein the marked dirty nodes can be distinguished from unmarked nodes. Optionally, the electronic device can mark by color, such as modifying the color of the node used to display the first state variable and the components associated with the first state variable in the component tree; the electronic device can also mark by font size, such as increasing the font size of the first state variable and the components associated with the first state variable in the component tree; the electronic device can also mark by adding other marking information, such as adding an underline under the node used to display the first state variable and the components associated with the first state variable. The component tree can clearly display the architectural relationship between the components and the association relationship with the state variables.
[0066] In the embodiment of the present application, the electronic device can enable the user to quickly understand the association relationship between the state variables and the components by constructing a component tree of each state variable and the associated components, thereby improving debugging efficiency.
[0067] In a specific embodiment, the interface when the user develops the UI can be as follows: Figure 2As shown, the user uses the development tool 200 to develop UI, and the development tool 200 includes a code module 210, a debugging module 220 and a visualization module 230. The code module 210 is for the user to write code. When the user wants to debug the code in the code module 210, the debugger switch located at the upper right of the development tool 200 can be clicked to enter the debugging mode, and the debugging module 220 displays the operation buttons and information related to the debugging mode. The visualization module 230 will build a component tree and display the component tree through three steps: component association, step search and component marking. Specifically, after entering the debugging mode, the visualization module 230 determines and stores the association relationship between the state variables and components in the code module 210 through component association. For the area selected by the user to be debugged, the visualization module 230 finds the state variables in the area through step search, and then searches for the components associated with the state variables. After that, the visualization module builds a component tree, and marks the state variables in the area selected by the user and the components associated with the state variables in the component tree through component marking.
[0068] Figure 3 A flowchart of another variable debugging method provided in an embodiment of the present application. Figure 3 As shown, the method may include:
[0069] Step 301, associate components and state variables.
[0070] After detecting that the user turns on breakpoint debugging, the electronic device can associate the state variables in the code with components according to the running logic of the code. Different state variables may have their own corresponding components.
[0071] Step 302, step search state variables.
[0072] The electronic device determines the state variable of the area selected by the user through step search.
[0073] Step 303: determine whether the state variable affects other state variables.
[0074] The electronic device determines whether the state variable of the area selected by the user will affect other state variables, and the affected state variables will also be screened out.
[0075] Step 304, find and mark related components.
[0076] The electronic device has determined the association between each state variable and a component in step 301. For the state variable in the user-selected area and other state variables affected by the state variable, the electronic device finds out the components associated therewith and marks them.
[0077] Step 305: Generate a current breakpoint component tree.
[0078] The electronic device displays the marked component tree, wherein the display of the component tree can be specifically as follows: Figure 4 As shown. The position indicated by arrow 401 is the line of code selected by the user for debugging. The electronic device obtains the state variable "Money" in the line of code and determines the component "Button" related to "Money". After building the component tree, the state variable "Money" and the component "Button" are marked. The "Flex" indicated by arrow 402, the "LinkChild" indicated by arrow 403, and the "Text" indicated by arrow 404 are all components. "Flex" is the root component, and the other components are ordinary components. All components are experienced in the component tree. Only the state variable "Money" in the line of code selected by the user and the component "Button" associated with "Money" are marked, and other components are not marked. By building the component tree, the user can clearly see the architectural relationship between the various components, and when the user wants to debug any state variable, he can quickly understand the location of the component associated with the state variable, which effectively improves the user's debugging efficiency.
[0079] In one embodiment, when a user defines a state variable, if the modifier is different, the state variable affects the component in different ways. For example, (1) state variables modified by @State and @Provide will affect the currently declared component and the passed-in subcomponents; (2) @Prop and @Consume, as state variable receivers, will affect the currently declared component and subcomponents; (3) @Link and @ObjectLink, as state variable receivers, will not only affect the currently declared component and subcomponents, but also affect the parent component that passes this variable upward; @LocalStorageProp and @StorageProp will also affect the components or pages that call these state variables on the basis of satisfying (2); @LocalStorageLink and @StorageLink will also affect the components or pages that call these state variables on the basis of satisfying (3). Figure 4 For example, the component "Flex" pointed to by arrow 402 is the parent component of the component "LinkChild" pointed to by arrow 403, and "LinkChild" is the child component of "Flex". Based on the different ways in which the state variables affect the components, the electronic device can select different marking methods for different ways of influence when marking, further helping users understand the relationship between the state variables and the components.
[0080] Figure 5 This is a schematic diagram of the structure of a variable debugging device provided in an embodiment of the present application. The device is deployed in an electronic device to implement the variable debugging method provided in an embodiment of the present application, such as Figure 5As shown, the device may include: an acquisition module 510 , a determination module 520 and a display module 530 .
[0081] The acquisition module 510 is used to acquire each state variable in the code to be debugged and each component including the state variable after detecting that the debugging mode is turned on.
[0082] The determination module 520 is used to determine the components associated with each state variable based on the running logic of the code to be debugged.
[0083] The acquisition module 510 is further used to acquire the first state variable contained in the selected area in the code to be debugged.
[0084] The display module 530 is used to display the first state variable and the component associated with the first state variable in the debugging area.
[0085] The specific execution steps of each of the above modules can refer to the description of the method flowchart.
[0086] Figure 6 The electronic device 600 may include a processor 610, an internal memory 621, a power management module 631, a battery 632, and the like.
[0087] It is to be understood that the structure illustrated in the embodiment of the present application does not constitute a specific limitation on the electronic device 600. In other embodiments of the present application, the electronic device 600 may include more or fewer components than shown in the figure, or combine some components, or split some components, or arrange the components differently. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.
[0088] The processor 610 may include one or more processing units, for example, the processor 610 may include an application processor (AP), a modem processor, etc. Different processing units may be independent devices or integrated into one or more processors.
[0089] The controller can generate operation control signals according to the instruction operation code and timing signal to complete the control of instruction fetching and execution.
[0090] The processor 610 may also be provided with a memory for storing instructions and data. In some embodiments, the memory in the processor 610 is a cache memory. The memory may store instructions or data that the processor 610 has just used or cyclically used. If the processor 610 needs to use the instruction or data again, it may be directly called from the memory. This avoids repeated access, reduces the waiting time of the processor 610, and thus improves the efficiency of the system.
[0091] In some embodiments, the processor 610 may include one or more interfaces. The interface may include an inter-integrated circuit (I2C) interface, which is a bidirectional synchronous serial bus including a serial data line (SDA) and a serial clock line (SCL).
[0092] It is understandable that the interface connection relationship between the modules illustrated in the embodiment of the present application is only a schematic illustration and does not constitute a structural limitation on the electronic device 600. In other embodiments of the present application, the electronic device 600 may also adopt different interface connection methods in the above embodiments, or a combination of multiple interface connection methods.
[0093] The power management module 631 is used to connect the battery 632 and the processor 610. The power management module 631 receives input from the battery 632 and supplies power to the processor 610 and the internal memory 621.
[0094] The internal memory 621 can be used to store computer executable program codes, which include instructions. The internal memory 621 may include a program storage area and a data storage area. Among them, the program storage area may store an operating system, an application required for at least one function, etc. The data storage area may store data created during the use of the electronic device 600, etc. In addition, the internal memory 621 may include a high-speed random access memory and may also include a non-volatile memory. The processor 610 executes various functional applications and data processing of the electronic device 600 by running instructions stored in the internal memory 621 and / or instructions stored in a memory provided in the processor.
[0095] The processor 610 can execute various functional applications and data processing by running the programs stored in the internal memory 621, such as implementing the variable debugging method provided in the embodiment of the present application.
[0096] The embodiment of the present application also provides a non-temporary computer-readable storage medium, which stores computer instructions, and the computer instructions enable the computer to execute the variable debugging method provided by the embodiment of the present application.
[0097] The above-mentioned non-temporary computer-readable storage medium can adopt any combination of one or more computer-readable media. The computer-readable medium can be a computer-readable signal medium or a computer-readable storage medium. The computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples (non-exhaustive list) of computer-readable storage media include: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (Read Only Memory; hereinafter referred to as: ROM), an erasable programmable read-only memory (ErasableProgrammable Read Only Memory; hereinafter referred to as: EPROM) or flash memory, optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In this document, a computer-readable storage medium can be any tangible medium containing or storing a program, which can be used by an instruction execution system, device or device or used in combination with it.
[0098] Computer-readable signal media may include a data signal propagated in baseband or as part of a carrier wave, which carries a computer-readable program code. Such propagated data signals may take a variety of forms, including, but not limited to, electromagnetic signals, optical signals, or any suitable combination of the above. Computer-readable signal media may also be any computer-readable medium other than a computer-readable storage medium, which may send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device.
[0099] Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.
[0100] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "example", "specific example", or "some examples" etc. means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present application. In this specification, the schematic representations of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or more embodiments or examples in a suitable manner. In addition, those skilled in the art may combine and combine the different embodiments or examples described in this specification and the features of the different embodiments or examples, without contradiction.
[0101] In addition, the terms "first" and "second" are used for descriptive purposes only and should not be understood as indicating or implying relative importance or implicitly indicating the number of the indicated technical features. Therefore, the features defined as "first" and "second" may explicitly or implicitly include at least one of the features. In the description of this application, the meaning of "plurality" is at least two, such as two, three, etc., unless otherwise clearly and specifically defined.
[0102] Any process or method description in a flowchart or otherwise described herein may be understood to represent a module, fragment or portion of code comprising one or more executable instructions for implementing the steps of a custom logical function or process, and the scope of the preferred embodiments of the present application includes alternative implementations in which functions may not be performed in the order shown or discussed, including performing functions in a substantially simultaneous manner or in the reverse order depending on the functions involved, which should be understood by technicians in the technical field to which the embodiments of the present application belong.
Claims
1. A variable debugging method, characterized in that: include: After detecting that the debugging mode is turned on, obtain each state variable in the code to be debugged and each component containing the state variable; Determine the components associated with each state variable based on the running logic of the code to be debugged; Obtaining a first state variable contained in a selected area in the code to be debugged; The first state variable and a component associated with the first state variable are displayed in a debugging area.
2. The method according to claim 1, characterized in that After determining the components associated with each state variable based on the running logic of the code to be debugged, the method further includes: Get the state variables and component identification information; The associated state variables and component identification information are stored in the form of key-value pairs.
3. The method according to claim 2, characterized in that The storing of the associated state variables and component identification information in the form of key-value pairs includes: For any state variable, the components associated with the state variable are divided into root components and common components; The mapping Map function is called to store the identification information of the root component as the key Key, and to store the identification information of the state variable and the identification information of the common component as the value Value.
4. The method according to claim 3, characterized in that Before displaying the first state variable and the component associated with the first state variable in the debugging area, the method further includes: Retrieving a key-value pair including the identification information of the first state variable according to the identification information of the first state variable; The component associated with the first state variable is determined according to the identification information contained in the retrieved key-value pair.
5. The method according to claim 1, characterized in that The step of displaying the first state variable and the component associated with the first state variable in the debugging area includes: Building a component tree based on the first state variable and the components associated with the first state variable, wherein the component tree includes a root node and leaf nodes, the root node is used to display the root component in the components associated with the first state variable, and the leaf node is used to display the first state variable and the common components associated with the first state variable; The component tree is displayed in the debugging area.
6. The method according to claim 5, characterized in that The component tree also includes non-associated components that have no association relationship with the first state variable; The step of displaying the first state variable and the component associated with the first state variable in the debugging area includes: Marking nodes in the component tree for displaying the first state variable and components associated with the first state variable, wherein the marked nodes can be distinguished from unmarked nodes; The marked component tree is displayed in the debugging area.
7. The method according to claim 6, characterized in that The manner of marking the component tree node includes one or more of the following combinations: Modify the color of the node for displaying the first state variable and the component associated with the first state variable in the component tree; Adjusting a first state variable in a component tree and a font model of a component associated with the first state variable; Marking information is added next to a node for displaying the first state variable and a component associated with the first state variable.
8. The method according to claim 1, characterized in that The method further comprises: Acquire a second state variable in the code to be debugged that is affected by the first state variable; The second state variable and a component associated with the second state variable are displayed in the debugging area.
9. A variable debugging device, characterized in that: include: The acquisition module is used to acquire each state variable in the code to be debugged and each component containing the state variable after detecting that the debug mode is turned on; A determination module, used to determine components associated with each state variable based on the running logic of the code to be debugged; The acquisition module is further used to acquire a first state variable contained in a selected area in the code to be debugged; The display module is used to display the first state variable and the components associated with the first state variable in the debugging area.
10. An electronic device, characterized in that: include: at least one processor; as well as at least one memory in communication with the processor, wherein: The memory stores program instructions, and the processor calls the program instructions to execute the method according to any one of claims 1 to 8.
11. A computer-readable storage medium, characterized in that: The computer-readable storage medium includes a stored program, wherein the program implements the method according to any one of claims 1 to 8 when executed by a processor.