CN115729823A

CN115729823A - Web assembly debugging method with code automatic positioning function and application thereof

Info

Publication number: CN115729823A
Application number: CN202211482350.7A
Authority: CN
Inventors: 刘仿; 牛宇鹏
Original assignee: CCI China Co Ltd
Current assignee: CCI China Co Ltd
Priority date: 2022-11-24
Filing date: 2022-11-24
Publication date: 2023-03-03

Abstract

The application provides a web component debugging method with a code automatic positioning function and application thereof, and the method comprises the following steps: s00, receiving an external import code and temporarily storing the external import code; s10, calling the stored external import codes for online editing and updating the stored external import codes in real time; s20, packaging the codes to be packaged, and performing operation and display tests; s30, monitoring a click event in the test process; s40, searching the nearest element with the file path attribute based on the code line attribute to locate the code line number of the source dom element; and S50, forming a jump instruction by the file path and the code line number of the source dom element corresponding to the click event, calling an external import code before packaging according to the jump instruction, and displaying the corresponding code line in a highlighted mode. The method and the device have the advantages of high debugging efficiency and good development experience.

Description

Web assembly debugging method with code automatic positioning function and application thereof

Technical Field

The application relates to the field of online real-time debugging of web components, in particular to a web component debugging method with a code automatic positioning function and application thereof.

Background

With the continuous development of web technologies towards componentization, a web component library becomes a necessary infrastructure of a large-scale internet company, and the component library generally comprises a component real-time debugging module, so that the component real-time debugging module is supported to debug component application codes and simultaneously display the latest effect in real time, namely what is obtained. When debugging a component, existing online real-time debugging tools cannot directly locate a specific line of code through a component presentation viewport. In order to locate the implementation code of a certain part of the component, it is necessary to search the source code according to the characteristics such as the component attribute, which is cumbersome.

Therefore, an online real-time debugging tool for a web component with a code automatic positioning function is needed, which can support that after clicking a component to display a view port, a corresponding code is automatically positioned, so that the debugging efficiency of the component is improved, and the development experience is optimized.

Disclosure of Invention

The embodiment of the application provides a web component debugging method with a code automatic positioning function and application thereof, and aims to solve the problems of complex operation and poor debugging efficiency in the prior art.

The core technology of the invention is mainly that in the packaging process of the components, the file path and the line number of the html template in the code are recorded in the corresponding elements in the form of html attributes by adding plug-ins into the packaging tool. When the component display page is clicked, clicking events are monitored, target elements are captured, file path and line number information recorded in html attributes of the target elements are obtained, a display instruction is sent to a code editor, the code editor calls corresponding code contents to display the code contents, and corresponding code lines are highlighted.

In a first aspect, the present application provides a method for debugging a web component having a code automatic positioning function, the method comprising the following steps:

s00, receiving an external import code and temporarily storing the external import code;

s10, calling the stored external import codes for online editing, updating the stored external import codes in real time, and taking the edited codes as codes to be packaged;

s20, packaging the codes to be packaged, and performing operation and display tests;

s30, monitoring a click event in the test process, capturing a source dom element of the click event and acquiring code line attributes in the source dom element;

s40, searching the nearest element with the file path attribute based on the code line attribute to locate the code line number of the source dom element;

and S50, forming a jump instruction by the file path and the code line number of the source dom element corresponding to the click event, calling an external import code before packaging according to the jump instruction, and displaying the corresponding code line in a highlighted mode.

Further, in the step S20, by adding a plug-in, an attribute is added to the html template in the packaging code in the packaging process.

Further, in the step S20, a code of an html template in the packaging code is identified, a current file path is set to a topmost element of the code of the current html template in the form of an html attribute, a current code line number is set to each line of html elements in the form of an html attribute, and packaging of the code to be packaged is completed

Further, in step S20, a running and presentation test is performed based on the independent browser sandbox environment.

Further, in step S00, the external import code is a code file of a network or an ontology file system.

Further, in step S10, if the external import code is a code package of a folder structure, the external import code is stored in a tree form with the original folder structure reserved.

