Cross-platform Web front-end source code positioning method and system based on AST analysis

Abstract

The invention relates to the field of web local development and debugging, and discloses a cross-platform Web front-end source code positioning method and system based on AST parse.The method comprises the steps that plug-ins are integrated in a development environment, and source code file paths, DOM element information and file mapping relations are automatically collected in the source code compiling stage; the method comprises the following steps: analyzing DOM elements in a source code by using an AST analysis technology, automatically extracting source code position information corresponding to each DOM element, and injecting the information into self-defined attributes of the DOM elements; starting a local HTTP service, and receiving a source code positioning request from a browser end; when the page is loaded, an interaction logic code is injected, and the source code position information of the DOM element is sent to a local HTTP service; after the server side receives a request sent by the browser side, position information in the request is analyzed, a local IDE is started and controlled by utilizing childProcess.spread, a specified source code file is automatically opened, and a specified row number and a specified column number are positioned. The method has the advantages of automation, rapidness and accuracy.

Description

Technical Field

[0001] The present invention relates to the field of web local development and debugging, and specifically to a cross-platform web front-end source code positioning method and system based on AST parsing. Background Art

[0002] In modern web development, developers usually need to manually search for corresponding elements in the source code according to the page structure to ensure that the page display meets the design requirements. However, this process has significant efficiency bottlenecks, especially in complex or large projects. Developers need to analyze the source code line by line, understand the relationships between each HTML element, CSS style, and JavaScript script, and manually locate and modify. This manual search is not only time-consuming but also error-prone. Especially when the project structure is not standardized or there is no unified development standard, the corresponding relationship between the source code and page elements may be extremely complex and ambiguous, making it difficult for developers to quickly locate and make adjustments. As the scale of web development projects continues to expand and the diversity of front-end frameworks and technology stacks increases, the project structure becomes increasingly complex. The differences in code organization methods among different developers or teams make the element positioning problem in the code more complex and difficult. This makes it difficult for traditional manual search methods to meet the requirements of rapid iteration and efficient collaboration.

[0003] Currently, some development tools attempt to simplify this process by using static analysis techniques, but these methods usually rely on simple string matching or static lookups based on the DOM tree, lacking in-depth understanding and intelligent support, and often can only handle some simple cases and cannot adapt to the requirements of complex pages and dynamic interactions. Most of the existing tools fail to consider the differences between different development environments, resulting in poor cross-platform applicability. Therefore, it is necessary to design a cross-platform web front-end source code positioning method and system based on AST parsing that can solve the problems of low efficiency and high error rate in manually finding the corresponding relationship between the source code and page elements in the prior art and provide an automated, fast, and accurate solution. Summary of the Invention

[0004] (1) Technical Problems to be Solved

[0005] In view of the deficiencies of the prior art, the present invention provides a cross-platform web front-end source code positioning method and system based on AST parsing, which has the advantages of automation, speed, and accuracy, and solves the problems in the above background art.

[0006] (2) Technical Solutions

[0007] To achieve the above purposes of automation, speed, and accuracy, the present invention provides the following technical solutions: A cross-platform web front-end source code positioning method based on AST parsing, comprising the following steps:

[0008] S1: Integrate the plugin in the development environment and automatically collect the source code file paths, DOM element information, and file mapping relationships during the source code compilation stage.

[0009] Preferably, S1 further includes that the plugin automatically collects the source code file paths and DOM element position information during the compilation stage, establishes the mapping relationship between the source code and page elements, injects the source code position information into the custom attributes of the DOM elements through dynamic instrumentation, and the plugin automatically adjusts the strategy according to different project structures and build tools.

[0010] S2: Use AST parsing technology to parse the DOM elements in the source code, automatically extract the source code position information corresponding to each DOM element, and inject this information into the custom attributes of the DOM elements.

