Function call processing method and device based on drawing elements and electronic equipment

Abstract

The invention provides a function call processing method and device based on drawing elements and electronic equipment. The method comprises the steps of obtaining a to-be-debugged target JS code; parsing the target JS code by using a parser to obtain an abstract syntax tree file; calling an analysis function to analyze the drawing elements in the webpage to obtain a drawing attribute list; determining an array object according to nodes corresponding to the drawing attribute list in the abstract syntax tree file, wherein the array object comprises a function object corresponding to each node; and inserting a screenshot function in the target JS code according to the array object, wherein the screenshot function is used for performing screenshot on the function call information of the insertion position and the corresponding drawing content. The method can improve the code debugging efficiency.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method, device and electronic device for processing function calls based on drawing elements. Background Art

[0002] JS (JavaScript) is a literal scripting language. The translator of JS code is called JS engine, which is used to interpret and execute JS code. JS is widely used in web application development. Before application, JS code can be debugged through the browser's debugging tools to find errors or optimize performance.

[0003] Among them, the drawing tools in the browser can draw graphics and animations on the web page, which provides a visual means for debugging. Developers can assist the debugging process by drawing debugging information, error markers or status indicators.

[0004] However, the current drawing tools in browsers do not provide comprehensive visualization during debugging, and cannot fully understand the code execution process. Summary of the invention

[0005] The main purpose of the embodiments of the present application is to propose a function call processing method and device based on drawing elements and an electronic device, aiming to improve debugging efficiency.

[0006] To achieve the above-mentioned purpose, the first aspect of the present application proposes a function call processing method based on drawing elements, comprising:

[0007] Get the target JS code to be debugged;

[0008] Use the parser to parse the target JS code and obtain the abstract syntax tree file;

[0009] Call the analysis function to analyze the drawing elements in the web page and obtain a drawing attribute list;

[0010] Determine an array object according to the nodes corresponding to the drawing attribute list in the abstract syntax tree file, the array object including a function object corresponding to each node;

[0011] A screenshot function is inserted into the target JS code according to the array object. The screenshot function is used to take a screenshot of the function call information and the corresponding drawing content at the insertion position.

[0012] In a feasible implementation, after inserting the screenshot function into the target JS code according to the array object, the method further includes:

[0013] Convert drawing elements into string data through screenshot function;

[0014] An error object is created in the drawing function of the drawing element, and function call information is obtained according to the error object. The error object includes stack trace information, and the stack trace information is used to obtain the function call when the error occurs.

[0015] Get the drawing content corresponding to the string data at the insertion position, and the function call information at the insertion position;

[0016] Display drawing content and function call information.

[0017] In a feasible implementation, inserting a screenshot function into the target JS code according to the array object includes:

[0018] Insert the screenshot function into the target JS code according to the location of each function object;

[0019] Display drawing content and function call information, including:

[0020] According to the order of the position of each function object, the drawing content and function call information corresponding to each position are displayed from top to bottom.

[0021] In a feasible implementation manner, after displaying the drawing content and the function call information, the method further includes:

[0022] Delete the string data corresponding to the drawing content.

[0023] In a feasible implementation manner, the method further includes:

[0024] Get the code coverage report of the target JS code;

[0025] Debug the target JS code based on the code coverage report and function call information.

[0026] In a feasible implementation, after inserting the screenshot function into the target JS code according to the array object, the method further includes:

[0027] Define the switch variable in the target JS code. The switch variable is used to control the execution of the screenshot function.

[0028] In a feasible implementation manner, after defining the switch variable in the target JS code, the method further includes:

[0029] Display switch controls;

[0030] In response to a trigger instruction to the switch control, the switch variable is adjusted.

[0031] The second aspect of the present application provides a function call processing device based on a drawing element, comprising:

[0032] The acquisition unit is used to obtain the target JS code to be debugged;

[0033] The parsing unit is used to parse the target JS code using a parser to obtain an abstract syntax tree file;

[0034] The analysis unit is used to call the analysis function to analyze the drawing elements in the web page and obtain a drawing attribute list;

[0035] A determination unit, used to determine an array object according to the node corresponding to the drawing attribute list in the abstract syntax tree file, the array object including a function object corresponding to each node;

[0036] The insertion unit is used to insert a screenshot function in the target JS code according to the array object. The screenshot function is used to take a screenshot of the function call information and the corresponding drawing content at the insertion position.

[0037] To achieve the above objectives, a third aspect of an embodiment of the present application proposes an electronic device, which includes a memory and a processor, wherein the memory stores a computer program, and when the processor executes the computer program, the method described in the first aspect is implemented.

[0038] To achieve the above-mentioned purpose, the fourth aspect of an embodiment of the present application proposes a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method described in the first aspect is implemented.

