Data processing method and device, computer device, storage medium and program product

Abstract

This application relates to a data processing method, apparatus, computer equipment, storage medium, and program product. The method includes: acquiring a page file to be tested, which is obtained by compiling a page source file; running the page file to be tested; and displaying the corresponding page to be tested, wherein the page to be tested includes at least one page element. In response to an element code viewing event, a page element viewing mode is entered. While in page element viewing mode, in response to a selection operation of a target page element among at least one page element, element position information of the target page element is obtained from the page file to be tested. Based on the element position information, the element code content of the target page element is determined from the page source file, and the element code content is displayed. This method can reduce tedious processing operations during project development and debugging, and improve the efficiency of code content location processing during project development and debugging.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a data processing method, apparatus, computer equipment, computer-readable storage medium, and computer program product. Background Technology

[0002] With the development of computer technology and the widespread use of various applications or application platforms, in order to meet different needs in the actual application process, it is necessary to develop and debug the application or platform. During the development and debugging process, if it is necessary to view the new function of the specified code or detect the error, it is necessary to locate the specified code or error code so that the developers can view or modify it.

[0003] In traditional technologies, during the functional development and debugging of applications or platforms, due to the large scale of development projects involving numerous code files with different functions or development platforms, the usual approach to locating specific or erroneous code is to perform a global keyword search within the code development platform and then locate the specific code based on the search results. When the same keyword (such as a specific code segment within the specified code) appears multiple times, a large number of search results are obtained, requiring sequential review and analysis of each search result to determine the specific code. This approach still suffers from low efficiency in locating and processing code content during project development and debugging. Summary of the Invention

[0004] Therefore, it is necessary to provide a data processing method, apparatus, computer equipment, computer-readable storage medium, and computer program product that can improve the efficiency of code content location and processing during project development and debugging, in order to address the above-mentioned technical problems.

[0005] In a first aspect, this application provides a data processing method, comprising: acquiring a page file to be tested; the page file to be tested being obtained by compiling a page source file; running the page file to be tested and displaying the corresponding page to be tested; the page to be tested including at least one page element; in response to an element code viewing event, entering a page element viewing mode; while in the page element viewing mode, in response to a selection operation of a target page element among the at least one page element, acquiring element position information of the target page element from the page file to be tested; based on the element position information, determining the element code content of the target page element from the page source file, and displaying the element code content.

[0006] Secondly, this application also provides a data processing apparatus, comprising: a page file acquisition module for acquiring a page file to be detected; the page file to be detected is obtained by compiling a page source file; a page display module for running the page file to be detected and displaying the corresponding page to be detected; the page to be detected includes at least one page element; an element position information acquisition module for entering a page element viewing mode in response to an element code viewing event, and in response to a selection operation of a target page element among the at least one page element, acquiring element position information of the target page element from the page file to be detected; and an element code content display module for determining the element code content of the target page element from the page source file based on the element position information and displaying the element code content.

[0007] Thirdly, this application also provides a computer device, including a memory and a processor. The memory stores a computer program, and the processor executes the computer program to perform the following steps: acquiring a page file to be detected; the page file to be detected is obtained by compiling a page source file; running the page file to be detected and displaying the corresponding page to be detected; the page to be detected includes at least one page element; in response to an element code viewing event, entering a page element viewing mode; in the page element viewing mode, in response to a selection operation of a target page element among the at least one page element, acquiring element position information of the target page element from the page file to be detected; based on the element position information, determining the element code content of the target page element from the page source file, and displaying the element code content.

[0008] Fourthly, this application also provides a computer-readable storage medium storing a computer program thereon, which, when executed by a processor, performs the following steps: obtaining a page file to be detected; the page file to be detected is obtained by compiling a page source file; running the page file to be detected and displaying the corresponding page to be detected; the page to be detected includes at least one page element; in response to an element code viewing event, entering a page element viewing mode; in the page element viewing mode, in response to a selection operation of a target page element among the at least one page element, obtaining element position information of the target page element from the page file to be detected; based on the element position information, determining the element code content of the target page element from the page source file, and displaying the element code content.

[0009] Fifthly, this application also provides a computer program product, including a computer program that, when executed by a processor, performs the following steps: acquiring a page file to be detected; the page file to be detected is obtained by compiling a page source file; running the page file to be detected and displaying the corresponding page to be detected; the page to be detected includes at least one page element; in response to an element code viewing event, entering a page element viewing mode; while in the page element viewing mode, in response to a selection operation of a target page element among the at least one page element, acquiring element position information of the target page element from the page file to be detected; based on the element position information, determining the element code content of the target page element from the page source file, and displaying the element code content.

[0010] In the aforementioned data processing methods, apparatus, computer equipment, computer-readable storage media, and computer program products, a page to be tested file, obtained by compiling a page source file, is acquired and run to display the corresponding page to be tested. The page to be tested includes at least one page element. Further, the terminal enters a page element viewing mode in response to an element code viewing event. In this mode, developers can trigger element selection and element code content viewing operations for any page element. Specifically, the terminal, in response to a selection operation targeting a target page element among at least one page element, obtains the element position information of the target page element from the page file to be inspected. Based on the element position information, it determines the element code content of the target page element from the page source file and displays the element code content. This enables the location and viewing of the element code content corresponding to the page element during page debugging. Based on the viewing operation of the element code content of the page element, it can directly jump to display the element code content determined from the page source file based on the page element, without having to open the page source file in the code editing component and then search for the content in the page source file based on the page element. This reduces tedious processing operations during project development and debugging and improves the efficiency of code content location and processing during project development and debugging. Attached Figure Description

[0011] To more clearly illustrate the technical solutions in the embodiments of this application or related technologies, the drawings used in the description of the embodiments of this application or related technologies will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0012] Figure 1 This is a diagram illustrating the application environment of a data processing method in one embodiment.

[0013] Figure 2 This is a flowchart illustrating a data processing method in one embodiment;

[0014] Figure 3 This is a schematic diagram of the page to be detected in a browser in one embodiment;

[0015] Figure 4 This is a schematic diagram of the code editing page of the code editing component in one embodiment;

[0016] Figure 5 This is a flowchart illustrating the process of obtaining element position information corresponding to a target page element in one embodiment.

[0017] Figure 6 This is a schematic diagram of the process for obtaining the page file to be detected in one embodiment;

[0018] Figure 7 This is a schematic diagram illustrating the process of compiling a page file to be detected using a code compilation component in one embodiment.

[0019] Figure 8 This is a flowchart illustrating the data processing method in another embodiment;

[0020] Figure 9 This is a schematic diagram illustrating the pre-selection of target page elements based on the page to be detected in one embodiment;

[0021] Figure 10 This is a flowchart illustrating the data processing method in another embodiment;

[0022] Figure 11 This is a schematic diagram illustrating the process of configuring data for the page file to be detected by locating the processing script through code in one embodiment.

[0023] Figure 12 This is a structural block diagram of a data processing device in one embodiment;

[0024] Figure 13 This is an internal structural diagram of a computer device in one embodiment. Detailed Implementation