[0011] Preferably, S2 further includes extracting the position information of DOM elements by statically analyzing HTML, CSS, and JavaScript source code, using an AST parsing tool to perform a detailed parse of the source code, identifying the definition positions of DOM elements, and automatically injecting the position information into the custom attributes of the DOM elements.

[0012] S3: Start the local HTTP service and receive the source code location request from the browser side.

[0013] Preferably, S3 further includes using a lightweight framework to process the source code location request, receiving and parsing RESTful API requests containing source code position information, supporting request paths and query parameters, and having CORS support.

[0014] S4: When the page is loaded, inject the interaction logic code and send the source code position information of the DOM elements to the local HTTP service.

[0015] Preferably, S4 further includes a method of automatically injecting interaction logic code when the page is loaded through a build tool, extracting the source code position information of DOM elements by listening to DOM events and interacting with users, and asynchronously sending HTTP requests to the local HTTP service. The interaction logic supports multiple front-end frameworks, and through an asynchronous request mechanism, the page interaction performance is optimized, including an error handling mechanism.

[0016] After the server side receives the request sent from the browser side, it parses the position information in the request, uses child_process.spawn to start and control the local IDE, automatically opens the specified source code file, and locates to the specified line number and column number.

[0017] Preferably, S5 further includes parsing the HTTP request sent by the browser side, extracting the source code location information, and using the child_process.spawn method of Node.js to start the local IDE for automated operations. The server controls the IDE to open the source code file and jump to the specified location by passing command-line parameters, supports multiple IDEs and operating systems, and is executed asynchronously.

[0018] A cross-platform Web front-end source code location system based on AST parsing, including a source code collection and mapping module, an AST parsing and location information injection module, an HTTP service module, an interaction logic module, and an IDE startup and control module;

[0019] The source code collection and mapping module is responsible for scanning DOM elements in the source code, recording information such as the file path, line number, and column number of the elements, and generating a mapping relationship between the source code and the page elements;

[0020] The AST parsing and location information injection module uses AST parsing technology to analyze the source code, extracts the source code location information corresponding to the DOM elements, and injects the parsed location information into the custom attributes of each DOM element;

[0021] The HTTP service module starts a local HTTP service for receiving source code location requests from the browser side;

[0022] The interaction logic module automatically injects interaction logic code when the page is loaded, listens for user interactions with page elements, and when the user interacts with a page element, extracts the source code location information in the custom attributes of the element and sends this information to the local HTTP service via an HTTP request;

[0023] After the server of the IDE startup and control module receives the location request, it uses child_process.spawn to start the local IDE, passes the relevant parameters to the IDE, automatically opens the specified source code file, and in the IDE, automatically locates to the specified line number and column number.

[0024] Preferably, the source code collection and mapping module further includes integrating a plugin in the development environment and automatically collecting the source code file path, DOM element information, and file mapping relationship during the source code compilation stage, supporting multiple build tools and front-end frameworks, and automatically adapting to different project structures and build processes.

[0025] (III) Beneficial effects

[0026] Compared with the prior art, the present invention provides a cross-platform Web front-end source code location method and system based on AST parsing, having the following beneficial effects:

[0027] 1. An automated source code location process reduces the time and errors of manual search.

[0028] 2. Utilizing AST parsing technology improves the accuracy of the correspondence between source code and page elements.

[0029] 3. Cross-platform and cross-framework, supporting a wide range of packaging tools and frameworks, including but not limited to webpack, vite, rspack, umi, as well as vue2, vue3, react, preact, solid, etc. It also supports multiple SSR scenarios and micro-frontend architectures. With its highly flexible and applicable cross-editor compatibility design, the present invention can be widely applied to different development environments.

[0030] 4. It takes effect automatically in the development environment without affecting the production environment, and is easy to access without modifying the source code or other configurations. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] Figure 1 It is a schematic diagram of the method of the present invention;

[0032] Figure 2 It is a schematic diagram of the structure of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0033] Next, the technical solutions in the embodiments of the present invention will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of the present invention.