[0039] The embodiment of the present application parses the target JS code to obtain an abstract syntax tree file, analyzes the drawing attribute list of the drawing elements in the web page through the analysis function, locates the nodes in the abstract syntax tree file through the drawing attribute list, obtains the array object corresponding to the node, and inserts the screenshot function into the target JS code according to the array object to obtain the function call information and drawing content. The abstract syntax tree provides a clear structure of the code, and the drawing attribute list can accurately locate the code nodes related to the drawing in the abstract syntax tree, and can capture the corresponding number call information and drawing content in real time, providing a complete function execution process. The clear code structure and accurate drawing function positioning make the code easier to maintain and update. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] Figure 1 It is a system architecture diagram provided by an embodiment of the present application;

[0041] Figure 2 It is a flowchart of a function call processing method based on drawing elements provided in an embodiment of the present application;

[0042] Figure 3 It is a flowchart of converting a target JS code provided by an embodiment of the present application;

[0043] Figure 4 It is a schematic diagram of a stock price chart drawn by the original target JS code provided in the embodiment of the present application using the Canvas API;

[0044] Figure 5 It is a schematic diagram of the execution effect of a custom Canvas drawing function after the target JS code provided in an embodiment of the present application is inserted into a screenshot function;

[0045] Figure 6 is a schematic diagram of displaying drawing content and function call information from top to bottom provided by an embodiment of the present application;

[0046] Figure 7 This is a schematic diagram of the execution flow of a target JS code after inserting a screenshot function provided by an embodiment of the present application;

[0047] Figure 8 It is a structural schematic diagram of a function call processing device based on drawing elements provided in an embodiment of the present application;

[0048] Fig. 9 It is a structural schematic diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0049] The terms "first", "second", "third", "fourth", etc. (if any) in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein, for example. In addition, the terms "including" and "corresponding to" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0050] The word “exemplary” is used exclusively herein to mean “serving as an example, example, or illustration.” Any embodiment described herein as “exemplary” is not necessarily to be construed as preferred or advantageous over other embodiments.

[0051] In the embodiments of the present application, the term "module" or "unit" refers to a computer program or a part of a computer program with a predetermined function, and works together with other related parts to achieve a predetermined goal, and can be implemented in whole or in part by using software, hardware (such as processing circuits or memories) or a combination thereof. Similarly, a processor (or multiple processors or memories) can be used to implement one or more modules or units. In addition, each module or unit can be part of an overall module or unit that includes the function of the module or unit.

[0052] In addition, in order to better illustrate the present application, numerous specific details are given in the following specific embodiments. It should be understood by those skilled in the art that the present application can also be implemented without certain specific details. In some examples, methods, means, components and circuits well known to those skilled in the art are not described in detail in order to highlight the subject matter of the present application.

[0053] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by those skilled in the art to which this application belongs. The terms used herein are only for the purpose of describing the embodiments of this application and are not intended to limit this application.

[0054] First, some nouns involved in this application are analyzed:

[0055] JavaScript (JS for short) is a high-level, interpreted, and translated programming language that supports object-oriented, imperative, and functional programming paradigms.

[0056] Canvas is a very powerful element introduced in HTML5, which can be used to draw graphics on web pages by using JavaScript. The Canvas element itself is a graphics container, and the actual drawing work is done by JavaScript.

[0057] Acorn Syntax Parser: Acorn is a fast and lightweight syntax parser for JavaScript, which is specially used to parse JavaScript code. Acorn is responsible for converting JavaScript code into an Abstract Syntax Tree (AST).

[0058] The drawing tools in the browser can draw graphics and animations on the web page, which provides a visual means for debugging. Developers can assist the debugging process by drawing debugging information, error markers or status indicators. Among them, the Canvas screenshot analysis tool cannot provide custom Canvas drawing function call stack information. For complex function calls, it is difficult for browser single-step debugging or Canvas screenshot analysis tools to directly give the drawing function call relationship, which will limit the developer's comprehensive understanding of the code execution process; the time-evenly divided method of third-party Canvas debugging tools causes the custom Canvas drawing function calls to be segmented, and the drawing content information is incomplete, which in turn affects the accuracy of the drawing process analysis.

[0059] In response to the above problems, an embodiment of the present application provides a function call processing method based on drawing elements, which parses the target JS code to obtain an abstract syntax tree file, analyzes the drawing attribute list of the drawing elements in the web page, locates the nodes in the abstract syntax tree file through the drawing attribute list, obtains the array object corresponding to the node, and inserts the screenshot function into the target JS code according to the array object to obtain the function call information and drawing content. The abstract syntax tree provides a clear structure of the code, and the drawing attribute list can accurately locate the code nodes related to drawing in the abstract syntax tree, and can capture the corresponding number call information and drawing content in real time, providing a complete function execution process. The clear code structure and accurate drawing function positioning make the code easier to maintain and update.

[0060] System architecture and scenario description of the application of the embodiments of the present disclosure

[0061] Figure 1 It is a system architecture diagram applied by the function call processing method based on drawing elements according to the embodiment of the present application, and includes a terminal 140, the Internet 130, a gateway 120, a server 110 and the like.