[0025] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0026] The data processing method provided in this application embodiment can be applied to, for example... Figure 1In the application environment shown, the terminal, in response to a page detection operation triggered by the developer, obtains the page file to be detected, which is obtained by compiling the page source file. It then runs the page file on the browser deployed on the terminal, displaying the corresponding page 102, and showing at least one page element. Further, in response to an element code viewing event triggered by the developer, the terminal enters page element viewing mode. While in page element viewing mode, in response to the developer's selection of a target page element among the at least one page element displayed on the page to be detected, the terminal obtains the element position information of the target page element from the page file to be detected. Based on the element position information, it determines the element code content of the target page element from the page source file, and then jumps to the code editing page 104 to display the element code content.

[0027] The terminals can be, but are not limited to, various personal computers, laptops, smartphones, tablets, IoT devices, and portable wearable devices. IoT devices can include smart speakers, smart TVs, smart air conditioners, smart in-vehicle systems, and projection devices. Portable wearable devices can include smartwatches, smart bracelets, and head-mounted displays. Head-mounted displays can include virtual reality (VR) devices, augmented reality (AR) devices, and smart glasses.

[0028] In one exemplary embodiment, such as Figure 2 As shown, a data processing method is provided. This method can be executed by a terminal or server alone, or by a terminal and server working together. This method can be applied to... Figure 1 Taking the terminal in the example, the explanation includes the following steps S202 to S208. Wherein:

[0029] Step S202: Obtain the page file to be detected. The page file to be detected is obtained by compiling the page source file.

[0030] Specifically, the terminal is equipped with a browser. During the development and debugging of applications or application platforms, developers can trigger file execution requests for application functions or components based on the terminal. When the terminal receives the file execution request, it can obtain the page file to be tested according to the file execution request and run the obtained page file to be tested in the browser.

[0031] In this process, developers often use different programming languages ​​based on different code editing components or platforms during application development and debugging, resulting in different formats of the source code files. Furthermore, browsers do not support running multiple different code file formats. Therefore, it is usually necessary to compile the source code files, such as the page source files that need to be debugged, to obtain the page file to be tested that can be run in the browser.

[0032] Step S204: Run the page file to be tested and display the corresponding page to be tested. The page to be tested includes at least one page element.

[0033] Specifically, by running the page file to be tested in a browser deployed on the terminal, the corresponding page to be tested can be displayed on the browser page. The page to be tested includes at least one page element. Developers can trigger element code viewing operations for any page element based on the page to be tested. The terminal enters the page element viewing mode in response to the element code viewing operation. That is, when the page element viewing mode is entered, developers can trigger pre-selection operations and selection operations for the page elements in the page to be tested.

[0034] Pre-selection can be understood as a preliminary selection action triggered by the developer for a specific page element. For example, hovering the cursor over a page element for a duration greater than a preset time interval indicates a preliminary selection of that element. Selection, on the other hand, is a deliberate selection action triggered by the developer for a specific page element. For instance, clicking on a page element indicates a need for the developer to view its code content. In this case, the developer needs to identify the corresponding element code content and navigate to the code editing component to display it.

[0035] In one exemplary embodiment, such as Figure 3 As shown, a browser-based page to be tested is provided, for reference... Figure 3 As can be seen, by running the page file to be tested in a browser deployed on the terminal, the corresponding page to be tested can be displayed on the browser page. The page to be tested includes multiple page elements, such as page element 1, page element 2, page element 3, ..., and page element n, etc. Developers can trigger an element code viewing operation for any of the page elements, such as page element 1. The terminal enters page element viewing mode in response to the element code viewing operation triggered by the developer. In page element viewing mode, developers can trigger pre-selection and selection operations for page elements on the page to be tested.

[0036] Step S206: In response to the element code viewing event, enter the page element viewing mode. When entering the page element viewing mode, in response to the selection operation of the target page element in at least one page element, obtain the element position information of the target page element from the page file to be inspected.

[0037] Specifically, developers can trigger an element code viewing event for at least one page element based on the page to be inspected. The terminal enters the page element viewing mode by responding to the element code viewing event triggered by the developer.

[0038] Developers can trigger the element code viewing event by using pre-configured keyboard shortcuts or buttons. These pre-configured shortcuts can be specific to the terminal's keyboard layout, such as "CTRL+ALT," "CTRL+C," or "ALT+A." Developers can then trigger the element code viewing event by pressing the corresponding shortcut. The specific shortcuts can be set and adjusted according to the actual application scenario.

[0039] Pre-configured shortcut buttons can be for specific terminal components such as the touchpad or display screen. For example, for the touchpad, a specific touch area can be designated as a shortcut button to trigger the element code viewing event, allowing developers to activate the event by touching the corresponding touch area. Alternatively, pre-configured shortcut buttons can also be set on the terminal's display screen, allowing developers to trigger the element code viewing event by clicking the corresponding shortcut button with the mouse.

[0040] Furthermore, when entering the page element viewing mode, the developer can trigger a selection operation on at least one page element included in the page to be inspected. Specifically, the terminal responds to the selection operation triggered by the developer on a target page element among the at least one page element, and obtains the target page element indicated by the selection operation, thereby retrieving the element position information of the target page element from the page file to be inspected. This element position information may specifically include the name of the specific code file corresponding to the target page element, the number of lines in the file corresponding to the code file name, and the number of columns in the file.

[0041] Step S208: Based on the element position information, determine the element code content of the target page element from the page source file and display the element code content.

[0042] Specifically, after obtaining the element position information of the target page element from the page file to be detected, the terminal jumps from the current browser-based page to be detected to display the code editing page corresponding to the code editing component, and displays the page source file on the code editing page. Based on the obtained element position information corresponding to the target page element, the terminal determines the element code content of the target page element from the page source file and displays the element code content.

[0043] In the development and debugging of applications or application platforms, if it is necessary to locate the specific code location where an error occurs, or to update and adjust a certain function or component of the application and need to locate the corresponding part of the code, the page source file is a code source file developed and coded based on a code editing component. It can run in the code editing component but cannot run directly in the browser. Traditionally, the method of manually searching or globally searching in the code editing component (or code development platform) is usually adopted. However, since the page source file contains a lot of code content, it takes a lot of time to search and analyze, resulting in low efficiency in searching and locating code content.

[0044] In this embodiment, the page source file is compiled to obtain the page file to be tested, which can be run in the browser deployed on the terminal. This allows for debugging of the application's functions or components based on the browser. Specifically, the page source file corresponding to the function or component to be debugged can be compiled to obtain the page file to be tested, and the page file to be tested can be fed back to the browser deployed on the terminal for running and debugging in the browser to determine whether there are errors or whether certain code segments need to be modified and adjusted.

[0045] Furthermore, when it is determined that an error code or the code content of a specific element needs to be located, the developer can trigger a selection operation on the target page element (such as the page element with the error or the page element corresponding to the specified function) based on the page to be tested displayed in the browser and the page to be tested file. The terminal, in response to the selection operation triggered by the developer on the target page element, obtains the target page element indicated by the selection operation, obtains the element position information of the target page element from the page to be tested file, and jumps from the current browser-based page to the code editing page corresponding to the code editing component. Thus, based on the obtained element position information corresponding to the target page element, the element code content of the target page element can be determined from the page source file, and the element code content can be directly displayed on the code editing page, without having to open the page source file in the code editing component and then search for the content of the page source file based on the page element. This can reduce the tedious processing operations in the project development and debugging process.