[0034] The present invention provides a technical solution: A cross-platform Web front-end source code location method based on AST parsing, including the following steps:

[0035] S1: Integrate a plugin in the development environment and automatically collect the source code file path, DOM element information, and file mapping relationship during the source code compilation stage.

[0036] The plugin is integrated into the development environment and automatically integrates with build tools such as Webpack, Vite, Rspack, etc., participating in the compilation process of the source code. During compilation, the plugin automatically collects information such as source code file paths, DOM elements and their positions by analyzing the build process of the build tool. It supports multiple front-end frameworks such as Vue, React, Preact, Solid, etc. and multiple build tools, and automatically processes different project structures. It automatically parses and establishes the mapping relationship between source code files and page elements, ensuring that each page element can be traced back to the specific location of the source code. During the operation of the plugin, through dynamic instrumentation in the compilation stage, the source code location information is automatically injected into custom attributes of DOM elements, such as data-source-path, data-line-number, etc., forming the correspondence between page elements and source code. Without disturbing the production code, the plugin ensures that developers can obtain real-time source code location information in the page through static analysis and dynamic injection of the source code. The plugin can support cross-framework applications, including but not limited to React, Vue, Preact, Solid, etc., and also supports SSG and SSR scenarios, ensuring normal operation in various development environments. It has high adaptability and can automatically adjust strategies according to different build tools such as webpack, vite, rspack, etc., ensuring the efficiency and accuracy of information collection.

[0037] Automated information collection eliminates the need for developers to manually search for the mapping relationship between source code and DOM elements, and the whole process is automated. This not only saves time but also reduces errors that are prone to occur during manual searching, significantly improving development efficiency. By collecting and injecting source code file paths and location information during the compilation stage, it ensures that each DOM element can be precisely matched with its corresponding source code. When developers view page elements, they can quickly locate the corresponding source code without having to flip through code files to find the element's corresponding position. The plugin's design fully considers cross-platform support and can run on operating systems such as Windows, macOS, Linux, etc., and is compatible with different front-end frameworks such as Vue, React, Preact, etc. and multiple build tools such as webpack, vite, rspack, etc. This makes the technology widely applicable in various development environments, improving its applicability. The plugin is only enabled in the development environment and does not affect the operation of the production environment. Developers can use the plugin in the local environment for source code location, and no additional configuration or modification is required in the production environment, ensuring the independence and stability of the development and production environments. The integration and access of the plugin are very simple. Without modifying the project source code or other configuration files, developers only need to install and enable the plugin to automatically start the information collection and source code location functions. This reduces complex configuration steps and improves the usability and development efficiency of the technology.

[0038] S2: Use AST parsing technology to parse DOM elements in the source code, automatically extract the source code location information corresponding to each DOM element, and inject this information into the custom attributes of the DOM elements.

[0039] Use abstract syntax tree (AST) parsing technology to perform static analysis on the source code, including HTML, CSS, and JavaScript. By parsing these code structures, extract the source code location information corresponding to each DOM element, such as file path, line number, column number, etc. Use mature AST parsing tools, such as Babel, Esprima, etc., to parse the source code in detail and identify the definition locations of DOM elements. During the parsing process, for HTML tags, CSS selectors, and DOM operations in JavaScript, such as document.getElementById(), document.querySelector(), etc., extract the exact locations of each DOM element, including information such as its file path, line number, column number, tag name, class name, ID, etc. Combine the source code structure generated during compilation to automatically analyze the association between DOM elements and the corresponding source code to ensure accuracy. Inject the source code location information of each DOM element, such as data-source-path, data-line-number, data-column-number, etc., as custom attributes into the DOM elements. In this way, the location information between DOM elements and the source code is accurately mapped and can be easily accessed on the browser side. Support the accurate injection of different types of elements, such as HTML tags, components, nested elements, etc. in the DOM structure to ensure no omission. This process is automatically executed during the project's build phase and is integrated through plugins or build tools, such as webpack, vite, rspack, etc., without the need for developers to intervene manually. Developers only need to configure the plugin, and the build tool will automatically parse the source code and inject the location information. Support multiple build tools and frameworks, such as React, Vue, Preact, Solid, etc., and can adapt to different development environments and project structures.