[0062] The terminal 140 includes a variety of device forms with a display screen, such as a desktop computer, a laptop computer, a PDA (personal digital assistant), a mobile phone, a vehicle terminal, a home theater terminal, a dedicated terminal, an intelligent voice interaction device, an intelligent home appliance or an aircraft. In addition, it can be a single device or a collection of multiple devices. The terminal 140 can communicate with the Internet 130 in a wired or wireless manner to exchange data.

[0063] The server 110 refers to a computer system that can provide certain services to the terminal 140. Compared with the ordinary terminal 140, the server 110 has higher requirements in terms of stability, security, performance, etc. The server 110 can be a high-performance computer in a network platform, a cluster of multiple high-performance computers, a part of a high-performance computer (such as a virtual machine), a combination of parts of multiple high-performance computers (such as virtual machines), etc.

[0064] The gateway 120 is also called an internetwork connector or a protocol converter. The gateway realizes network interconnection at the transport layer and is a computer system or device that acts as a converter. The gateway is a translator between two systems that use different communication protocols, data formats or languages, or even completely different architectures. At the same time, the gateway can also provide filtering and security functions. The message sent by the terminal 140 to the server 110 must be sent to the corresponding server 110 through the gateway 120. The message sent by the server 110 to the terminal 140 must also be sent to the corresponding terminal 140 through the gateway 120.

[0065] The function call processing method based on drawing elements provided in the embodiment of the present application may be implemented solely in the terminal 140 , solely in the server 110 , or partially in the terminal 140 and partially in the server 110 .

[0066] When the function call processing method based on drawing elements provided in the embodiment of the present application is implemented separately in the terminal 140, the terminal 140 obtains the target JS code to be debugged; the terminal 140 uses a parser to parse the target JS code to obtain an abstract syntax tree file; the terminal 140 calls an analysis function to analyze the drawing elements in the web page to obtain a drawing attribute list; the terminal 140 determines an array object according to the nodes corresponding to the drawing attribute list in the abstract syntax tree file, and the array object includes a function object corresponding to each node; the terminal 140 inserts a screenshot function in the target JS code according to the array object, and the screenshot function is used to take a screenshot of the function call information and the corresponding drawing content at the insertion position.

[0067] The following will illustrate the function call processing method based on drawing elements provided in the embodiment of the present application in conjunction with the accompanying drawings. The execution subject of the following function call processing method based on drawing elements takes the terminal device as an example, and can be specifically implemented by the terminal device by running the various computer programs mentioned above; of course, based on the understanding of the following text, it is not difficult to see that the function call processing method based on drawing elements provided in the embodiment of the present application can also be implemented by the terminal device and the server in collaboration.

[0068] See also Figure 2 ,like Figure 2FIG. 1 is a flow chart of a method for processing a function call based on a drawing element provided in this embodiment. The method includes:

[0069] Step 201: Get the target JS code to be debugged.

[0070] In this embodiment, the target JS code to be debugged refers to the target JS code that needs to be debugged before the JS code is officially used or released. Debugging is an important part of the software development life cycle, and its purpose is to discover and fix errors in the code, optimize performance, improve code quality, and ensure that the software can work as expected.

[0071] The target JS code may be obtained by extracting it from the developer's working directory or version control system, downloading it from a cloud server through a network request, or directly input by the developer.

[0072] Step 202: Use a parser to parse the target JS code to obtain an abstract syntax tree file.

[0073] In this embodiment, the parser is a computer program that is used to analyze the structure of text data, especially the source code of a programming language, and convert it into a form that can be more easily understood and processed by a computer. In a compiler or interpreter of a programming language, the parser is one of the core components, which can convert the source code into an abstract syntax tree.

[0074] Abstract syntax tree is an important concept in computer science that is used to represent the structure of source code. It converts the code in a programming language into a tree-like model where each node represents a construct or operation in the code.

[0075] The parser can read the target JS code and then convert it into a tree structure, namely AST, according to the grammatical rules of the JavaScript language. In this tree structure, each node represents a structure in the code, such as variable declaration, function declaration or loop structure.

[0076] Exemplarily, the Acorn syntax parser can be used to parse the target JS code, generate an abstract syntax tree, and output an ast.json file, which can contain the names of all custom functions in the target JS code, function offsets, and context dependencies between functions and variables.

[0077] For example, the parsing information for a function named "print" is as follows:

[0078] "id":{"type":"Identifier","start":405,"end":414,"name":"print"}

[0079] Where name is the function name. The start and end attributes represent the character position range of a specific node in the source code (counting from the beginning of the source code); start represents the starting position of the node in the source code, that is, the position index of the starting character of the content corresponding to the node; end represents the ending position of the node in the source code, that is, the position index of the ending character of the content corresponding to the node.

[0080] Step 203: Call the analysis function to analyze the drawing elements in the web page and obtain a drawing attribute list.

[0081] In this embodiment, the analysis function may be a function used to analyze specific data or codes in programming and software development, and here it may be a function for analyzing drawing elements in a web page and extracting the properties of these elements.

[0082] Drawing elements can be used to draw graphics and visual content on the page. These elements can be HTML tags, SVG graphics, or content drawn using JavaScript APIs. For example <canvas>Elements, Scalable Vector Graphics (SVG), Cascading Style Sheets (CSS) shapes and gradients, Web Graphics Library (WebGL), etc.