[0046] In one exemplary embodiment, such as Figure 4 As shown, a code editing page for a code editing component is provided, refer to... Figure 4 As can be seen, different code editing components typically use different programming languages, and the corresponding code editing pages also differ. On the code editing page, the page source file can be opened, and based on the element position information of the target page element obtained from the page file to be detected, the element code content of the target page element can be determined from the page source file, and the element code content corresponding to the target page element can be displayed on the code editing page.

[0047] Furthermore, by displaying the page to be tested corresponding to the page file to be tested on the browser page, and displaying multiple page elements on the page to be tested, such as page element 1, page element 2, page element 3, ..., and page element n, the developer can trigger an element code viewing operation for any one of the page elements, such as page element 1. The terminal enters the page element viewing mode in response to the element code viewing operation triggered by the developer. In the page element viewing mode, the developer can trigger a selection operation for a page element in the page to be tested. The terminal then responds to the selection operation for the target page element in at least one page element, obtains the element position information of the target page element from the page file to be tested, and jumps to display the code editing page corresponding to the code editing component. The page source file is displayed on the code editing page. Based on the element position information, the element code content of the target page element is determined from the page source file and displayed on the code editing page.

[0048] In the above data processing method, a page file to be tested, obtained by compiling the page source file, is obtained and run to display the corresponding page to be tested. The page to be tested includes at least one page element. Furthermore, the terminal enters a page element viewing mode in response to an element code viewing event. In this mode, developers can select any page element and view its code content. Specifically, the terminal, in response to a selection operation targeting a target page element among at least one page element, obtains the element position information of the target page element from the page file to be inspected. Based on the element position information, it determines the element code content of the target page element from the page source file and displays the element code content. This enables the location and viewing of the element code content corresponding to the page element during page debugging. Based on the viewing operation of the element code content of the page element, it can directly jump to display the element code content determined from the page source file based on the page element, without having to open the page source file in the code editing component and then search for the content in the page source file based on the page element. This reduces tedious processing operations during project development and debugging and improves the efficiency of code content location and processing during project development and debugging.

[0049] In one exemplary embodiment, such as Figure 5 As shown, the step of obtaining the element position information corresponding to the target page element, that is, in response to the selection operation of the target page element in at least one page element, the step of obtaining the element position information of the target page element from the page file to be detected, specifically includes the following steps S502 to S508. Wherein:

[0050] Step S502: In response to the selection operation of the target page element in at least one page element, obtain the element attribute information of the target page element from the page file to be detected.

[0051] Specifically, when a developer triggers an element code viewing event via the terminal—for example, by pressing a pre-configured shortcut key—the terminal responds by entering page element viewing mode. Within this mode, the developer can further trigger a selection operation on at least one page element displayed on the page to be inspected. The selected element is the target page element whose element code content needs to be viewed. The terminal then retrieves the element attribute information of the target page element from the page file to be inspected by responding to the developer's selection operation on the target page element. This element attribute information may include different attribute information corresponding to the business element, such as data source attribute information and hover state attribute information.

[0052] The process involves compiling the page source file and adding element position information to obtain the page file to be tested. This page file includes element position information corresponding to the page elements. For example, the element position information and the element identifier of the page element can be associated and stored. After determining the target page element indicated by the selected operation, the element attribute information corresponding to the element identifier of the target page element can be obtained from the page file to be tested based on the element identifier of the target page element, such as the element number.

[0053] Step S504: Parse the element attribute information and obtain the resource location information corresponding to the target page element.

[0054] Specifically, the terminal obtains resource location information corresponding to the target page element by parsing the element attribute information, specifically parsing the data source attribute information in the element attribute information.

[0055] Specifically, the data source attribute information can be used to configure and identify the attributes or annotations of different data sources. This includes the source information of different data sources. When parsing the data source attribute information, the source information of the source code corresponding to the target page element can be obtained. The source information of the source code is used to determine the address of the specific source code content corresponding to the target page element. The parsed source information of the source code can be determined as the resource location information corresponding to the target page element, so as to determine the address of the code content corresponding to the target page element based on the resource location information.

[0056] For example, the resource location information corresponding to the target page element can specifically be the URL (i.e., Uniform Resource Locator, which is an address used on the Internet to identify the location of a resource and to define how to access a specific resource, such as a webpage, image, video, or any other type of file) corresponding to the target page element. In other words, the specific address of the code content corresponding to the target page element can be obtained based on the URL corresponding to the target page element.

[0057] Step S506: Based on the resource location information, determine the code editing component corresponding to the target page element.

[0058] Specifically, the terminal further analyzes the resource location information to obtain the code editing component corresponding to the target page element, that is, to obtain the code editing component used to write the page source file corresponding to the file to be detected. Thus, the page source file can be opened based on the specific code editing component to determine the element code content corresponding to the target page element from the page source file.

[0059] Step S508: Obtain the location information recognition logic corresponding to the code editing component, and perform location information recognition on the resource location information according to the location information recognition logic to obtain the element location information corresponding to the target page element.

[0060] Specifically, after identifying the code editing component used to write the page source file, the terminal obtains the location information recognition logic corresponding to the code editing component. For example, code editing components include vscode (Visual Studio Code, a code editor that supports multiple programming languages), WebStorm (an integrated development environment for JavaScript and related web technologies), GitHub (a version control and collaboration platform based on a distributed version control system, which allows users to host and manage code, as well as perform version control through a distributed version control system), Sublime Text (a text editor that can also be used as a code editor), and PhpStorm (an integrated development environment based on Hypertext Preprocessor, an open-source server-side scripting language), etc. Different code editing components correspond to different location information recognition logics. Therefore, the terminal can perform location information recognition on the resource location information according to the location information recognition logic corresponding to the code editing component actually used, and obtain the element location information corresponding to the target page element.

[0061] When identifying resource location information according to location information recognition logic, the specific recognition operation varies depending on the code editing component used. For example, when using GitHub for code writing and storage, there are often redundant paths and data. Therefore, when identifying resource location information, such as the resource location information (i.e., the URL) containing... When identifying the resource location information, a cleanup operation is required first, removing parts such as " / vercel / path0 / ". Then, the cleaned resource location information is used for identification to obtain the element location information corresponding to the target page element. However, when using other code editing components for code writing and storage, since no further control processing is performed, no cleanup operation is needed. Location information identification can be performed directly according to the location information identification logic. Specifically, the content identifying the code editing component in the resource location information can be extracted, and the remaining content after removing the code editing component identifier can be used as the element location information representing the location of the specific element's code content.

[0062] For example, when writing and storing code using VS Code, the resource location information (i.e., data-source) corresponding to the target page element is as follows:

[0063] (1)

[0064] When parsing the above resource location information (1), based on "vscode:", the code editing component corresponding to the target page element can be obtained as vscode. And based on the location information recognition logic corresponding to vscode, when performing location information recognition on the above resource location information (1), the element location information corresponding to the target page element can be obtained as follows:

[0065] .

[0066] Optionally, when writing and storing code using Sublime Text, for example, the resource location information (i.e., data-source) corresponding to the target page element is:

[0067] (2)

[0068] When parsing the above resource location information (2), based on "subl:", the code editing component corresponding to the target page element can be obtained as Sublime. Based on the location information recognition logic corresponding to Sublime, when performing location information recognition on the above resource location information (2), the element location information corresponding to the target page element can be obtained as follows:

[0069]

[0070] In this embodiment, in response to a selection operation of a target page element among at least one page element, the element attribute information of the target page element is obtained from the page file to be detected. The element attribute information is parsed to obtain the resource location information corresponding to the target page element. Based on the resource location information, the code editing component corresponding to the target page element is determined. By obtaining the location information recognition logic corresponding to the code editing component, the resource location information is identified according to the location information recognition logic, thereby obtaining the element location information corresponding to the target page element. This realizes that by responding to the selection operation of the target page element triggered by the developer, the code editing component corresponding to the editing page source file and the element location information corresponding to the target page element can be determined based on the element attribute information of the target page element. Subsequently, the user can directly jump to the code editing page of the specific code editing component and display the element code content corresponding to the element location information without manually switching platforms and searching for specific code element content. This reduces the tedious processing operations in the project development and debugging process and improves the efficiency of code content location processing in the project development and debugging process.

[0071] In one exemplary embodiment, such as Figure 6 As shown, the steps for obtaining the page file to be detected specifically include steps S602 to S608. Wherein:

[0072] Step S602: When a file execution request is received, obtain the page source file corresponding to the file execution request.

[0073] Specifically, when there is a need for debugging and development of page source files, developers can trigger a file execution request based on the terminal. When the terminal receives the file execution request, it can obtain the page source file corresponding to the file execution request by parsing the file execution request.

[0074] Step S604: Call the code compilation component to compile the page source file and obtain the code compilation file corresponding to the page source file.

[0075] Specifically, after obtaining the source file of the page to be debugged and developed, the terminal calls a code compilation component, such as the Babel compiler (which is a JS compiler whose core workflow includes parsing, transformation, and generation; it parses the source code into an AST, i.e., an abstract syntax tree, then transforms the abstract syntax tree according to the configured plugins and presets, and finally regenerates the transformed abstract syntax tree into JavaScript code), to compile the page source file. Specifically, it parses and compiles the page source file, parsing it into an abstract syntax tree, which is the abstract syntax tree corresponding to the page source file, and uses it as the code compilation file.

[0076] Step S606: Traverse each code element in the code compilation file to obtain each target code element carrying position information.

[0077] Specifically, the terminal traverses the compiled code file, that is, it traverses the abstract syntax tree that includes multiple code elements. When a JSX start tag (i.e., JSX Opening Element, which can be understood as the start tag of a code element created by JavaScript XML syntax) is detected, it indicates that a JAX element (i.e., a code element created by JavaScript XML syntax) has been detected. Then, by calling the code compilation component, it is determined whether the JAX element indicated by the JSX start tag carries position information. If the JAX element does not carry position information, the JAX element is skipped without processing, and the traversal continues to other JAX elements that appear after the JSX start tag, and the detection of the JAX element is determined whether it carries position information.

[0078] If it is determined that the JAX element indicated by the JSX start tag, or other JAX elements after the JSX start tag, carries position information, then each JAX element carrying position information is determined as the target code element.

[0079] Optionally, during the compilation of the code file, i.e., the traversal of the abstract syntax tree containing multiple code elements, for the obtained JAX elements, the element name corresponding to the JAX element can be further obtained. If the element name is determined to be 'Fragment' or 'React.Fragment', indicating that these JAX elements belong to the element type of composite child elements and do not carry position information, they also need to be skipped, that is, skip the JAX elements with the element name 'Fragment' or 'React.Fragment' and do not process them.

[0080] Step S608: For each target code element, determine the element position information corresponding to the position information, add the element position information to the element attribute information corresponding to the target code element, and obtain the page file to be detected corresponding to the page source file.

[0081] Specifically, the terminal determines the code editing component corresponding to the page source file and obtains the editing component attribute information corresponding to the code editing component, such as obtaining the resource location information (i.e., URL) corresponding to the code editing component, as the editing component attribute information corresponding to the code editing component.

[0082] When determining the code editing component corresponding to the page source file, the terminal can check environment variables and plugin options to determine the code editing component to use (such as VS Code, WebStorm, or GitHub). Specifically, if the environment variable BABEL_EDITOR=vscode is set, meaning the code editing component of the code compilation component is set to "VS Code", then VS Code will be used as the code editing component.

[0083] Furthermore, for each target code element carrying location information, the terminal obtains the element location information corresponding to the target code element by combining the component attribute information and the location information of the target code element, and stores the element location information in the element attribute information corresponding to the target code element, such as storing the element location information in the data source (i.e., data-source) attribute corresponding to the target code element.

[0084] After the storage operation of element position information for each target code element is completed, the abstract syntax tree of multiple code elements, including the element position information, is transformed again to obtain the page file to be detected corresponding to the page source file.

[0085] For example, when using VS Code for writing and storing code, "vscode:" is identified as the editing component's attribute information, used to characterize the code editing component as VS Code, and its position information relative to the target code element is also specified. Combining "vscode:" with the data source, we obtain the element position information (i.e., data source) corresponding to the target code element:

[0086] .

[0087] Optionally, when using Sublime Text for code writing and saving, "subl:" is designated as an editing component attribute, used to characterize the code editing component as Sublime Text, and to specify its position relative to the target code element. Combining "," and "subl:" yields the element position information (i.e., data-source) corresponding to the target code element:

[0088] .

[0089] In one exemplary embodiment, such as Figure 7 As shown, a process is provided for compiling and obtaining the page file to be detected using a code compilation component, refer to... Figure 7It can be seen that the process of obtaining the page file to be tested involves code element traversal, JAX element query, and element attribute information addition, among other processes.

[0090] 1) Code compilation components (such as the Babel compiler) parse the page source files into an abstract syntax tree.

[0091] 2) Enter code element traversal mode, traverse each code element in the abstract syntax tree, and set the 'hasJSX' flag to false.

[0092] The purpose of setting the 'hasJSX' flag to false is to avoid errors such as executing the imported element code to locate the processing script file when no JAX element is detected in the code element traversal mode. This is because if no element position information is added for the JAX element, the 'hasJSX' flag will be detected.

[0093] 3) Set up the code editing component corresponding to the page source file.

[0094] 4) When a JSX start tag is detected, enter the JSX element traversal mode.

[0095] 5) When entering JSX element traversal mode, traverse each JSX element in the abstract syntax tree.

[0096] 6) If it is determined that the JAX element indicated by the JSX start tag carries position information, set the 'hasJSX' flag to true.