Further, in step S00, the code content temporarily stores the external import code as a value with the file name or file path of the external import code as a key, so that the code content can be acquired by the key value.

In a second aspect, the present application provides a web component debugging system with code automatic positioning function, including:

the communication center module is used for communication among the modules; the relay module is used for communication among the modules and is used for receiving and forwarding messages. Generally, any module that needs to send or receive instructions needs to be relayed through the communication hub module.

The code storage module is used for storing data; as a storage module supporting a web-side editor, the storage module is generally used for temporarily storing codes during editing, but not for long-term storage.

The code import module is used for receiving external import codes and temporarily storing the external import codes and the code storage module;

the code editing module is used for calling the stored external import codes for online editing, updating the stored external import codes in real time and taking the edited codes as codes to be packaged; calling an external import code before packaging according to the jump instruction, and displaying a corresponding code line in a highlighted mode;

the code packaging module is used for packaging the codes to be packaged;

the code running module is used for running and displaying the packed codes; monitoring a click event in a test process, capturing a source dom element of the click event and acquiring code line attributes in the source dom element; searching the nearest element with the file path attribute based on the code line attribute so as to locate the code line number of the source dom element; and forming a jump instruction by using the file path and the code line number of the source dom element corresponding to the click event.

In a third aspect, the present application provides an electronic system, including a memory and a processor, where the memory stores a computer program, and the processor is configured to execute the computer program to perform the above-mentioned web component debugging method with code automatic positioning function.

In a fourth aspect, the present application provides a readable storage medium having stored therein a computer program comprising program code for controlling a process to execute the process, the process comprising a web component debugging method having an automatic code location function according to the above.

The main contributions and innovation points of the invention are as follows: 1. compared with the prior art, when the components are debugged on line, the method and the device can realize that when a page is clicked, the corresponding source code content is immediately displayed in the editing area and is highlighted to the corresponding code line. The source code is not required to be searched through the characteristics such as the component attribute, the debugging efficiency of the component is improved, and the development experience is optimized;

2. compared with the prior art, the method and the system have the advantages that programmers can immediately develop the web browser only by opening the browser without locally installing a development environment, breakpoint debugging, version management, team development and the like are supported, and meanwhile the existing webIDE does not have the function. Therefore, after the component display view port is clicked, the corresponding code is automatically positioned, and the debugging efficiency and the optimized development experience of the component are improved.

The details of one or more embodiments of the application are set forth in the accompanying drawings and the description below to provide a more thorough understanding of the application.

Drawings

The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the application and together with the description serve to explain the application and not to limit the application. In the drawings:

FIG. 1 is a flowchart of a method for debugging a web component with an automatic code positioning function according to an embodiment of the present application;

FIG. 2 is a schematic diagram of a system interface according to the second embodiment of the present application;

FIG. 3 is a flow chart of a system according to the second embodiment of the present application;

fig. 4 is a schematic diagram of a hardware structure of an electronic system according to an embodiment of the present application.

Detailed Description

Reference will now be made in detail to the exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, like numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the following exemplary embodiments do not represent all implementations consistent with one or more embodiments of the present specification. Rather, they are merely examples of systems and methods consistent with aspects of one or more embodiments of the specification, as detailed in the claims that follow.

It should be noted that: in other embodiments, the steps of the corresponding methods are not necessarily performed in the order shown and described herein. In some other embodiments, the method may include more or fewer steps than those described herein. Moreover, a single step described in this specification may be broken down into multiple steps for description in other embodiments; multiple steps described in this specification may be combined into a single step in other embodiments.

In the prior art, when a component is debugged, the existing online real-time debugging tool cannot directly position to a specific code line through a component display viewport. In order to locate the implementation code of a certain part of the component, it is necessary to search the source code according to the characteristics such as the component attribute, which is cumbersome.

Based on this, the present invention is based on online real-time debugging to solve the above problems.

Example one

The present application aims to propose a web component debugging method with code automatic positioning function, in particular, with reference to fig. 1, said method comprising the following steps:

in this step, code files from a network or local file system may be accepted. Further, the code import unit supports importing a code package containing a folder structure. The external import code is a code file of a network or an ontology file system.