[0083] The drawing attribute list can be a collection of drawing element attributes in the web page analyzed by the analysis function. These attributes describe the appearance, behavior, and status of the drawing elements. For example, width and height: define the size of the canvas. Style: CSS style, such as border, size, etc. getContext: Get the rendering context of the canvas, which is used for 2D or WebGL drawing.

[0084] For example, you can create an HTML5 " <canvas>" element and get its 2D rendering context object. Then, get all enumerable properties (i.e. Canvas API method names) from the prototype chain of the context object through the "Object.getOwnPropertyNames()" method and store them in an array. Finally, output this array "APIList" containing all the API method names of Canvas.

[0085] Step 204: Determine an array object according to the nodes corresponding to the drawing attribute list in the abstract syntax tree file, where the array object includes a function object corresponding to each node.

[0086] In this embodiment, the array object is an array, and the elements in the array are objects. Here, the elements in the array object are function objects, and these function objects contain detailed information of function nodes related to the drawing elements in the web page.

[0087] You can traverse the AST to find code nodes corresponding to elements in the drawing attribute list, that is, identify JavaScript function calls related to drawing, such as those that operate <canvas>Or a function of an SVG element. For each node in the AST related to a drawing element, a function object can be created, which contains detailed information about the node, such as node type, code location, referenced drawing element attributes, etc. For example, a function object can include a custom Canvas drawing function name, function start and end positions.

[0088] For example, you can use custom code to read the ast.json file, deeply traverse the abstract syntax tree nodes in the ast.json file, search for function nodes from the top level downwards, and determine whether the function node has any method name in the array APIList. If it is found to exist, it will return a function object containing the custom Canvas drawing function name, function start and end positions, and save it in the array. Otherwise, continue to search downward until the leaf node. After deeply traversing the abstract tree, you can get an array object "methods".

[0089] Step 205: insert a screenshot function into the target JS code according to the array object, and the screenshot function is used to take a screenshot of the function call information and the corresponding drawing content at the insertion position.

[0090] In this embodiment, the screenshot function is a programming function that can capture and save the content of the current drawing surface as an image. In Web development, it can be to capture the current frame of the Canvas element or the visible part of the web page. In the embodiment of the present application, the screenshot function can capture the content of the Canvas and record the stack information of the function call.

[0091] Function call information refers to the context information related to the function when it is called.

[0092] Drawing content can be the visual elements rendered on the graphical interface when the function is called.

[0093] The array object contains AST node information, which corresponds to the nodes in the drawing attribute list. You can traverse the function objects in this array object to find the locations of drawing-related functions in the target JS code, which can be used as the insertion locations of the screenshot function. When the modified target JS code is executed, the screenshot function will be called at each insertion location to capture the current Canvas drawing content and function call information.

[0094] Exemplarily, the execution statement of the screenshot function can be converted into a string, the screenshot function call statement can be converted into a string, named "screenShotStr", and the length of the string can be calculated; the target JS code can be converted into a string, and the execution statement string of the screenshot function can be inserted into the head of the string to obtain the string named "resultStr".

[0095] Traverse the methods array object sequentially, calculate the starting position (the "end" variable of the function in the object, i.e. the end position of the function) and the end position (the starting position plus the screenShotStr offset) of inserting screenShotStr into resultStr, and then insert resultStr into screenShotStr according to the starting and ending positions. The overall offset after the end position needs to be added to the length of screenShotStr until the traversal ends. At this point, the target JS code string has completed the insertion of the screenshot function execution statement and all the screenshot function call statements, and obtained the converted JS code string, i.e. the converted JS code file. The flowchart diagram of generating the converted target JS code can be referred to Figure 3 As shown, step 301, obtain the initial target JS code. The target JS code is the JS code to be debugged, which can be obtained in a variety of ways, such as reading directly from the source code file, or if it is in a browser environment, you can directly access the loaded script code. Step 302, parse the target JS code to generate an abstract syntax tree. You can use a JavaScript parser, such as Acorn or Babel, to parse the acquired code and generate an abstract syntax tree. The abstract syntax tree provides a structured representation of the code, making it easier for the program to analyze and modify the code. Step 303, determine the drawing attribute list by searching the properties of canvas through the analysis function. Find all functions and properties related to Canvas based on the analysis function. Directly interact with JavaScript objects and prototype chains, and return an array containing all the object's own properties (excluding properties on the prototype chain). Step 304, traverse the functions in the drawing attribute list in the abstract syntax tree, insert the screenshot function at the end of the corresponding function of the target JS code, and you can get the converted target JS code.

[0096] In a possible implementation, after inserting the screenshot function into the target JS code according to the array object, the method further includes:

[0097] Convert drawing elements into string data through screenshot function;

[0098] An error object is created in the drawing function of the drawing element, and function call information is obtained according to the error object. The error object includes stack trace information, and the stack trace information is used to obtain the function call when the error occurs.