[0097] The purpose of setting the 'hasJSX' flag to true is that when entering JAX element traversal mode, it is necessary to add element position information to JAX elements that meet the requirements (i.e., JAX elements that carry their own position information). This allows for further code element positioning operations on JAX elements with added position information. Specifically, based on the recognition of the 'hasJSX' flag, the operation of importing the element code positioning processing script file is performed on the page source file. By executing the element code positioning processing script file, the positioning and display of the element code content can be achieved.

[0098] 7) Identify each JAX element carrying location information as the target code element.

[0099] 8) Combine the editing component attribute information corresponding to the code editing component with the position information of the target code element to obtain the element position information corresponding to the target code element.

[0100] 9) Store the element position information into the element attribute information corresponding to the target code element to obtain each code element carrying the element position information.

[0101] 10) When the 'hasJSX' flag is set to true, an import statement is added to the page source file. This import statement is used to import the element code location and processing script file corresponding to the page source file.

[0102] In this process, after adding an import statement to the page source file, the converted code file is returned to the code compilation component.

[0103] Specifically, this element code location processing script file runs synchronously with the page file to be inspected, enabling the location and display of element code content on the page. Specifically, the script file implements the following: when a shortcut key is pressed and the mouse hovers over an element with the `data-source` attribute, a blue border is added to the element, and a floating layer is displayed showing the location details of the source code. Clicking on these elements with the `data-source` attribute opens the associated source code location in a new window.

[0104] In this embodiment, upon receiving a file execution request, the corresponding page source file is obtained. A code compilation component is invoked to compile the page source file, resulting in a compiled code file. Each code element within the compiled code file is then traversed to obtain target code elements carrying location information. Further, for each target code element, the element position information corresponding to the location information is determined and added to the element attribute information corresponding to the target code element. This yields the page file to be tested corresponding to the page source file. This process pre-compiles the page source file and adds element position information. Consequently, when the page file to be tested corresponding to the page source file is run subsequently, the page elements corresponding to the code content in the page source file can be displayed on the page to be tested. For page elements carrying element position information, selection and code content viewing operations can be directly triggered, directly jumping to the display of the element code content determined from the page source file based on the page element. This eliminates the need to open the page source file in the code editing component and then search for content based on the page element. This reduces tedious processing operations during project development and debugging, improving the efficiency of code content location processing during project development and debugging.

[0105] In one exemplary embodiment, such as Figure 8 As shown, a data processing method is provided. This method can be executed by a terminal or server alone, or by a terminal and server working together. This method can be applied to... Figure 1Taking the terminal in the example, the explanation includes the following steps S802 to S806. Wherein:

[0106] Step S802: Obtain the page file to be detected. The page file to be detected is obtained by compiling the page source file.

[0107] Specifically, the terminal is equipped with a browser. During the development and debugging of applications or application platforms, developers can trigger file execution requests for application functions or components based on the terminal. When the terminal receives the file execution request, it can obtain the page file to be tested according to the file execution request and run the obtained page file to be tested in the browser.

[0108] Specifically, this involves compiling source code files, such as page source files that need to be debugged, to obtain a page file to be tested that can be run in a browser, and then running the obtained page file to be tested in the browser.

[0109] Step S804: Run the page file to be tested and display the corresponding page to be tested. The page to be tested includes at least one page element.

[0110] Specifically, by running the page file to be tested in a browser deployed on the terminal, the corresponding page to be tested can be displayed on the browser page. The page to be tested includes at least one page element. Developers can trigger element code viewing operations for any page element based on the page to be tested. The terminal enters the page element viewing mode in response to the element code viewing operation. That is, when the page element viewing mode is entered, developers can trigger pre-selection operations, etc., for the page elements in the page to be tested.

[0111] The pre-selection operation refers to the initial selection action triggered by the developer for a specific page element. For example, hovering the cursor over a page element for a duration greater than a preset time interval indicates that the page element has been preliminarily selected. The preset time interval can be set according to actual needs, such as 3 seconds, 5 seconds, or other specific values.

[0112] In step S806, in response to the element code viewing event, the page element viewing mode is entered. When the page element viewing mode is entered, in response to the pre-selection operation for the target page element, the element position information of the target page element is displayed at the target page element.

[0113] Specifically, developers can trigger an element code viewing event for at least one page element based on the page to be inspected. The terminal enters the page element viewing mode by responding to the element code viewing event triggered by the developer.

[0114] Developers can trigger the element code viewing event by using pre-configured keyboard shortcuts or buttons. Pre-configured keyboard shortcuts can be specific to the terminal's keyboard, such as "CTRL + ALT," while pre-configured buttons can be specific to the terminal's touchpad or display screen. These pre-configured buttons may include touch areas on the touchpad or shortcut buttons on the display screen. Developers can trigger the element code viewing event by pressing the corresponding keyboard shortcut, activating the touch area on the touchpad, or clicking the shortcut button with the mouse.

[0115] Furthermore, when entering the page element viewing mode, developers can trigger a pre-selection operation for at least one page element included in the page to be inspected. For example, if a developer hovers the cursor over a page element for a period longer than a preset time interval, a pre-selection operation for that page element is triggered. The terminal then responds to the developer's pre-selection operation on the target page element by displaying the element's position information at the target page element. Specifically, this can be achieved by setting a floating layer corresponding to the target page element and displaying the element's position information within the floating layer.

[0116] Specifically, the terminal can obtain the target page element indicated by the pre-selected operation and retrieve the element position information of the target page element from the page file to be detected. The element position information may specifically include the name of the specific code file corresponding to the target page element, the number of lines in the file corresponding to the code file name, and the number of columns in the file.

[0117] In one exemplary embodiment, such as Figure 9 As shown, this provides a schematic diagram of pre-selection processing of target page elements based on the page to be detected. Figure 9 It can be seen that by displaying the page to be tested corresponding to the page file to be tested on the browser page, and displaying multiple page elements on the page to be tested, such as page element 1, page element 2, page element 3, ... and page element n, the developer can trigger the element code viewing operation for any one of the page elements, such as page element 1. The terminal enters the page element viewing mode in response to the element code viewing operation triggered by the developer. In the page element viewing mode, the developer can trigger the pre-selection operation for the page elements in the page to be tested. Then, the terminal responds to the pre-selection operation for the target page element in at least one page element, obtains the element position information of the target page element from the page file to be tested, sets a floating layer corresponding to the target page element at the target page element, and displays the element position information of the target page element in the floating layer.

[0118] In the aforementioned data processing method, the page file to be tested, obtained by compiling the page source file, is obtained and run to display the corresponding page to be tested, and multiple page elements are displayed on the page to be tested. Further, the terminal enters the page element viewing mode in response to the element code viewing event. In this mode, developers can trigger element pre-selection and element code content viewing operations for any page element on the page to be tested. The terminal, in response to the pre-selection operation for the target page element, displays the element position information of the target page element. This allows developers to accurately obtain the location of the element code content of the page element they need to view without opening the page source file in the code editing component and performing a global search based on the page elements. Based on the specific element position information, the developer can directly search and jump to display the element code content of the page element, reducing tedious processing operations during project development and debugging and improving the efficiency of code content location processing during project development and debugging.