Preferably, content in the form of key-value pairs is accepted. The key is the file name or file path of the code file, the value is the code content, when obtaining the code content, obtain through the key value;

s20, packaging the codes to be packaged, and performing operation and display tests; the running and presentation tests are preferably performed based on a separate browser sandbox environment. If the external import code is a code packet of the folder structure, the original folder structure is reserved in a tree shape for storage.

In the step, adding attributes to the html template in the packaging code in a plug-in mode in the packaging process;

in the step, the code of the html template in the packaging code is identified, the current file path is set into the topmost element of the code of the current html template in the form of html attributes, the current code line number is set into each line of html elements in the form of html attributes, and the packaging of the code to be packaged is completed.

Example two

Based on the same concept, as shown in fig. 2-3, the present application further provides a web component debugging system with code automatic positioning function, including:

the communication hub module is used for communication among the modules;

in this embodiment, the communication hub module is a relay module for communication between modules, and is configured to receive and forward a message. Generally, any module that needs to send or receive instructions needs to be relayed through the communication hub module.

The code storage module is used for storing data;

in the embodiment, the storage module is used for realizing the storage of the code and is used for supporting a web end editor, and the storage module is generally used for temporarily storing the code during editing, but not for long-term storage. The method is mainly used for temporarily storing the codes. Typically, the storage unit accepts content in the form of key-value pairs. The key is the file name or file path of the code file, the value is the code content, and when other modules acquire the code content, the key is acquired through the key value.

The code import module is used for receiving external import codes and temporarily storing the external import codes and the code storage module; the code storage unit is used for receiving codes transmitted from the outside and importing the codes to the code storage unit. Code files from a network or local file system may be accepted. Further, the code import unit supports importing a code package containing a folder structure. Preferably, the imported codes are stored in a memory, so that the codes can be read quickly, and if the codes to be stored are folders, the codes are stored in a tree-form reserved original folder structure. And after the code storage module stops running, clearing the codes stored in the memory.

in the embodiment, the online editing device is used for online editing of code, and is generally WebIDE such as monaco-editor. When the code editing module is started, the codes stored in the code storage module are obtained and displayed in the code editing view port, and the code inputting, deleting and modifying are supported. Generally, when a code in the code editing module changes, an update instruction is sent to the code storage module to update the stored code to the latest code content.

In this embodiment, after receiving the jump instruction, the code editing module calls the code content of the response from the code storage unit according to the file path attribute and displays the code content in the code editing viewport, and highlights the corresponding code line according to the code line attribute.

The code packaging module is used for packaging the codes to be packaged; and packaging the edited codes and providing the codes to a code running module for application.

In this embodiment, the code packing module may be a code packing tool such as webpack, and adds an attribute to an html template in the code in the packing process by adding a plug-in.