[0099] Get the drawing content corresponding to the string data at the insertion position, and the function call information at the insertion position;

[0100] Display drawing content and function call information.

[0101] In this implementation, string data may refer to data that can be stored and transmitted in text form by converting the graphic content of the Canvas element into a Base64-encoded string form. This string data is essentially a text representation of image data, which allows the image content to exist in a way that can be easily transmitted over the network. When using Canvas for drawing in a Web page, all graphics and images exist in the Canvas element in the form of pixels. These pixel data themselves are binary, meaning that they consist of a sequence of 0s and 1s. Base64 encoding can be used to convert these binary data into a special string format. The string in this format can contain all the information of the image and can be processed as text.

[0102] The Error object can be a built-in object in JavaScript that represents an error state. This error object can contain the name and message of the error, as well as a stack trace information, which can be a string that describes the order and hierarchy of function calls. The error object is created in the drawing function of the drawing element, and the JavaScript engine maintains the current call stack at runtime. When the Error object is created, the engine captures the current call stack and uses it as the stack property of the Error object. The call stack is a sequential record of function calls during program execution. Each time a function is called, the call information (such as function name, file name, line number, etc.) is pushed into the call stack. When the function execution ends, the relevant information is popped from the call stack. By viewing the relevant information of the stack trace, you can trace back to the exact location where the error occurred, as well as the function call chain that caused the error. This function call chain is the required function call information, that is, all the functions called.

[0103] Since the screenshot function call statements are inserted in the order in which the functions appear in the AST, when the JS code is executed, the screenshots and function call information are also captured in this order, that is, the drawing content and function call information correspond to each other in order.

[0104] The obtained drawing content and function call information can be displayed together in a new window or page. The display method can be: add an Image tag in the display window, set its src attribute to the previously converted Base64 string, so as to display the drawing content of the Canvas. Add a div tag in the display window, set its textContent attribute to the stack trace information obtained from the error object, so as to display the detailed information of the function call.

[0105] Exemplarily, the specific execution process of the screenshot function can be to obtain the Id of the current Canvas, and convert the current Canvas object into a string data in Base64 format according to the Id. Create a browser Error object, print the function call information in the stack of the current browser Error object, and save the function stack information as a string. Determine whether there is a display window. If not, open a new window. Otherwise, use the existing display window and pass in the stack and Base64 information. In the display window, add an Image tag, whose src attribute passes in the Base64 information and is displayed in the right area. Add a div tag, whose textContent attribute passes in the function call information in the stack, so that the Canvas drawing content and function call information corresponding to the current Id will be displayed in the new window, and displayed side by side with the drawing content in the right area. This process is called screenshotting the Canvas drawing content.

[0106] For example, the original target JS code uses the Canvas API to draw a stock price chart diagram, which can be referred to as Figure 4 As shown. The chart contains a candlestick chart of the price and a volume bar chart below. The candlestick chart shows the price fluctuations of a stock over a period of time, including the opening price, closing price, highest price and lowest price. Each candlestick represents a time unit (such as a day, an hour, etc.). Above the chart is the price curve, which shows the trend of stock prices over time. For example, the highest price is 15.78 yuan and the lowest price is 9.81 yuan. The fluctuation of the curve can help observers understand the historical trend and possible trend of stock prices. The volume bar chart is located below the candlestick chart and shows the trading volume in each time unit. The height of the bar chart represents the size of the trading volume, so as to intuitively show the relationship between trading volume and price changes.

[0107] The schematic diagram of the execution effect of the custom Canvas drawing function after the target JS code is inserted into the screenshot function can be referred to Figure 5 As shown, the top is the first screenshot result, the upper left area is the function call information of the first screenshot, such as function call information 1, and the upper right area is the drawing content of Canvas. Figure 5 The example in the figure shows the background rendering of the drawing, with the grid and watermark drawn. The figure below is based on the figure above, and the result of executing the second screenshot function in the target JS code after inserting the screenshot function, such as the function call information 2 of the second screenshot function shown in the left area below, and the newly added lines and styles rendered based on the right area above shown in the right area. By comparing the continuous drawing and stack function call information, you can intuitively analyze the newly added drawing rendering elements and execution methods.

[0108] In a possible implementation, inserting a screenshot function into the target JS code according to the array object includes:

[0109] Insert the screenshot function into the target JS code according to the location of each function object;

[0110] Display drawing content and function call information, including:

[0111] According to the order of the position of each function object, the drawing content and function call information corresponding to each position are displayed from top to bottom.

[0112] In this implementation, each function object in the array object contains the name of the function, the starting position and the ending position in the source code. Each function object in the array object can be traversed, and the calling code of the screenshot function can be inserted into the corresponding position of each function object in the target JS code.

[0113] Each time the target JS code runs to the calling code of the screenshot function, it can capture the current state of the Canvas and convert it into Base64-encoded string data. At the same time, it creates an error object to obtain the current stack trace information, so that the specific information of each function call can be obtained. The string data and the function call information are in a one-to-one correspondence. The drawing content and function call information corresponding to each position can be displayed from top to bottom on the page according to the position sequence of the function object, that is, the drawing content and function call information are displayed in the order in which they appear in the code, so that developers can clearly see the results of each function execution and the corresponding code execution path.