[0119] In one exemplary embodiment, such as Figure 10 As shown, a data processing method is provided. This method can be executed by a terminal or server alone, or by a terminal and server working together. This method can be applied to... Figure 1 Taking the terminal in the example, the explanation includes the following steps S1001 to S1014. Wherein:

[0120] Step S1001: When a file execution request is received, obtain the page source file corresponding to the file execution request.

[0121] Specifically, when there is a need for debugging and development of page source files, developers can trigger a file execution request based on the terminal. When the terminal receives the file execution request, it can obtain the page source file corresponding to the file execution request by parsing the file execution request.

[0122] Step S1002: Call the code compilation component to compile the page source file and obtain the code compilation file corresponding to the page source file.

[0123] Specifically, after obtaining the page source file to be debugged and developed, the terminal calls a code compilation component, such as the Babel compiler, to compile the page source file. In this process, the page source file is parsed and compiled into an abstract syntax tree, which is then used as the code compilation file.

[0124] Step S1003: Traverse each code element in the code compilation file to obtain each target code element carrying position information.

[0125] Specifically, the terminal traverses the compiled code file, that is, it traverses the abstract syntax tree that includes multiple code elements. When a JSX start tag is detected, it indicates that a JAX element has been detected. The terminal then calls the code compilation component to determine whether the JAX element carries position information. If the JAX element does not carry position information, it skips the JAX element without processing it and continues to traverse other JAX elements that appear after the JSX start tag, and determines whether the detected JAX elements carry position information, so as to identify the JAX elements that carry position information as target code elements.

[0126] Step S1004: For each target code element, determine the code editing component corresponding to the page source file and obtain the editing component attribute information corresponding to the code editing component.

[0127] Specifically, the terminal determines the code editing component corresponding to the page source file and obtains the editing component attribute information corresponding to the code editing component, such as obtaining the resource location information (i.e., URL) corresponding to the code editing component, as the editing component attribute information corresponding to the code editing component.

[0128] Step S1005: Determine the element position information corresponding to the target code element based on the editing component attribute information and the position information of the target code element.

[0129] Specifically, for each target code element that carries location information, the terminal obtains the element location information corresponding to the target code element by combining the editing component attribute information and the location information of the target code element.

[0130] Step S1006: Add the element position information to the element attribute information corresponding to the target code element to obtain the page file to be detected corresponding to the page source file.

[0131] Specifically, the terminal stores element location information in the element attribute information corresponding to the target code element. For example, it stores element location information in the data source (i.e., data-source) attribute corresponding to the target code element. After the storage operation of element location information for each target code element is completed, the terminal re-transforms the abstract syntax tree of multiple code elements carrying element location information to obtain the page file to be detected corresponding to the page source file.

[0132] Step S1007: Run the page file to be tested and display the corresponding page to be tested. The page to be tested includes at least one page element.

[0133] Specifically, by running the page file to be tested in a browser deployed on the terminal, the corresponding page to be tested can be displayed on the browser page. The page to be tested includes at least one page element. Developers can trigger an element code viewing operation for any page element based on the page to be tested, and the terminal enters the page element viewing mode in response to the element code viewing operation.

[0134] In step S1008, in response to the element code viewing event, the page element viewing mode is entered. When the page element viewing mode is entered, in response to the pre-selection operation of the target page element, the element position information of the target page element is displayed at the target page element.

[0135] Specifically, developers can trigger an element code viewing event for at least one page element based on the page to be inspected. The terminal enters the page element viewing mode by responding to the element code viewing event triggered by the developer.

[0136] Furthermore, when entering the page element viewing mode, developers can trigger a pre-selection operation for at least one page element included in the page to be inspected. For example, if a developer hovers the cursor over a page element for a period of time longer than a preset time interval, a pre-selection operation for that page element is triggered. Then, the terminal responds to the developer's pre-selection operation for the target page element and displays the element position information of the target page element at the target page element.

[0137] Specifically, the terminal can obtain the target page element indicated by the pre-selected operation and retrieve the element position information of the target page element from the page file to be detected. The element position information may specifically include the name of the specific code file corresponding to the target page element, the number of lines in the file corresponding to the code file name, and the number of columns in the file.

[0138] For example, a floating layer corresponding to the target page element can be set at the target page element, and the element position information of the target page element can be displayed in the floating layer.

[0139] Step S1009: When entering the page element viewing mode, in response to the selection operation of the target page element in at least one page element, obtain the element attribute information of the target page element from the page file to be inspected.

[0140] Specifically, when entering the page element viewing mode, the developer can trigger a selection operation on at least one page element included in the page to be inspected. The terminal then responds to the selection operation triggered by the developer on the target page element among the at least one page element and obtains the target page element indicated by the selection operation, thereby retrieving the element position information of the target page element from the file to be inspected. The element position information may specifically include the name of the specific code file corresponding to the target page element, the number of lines in the file corresponding to the code file name, and the number of columns in the file.

[0141] Step S1010: Parse the element attribute information and obtain the resource location information corresponding to the target page element.

[0142] Specifically, the terminal obtains resource location information corresponding to the target page element by parsing the element attribute information, specifically parsing the data source attribute information in the element attribute information.

[0143] Step S1011: Based on the resource location information, determine the code editing component corresponding to the target page element.

[0144] Specifically, the terminal further analyzes the resource location information to obtain the code editing component corresponding to the target page element, that is, to obtain the code editing component used to write the page source file corresponding to the file to be detected. Thus, the page source file can be opened based on the specific code editing component to determine the element code content corresponding to the target page element from the page source file.

[0145] Step S1012: Obtain the location information recognition logic corresponding to the code editing component, and perform location information recognition on the resource location information according to the location information recognition logic to obtain the element location information corresponding to the target page element.

[0146] Specifically, after identifying the code editing component for writing the page source file, the terminal obtains the location information recognition logic corresponding to the code editing component, and performs location information recognition on the resource location information according to the location information recognition logic corresponding to the code editing component actually used, thereby obtaining the element location information corresponding to the target page element.

[0147] In cases where the code editing component does not have other management or hosting functions, when identifying the location information of resource location information, the content used to identify the code editing component in the resource location information can be extracted, and the remaining content after removing the content that identifies the code editing component can be used as the element location information to indicate the location of the specific element code content.

[0148] Optionally, if the code editing component has other management or hosting functions, there are usually redundant paths and redundant data. In this case, when identifying the resource location information, it is necessary to first perform a cleanup operation to remove redundant paths or redundant data, and then identify the element location information corresponding to the target page element based on the cleaned resource location information.

[0149] Step S1013: Jump to display the code editing page corresponding to the code editing component.

[0150] Specifically, after obtaining the element position information of the target page element from the page file to be detected, the terminal jumps from the current browser-based page to be detected to display the code editing page corresponding to the code editing component, and displays the page source file on the code editing page.

[0151] Step S1014: Display the page source file on the code editing page, determine the element code content of the target page element from the page source file based on the element position information, and display the element code content.

[0152] Specifically, after the terminal jumps to and displays the code editing page, it determines the element code content of the target page element from the page source file based on the obtained element position information corresponding to the target page element, and directly displays the element code content on the code editing page.