[0040] Through AST parsing and the injection of custom attributes, developers can directly view the source code location corresponding to each DOM element in the browser. When clicking on a DOM element, information such as the source code file path, line number, and column number associated with it can be quickly obtained, greatly improving the positioning efficiency and accuracy during the development process. Automatically parsing the source code and injecting location information eliminates the cumbersome process of developers manually searching for code locations, reduces errors caused by human negligence or complex project structures, and ensures that the mapping relationship between the source code and DOM elements is always accurate. When developers are debugging and locating problems, they do not need to manually search for DOM elements in the source code. They can directly locate the relevant source code lines by simply clicking on the elements on the page, significantly improving the development, debugging, and maintenance efficiency. This method is applicable to various front-end frameworks and build tools, supports a wide range of technology stacks, such as Vue, React, Preact, Solid, etc., and can handle source codes generated by various build tools, such as webpack, vite, etc. Whether it is a single-page application (SPA), server-side rendering (SSR), or micro-frontend architecture, it can be used compatibly. By embedding source code location information in DOM elements, the traceability and maintainability of the code can be increased. In large-scale projects, developers can quickly understand the origin of each page element, facilitating code optimization and bug troubleshooting. This technology only takes effect in the development environment and does not affect the operation of the production environment. Automatically injecting location information through the plugin mechanism of the build tool, without modifying the source code or manual configuration, ensures the smoothness of the development process and the stability of the production environment.

[0041] S3: Start the local HTTP service to receive source code location requests from the browser side.

[0042] Start a local HTTP service in the development environment, usually running on a local port of the development machine, such as localhost:3000 or a custom port, specifically for receiving source code location requests sent from the browser side. Use a lightweight HTTP service framework, such as Express, Koa, etc., to quickly build the service and ensure efficient request handling and response speed. This HTTP service supports handling RESTful API requests, can receive and parse the request data sent from the browser side, such as the source code location information in the custom attributes of DOM elements. The service can receive request data containing source code location information, such as file path, line number, column number, etc., and perform appropriate formatting on the data. The request may include multiple parameters, such as file, line, column, etc., and the server can parse these parameters and prepare the corresponding processing logic. Support identifying source code location requests through different request paths, such as / locate-code or query parameters, to flexibly meet different request requirements. The HTTP service supports CORS, enabling browser requests from different domains or ports to access the service normally, suitable for the needs of developing and debugging different projects. Provide basic security mechanisms, such as request verification, rate limiting, API keys, etc., to prevent unauthorized access and abuse. The HTTP service processes requests asynchronously to ensure that it does not block the main thread. For requests involving complex operations, such as starting an IDE, finding file locations, etc., the service can quickly respond and handle multiple requests in parallel. When processing source code location requests, ensure a quick return of the location results to enhance the user experience. Especially in large projects, the response speed is particularly important.

[0043] By starting a local HTTP service, developers can initiate source code location requests from the browser side in real time and quickly locate the exact position of the source code. Whether it is debugging page styles, functions, or viewing the specific implementation of the code, developers can directly obtain the location information of the source code from the browser interaction interface. The service can efficiently process source code location requests and accurately return the source code file path, line number, and column number information related to page elements. Through the linkage between the browser side and the local service, developers can accurately locate the code without manually searching for files, greatly improving development efficiency. Since the HTTP service runs on a local port, it can be compatible with various operating systems such as Windows, macOS, and Linux and support requests in different development environments, providing a unified source code location function. Regardless of the operating system or toolchain used by developers, the HTTP service can provide a consistent experience. The local HTTP service is designed with high flexibility and can be compatible with multiple front-end frameworks, build tools, and development toolchains. Whether using front-end frameworks such as Webpack, Vite, React, or Vue, source code location requests sent from the browser side can be processed by this service, ensuring universality in different development environments. The enabling of the HTTP service simplifies the debugging process for developers, enabling them to interactively locate the source code directly from the browser side. This automated location method reduces developers' dependence on manual searching and switching editors during development, improves work efficiency, and reduces errors during development. The HTTP service is only started in the development environment and does not affect the stability and performance of the production environment. Through development tools or environment variable configuration, developers can flexibly control the enabling and disabling of the service to ensure the development nature of this function without any impact on the production environment.