[0114] For example, a schematic diagram showing drawing content and function call information from top to bottom can be referred to Figure 6 As shown in the figure, the left side is the custom Canvas drawing function call relationship stack information, the right side is the Canvas drawing content, the function call information in the top left area is function call information 3, and the top right area shows drawing content 1, such as the upper curve. Based on drawing content 1, after the execution of the function indicated by function call information 4 in the middle left area, a new content is added on the basis of drawing content 1, such as Figure 6 The column in the middle drawing constitutes drawing content 2. Based on drawing content 2, after the execution of the function indicated by the function call information 5 in the lower left area, secondary additional content is added based on drawing content 2, such as Figure 6 The columns in the drawing below constitute drawing content 3. You can clearly see the results of each function execution and the corresponding code execution path.

[0115] In a possible implementation, after displaying the drawing content and the function call information, the method further includes:

[0116] Delete the string data corresponding to the drawing content.

[0117] In this implementation, after the drawing content is displayed, the string data can be deleted by setting the memory location storing the string data corresponding to the drawing content to an invalid value or a null value, or a memory cleanup operation can be performed to ensure that the deleted string data is not retained in the cache or temporary storage area of ​​the digital display device. Deleting the string data from the storage medium while maintaining the display of the image can improve data security and optimize the use of storage resources.

[0118] In a possible implementation manner, the method further includes:

[0119] Get the code coverage report of the target JS code;

[0120] Debug the target JS code based on the code coverage report and function call information.

[0121] In this implementation, the code coverage report can be a report that measures and displays the test coverage, which can indicate which code in the target JS code is executed and which code is omitted. Obtaining the code coverage report of the JavaScript code can be achieved through some special tools, such as Istanbul, Jest or Mocha, which can track the execution of the code when running the target JS code and finally generate a detailed coverage report. The format of the report may include HTML, JSON or LCOV, etc., which can display the coverage data in different ways, and can intuitively see which parts of the code are covered by the test and which parts may be omitted. Based on the code coverage report and function call information, if it is found that the function call information indicates that a function is called, but some code paths inside the function are not covered, the target JS code does not cover these paths, and the target JS code can be debugged by adding or modifying to ensure that these paths are covered. The code coverage report and function call information together provide a comprehensive view that can help understand the actual behavior of the code and speed up debugging efficiency.

[0122] In a possible implementation, after inserting the screenshot function into the target JS code according to the array object, the method further includes:

[0123] Define the switch variable in the target JS code. The switch variable is used to control the execution of the screenshot function.

[0124] In this implementation, a switch variable can be a control mechanism for determining whether to enable or disable a specific function in the code. Such a variable can be a Boolean value (true or false), which allows developers to control the behavior of the code at runtime by changing the value of the variable without modifying the code itself.

[0125] While inserting the screenshot function into the target JavaScript code, we can control the execution of these screenshot functions by defining a switch variable. This switch variable acts as a Boolean value, allowing us to decide whether to activate the screenshot function at runtime. For example, you can declare a variable called a switch and set it to true or false as needed. By default, this variable may be set to false, meaning that the screenshot function is turned off, until you need to take a screenshot and set the switch variable to true, indicating that the screenshot function is turned on.

[0126] In a possible implementation, after defining the switch variable in the target JS code, the method further includes:

[0127] Display switch controls;

[0128] In response to a trigger instruction to the switch control, the switch variable is adjusted.

[0129] In this implementation, the switch control can be an interface element that allows the user to turn on or off a function through simple operations. A switch control can be created on a web page, such as a button. When a user clicks the button, the screenshot function can be turned on. The button is added to the page through HTML code.

[0130] An event listener can be used to listen to the triggering operation of the button and respond. When the user clicks the button, the listener can check the current state of the switch variable and invert the state each time it is clicked. For example, if the screenshot function is originally off, the screenshot function can be turned on after clicking the button; if it is originally on, it will be turned off after clicking. Among them, the web page can also give users clear feedback by changing the style of the button to remind them whether the screenshot function is currently on or off.

[0131] In an example, the execution flow of the target JS code after inserting the screenshot function can be referred to Figure 7 As shown, step 701, obtain the target JS code after inserting the screenshot function. Step 702, determine whether the screenshot function is turned on, if yes, execute step 704, otherwise execute step 703. Before executing the code, we can check a switch variable to determine whether the screenshot function should be executed. This switch variable can be a global variable or stored in a configuration file. Step 703, execute the target JS code and skip the screenshot function. If the screenshot switch is turned off (isScreenshotEnabled is false), that is, no screenshot is required, the screenshot function can be skipped during the execution of the target JavaScript code, for example, by adding conditional statements around the screenshot function, or dynamically modifying the code at runtime. Step 704, convert canvas into string data, that is, convert the Canvas content into Base64-encoded image data. Step 705, create an error object and obtain function call information. Create an Error object. The JavaScript Error object automatically contains a stack trace, which contains detailed information about the function call. Step 706, determine whether there is a display window, if yes, execute step 708, otherwise execute step 707. Step 707, create a display window. Step 708: Display the drawing content and the corresponding function call information in the display window. For a Canvas image, you can create a element and set its src attribute to the Base64 data URL of the Canvas. For function call information, you can create a <pre>or Element and sets the error object's stack trace information as the element's contents