Preferably, a packaging tool plug-in is created, html template codes in the codes are identified, and the current file path is set into the topmost element of the current html template codes in the form of an html attribute (which may be data-file = "src/app. While setting the current code line number into each line html element (which may be data-lineumber = "3") in the form of an html attribute.

That is, if the current packaging tool uses webpack, a plug-in dedicated for processing html is created, and the path of the current file is obtained through the resourcePath attribute of the plug-in execution context after the packaging is started. Further, when the file packaging is executed, the packaging tool plug-in judges the html template part in the code through the regular expression, and sets the obtained current file path to the topmost element of the current html template code in the form of the html attribute (which may be data-file = "src/app. And the packaging tool plug-in cuts the content part of the html template in the code by line feed characters to form a character string array, traverses each item of the character string array, and splices the index value of the current item into each string in the form of html attribute through character string operation. And further splicing the groups of items into character strings, and returning the character strings to the packaging tool through the packaging tool plug-in. The html template portion of the code output by packaging at this time contains the line number information for each line, (which may be data-lineumber = "3").

The code running module is used for running and displaying the packed codes; monitoring a click event in a test process, capturing a source dom element of the click event and acquiring code line attributes in the source dom element; searching the nearest element with the file path attribute based on the code line attribute so as to locate the code line number of the source dom element; and forming a jump instruction by using the file path and the code line number of the source dom element corresponding to the click event. The code running module is also used for running and displaying the packaged code, and is generally an independent browser sandbox environment. And after the code is run, displaying a running result in an independent viewport, wherein the independent viewport supports monitoring a click event of a page element, capturing a source dom element of the event when the click event occurs, acquiring a code line attribute in the element, and searching a nearest element with a file path attribute upwards and acquiring the attribute. And further, sending a jump instruction to the code editing module by carrying the file path and the line number.

FIG. 2 is a screenshot of an online debugging system for a web component (where the code is not emphasized and is presented as a single presentation and thus does not obscure the disclosure of the present application). The right side is a code editing area, and the code read from the storage module is displayed and edited. The top menu can switch files, and also has a tree menu according to a folder structure (the top menu is hidden because of less use in practical application). And after the editing is finished, storing, and packaging the stored codes by a packaging module.

The left side is a display interface of the operation module, and the display content is a result of the operation module operating the packaged code in an independent sandbox environment.

EXAMPLE III

The present embodiment also provides an electronic system, referring to fig. 4, comprising a memory 404 and a processor 402, wherein the memory 404 stores a computer program, and the processor 402 is configured to execute the computer program to perform the steps of any of the above method embodiments.

Specifically, the processor 402 may include a Central Processing Unit (CPU), or A Specific Integrated Circuit (ASIC), or may be configured to implement one or more integrated circuits of the embodiments of the present application.

Memory 404 may include, among other things, mass storage 404 for data or instructions. By way of example, and not limitation, memory 404 may include a hard disk drive (hard disk drive, HDD for short), a floppy disk drive, a solid state drive (SSD for short), flash memory, an optical disk, a magneto-optical disk, tape, or a Universal Serial Bus (USB) drive or a combination of two or more of these. Memory 404 may include removable or non-removable (or fixed) media, where appropriate. Memory 404 may be internal or external to the data processing system, where appropriate. In a particular embodiment, the memory 404 is a Non-Volatile (Non-Volatile) memory. In particular embodiments, memory 404 includes Read-only memory (ROM) and Random Access Memory (RAM). The ROM may be mask-programmed ROM, programmable ROM (PROM), erasable PROM (EPROM), electrically Erasable PROM (EEPROM), electrically rewritable ROM (EAROM), or FLASH Memory (FLASH), or a combination of two or more of these, where appropriate. The RAM may be a static random-access memory (SRAM) or a dynamic random-access memory (DRAM), where the DRAM may be a fast page mode dynamic random-access memory 404 (FPMDRAM), an extended data output dynamic random-access memory (EDODRAM), a synchronous dynamic random-access memory (SDRAM), and the like.

Memory 404 may be used to store or cache various data files needed for processing and/or communication purposes, as well as possibly computer program instructions executed by processor 402.

The processor 402 implements any of the above-described embodiments of the web component debugging method with code autolocation functionality by reading and executing computer program instructions stored in the memory 404.

Optionally, the electronic system may further include a transmission device 406 and an input/output device 408, wherein the transmission device 406 is connected to the processor 402, and the input/output device 408 is connected to the processor 402.

The transmitting device 406 may be used to receive or transmit data via a network. Specific examples of such networks may include wired or wireless networks provided by communication providers of the electronic systems. In one example, the transmission device includes a Network adapter (NIC) that can be connected to other Network devices through a base station to communicate with the internet. In one example, the transmitting device 406 may be a Radio Frequency (RF) module configured to communicate with the internet via wireless.

The input-output device 408 is used to input or output information. In the present embodiment, the input information may be an external code or a click event, and the output information may be a highlighted code line, and the like.

Example four

The embodiment also provides a readable storage medium, wherein a computer program is stored in the readable storage medium, the computer program comprises program codes for controlling a process to execute the process, and the process comprises the web component debugging method with the code automatic positioning function according to the first embodiment.

It should be noted that, for specific examples in this embodiment, reference may be made to examples described in the foregoing embodiments and optional implementations, and details of this embodiment are not described herein again.

In general, the various embodiments may be implemented in hardware or special purpose circuits, software, logic or any combination thereof. Some aspects of the invention may be implemented in hardware, while other aspects may be implemented in firmware or software which may be executed by a controller, microprocessor or other computing device, although the invention is not limited thereto. While various aspects of the invention may be illustrated and described as block diagrams, flow charts, or using some other pictorial representation, it is well understood that these blocks, systems, techniques or methods described herein may be implemented in, as non-limiting examples, hardware, software, firmware, special purpose circuits or logic, general purpose hardware or controller or other computing devices, or some combination thereof.

Embodiments of the invention may be implemented by computer software executable by a data processor of the mobile device, such as in a processor entity, or by hardware, or by a combination of software and hardware. Computer software or programs (also referred to as program products) including software routines, applets and/or macros can be stored in any system-readable data storage medium and they include program instructions for performing particular tasks. The computer program product may include one or more computer-executable components configured to perform embodiments when the program is run. The one or more computer-executable components may be at least one software code or a portion thereof. Further in this regard it should be noted that any block of the logic flow as in the figures may represent a program step, or an interconnected logic circuit, block and function, or a combination of a program step and a logic circuit, block and function. The software may be stored on physical media such as memory chips or memory blocks implemented within the processor, magnetic media such as hard or floppy disks, and optical media such as, for example, DVDs and data variants thereof, CDs. The physical medium is a non-transitory medium.

It should be understood by those skilled in the art that various features of the above embodiments can be combined arbitrarily, and for the sake of brevity, all possible combinations of the features in the above embodiments are not described, but should be considered as within the scope of the present disclosure as long as there is no contradiction between the combinations of the features.

The above examples are merely illustrative of several embodiments of the present application, and the description is more specific and detailed, but not to be construed as limiting the scope of the present application. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the concept of the present application, and these are all within the scope of protection of the present application. Therefore, the protection scope of the present application should be subject to the appended claims.

Claims

1. The web component debugging method with the code automatic positioning function is characterized by comprising the following steps of:

s40, searching the element with the file path attribute recently based on the code line attribute to locate the code line number of the source dom element;

s50, forming a jump instruction by the file path and the code line number of the source dom element corresponding to the click event, calling the external import code before packaging according to the jump instruction, and displaying the corresponding code line in a highlighted mode.

2. The method for debugging a web component with an automatic code positioning function according to claim 1, wherein in the step S20, attributes are added to the html template in the packaged code in a packaging process by adding a plug-in.

3. The method for debugging a web component with an automatic code positioning function according to claim 2, wherein in step S20, the code of the html template in the packaged code is identified, and the current file path is set in the top-most element of the code of the current html template in the form of an html attribute, and the current code line number is set in each line of html elements in the form of an html attribute, so that the packaging of the code to be packaged is completed.

4. The method for debugging a web component having an automatic code positioning function according to claim 1, wherein in the step S20, a running and exposure test is performed based on an independent browser sandbox environment.

5. The method for debugging a web component having a code automatic positioning function according to claim 1, wherein in step S00, the external import code is a code file of a network or an ontology file system.

6. The method for debugging a web component having an automatic code location function according to claim 1, wherein in step S10, if the external import code is a code package of a folder structure, the external import code is stored in a tree-like original folder structure.

7. The web component debugging method having a code automatic positioning function according to claim 1, wherein in the step S00, a file name or a file path of the external import code is used as a key, and a code content is used as a value to temporarily store the external import code, so that the code content can be acquired by a key value.

8. A web component debugging system having a code automatic positioning function, comprising:

the communication center module is used for communication among the modules;

the code storage module is used for storing data;

the code packaging module is used for packaging the codes to be packaged;

9. An electronic system comprising a memory and a processor, wherein the memory stores a computer program, and the processor is configured to execute the computer program to perform the web component debugging method with code automatic positioning function according to any one of claims 1 to 7.

10. A readable storage medium, characterized in that a computer program is stored therein, the computer program comprising program code for controlling a process to execute the process, the process comprising the web component debugging method having a code automatic positioning function according to any one of claims 1 to 7.