[0044] S4: When the page is loaded, inject interactive logic code to send the source code location information of DOM elements to the local HTTP service.

[0045] When the page loads, the interactive logic code is automatically injected through build tools such as Webpack, Vite, etc. This code can be injected into the page or part of it through a script to ensure that it takes effect immediately after the page elements are rendered. The injected interactive logic code allows users to interact with page elements and trigger source code location operations by listening to DOM events in the page, such as click, mouseover, etc. When the user clicks or interacts with a DOM element on the page, the interactive logic code extracts the source code location information from the custom attributes of the DOM element, such as data-source-path, data-line-number, data-column-number, etc. Using technologies such as fetch or XMLHttpRequest, the extracted source code location information is asynchronously sent as an HTTP request to the HTTP service running locally to ensure the efficiency and accuracy of data transmission. The interactive logic code can handle DOM elements from different pages and frameworks and supports multiple front-end frameworks such as React, Vue, Preact, etc. Even for the dynamically loaded content in a single-page application (SPA), the interactive logic can take effect in real time to ensure that the source code location is always accurate. When sending a request, the interactive logic code ensures that the DOM element location information is sent asynchronously without blocking other interactive operations on the page. By using mechanisms such as Promise, async / await, etc., the asynchronous process of the request is optimized to enhance the user experience. The interactive logic code contains a robust error handling mechanism to ensure that when the user clicks or an error occurs, subsequent operations are not affected. If the HTTP service cannot be accessed or the response fails, the code will handle these errors and provide friendly feedback to the user.

[0046] By automatically injecting interactive logic when the page loads, users can directly obtain the source code location information associated with page elements through simple click operations. Users do not need to manually search for the source code, reducing the complexity for developers during the debugging process. Automatically injecting the interactive logic code when the page loads and directly obtaining the source code location information by clicking on page elements greatly improves the debugging efficiency. Developers can locate the source code in real-time and precisely, reducing the cumbersome manual search process and enhancing the accuracy of code maintenance. This technology can work across multiple front-end frameworks, such as Vue, React, etc. and dynamic content, ensuring wide applicability. Regardless of how the page content is updated or changed, users can accurately locate the source code through interactive operations. By asynchronously sending the source code location information, users can quickly get feedback on source code location when clicking on page elements. This instant feedback greatly speeds up the debugging and development process, especially in scenarios where frequent debugging and problem location are required. The automatic injection of interactive logic ensures that developers do not need to manually write code or modify the existing page structure. This non-intrusive implementation method ensures the automated processing of the source code during development without affecting other functions and performance of the page. When developers interact with the page in the browser, they can conveniently obtain the source code information corresponding to page elements without having to switch to the editor to search. This interactive method improves the work efficiency of developers and makes the debugging process smoother and easier to use.

[0047] S5: After the server receives the request sent from the browser side, it parses the location information in the request, uses child_process.spawn to start and control the local IDE, automatically opens the specified source code file, and locates to the specified line number and column number.