[0132] The above describes a method for processing a function call based on drawing elements. The following describes a device for executing the method.

[0133] See also Figure 8 ,like Figure 8 FIG. 8 is a schematic diagram of a structure of a function call processing device based on a drawing element provided in an embodiment of the present application. The device 800 includes:

[0134] The acquisition unit 801 is used to acquire the target JS code to be debugged;

[0135] A parsing unit 802 is used to parse the target JS code using a parser to obtain an abstract syntax tree file;

[0136] An analysis unit 803 is used to call an analysis function to analyze drawing elements in a web page and obtain a drawing attribute list;

[0137] A determining unit 804 is used to determine an array object according to the nodes corresponding to the drawing attribute list in the abstract syntax tree file, where the array object includes a function object corresponding to each node;

[0138] The inserting unit 805 is used to insert a screenshot function into the target JS code according to the array object, and the screenshot function is used to take a screenshot of the function call information and the corresponding drawing content at the insertion position.

[0139] Optionally, the apparatus 800 further includes a screenshot unit 806, which is specifically configured to:

[0140] Convert drawing elements into string data through screenshot function;

[0141] An error object is created in the drawing function of the drawing element, and function call information is obtained according to the error object. The error object includes stack trace information, and the stack trace information is used to obtain the function call when the error occurs.

[0142] Get the drawing content corresponding to the string data at the insertion position, and the function call information at the insertion position;

[0143] Display drawing content and function call information.

[0144] Optionally, the inserting unit 805 is specifically configured to:

[0145] Insert the screenshot function into the target JS code according to the location of each function object;

[0146] The screenshot unit is specifically used for:

[0147] According to the order of the position of each function object, the drawing content and function call information corresponding to each position are displayed from top to bottom.

[0148] Optionally, the apparatus 800 further includes a deleting unit 807, and the deleting unit 807 is configured to:

[0149] Delete the string data corresponding to the drawing content.

[0150] Optionally, the acquiring unit 801 is further configured to:

[0151] Get the code coverage report of the target JS code;

[0152] The apparatus 800 further includes a debugging unit 808, which is used to:

[0153] Debug the target JS code based on the code coverage report and function call information.

[0154] Optionally, the device 800 further includes a switch unit 809, and the switch unit 809 is used to:

[0155] Define the switch variable in the target JS code. The switch variable is used to control the execution of the screenshot function.

[0156] Optionally, the switch unit 809 is specifically used for:

[0157] Display switch controls;

[0158] In response to a trigger instruction to the switch control, the switch variable is adjusted.

[0159] The embodiment of the present application also provides an electronic device, the electronic device includes a memory and a processor, the memory stores a computer program, and the processor implements the above-mentioned function call processing method based on drawing elements when executing the computer program. The electronic device can be any intelligent terminal including a tablet computer, a car computer, etc.

[0160] See also Fig. 9 , Fig. 9 The hardware structure of an electronic device of another embodiment is illustrated, and the electronic device includes:

[0161] The processor 901 may be implemented by a general-purpose CPU (Central Processing Unit), a microprocessor, an application-specific integrated circuit (Application Specific Integrated Circuit, ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of the present application;

[0162] The memory 902 may be implemented in the form of a read-only memory (ROM), a static storage device, a dynamic storage device, or a random access memory (RAM). The memory 902 may store an operating system and other application programs. When the technical solution provided in the embodiment of this specification is implemented by software or firmware, the relevant program code is stored in the memory 902, and the processor 901 calls and executes the function call processing method based on the drawing element in the embodiment of this application;

[0163] Input / output interface 903, used to implement information input and output;

[0164] Communication interface 904, used to realize communication interaction between the device and other devices, which can be realized by wired mode (such as USB, network cable, etc.) or wireless mode (such as mobile network, WIFI, Bluetooth, etc.);

[0165] A bus 905 that transmits information between various components of the device (e.g., the processor 901, the memory 902, the input / output interface 903, and the communication interface 904);

[0166] The processor 901 , the memory 902 , the input / output interface 903 and the communication interface 904 are connected to each other in communication within the device via a bus 905 .

[0167] The embodiment of the present application further provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the function call processing method based on drawing elements is implemented.

[0168] The memory, as a non-transient computer-readable storage medium, can be used to store non-transient software programs and non-transient computer executable programs. In addition, the memory may include a high-speed random access memory, and may also include a non-transient memory, such as at least one disk storage device, a flash memory device, or other non-transient solid-state storage device. In some embodiments, the memory may optionally include a memory remotely disposed relative to the processor, and these remote memories may be connected to the processor via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0169] The embodiments described in the embodiments of the present application are intended to more clearly illustrate the technical solutions of the embodiments of the present application and do not constitute a limitation on the technical solutions provided in the embodiments of the present application. Those skilled in the art will appreciate that with the evolution of technology and the emergence of new application scenarios, the technical solutions provided in the embodiments of the present application are also applicable to similar technical problems.