[0153] In one exemplary embodiment, such as Figure 11 As shown, this provides a process for configuring data in the page file to be detected by locating the processing script through code, referencing... Figure 11 It can be seen that the configuration process specifically includes:

[0154] 1) Check if the document object exists to ensure that the code runs in the browser environment.

[0155] In web development, the `document` object is a global object provided by the browser that represents the entire HTML document (web page). If the `document` object does not exist, the browser cannot run the page file corresponding to the source file of that page. The `document` object can also bind event listeners, such as `document.addEventListener()`, and can also trigger events, such as `document.dispatchEvent()`.

[0156] 2) Define and execute the insertCSS function to add style rules to the document header, including styles for the data-hovering property and the hover layer.

[0157] The insertCSS function is used to dynamically insert CSS styles (i.e., Cascading Style Sheets, which describe the presentation of HTML or XML documents and can be used to control the appearance and layout of web pages) into the HTML page. This includes inserting styles for the data-hovering attributes of page elements and styles for hover layers into the page to be tested.

[0158] Specifically, the data-hovering attribute can be used to mark whether an element is being hovered over by the mouse and to store other custom data related to the hovering state.

[0159] 3) Retrieve the pre-configured shortcut keys from the configuration information and initialize the modifier variable to indicate whether the shortcut key has been pressed.

[0160] The default value of the modifier variable is false, which means that the shortcut key is not pressed. When the shortcut key is pressed, the value of the modifier variable switches to true.

[0161] 4) Add event monitors for the keydown and keyup events to the modifier variable corresponding to the document object.

[0162] Specifically, when a shortcut key is pressed (indicating the keydown event), such as pressing "Ctrl + ALT", the value of the modifier variable is set to true. When the shortcut key is released (indicating the keyup event), the value of the modifier variable is set to false, and all page elements with the data-hovering attribute are removed.

[0163] 5) Add event monitors for the mouseover and mouseout events to the document object.

[0164] Specifically, when the mouse hovers over an element with the `data-source` property (indicating a `mouseover` event) and a keyboard shortcut is pressed (indicating a `keydown` event), the `data-hovering` property is added to that element. When the mouse leaves these elements (indicating a `mouseout` event), the `data-hovering` property is removed.

[0165] 6) Query elements with the data-source attribute and add event monitors for the mouseenter and mouseleave events to the elements with the data-source attribute.

[0166] The `mouseenter` event indicates that the floating layer is displayed if the value of the `modifier` variable is true (i.e., the shortcut key is pressed). The `mouseleave` event indicates that the floating layer is hidden when the value of the `modifier` variable is false.

[0167] 7) Add an event monitor for the click event to the document object.

[0168] Specifically, when a page element with the data-source attribute is clicked (meaning the click event is triggered on a page element with the data-source attribute) and the Alt key is pressed, the default behavior is prevented and the value of the modifier variable is set to false.

[0169] Specifically, when a page element with the data-source attribute is clicked and the Alt key is pressed, the default behavior set for the Alt key should be prevented, such as directly redirecting to the specific website when the clicked element is a web address. The value of the modifier variable should be set to false to indicate that the required target page element has been identified. The subsequent operation of redirecting to display the element code content should be performed on the target page element, and the operation of identifying the target page element should not be repeated.

[0170] 8) When a page element with a data-source attribute is clicked, the URL is parsed from the data-source attribute and opened in a new window.

[0171] In cases where code editing components have other management or hosting functions, there are often redundant paths and data, such as URLs (i.e., resource location information). If the URL is cleaned up, removing parts like " / vercel / path0 / ", then the cleaned URL is opened. If the code editing component does not have other management or hosting functions, the parsed URL is opened directly in a new window, for example, redirecting to the code editing page corresponding to the code editing component.

[0172] In the above data processing method, a page file to be tested, obtained by compiling the page source file, is obtained and run to display the corresponding page to be tested. The page to be tested includes at least one page element. Furthermore, the terminal enters a page element viewing mode in response to an element code viewing event. In this mode, developers can select any page element and view its code content. Specifically, the terminal, in response to a selection operation targeting a target page element among at least one page element, obtains the element position information of the target page element from the page file to be inspected. Based on the element position information, it determines the element code content of the target page element from the page source file and displays the element code content. This enables the location and viewing of the element code content corresponding to the page element during page debugging. Based on the viewing operation of the element code content of the page element, it can directly jump to display the element code content determined from the page source file based on the page element, without having to open the page source file in the code editing component and then search for the content in the page source file based on the page element. This reduces tedious processing operations during project development and debugging and improves the efficiency of code content location and processing during project development and debugging.

[0173] It should be understood that although the steps in the flowcharts of the above embodiments are shown sequentially according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the above embodiments may include multiple steps or multiple stages. These steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these steps or stages is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the steps or stages of other steps.

[0174] Based on the same inventive concept, this application also provides a data processing apparatus for implementing the data processing method described above. The solution provided by this apparatus is similar to the implementation scheme described in the above method; therefore, the specific limitations in one or more data processing apparatus embodiments provided below can be found in the limitations of the data processing method described above, and will not be repeated here.

[0175] In one exemplary embodiment, such as Figure 12As shown, a data processing device is provided, including: a page file acquisition module 1202, a page display module 1204, an element position information acquisition module 1206, and an element code content display module 1208, wherein:

[0176] The module 1202 for obtaining the page file to be tested is used to obtain the page file to be tested; the page file to be tested is obtained by compiling the page source file; the module 1204 for displaying the page to be tested is used to run the page file to be tested and display the corresponding page to be tested; the page to be tested includes at least one page element; the module 1206 for obtaining element position information is used to enter the page element viewing mode in response to the element code viewing event, and in response to the selection operation of the target page element among at least one page element, obtain the element position information of the target page element from the page file to be tested; the module 1208 for displaying element code content is used to determine the element code content of the target page element from the page source file based on the element position information and display the element code content.

[0177] In the aforementioned data processing device, a page file to be tested, obtained by compiling a page source file, is acquired and run to display the corresponding page to be tested. The page to be tested includes at least one page element. Furthermore, the terminal enters a page element viewing mode in response to an element code viewing event. In this mode, developers can select any page element and view its code content. Specifically, the terminal, in response to a selection operation targeting a target page element among at least one page element, obtains the element position information of the target page element from the page file to be inspected. Based on the element position information, it determines the element code content of the target page element from the page source file and displays the element code content. This enables the location and viewing of the element code content corresponding to the page element during page debugging. Based on the viewing operation of the element code content of the page element, it can directly jump to display the element code content determined from the page source file based on the page element, without having to open the page source file in the code editing component and then search for the content in the page source file based on the page element. This reduces tedious processing operations during project development and debugging and improves the efficiency of code content location and processing during project development and debugging.

[0178] In an exemplary embodiment, the element location information acquisition module is further configured to: in response to a selection operation for a target page element among at least one page element, acquire element attribute information of the target page element from the page file to be detected; parse the element attribute information to acquire resource location information corresponding to the target page element; determine the code editing component corresponding to the target page element based on the resource location information; acquire the location information recognition logic corresponding to the code editing component; and perform location information recognition on the resource location information according to the location information recognition logic to obtain the element location information corresponding to the target page element.