[0048] The server parses the HTTP requests from the browser side and extracts the source code location information in the requests, including data such as file path, line number, and column number. The server needs to be able to handle requests in different formats and ensure accurate parsing of relevant parameters. It supports multiple data transmission formats, such as JSON, URL-encoded parameters, etc., and ensures that the location information in the requests can accurately correspond to the path, line number, and column number of the source code file. The server uses the child_process.spawn method of Node.js to start local IDEs, such as VS Code, Sublime Text, WebStorm, etc. and passes the corresponding command-line parameters. Through the spawn method, the server can control the process of the local IDE, pass startup instructions to it, and specify the file to be opened and the line number and column number to be located. This way can achieve automated operation of the IDE without manual intervention. Once the child_process.spawn successfully starts the IDE, the server will automatically open the specified source code file by passing parameters such as file path and line and column numbers. If the file has not been opened, the IDE will start the file and display it in the editor; if the file has been opened, the IDE will directly jump to the corresponding line and column number position. The child_process.spawn can automatically select the appropriate commands and paths according to the operating system to ensure that the IDE can be successfully started and the file can be opened on different platforms. The server needs to consider the compatibility of multiple IDEs, be able to handle the command-line parameter formats of different IDEs, and ensure that it can support common IDEs, such as VS Code, WebStorm, SublimeText, etc. The operations of the server and the startup of the IDE are asynchronous to ensure that the main thread is not blocked. The spawn method starts the IDE process asynchronously and can monitor the startup status and execution results of the IDE process in real time. At the same time, the spawn method allows control of the IDE process, such as killing the process, obtaining error information, etc., to ensure the stability and controllability of the system. After the server successfully starts the IDE and opens the source code file, it will return a success message to the browser side; if an error occurs, such as a file path error, the IDE is not installed, etc., it will return an error message and provide corresponding debugging tips.

[0049] Launch the local IDE through child_process.spawn and automatically open the specified source code file, so that developers do not need to manually search for and open the file. This process realizes the automation of source code location and editing, improves development efficiency, especially when debugging and locating problems, saving a lot of time. The server successfully parses the location information in the request and precisely controls the IDE to locate to the specified row and column, ensuring that developers can directly jump to the key positions of the code. It reduces the time for manually searching and locating the source code and reduces debugging problems caused by incorrect or missed location. This technical feature enables developers to obtain a consistent experience in different operating systems and development environments. Whether it is Windows, macOS or Linux, the server can successfully launch the local IDE and precisely locate the source code. It supports multiple mainstream IDEs and text editors, such as VS Code, WebStorm, Sublime Text, etc., to meet the needs of different developers. Use asynchronous child_process.spawn to ensure that the startup of the IDE does not block other tasks and avoid affecting the performance of the server. By processing requests asynchronously, developers can continue with other development operations while waiting for the source code to be located, improving the fluency of the workflow. Developers can quickly locate the source code file and view the relevant code by clicking on page elements or initiating an HTTP request. The entire debugging process is automated, reducing the time for searching for code and switching editors, thus improving the maintainability of the code and the debuggability of the project. This technical solution greatly improves the development experience of users through a simplified operation process. At the same time, the server ensures timely response in case of errors through a process monitoring and feedback mechanism, ensuring the stability and reliability of the system. Since the source code needs to be located frequently during the development process, the automated way of locating and opening the source code file can greatly simplify the debugging process of large-scale projects. Whether it is a project involving a large number of files and complex code, or dynamically generated code, developers can quickly and accurately locate and solve problems.

[0050] It should be noted that in this article, relational terms such as first and second are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the term "comprising", "including" or any other variant thereof is intended to cover non-exclusive inclusion, so that a process, method, article or device comprising a series of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article or device.