[0170] Those skilled in the art will appreciate that the technical solutions shown in the figures do not constitute a limitation on the embodiments of the present application, and may include more or fewer steps than shown in the figures, or a combination of certain steps, or different steps.

[0171] The device embodiments described above are merely illustrative, and the units described as separate components may or may not be physically separated, that is, they may be located in one place or distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0172] Those skilled in the art will appreciate that all or some of the steps in the methods disclosed above, and the functional modules / units in the systems and devices may be implemented as software, firmware, hardware, or a suitable combination thereof.

[0173] The terms "first", "second", "third", "fourth", etc. (if any) in the specification of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0174] It should be understood that in the present application, "at least one (item)" means one or more, and "plurality" means two or more. "And / or" is used to describe the association relationship of associated objects, indicating that three relationships may exist. For example, "A and / or B" can mean: only A exists, only B exists, and A and B exist at the same time, where A and B can be singular or plural. The character " / " generally indicates that the previous and next associated objects are in an "or" relationship. "At least one of the following items" or similar expressions refers to any combination of these items, including any combination of single items or plural items. For example, at least one of a, b or c can mean: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, c can be single or plural.

[0175] In the several embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the above units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0176] The units described above as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0177] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0178] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including multiple instructions to enable a computer device (which can be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of various embodiments of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (Read-Only Memory, referred to as ROM), random access memory (Random Access Memory, referred to as RAM), disk or optical disk and other media that can store programs.

[0179] The preferred embodiments of the present invention are described above with reference to the accompanying drawings, but the scope of the rights of the present invention is not limited thereto. Any modification, equivalent substitution and improvement made by a person skilled in the art without departing from the scope and essence of the present invention should be within the scope of the rights of the present invention. < / pre> < / canvas> < / canvas> < / canvas>

Claims

1. A function call processing method based on drawing elements, characterized in that: include: Get the target JS code to be debugged; Use a parser to parse the target JS code to obtain an abstract syntax tree file; Call the analysis function to analyze the drawing elements in the web page and obtain a drawing attribute list; Determine an array object according to the nodes corresponding to the drawing attribute list in the abstract syntax tree file, wherein the array object includes a function object corresponding to each of the nodes; A screenshot function is inserted into the target JS code according to the array object, and the screenshot function is used to take a screenshot of the function call information and the corresponding drawing content at the insertion position.

2. The method according to claim 1, characterized in that After inserting the screenshot function into the target JS code according to the array object, the method further includes: Convert the drawing element into string data through the screenshot function; Creating an error object in the drawing function of the drawing element, and obtaining function call information according to the error object, wherein the error object includes stack trace information, and the stack trace information is used to obtain the function call when the error occurs; Acquire the drawing content corresponding to the string data at the insertion position and the function call information at the insertion position; The drawing content and the function call information are displayed.

3. The method according to claim 2, characterized in that The inserting a screenshot function into the target JS code according to the array object comprises: Insert the screenshot function into the target JS code according to the position of each function object; The displaying of the drawing content and the function call information includes: According to the order of the positions of each of the function objects, the drawing content and the function call information corresponding to each position are displayed from top to bottom.

4. The method according to claim 2, characterized in that After displaying the drawing content and the function call information, the method further includes: Delete the string data corresponding to the drawing content.

5. The method according to claim 2, characterized in that: The method further comprises: Obtain a code coverage report of the target JS code; The target JS code is debugged according to the code coverage report and the function call information.

6. The method according to claim 1, characterized in that After inserting the screenshot function into the target JS code according to the array object, the method further includes: A switch variable is defined in the target JS code, and the switch variable is used to control the execution of the screenshot function.

7. The method according to claim 6, characterized in that After defining the switch variable in the target JS code, the method further includes: Display switch controls; In response to a trigger instruction to the switch control, the switch variable is adjusted.

8. A function call processing device based on drawing elements, characterized in that: include: The acquisition unit is used to obtain the target JS code to be debugged; A parsing unit, used to parse the target JS code using a parser to obtain an abstract syntax tree file; The analysis unit is used to call the analysis function to analyze the drawing elements in the web page and obtain a drawing attribute list; A determining unit, configured to determine an array object according to the nodes corresponding to the drawing attribute list in the abstract syntax tree file, wherein the array object includes a function object corresponding to each of the nodes; The insertion unit is used to insert a screenshot function into the target JS code according to the array object, and the screenshot function is used to take a screenshot of the function call information and the corresponding drawing content at the insertion position.

9. An electronic device, characterized in that: The electronic device comprises a memory and a processor, the memory stores a computer program, and the processor implements the function call processing method based on drawing elements as claimed in any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the function call processing method based on drawing elements according to any one of claims 1 to 7 is implemented.

Images