[0179] In an exemplary embodiment, the element code content display module is further configured to: jump to display the code editing page corresponding to the code editing component; display the page source file on the code editing page; determine the element code content of the target page element from the page source file based on the element position information; and display the element code content.

[0180] In an exemplary embodiment, the module for obtaining the page file to be detected is further configured to: upon receiving a file execution request, obtain the page source file corresponding to the file execution request; call the code compilation component to compile the page source file and obtain the code compilation file corresponding to the page source file; traverse each code element in the code compilation file to obtain each target code element carrying position information; for each target code element, determine the element position information corresponding to the position information, add the element position information to the element attribute information corresponding to the target code element, and obtain the page file to be detected corresponding to the page source file.

[0181] In an exemplary embodiment, the page file acquisition module is further configured to: determine the code editing component corresponding to the page source file, acquire the editing component attribute information corresponding to the code editing component, and determine the element position information corresponding to the target code element based on the editing component attribute information and the position information of the target code element.

[0182] In one exemplary embodiment, a data processing apparatus is provided, further comprising an element position information display module, configured to: in response to a pre-selection operation for a target page element, display element position information of the target page element at the target page element.

[0183] Each module in the aforementioned data processing device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in a computer device, or stored in the memory of a computer device as software, so that the processor can call and execute the operations corresponding to each module.

[0184] In one exemplary embodiment, a computer device is provided, which can be a terminal or a server. Taking the computer device as a terminal as an example, its internal structure diagram can be as follows: Figure 13 As shown, the computer device includes a processor, memory, input / output interfaces, a communication interface, a display unit, and an input device. The processor, memory, and input / output interfaces are connected via a system bus, and the communication interface, display unit, and input device are also connected to the system bus via the input / output interfaces. The processor provides computing and control capabilities. The memory includes non-volatile storage media and internal memory. The non-volatile storage media stores the operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The input / output interfaces are used for exchanging information between the processor and external devices. The communication interface is used for wired or wireless communication with external terminals; wireless communication can be achieved through Wi-Fi, mobile cellular networks, Near Field Communication (NFC), or other technologies. When the computer program is executed by the processor, it implements a data processing method. The display unit is used to form a visually visible image and can be a display screen, a projection device, or a virtual reality imaging device. The display screen can be an LCD screen or an e-ink screen. The input device of the computer device can be a touch layer covering the display screen, or buttons, trackballs, or touchpads set on the casing of the computer device, or external keyboards, touchpads, or mice, etc.

[0185] Those skilled in the art will understand that Figure 13 The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0186] In one embodiment, a computer device is also provided, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the steps in the above method embodiments.

[0187] In one embodiment, a computer-readable storage medium is provided having a computer program stored thereon that, when executed by a processor, implements the steps in the above method embodiments.

[0188] In one embodiment, a computer program product is provided, including a computer program that, when executed by a processor, implements the steps in the above method embodiments.

[0189] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of the relevant data must comply with relevant regulations.

[0190] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. Any references to memory, databases, or other media used in the embodiments provided in this application can include at least one of non-volatile memory and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM can take many forms, such as Static Random Access Memory (SRAM) or Dynamic Random Access Memory (DRAM). The databases involved in the embodiments provided in this application may include at least one type of relational database and non-relational database. Non-relational databases may include, but are not limited to, blockchain-based distributed databases. The processors involved in the embodiments provided in this application may be general-purpose processors, central processing units, graphics processing units, digital signal processors, programmable logic devices, quantum computing-based data processing logic devices, artificial intelligence (AI) processors, etc., and are not limited to these.

[0191] The technical features of the above embodiments can be combined arbitrarily. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as the combination of these technical features does not contradict each other, it should be considered within the scope of this application. The above embodiments only illustrate several implementation methods of this application, and their descriptions are relatively specific and detailed, but they should not be construed as limiting the scope of this application. It should be noted that for those skilled in the art, several modifications and improvements can be made without departing from the concept of this application, and these all fall within the protection scope of this application. Therefore, the protection scope of this application should be determined by the appended claims.

Claims

1. A data processing method, characterized by, The method includes: Obtain the page file to be detected; the page file to be detected is obtained by compiling the page source file; Run the page file to be tested and display the corresponding page to be tested; the page to be tested includes at least one page element. In response to an element code viewing event, the page element viewing mode is entered. When the page element viewing mode is entered, in response to a selection operation of a target page element among the at least one page element, the element position information of the target page element is obtained from the page file to be detected. Based on the element position information, the element code content of the target page element is determined from the page source file, and the element code content is displayed.

2. The method of claim 1, wherein, In response to a selection operation targeting a target page element among the at least one page element, obtaining the element position information of the target page element from the page file to be detected includes: In response to a selection operation for a target page element among the at least one page elements, element attribute information of the target page element is obtained from the page file to be detected; Parse the element attribute information to obtain the resource location information corresponding to the target page element; Based on the resource location information, determine the code editing component corresponding to the target page element; Obtain the location information recognition logic corresponding to the code editing component, and perform location information recognition on the resource location information according to the location information recognition logic to obtain the element location information corresponding to the target page element.

3. The method of claim 2, wherein, The step of determining the element code content of the target page element from the page source file based on the element position information and displaying the element code content includes: The program will redirect to the code editing page corresponding to the code editing component. The source file of the page is displayed on the code editing page. Based on the element position information, the element code content of the target page element is determined from the source file and the element code content is displayed.

4. The method according to any one of claims 1 to 3, characterized in that, The process of obtaining the page file to be detected includes: When a file execution request is received, the page source file corresponding to the file execution request is obtained; The code compilation component is invoked to compile the page source file and obtain the code compilation file corresponding to the page source file; Traverse each code element in the compiled code file to obtain each target code element carrying position information; For each target code element, determine the element position information corresponding to the position information, and add the element position information to the element attribute information corresponding to the target code element to obtain the page file to be detected corresponding to the page source file.

5. The method of claim 4, wherein, Determining the element position information corresponding to the position information includes: Identify the code editing component corresponding to the page source file, and obtain the editing component attribute information corresponding to the code editing component; Based on the attribute information of the editing component and the position information of the target code element, determine the element position information corresponding to the target code element.

6. The method according to any one of claims 1 to 3, characterized in that, The method further includes: In response to a pre-selection operation for the target page element, the element position information of the target page element is displayed at the target page element.

7. A data processing apparatus, characterized in that, The device includes: The module for obtaining the page file to be detected is used to obtain the page file to be detected; the page file to be detected is obtained by compiling the page source file; The page to be detected module is used to run the page to be detected file and display the corresponding page to be detected from the page to be detected file; the page to be detected includes at least one page element. The element position information acquisition module is used to enter the page element viewing mode in response to the element code viewing event. When the page element viewing mode is entered, in response to the selection operation of the target page element among the at least one page element, the module acquires the element position information of the target page element from the page file to be detected. The element code content display module is used to determine the element code content of the target page element from the page source file based on the element position information, and to display the element code content.

8. A computer device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that, When the processor executes the computer program, it implements the steps of the method according to any one of claims 1 to 6.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 6.

10. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 6.

Images