[0051] Although embodiments of the present invention have been shown and described, those of ordinary skill in the art will appreciate that various changes, modifications, substitutions and variations can be made to these embodiments without departing from the principles and spirit of the present invention. The scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A cross-platform Web front-end source code location method based on AST parsing, characterized in that: The following steps are involved: S1: Integrate the plug-in in the development environment and automatically collect the source code file path, DOM element information, and file mapping relationship during the source code compilation stage; S2: Use AST parsing technology to parse the DOM elements in the source code, automatically extract the source code location information corresponding to each DOM element, and inject this information into the custom attributes of the DOM element; S3: Start the local HTTP service and receive the source code location request from the browser; S4: When the page is loaded, the interactive logic code is injected and the source code location information of the DOM element is sent to the local HTTP service; S5: After receiving the request from the browser, the server parses the location information in the request, uses child_process.spawn to start and control the local IDE, automatically opens the specified source code file, and locates the specified line number and column number.

2. A cross-platform Web front-end source code location method based on AST parsing according to claim 1, characterized in that: The S1 further includes a plug-in that automatically collects source code file paths and DOM element location information during the compilation phase, and establishes a mapping relationship between source code and page elements. Through dynamic plug-in, the source code location information is injected into the custom attributes of the DOM element. The plug-in automatically adjusts the strategy according to different project structures and build tools.

3. A cross-platform Web front-end source code location method based on AST parsing according to claim 1, characterized in that: The S2 further includes extracting the location information of DOM elements by statically analyzing HTML, CSS and JavaScript source codes, using AST parsing tools to parse the source codes in detail, identifying the definition locations of DOM elements, and automatically injecting the location information into custom attributes of DOM elements.

4. A cross-platform Web front-end source code location method based on AST parsing according to claim 1, characterized in that: The S3 further includes using a lightweight framework to process source code location requests, receiving and parsing RESTful API requests containing source code location information, supporting request paths and query parameters, and having CORS support.

5. A cross-platform Web front-end source code location method based on AST parsing according to claim 1, characterized in that: The S4 further includes a method for automatically injecting interactive logic code when a page is loaded through a construction tool, interacting with users by listening to DOM events, extracting source code location information of DOM elements and asynchronously sending HTTP requests to local HTTP services. The interactive logic supports multiple front-end frameworks and optimizes page interactive performance through an asynchronous request mechanism, including an error handling mechanism.

6. A cross-platform Web front-end source code location method based on AST parsing according to claim 1, characterized in that: The S5 further includes parsing the HTTP request sent by the browser, extracting the source code location information, and using the child_process.spawn method of Node.js to start the local IDE for automated operation. The server controls the IDE to open the source code file and jump to the specified location by passing command line parameters. It supports multiple IDEs and operating systems and is executed asynchronously.

7. A cross-platform Web front-end source code location system based on AST parsing, applied to a cross-platform Web front-end source code location method based on AST parsing as claimed in any one of claims 1 to 6, characterized in that: It includes source code collection and mapping module, AST parsing and location information injection module, HTTP service module, interactive logic module and IDE startup and control module; The source code collection and mapping module is responsible for scanning the DOM elements in the source code, recording the file path, line number, column number and other information of the elements, and generating a mapping relationship between the source code and the page elements; The AST parsing and location information injection module uses AST parsing technology to analyze the source code, extracts the source code location information corresponding to the DOM element, and injects the parsed location information into the custom attributes of each DOM element; The HTTP service module starts a local HTTP service to receive a source code location request from a browser. The interactive logic module automatically injects interactive logic code when the page is loaded, monitors the user's interaction with the page elements, extracts the source code location information in the custom attributes of the element when the user interacts with the page elements, and sends the information to the local HTTP service through an HTTP request; After receiving the positioning request, the IDE startup and control module server uses child_process.spawn to start the local IDE, passes relevant parameters to the IDE, automatically opens the specified source code file, and automatically locates to the specified line number and column number in the IDE.

8. A cross-platform Web front-end source code location system based on AST parsing according to claim 7, characterized in that: The source code collection and mapping module further includes integrating plug-ins in the development environment, and automatically collecting source code file paths, DOM element information and file mapping relationships during the source code compilation phase, supporting multiple construction tools and front-end frameworks, and automatically adapting to different project structures and construction processes.

Images