Page updating method and device

Abstract

One or more embodiments of the invention provide a page updating method and device. The page updating method is applied to the electronic equipment, the electronic equipment is provided with a browser IDE and a command line tool, the browser IDE is in communication connection with the command line tool, and the browser IDE comprises a preview interface. Through the method, a target page element selected by a user and an adjustment instruction for the target page element can be obtained based on a browser IDE, and the adjustment instruction is sent to a command line tool, so that the command line tool modifies a running code of the target page element based on the adjustment instruction; afterwards, the browser IDE can respond to the command line tool to modify the running code, and the updated target page is displayed based on the preview interface.

Description

Technical Field

[0001] This specification relates to the field of computer technology in one or more embodiments, and more particularly to a page updating method and apparatus. Background Technology

[0002] With the rapid development of information technology and the increasing prevalence of digital products, front-end pages, as the core carrier for interaction between various information systems and users, are widely used in numerous fields such as financial services, e-commerce platforms, office systems, and healthcare. Currently, the scale and complexity of enterprise-level front-end projects continue to increase, placing higher technical demands on front-end page development efficiency, ease of iteration and updates, and security and compliance.

[0003] To meet the practical needs of efficient front-end page development and flexible iteration, optimize the developer's operating experience, and reduce the complexity of multi-stage collaboration, a more efficient and practical front-end page update solution is needed. Summary of the Invention

[0004] This specification provides a page updating method and apparatus through one or more embodiments.

[0005] Firstly, one or more embodiments of this specification provide a page updating method applied to an electronic device, the electronic device being configured with a browser IDE and a command-line tool, the browser IDE being communicatively connected to the command-line tool, the browser IDE including a preview interface, the method comprising: Based on the browser IDE, the system obtains the target page element selected by the user and the adjustment instructions for the target page element, and sends the adjustment instructions to the command-line tool so that the command-line tool modifies the running code of the target page element based on the adjustment instructions. In response to the command-line tool modifying the runtime code, the updated target page is displayed based on the preview interface.

[0006] In one possible implementation, obtaining the target page element selected by the user includes: Get the target page selected by the user; Obtain the DOM element selected by the user on the target page, and use the DOM element as the target page element.

[0007] In one possible implementation, the browser IDE further includes a navigation interface; obtaining the target page selected by the user includes: The navigation interface is used to obtain the page selected by the user to be updated. Obtain the access address of the page to be updated; Based on the access address, the page to be updated is displayed on the preview interface, and the page to be updated is used as the target page.

[0008] In one possible implementation, the browser IDE and the command-line tool are connected via a dual-channel communication connection, the dual channels including a first channel and a second channel. Obtaining the access address of the page to be updated includes: The browser IDE sends the user-selected page to be updated to the command-line tool through the first channel; The command-line tool generates a corresponding access address based on the running file path of the page to be updated, and sends the access address to the browser IDE through the second channel.

[0009] In one possible implementation, obtaining the DOM element selected by the user on the target page includes: Add DOM element interaction scripts to the target page; Based on the DOM element interaction script, detect user interaction actions; The DOM element selected by the user is determined based on the interaction action.

[0010] In one possible implementation, the method further includes: Add tags to all DOM elements on the target page; The tag is associated with the code path of each DOM element, and the code path is used to indicate the location of the code corresponding to the DOM element in the runtime file of the target page.

[0011] In one possible implementation, obtaining the adjustment instructions for the target page element includes: Obtain the user's input regarding the adjustment intent for the target page element; The adjustment intention is encapsulated as the adjustment instruction.

[0012] In one possible implementation, obtaining the user's input regarding the adjustment intent for the target page element includes: In response to the target page element selected by the user, the system receives the user's intention to adjust the target page element, either in text or voice format.

[0013] In one possible implementation, obtaining the user's input regarding the adjustment intent for the target page element includes: In response to the target page element selected by the user, a configuration panel is displayed; the configuration panel is set with preset adjustment options or parameter adjustment controls that match the target page element; Based on the configuration panel, the system receives user selections of the preset adjustment options or adjustments of the parameter adjustment controls. The adjustment intention is obtained based on the selection operation or the adjustment operation.

[0014] In one possible implementation, the command-line tool modifies the runtime code of the target page element based on the adjustment instructions, including: Based on the adjustment instruction, obtain the tag of the target page element and the adjustment intention; The code path corresponding to the target page element is determined based on the tag; Based on the stated adjustment intent and the stated code path, modify the running code of the target page element.

[0015] In one possible implementation, modifying the runtime code of the target page element based on the adjustment intent and the code path includes: Invoke the preset large language model and generate code patches corresponding to the target page elements based on the adjustment intent; Based on the code path, the running code of the target page element is replaced with the code patch through an atomic write operation.

[0016] In one possible implementation, the step of displaying an updated target page based on the preview interface in response to the command-line tool modifying the runtime code includes: The command-line tool sends the runtime log corresponding to the atomic write operation to the browser IDE through the second channel; The browser IDE loads the modified runtime code based on the runtime log, triggers a hot update of the target page, and displays the hot-updated target page in the preview interface.

[0017] In one possible implementation, before obtaining the target page element selected by the user and the adjustment instructions for the target page element based on the browser IDE, the method further includes: The browser IDE sends a communication connection request to the command-line tool through a preset loopback address; The command-line tool generates an authentication token based on the communication connection request and sends it to the browser IDE; The browser IDE performs a handshake verification with the command-line tool based on the authentication token. If the communication handshake verification passes, the first channel and the second channel are established between the browser IDE and the command-line tool based on the preset loopback address.

[0018] In one possible implementation, the method further includes: Before the command-line tool sends the access path or the running log to the browser IDE through the second channel, it injects a preset security request header into the access path or the running log.

[0019] Secondly, one or more embodiments of this specification also provide a page updating device applied to an electronic device, the electronic device being configured with a browser IDE and a command-line tool, the browser IDE being communicatively connected to the command-line tool, the browser IDE including a preview interface; the device includes: The acquisition module is used to acquire the target page element selected by the user and the adjustment instructions for the target page element based on the browser IDE, and send the adjustment instructions to the command line tool so that the command line tool can modify the running code of the target page element based on the adjustment instructions; The update module is used to respond to the modified runtime code of the command-line tool and display the updated target page based on the preview interface.

[0020] In one possible implementation, the acquisition module is used to acquire the target page element selected by the user, including: The acquisition module is used to acquire the target page selected by the user; acquire the DOM element selected by the user on the target page, and use the DOM element as the target page element.

[0021] In one possible implementation, the browser IDE further includes a navigation interface; the acquisition module is used to acquire the target page selected by the user, including: The acquisition module is used to: acquire the page to be updated selected by the user through the navigation interface; acquire the access address of the page to be updated; display the page to be updated in the preview interface based on the access address, and use the page to be updated as the target page.

[0022] In one possible implementation, the browser IDE and the command-line tool are connected via a dual-channel communication connection, the dual channels including a first channel and a second channel; the acquisition module is used to acquire the access address of the page to be updated, including: The acquisition module is used so that the browser IDE sends the user-selected page to be updated to the command-line tool through the first channel; the command-line tool generates a corresponding access address based on the running file path of the page to be updated, and sends the access address to the browser IDE through the second channel.

[0023] In one possible implementation, the acquisition module is used to acquire the DOM element selected by the user on the target page, including: The acquisition module is used to add DOM element interaction scripts to the target page; detect user interaction actions based on the DOM element interaction scripts; and determine the DOM element selected by the user based on the interaction actions.

[0024] In one possible implementation, the page updating device further includes an adding module; the adding module is used to add tags to all DOM elements on the target page; The tag is associated with the code path of each DOM element, and the code path is used to indicate the location of the code corresponding to the DOM element in the runtime file of the target page.

[0025] In one possible implementation, the acquisition module is used to acquire adjustment instructions for the target page element, including: The acquisition module is used to acquire the user's input of the adjustment intention for the target page element; and to encapsulate the adjustment intention into the adjustment instruction.

[0026] In one possible implementation, the acquisition module is used to acquire the user's input of an adjustment intent for the target page element, including: The acquisition module is used to receive, in text or voice form, the user's intention to adjust the target page element in response to the target page element selected by the user.

[0027] In one possible implementation, the acquisition module is used to acquire the user's input of an adjustment intent for the target page element, including: The acquisition module is used to display a configuration panel in response to a target page element selected by the user; the configuration panel is provided with preset adjustment options or parameter adjustment controls that match the target page element; based on the configuration panel, the module receives the user's selection operation on the preset adjustment option or adjustment operation on the parameter adjustment control; and obtains the adjustment intention based on the selection operation or the adjustment operation.

[0028] In one possible implementation, the acquisition module is used by the command-line tool to modify the runtime code of the target page element based on the adjustment instruction, including: The acquisition module is used to: acquire the tag of the target page element and the adjustment intention based on the adjustment instruction; determine the code path corresponding to the target page element based on the tag; and modify the running code of the target page element based on the adjustment intention and the code path.

[0029] In one possible implementation, the acquisition module is used to modify the runtime code of the target page element based on the adjustment intent and the code path, including: The acquisition module is used to call a preset large language model to generate a code patch corresponding to the target page element based on the adjustment intention; and to replace the running code of the target page element with the code patch through an atomic write operation based on the code path.

[0030] In one possible implementation, the update module is configured to, in response to the command-line tool modifying the runtime code, display the updated target page based on the preview interface, including: The update module is used so that the command-line tool sends the runtime log corresponding to the atomic write operation to the browser IDE through the second channel; the browser IDE loads the modified runtime code based on the runtime log, triggers the target page to perform a hot update, and displays the hot-updated target page in the preview interface.

[0031] In one possible implementation, the page update device further includes a communication module; The communication module is used for the browser IDE to send a communication connection request to the command-line tool through a preset loopback address; the command-line tool generates an authentication token based on the communication connection request and sends it to the browser IDE; the browser IDE performs a communication handshake verification with the command-line tool based on the authentication token; and if the communication handshake verification is successful, the first channel and the second channel are established between the browser IDE and the command-line tool based on the preset loopback address.

[0032] In one possible implementation, the page update device further includes an injection module; The injection module is used to inject a preset security request header into the access path or the running log before the command-line tool sends the access path or the running log to the browser IDE through the second channel.

[0033] Thirdly, one or more embodiments of this specification also provide an electronic device, which includes a memory and a processor; the memory is used to store a computer program product; the processor is used to execute the computer program product stored in the memory, and when the computer program product is executed, it implements the page update method of the first aspect described above.

[0034] Fourthly, one or more embodiments of this specification also provide a computer-readable storage medium storing computer program instructions that, when executed, implement the page update method of the first aspect described above.

[0035] In summary, to meet the practical needs of efficient front-end page development and flexible iteration, optimize the developer's operating experience, and reduce the complexity of multi-stage collaboration, one or more embodiments of this specification provide a page updating method and apparatus, applied to an electronic device configured with a browser IDE and a command-line tool. The browser IDE and the command-line tool are communicatively connected, and the browser IDE includes a preview interface. In this method, the browser IDE first obtains the target page element selected by the user and adjustment instructions for the target page element, and sends the adjustment instructions to the command-line tool, so that the command-line tool modifies the running code of the target page element based on the adjustment instructions. Then, in response to the command-line tool modifying the running code, the browser IDE displays the updated target page based on the preview interface.

[0036] In this way, developers can use a browser IDE for visual operations instead of manual coding. They can complete the entire process of selecting page elements, issuing commands, and previewing effects without needing to understand the underlying code, thus lowering the technical threshold for front-end page iteration. At the same time, through the division of labor between the browser IDE and the command-line tool, the browser IDE is responsible for interaction and preview, while the command-line tool is responsible for underlying code modifications. This decouples the interaction layer from the execution layer, reduces human error, and ensures the accuracy and standardization of code modifications. The real-time update capability of the preview interface enables page adjustments to take effect immediately. In addition, by integrating the operation entry and preview function through the browser IDE on the electronic device, developers can complete modification operations and preview results without frequently switching between multiple tools, significantly improving the efficiency, consistency, and convenience of page updates. Attached Figure Description

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

[0038] Figure 1 This specification provides a schematic diagram of the interactive interface of a browser IDE, which is provided for one or more embodiments. Figure 1 ; Figure 2 A flowchart illustrating a page update method provided in one or more embodiments of this specification; Figure 3 A flowchart illustrating the process of establishing a dual-channel communication connection between a browser IDE and a command-line tool provided in one or more embodiments of this specification; Figure 4 A schematic diagram illustrating the process of obtaining a target page element selected by a user, provided for one or more embodiments of this specification; Figure 5 This specification provides a schematic diagram of the interactive interface of a browser IDE, which is provided for one or more embodiments. Figure 2 ; Figure 6 This specification provides a schematic diagram of the interactive interface of a browser IDE, which is provided for one or more embodiments. Figure 3 ; Figure 7 This specification provides a schematic diagram of the interactive interface of a browser IDE, which is provided for one or more embodiments. Figure 4 ; Figure 8 A flowchart illustrating another page update method provided in one or more embodiments of this specification; Figure 9 A structural block diagram of a page updating device provided in one or more embodiments of this specification; Figure 10 This is a structural block diagram of an electronic device provided for one or more embodiments of this specification. Detailed Implementation

[0039] The present specification describes one or more embodiments in further detail below with reference to the accompanying drawings and examples. Through these descriptions, the features and advantages of one or more embodiments of the present specification will become clearer and more apparent.

[0040] The term “exemplary” as used herein means “serving as an example, embodiment, or illustration.” Any embodiment illustrated herein as “exemplary” is not necessarily to be construed as superior to or better than other embodiments. Although various aspects of embodiments are shown in the accompanying drawings, the drawings are not necessarily drawn to scale unless specifically indicated otherwise.

[0041] Furthermore, the technical features described below in one or more embodiments of this specification may be combined with each other as long as they do not conflict with each other.

[0042] To facilitate understanding, the application scenarios of the technical solutions provided in one or more embodiments of this specification will be described below.

[0043] With the rapid development of information technology and the increasing popularity of digital products, front-end pages, as the core carrier for interaction between various information systems and users, are widely used in many fields such as financial services, e-commerce platforms, office systems, and healthcare.

[0044] Currently, the scale and complexity of enterprise-level front-end projects continue to increase, placing higher technical demands on front-end page development efficiency, ease of iteration and updates, and security and compliance.

[0045] In some application scenarios, when developers develop or update front-end pages, they need to frequently switch between development tools, terminal tools, and browsers, and also need to manually execute commands such as dependency installation and project startup. The operation chain is fragmented and cumbersome, resulting in low development efficiency.

[0046] In some application scenarios, developers use cloud tools to develop and update front-end pages. However, these cloud tools have complex port mapping issues, making it difficult to conveniently execute local private dependency deployment operations and adapt to localized development needs.

[0047] In some application scenarios, enterprise intranet projects need to meet enterprise-level security policy requirements. However, during actual development, there may be risks of exposing public network ports, making it difficult to comply with enterprise intranet security specifications and leading to security risks such as data leaks.

[0048] In summary, the aforementioned front-end page update methods have significant limitations in terms of development efficiency, localization adaptability, and security compliance. Therefore, this specification provides one or more embodiments of a page update method and apparatus to meet the practical needs of efficient front-end page development and flexible iteration, optimize the developer's user experience, reduce the complexity of multi-stage collaboration, and improve at least one aspect such as development efficiency, localization adaptability, and security compliance.

[0049] The page updating method provided in one or more embodiments of this specification can be applied to electronic devices, such as personal computers, laptops, workstations, portable development terminals, etc. The electronic device is equipped with a browser-based integrated development environment (IDE) and command-line tools, and the browser IDE and command-line tools are communicatively connected.

[0050] A browser IDE is an integrated development tool that runs in a browser environment and can leverage the browser's native capabilities to implement front-end development-related functions.

[0051] See Figure 1 , Figure 1 This specification provides a schematic diagram of the interactive interface of a browser IDE, which is provided for one or more embodiments. Figure 1 .like Figure 1 As shown, the browser IDE includes a preview interface and a navigation interface.

[0052] The navigation interface includes a "Browse Local Files" button, allowing users to locate and select the target page to be updated. The preview interface can be an inline frame (iframe) preview interface. An iframe preview interface is a page preview carrier implemented using the browser's native iframe technology, embedded within the browser IDE's interactive interface. <iframe>In the form of a tag, it is used to carry the display of the page to be updated. The interaction interface between the iframe preview interface and the browser IDE meets the same-origin requirement, that is, the protocols, domain names, and ports of the two are the same. The iframe preview interface is used to load and render the running effect of the target page, and can respond to the user's visual adjustment operations on the elements in the target page and display the updated target page.

[0053] The command-line tool, also known as the Command Line Interface (CLI) local server, that is, the CLI-Local Server, is a development tool deployed in the local area of the electronic device in the form of a global package of the Node Package Manager (npm). After startup, it runs as a resident process in the local running environment Node of JavaScript and does not need to be repeatedly started and stopped. Here, Node is Node.js, which is a tool that enables JavaScript code to run locally on the electronic device. The command-line tool mainly undertakes the underlying execution tasks related to local front-end page development and update, including writing and modifying local project files, installing and configuring development dependency packages, starting the Development Server (DevServer), and providing core tasks such as running log feedback, providing a basic guarantee for the visual adjustment and update of the front-end page.

[0054] Refer to Figure 2. Figure 2 is a schematic flowchart of a page update method provided by one or more embodiments of this specification. As shown in Figure 2, the method may include the following steps S202 to step S204.

[0055] Step S202: Based on the browser IDE, obtain the target page element selected by the user and the adjustment instruction for the target page element, and send the adjustment instruction to the command-line tool so that the command-line tool modifies the running code of the target page element based on the adjustment instruction; Step S204: In response to the command-line tool modifying the running code, display the updated target page based on the preview interface.

[0056] Through this method, developers can perform visual operations through a browser IDE instead of manual coding. They can complete the entire process of selecting page elements, issuing commands, and previewing effects without needing to understand the underlying code, thus lowering the technical threshold for front-end page iteration. At the same time, through the division of labor between the browser IDE and the command-line tool, the browser IDE is responsible for interaction and preview, while the command-line tool is responsible for the underlying code modification. This decouples the interaction layer from the execution layer, reduces errors from manual operation, and ensures the accuracy and standardization of code modification. The real-time update capability of the preview interface enables the immediate effect of page adjustments. In addition, by integrating the operation entry and preview function through the browser IDE of the electronic device, developers can complete modification operations and preview results without frequently switching between multiple tools, significantly improving the efficiency, continuity, and convenience of page updates.

[0057] The following describes an embodiment of the page update method provided by one or more embodiments of this specification.

[0058] In one possible implementation, when a developer needs to update the front-end project, they can open the browser IDE through a service platform deployed locally on the electronic device. This service platform provides an access point to the browser IDE, and the user can quickly launch and enter the browser IDE interface by triggering this access point. The user can also directly open the browser IDE in their local browser, such as by entering a preset access address in the browser address bar, to directly launch and enter the browser IDE interface.

[0059] Furthermore, after the browser IDE starts, it establishes a dual-channel communication connection with the command-line tool deployed locally on the electronic device. The dual-channel communication connection is implemented based on the WebSocket protocol. The WebSocket protocol is a full-duplex communication protocol that can establish two independent and parallel communication links (i.e., the first channel and the second channel) between the browser IDE and the command-line tool, which respectively undertake different types of data transmission tasks, ensuring the efficiency and real-time performance of data transmission.

[0060] For example, the first channel is an instruction transmission channel, with the communication direction being browser IDE → command line tool. It is mainly used to transmit various operation instructions, including page selection instructions, target page element adjustment instructions, dependency installation instructions, DevServer start / stop instructions, etc., to ensure that the developer's operation intention in the browser IDE can be transmitted to the command line tool in real time and accurately.

[0061] The second channel is the operation log / response data transmission channel, and the communication direction is from the command-line tool to the browser IDE. It is mainly used to transmit various response data and operation logs, including the access address of the page to be updated, the code modification result log, the DevServer operation status log, the dependency installation progress log, etc. Among them, the operation log can be transmitted line by line to ensure a relatively low transmission delay, such as less than 50 ms, so as to ensure that developers can view the operation feedback in real time in the browser IDE.

[0062] In a possible implementation, the method for the browser IDE to establish a dual-channel communication connection with the command-line tool includes establishing a communication connection immediately or on demand.

[0063] Among them, establishing a communication connection immediately means that after the browser IDE is started, it automatically detects whether the command-line tool has been started locally. If the command-line tool is detected to be running normally, the communication connection process is immediately triggered to ensure that subsequent operations such as file selection and instruction issuance can be executed immediately.

[0064] Establishing a communication connection on demand means that after the browser IDE is started, the communication connection request is not initiated immediately. Only when the user triggers specific operations such as "browse local files" and "select the page to be updated" in the navigation interface, the communication connection process is started, avoiding the occupation of invalid resources during non-operation periods and optimizing the resource utilization efficiency.

[0065] Further, referring to Figure 3, Figure 3 is a schematic flowchart of the process for the browser IDE to establish a dual-channel communication connection provided by one or more embodiments of this specification. As shown in Figure 3, it mainly includes the following steps S302 to step S308.

[0066] Step S302: The browser IDE sends a communication connection request to the command-line tool through a preset loopback address.

[0067] The preset loopback address is the local loopback IP address of the electronic device (such as 127.0.0.1), which is the standard address for local communication of the electronic device and is used for data interaction between processes within the electronic device.

[0068] When the browser IDE triggers a communication connection request, it will automatically identify the preset loopback address and send a standardized communication connection request to the address based on the WebSocket protocol. The request may contain the browser IDE's identity identifier (such as version number, ID, etc.) to facilitate the command-line tool to identify the legitimacy of the request source and avoid interference from invalid requests.

[0069] Step S302 above can ensure that communication connection requests are transmitted only within the electronic device by using a preset loopback address, without involving the exposure of public network ports, thus meeting the enterprise intranet security policy.

[0070] Step S304: The command-line tool generates an authentication token based on the communication connection request and sends it to the browser IDE.

[0071] After receiving the communication connection request, the command line tool can parse the browser IDE's identity identifier in the request information. After confirming that it complies with the security specifications, it generates a one-time authentication token, such as a JSON Web Token (JWT), based on a preset encryption algorithm, such as the Secure Hash Algorithm 256.

[0072] The authentication token may contain information such as the running identifier of the command-line tool, the timestamp of the communication connection request, and the cryptographic signature. After the authentication token is generated, the command-line tool can send the authentication token to the browser IDE through the local loopback address, while recording the generation time of the token and the identity identifier of the corresponding browser IDE, and setting the token validity period (e.g., 5 minutes) to prevent expired tokens from being reused illegally.

[0073] Step S304 above generates an authentication token through the command line tool, which can verify the legitimacy of the browser IDE request, effectively prevent security risks such as cross-site request forgery (CSRF) and unauthorized third-party connections, and ensure that only authorized browser IDEs can establish communication with the command line tool.

[0074] Step S306: The browser IDE performs a handshake verification with the command-line tool based on the authentication token.

[0075] After receiving the authentication token, the browser IDE can parse the runtime identifier, timestamp, encrypted signature and other information and perform three-layer verification.If the verification of any layer fails, the browser IDE will terminate the handshake process and display targeted error messages to the user, such as "Tool identification does not match", "Token signature is invalid", etc.; if the verification of all three layers passes, a confirmation message of "Verification passed" will be sent back to the command-line tool, and the subsequent two-channel establishment process will be entered.

[0076] The above step S306 realizes the two-way identity confirmation between the browser IDE and the command-line tool through token parsing + multi-dimensional verification, which can filter all unauthorized communication connection requests and ensure the security, integrity and accuracy of subsequent communication data.

[0077] Step S308: When the communication handshake verification passes, establish a first channel and a second channel between the browser IDE and the command-line tool based on a preset loopback address.

[0078] After the communication handshake verification passes, the browser IDE and the command-line tool establish two independent communication channels (the first channel and the second channel) based on the preset loopback address through the WebSocket protocol. The two channels share the communication resources of the local loopback address, but are distinguished by different communication identifiers (such as channel ID, data type marker) and do not interfere with each other.

[0079] Through step S308, on the basis of passing the security verification, two functionally independent WebSocket communication links can be established based on the same local loopback address, enabling parallel transmission of instructions and running logs / response data, avoiding transmission delays caused by data congestion in a single channel, and ensuring the real-time and efficient nature of the subsequent page update process.

[0080] The above is the related description of establishing a two-channel communication connection between the browser IDE and the command-line tool. Next, the above steps S202 to step 204 will be further described.

[0081] In a possible implementation manner of step S202, when obtaining the target page element selected by the user, the target page selected by the user can be obtained first, and then the element selected by the user on the target page can be obtained.

[0082] Refer to Figure 4. Figure 4 is a schematic flow diagram of obtaining the target page element selected by the user provided by one or more embodiments of this specification.As shown in Figure 4, it mainly includes the following steps from step S402 to step S404.

[0083] Step S402: Obtain the target page selected by the user.

[0084] In a possible implementation, the page to be updated selected by the user can be obtained through the navigation interface first, then the access address of the page to be updated can be obtained, and the page to be updated can be displayed in the preview interface based on the access address, and the page to be updated is used as the target page.

[0085] Among them, the navigation interface can be as shown in Figure 1, with a "Browse Local Files" button. After the user clicks it, a local file browser window below will pop up. The user can search for the front-end project directory layer by layer and select the file corresponding to the page to be updated. The navigation interface can also not set a button and directly display the complete file hierarchy of the local front-end project in the form of a tree directory structure, clearly presenting the relationship between page files. The user can complete the selection of the page to be updated by clicking on the files in the directory. In addition, the navigation interface can also set a file name / path input box, and the user can directly fill in the file name or path of the page to be updated in the input box to complete the selection of the page to be updated.

[0086] Furthermore, after receiving the user's selection operation through the navigation interface, the browser IDE can send the page to be updated selected by the user to the command-line tool through the first channel. The command-line tool will generate a corresponding access address based on the running file path of the page to be updated and send the access address to the browser IDE through the second channel.

[0087] Exemplarily, after receiving the user's selection operation, the browser IDE can generate a page selection instruction according to the local file path of the page to be updated and send it to the command-line tool through the first channel. After receiving the instruction, the command-line tool will check whether the page running files in the corresponding directory are complete (such as page entry files, configuration files, etc.) based on the local file path, and whether the dependencies required for page running (such as component libraries, basic plugins) have been installed.If a missing file is detected in the path, the missing runtime file will be automatically written to the local file path according to the project directory specification. If an uninstalled dependency is detected, the project package management tool will be invoked to execute the installation command, automatically installing the missing dependency packages to ensure that the page in the local file path has the conditions to run normally. Afterwards, the command-line tool will identify the corresponding page resources based on the local file path, start DevServer, and generate the access address of the page to be updated based on the preset loopback address, such as 127.0.0.1: random port / fixed port. This random or fixed port is automatically assigned when DevServer starts and is used for local preview. Then, the command-line tool sends this access address to the browser IDE through a second channel.

[0088] In one possible implementation, before the command-line tool sends the access path to the browser IDE through the second channel, it can inject a preset security request header, such as a Cross Origin Resource Policy (CORP) request header or a Cross Origin Embedder Policy (COEP) request header, into the data to be sent. Then, the access path is sent to the browser IDE through the second channel to ensure that all data transmitted through the second channel has a security identifier, thereby strengthening the security of intranet transmission.

[0089] Furthermore, after the browser IDE obtains the access address, the iframe preview interface can load page resources based on the access address, render the current effect of the page to be updated, and use the page to be updated as the target page.

[0090] The target page includes multiple DOM elements. DOM (Document Object Model) elements are tree-like node structures generated by the browser after parsing the target page code. Each visual unit on the target page, such as buttons, text, images, input boxes, navigation bars, etc., belongs to a DOM element in the DOM tree.

[0091] In one possible implementation, a tag can be added to all DOM elements on the target page. The tag is associated with the code path of each DOM element. The code path is used to indicate the location of the code corresponding to the DOM element in the runtime file of the target page.

[0092] For example, when the command-line tool starts the local DevServer, it can call the tag tool (such as the DOM element code mapping loader) through the corresponding project-level plugin of the front-end project to automatically add normalized tags to all DOM elements of the target page. The tag has built-in corresponding code path information, which clearly marks the specific location of the code corresponding to each DOM element in the local running file (such as the file to which it belongs and the metadata such as code line / column).

[0093] In this way, the DOM elements of the front-end page can be automatically bound to the back-end code, providing an accurate basis for users to quickly locate the corresponding code after selecting the DOM element.

[0094] Step S404: Obtain the DOM element selected by the user on the target page and use the DOM element as the target page element.

[0095] In one possible implementation, to obtain the DOM element selected by the user on the target page, it is necessary to add a DOM element interaction script to the target page, detect the user's interaction action based on the DOM element interaction script, and determine the DOM element selected by the user based on the interaction action.

[0096] For example, adding DOM element interaction scripts to the target page is done by adding the DOM element interaction scripts to the local runtime file of the target page through a command-line tool. After the command-line tool identifies the corresponding page resources based on the local file path, it can inject the DOM element interaction scripts into the local runtime file corresponding to the page when DevServe is started. Furthermore, when the preview interface loads the target page through a same-origin iframe, the DOM element interaction scripts will run synchronously with the page resources, thereby detecting user interactions such as clicks, selections, and key presses.

[0097] Furthermore, users can select corresponding DOM elements by clicking on a DOM element, selecting DOM elements in a certain area, or holding down the Shift key and clicking on a DOM element. When the above interactive actions are detected, the DOM element selected by the user can be determined.

[0098] In one possible implementation of step S202, when obtaining the user's adjustment instruction for the target page element, the user's input adjustment intention for the target page element can be obtained and the adjustment intention can be encapsulated as an adjustment instruction.

[0099] Further, in some embodiments, the browser IDE may receive the user's intention to adjust the target page element in text or voice form in response to the target page element selected by the user.

[0100] Refer to Figure 5. Figure 5 is a schematic diagram of an interactive interface of a browser IDE provided by one or more embodiments of this specification. Figure 2. As shown in Figure 5, in response to a DOM element selected by the user, a text input box can be provided to receive the user's adjustment intention described in words, and then the text content is encapsulated into a standardized adjustment instruction.

[0101] Exemplarily, after the user selects the text "Welcome to Page 1" on the page, the user can enter "Change the text color to blue and adjust the font size to 16px" in the text input box shown in Figure 5. At this time, the browser IDE encapsulates the text content into a standardized adjustment instruction according to the preset format.

[0102] Refer to Figure 6. Figure 6 is a schematic diagram of an interactive interface of a browser IDE provided by one or more embodiments of this specification. Figure 3.As shown in Figure 6, a voice input button can be provided in response to a DOM element selected by the user, receive the adjustment intention described by the user in voice, and encapsulate the voice content into a standardized adjustment instruction.

[0103] Exemplarily, after the user selects the "Switch to Page 2" button on the page, the user can click the voice input button shown in Figure 6 and say "Change the color of this button to black". At this time, the browser IDE will convert the voice input into text content and encapsulate the text content into a standardized adjustment instruction according to a preset format.

[0104] In some embodiments, the browser IDE can display a configuration panel in response to the target page element selected by the user. The configuration panel is provided with preset adjustment options or parameter adjustment controls matching the target page element. Then, based on the configuration panel, the browser IDE receives the selection operation of the preset adjustment option or the adjustment operation of the parameter adjustment control by the user, and obtains the adjustment intention based on the selection operation or the adjustment operation.

[0105] Referring to Figure 7, Figure 7 is a schematic diagram of an interaction interface of a browser IDE provided by one or more embodiments of this specification Figure 4. As shown in Figure 7, after the user selects the target page element, the browser IDE can automatically pop up a configuration panel matching the element type and containing preset adjustment options.Among them, the preset adjustment options may include adjustment options for text elements or other DOM elements such as buttons, input boxes, pictures, etc. shown in Figure 7. After the user selects, the browser IDE can convert the selection operation into an adjustment intention and then encapsulate it into a standardized adjustment instruction.

[0106] Exemplarily, after the user selects the text "Welcome to Page 1" on the page, a text configuration panel shown in Figure 7 pops up on the interaction interface of the browser IDE. The panel preset adjustment options such as text size, text color, alignment method, etc. The user can directly select the preset text size options of "14px, 16px, 18px", or select text color options such as "black, dark blue, gray", and can also check alignment method options such as "left alignment, center alignment, right alignment". At this time, the browser IDE will capture the user's adjustment intention according to these selection operations and encapsulate it into a standardized adjustment instruction.

[0107] In some embodiments, the browser IDE can also automatically pop up a configuration panel that matches the element type and includes parameter adjustment controls after the user selects the target page element. Among them, the parameter adjustment controls can be sliders, input boxes, drop-down selectors, etc. The user can adjust the parameters by dragging, inputting, selecting, etc. After the user adjusts the parameters, the browser IDE can convert the adjustment operation into an adjustment intention and then encapsulate it into a standardized adjustment instruction.

[0108] Exemplarily, after the user selects the button "Switch to Page 2" on the page, a configuration panel that matches the button element pops up on the interaction interface of the browser IDE. The panel is provided with parameter adjustment controls such as a button width slider and a background color drop-down selector. The user can drag the button width slider to adjust the value from 100px to 180px and select the blue value of "#409eff" in the background color drop-down selector. At this time, the browser IDE will capture the user's adjustment intention according to these parameter adjustment operations and encapsulate it into a standardized adjustment instruction.

[0109] Through the above implementation methods, multi-dimensional interaction forms such as text, voice, configuration panel options, and parameter adjustment can be supported, adapting to the operating habits of different users. This not only improves the accuracy of capturing adjustment intentions but also significantly reduces the operational threshold for page adjustments. At the same time, it can transform users' diverse adjustment needs into standardized adjustment commands and send them to the command line tool, ensuring the unified processing of subsequent page update logic and improving the efficiency of page updates.

[0110] Further, in one possible implementation of step S202, after the command line tool receives the adjustment instruction sent by the browser IDE, it can obtain the tag and adjustment intention of the target page element based on the adjustment instruction, determine the code path corresponding to the target page element based on the tag, and modify the running code of the target page element based on the adjustment intention and the code path.

[0111] The adjustment instruction contains two key pieces of information: the tag of the target page element and the user's adjustment intent. After receiving the adjustment instruction, the command-line tool first parses these two pieces of information from the instruction.

[0112] Furthermore, based on the tag of the target page element, the command-line tool can directly find the code path associated with that tag, such as line 8 of src / pages / Home / index.tsx. After determining the code path, the command-line tool will modify the running code under that code path according to the user's adjustment intention, and update the running code of the target page element.

[0113] In one possible implementation, the command-line tool can call a preset large language model, generate code patches corresponding to the target page elements based on the adjustment intent, and replace the running code of the target page elements with the code patches through atomic write operations based on the code path.

[0114] Among them, the preset large language model (LLM) is a model with code understanding and generation capabilities. It is trained based on massive amounts of code and natural language data, and can accurately understand the needs described in the form of text, speech and other forms, and automatically generate code snippets that conform to the syntax and can be run directly.

[0115] The command-line tool can input the adjustment intention into the trained large language model. The model will understand this natural language requirement and automatically generate a front-end code snippet that can realize the adjustment, i.e., a code patch. For example, based on the adjustment intention of "adjusting the width of the 'Switch to Page 2' button to 180px and changing the background color to #409eff blue", the code patch "style={{width: '180px', backgroundColor: '#409eff'}}" is generated. This code patch is a standardized and effective code that can directly replace the original code.

[0116] Furthermore, the command-line tool can accurately locate the running code of the target page element based on the code path, and then call the preset large language model to replace the original code at that location with the newly generated code patch through atomic write operations, thus completing the code modification. Among them, atomic write operation is a safe writing method that ensures the code is written completely and will not cause code errors due to interruption halfway through the modification.

[0117] Through step S202, the user's natural language adjustment intention can be directly converted into standardized and runnable code snippets with the help of a large language model. No manual writing or modification of code is required, which lowers the technical threshold for page code adjustment. Even non-professional developers can complete the code modification of page elements. At the same time, it can achieve precise positioning according to the code path. Combined with atomic write operation, it ensures the integrity and security of the code replacement process and avoids problems such as code modification interruption and errors. It not only improves the efficiency of page code update, but also ensures the accuracy and stability of code modification.

[0118] In one possible implementation of step S204, the command-line tool can send the running log corresponding to the atomic write operation to the browser IDE through the second channel. The browser IDE can load the modified running code based on the running log, trigger the target page to perform a hot update, and display the hot-updated target page in the preview interface.

[0119] The runtime log corresponding to the atomic write operation includes information such as whether the code modification was successful, the location of the modified code, and the content of the modification. Before the command-line tool sends the runtime log to the browser IDE through the second channel, it can inject preset security request headers, such as CORP and COEP, into the data to be sent. Then, the runtime log is sent to the browser IDE through the second channel to ensure that all data transmitted through the second channel has a security identifier, thereby enhancing the security of intranet transmission.

[0120] Further, after receiving the running log, the browser IDE will automatically load the modified running code based on the running log, trigger a hot update of the target page, and display the modified target page in the preview interface, allowing the user to immediately see the visual effect after the code modification. Among them, Hot Module Replacement (HMR) is a real-time update technology that does not require the user to manually perform a refresh operation. Its core is to only load and replace the modified code snippet, rather than reload the entire page, ensuring that the effect of the target page takes effect immediately after the code modification while retaining the original running state of the page.

[0121] Exemplarily, the user adjusts the width of the "Switch to Page Two" button to 180px through the configuration panel of the IDE. After the command-line tool completes the atomic write operation and modifies the code, it will immediately send the running log of "Code modification successful, the modification location is line 8 of src / pages / Home / index.tsx, and the modification content is that the button width is changed from 100px to 180px" to the browser IDE through the second channel. After receiving the running log, the IDE will automatically load the modified code and trigger a hot update of the target page in the preview interface. At this time, the user can immediately see the effect that the button width has become 180px.

[0122] Through step S204, the command-line tool independently transmits the running log according to the second channel, ensuring the real-time and stability of the log information transmission, enabling the browser IDE to quickly and accurately obtain the code modification result; through the hot update mechanism, "real-time page update without refreshing" is achieved. The user does not need to manually refresh the preview interface to immediately see the page effect after the code modification, greatly improving the interaction experience; in addition, through log feedback + real-time preview, the user can intuitively verify the modification effect and can quickly locate the code modification exception problem through the running log, realizing a closed-loop of modification → feedback → verification, significantly improving the efficiency and reliability of page adjustment.

[0123] Refer to Figure 8, Figure 8 is a schematic flowchart of another page update method provided by one or more embodiments of this specification.As shown in Figure 8, the method may include the following steps from step S801 to step S8017.

[0124] Step S801: Start the browser IDE;Step S802: The browser IDE sends a communication connection request to the command line tool;Step S803: The command line tool establishes a two-channel communication connection with the browser IDE;Step S804: The browser IDE obtains the page to be updated selected by the user;Step S805: The browser IDE sends the page to be updated selected by the user to the command line tool through the first channel;Step S806: The command line tool confirms that the running file of the page is written to the local file path based on the local file path of the page to be updated, and the dependencies required for page running have been installed;Step S807: The command line tool adds DOM element interaction scripts to the page to be updated and injects a preset security request header into the data sent to the browser IDE;Step S808: The command line tool starts the DevServer to generate an access address for the page to be updated and calls the label tool to add labels to all DOM elements of the page to be updated;Step S809: The command line tool sends the access address to the browser IDE through the second channel;Step S8010: The browser IDE displays the page to be updated in the preview interface based on the access address and sets the page to be updated as the target page;Step S8011: The browser IDE obtains the target page element selected by the user and the adjustment instruction for the target page element;Step S8012: The browser IDE sends the adjustment instruction to the command line tool through the second channel;Step S8013: The command line tool analyzes the adjustment instruction, obtains the label and adjustment intention of the target page element, and determines the code path corresponding to the target page element based on the label;Step S8014: The command line tool calls a preset large language model to generate a code patch corresponding to the target page element based on the adjustment intention;Step S8015: The command line tool replaces the running code of the target page element with the code patch through an atomic write operation based on the code path;Step S8016: The command line tool sends the running log corresponding to the atomic write operation to the browser IDE through the second channel;Step S8017: The browser IDE loads the modified running code based on the running log, triggers the target page for hot update, and displays the hot updated target page in the preview interface.

[0125] Through the page update method provided in one or more embodiments of this specification, developers can use a browser IDE for visual operations instead of manual coding. They can complete the entire process of selecting page elements, issuing commands, and previewing effects without having to master the underlying code, thus reducing the technical threshold for front-end page iteration. At the same time, through the division of labor and cooperation between the browser IDE and the command-line tool, the interaction layer and the execution layer are decoupled, reducing human error and ensuring the accuracy and standardization of code modifications. The real-time update capability of the preview interface allows page adjustments to take effect immediately, and the IDE integrates the operation entry and preview function, eliminating the need to frequently switch tools and significantly improving page update efficiency and operation continuity.

[0126] Furthermore, through the dual-channel communication design, instruction transmission and log feedback are parallel and non-blocking. Combined with the local loopback address and identity verification mechanism, real-time communication can be guaranteed, avoiding the risk of exposure to the public network and meeting enterprise-level security and compliance requirements. By binding DOM element tags and code paths, precise association between elements and code can be achieved, providing a basis for subsequent modifications. By adjusting the intent acquisition method in multiple dimensions, it can adapt to different user operating habits, making requirement input more flexible and convenient. By generating code patches and atomic writing operations through a large language model, the automation and security of code modification are realized, further reducing the technical threshold. By log synchronous feedback and hot updates, the modification effect can be previewed in real time, forming a closed loop of the entire process of "user selects element → automatically generates code patch → real-time modification → hot update preview", optimizing the development experience.

[0127] It is understood that the above embodiments are merely examples, and modifications can be made to the above embodiments in actual implementation. Those skilled in the art will understand that any modifications to the above embodiments that do not require creative effort fall within the protection scope of one or more embodiments of this specification, and will not be described again in the embodiments.

[0128] Based on the same inventive concept, one or more embodiments of this specification also provide a page update device. Since the principle of the problem solved by the page update device is similar to that of the aforementioned page update method, the implementation of the page update device can refer to the implementation of the aforementioned page update method, and the repeated parts will not be described again.

[0129] Refer to Figure 9. Figure 9 is a structural block diagram of a page update device provided by one or more embodiments of this specification. The page update device is applied to an electronic device. The electronic device is configured with a browser IDE and a command-line tool. Among them, the browser IDE is communicatively connected to the command-line tool, and the browser IDE includes a preview interface. As shown in Figure 9, the page update device 900 may include: an acquisition module 901, an update module 902, an addition module 903, a communication module 904, and an injection module 905. Among them,The acquisition module 901 is configured to acquire a target page element selected by a user and an adjustment instruction for the target page element based on the browser IDE, and send the adjustment instruction to the command-line tool, so that the command-line tool modifies the running code of the target page element based on the adjustment instruction.

[0130] The update module 902 is configured to display the updated target page based on the preview interface in response to the running code modified by the command-line tool.

[0131] In a possible implementation, the acquisition module 901 is configured to acquire a target page element selected by a user, including:The acquisition module 901 is configured to acquire the target page selected by the user; acquire the DOM element selected by the user on the target page, and use the DOM element as the target page element.

[0132] In a possible implementation, the browser IDE further includes a navigation interface; the acquisition module 901 is configured to acquire the target page selected by the user, including:The acquisition module 901 is configured to acquire the page to be updated selected by the user through the navigation interface; acquire the access address of the page to be updated; based on the access address, display the page to be updated on the preview interface, and use the page to be updated as the target page.

[0133] In a possible implementation, the browser IDE and the command-line tool are based on a dual-channel communication connection. The dual-channel includes a first channel and a second channel. The obtaining module 901 is used to obtain the access address of the page to be updated, including: The obtaining module 901 is used to send the page to be updated selected by the user from the browser IDE to the command-line tool through the first channel; the command-line tool generates a corresponding access address based on the running file path of the page to be updated and sends the access address to the browser IDE through the second channel.

[0134] In a possible implementation, the obtaining module 901 is used to obtain the DOM element selected by the user on the target page, including: The obtaining module 901 is used to add a DOM element interaction script to the target page; detect the user interaction action based on the DOM element interaction script; determine the DOM element selected by the user based on the interaction action.

[0135] In a possible implementation, the page update device further includes an adding module 903 shown in Figure 9. The adding module 903 is used to add tags to all DOM elements in the target page; Among them, the tag associates the code path of each DOM element, and the code path is used to indicate the position of the code corresponding to the DOM element in the running file of the target page.

[0136] In a possible implementation, the obtaining module 901 is used to obtain the adjustment instruction for the target page element, including: The obtaining module 901 is used to obtain the adjustment intention of the user for the target page element; encapsulate the adjustment intention as an adjustment instruction.

[0137] In a possible implementation, the obtaining module 901 is used to obtain the adjustment intention of the user for the target page element, including: The obtaining module 901 is used to receive the adjustment intention of the user for the target page element input in text form or voice form in response to the target page element selected by the user.

[0138] In one possible implementation, the acquisition module 901 is used to acquire the user's input of an adjustment intention for a target page element, including: The acquisition module 901 is used to display a configuration panel in response to the target page element selected by the user; the configuration panel is set with preset adjustment options or parameter adjustment controls that match the target page element; based on the configuration panel, it receives the user's selection operation of the preset adjustment options or adjustment operation of the parameter adjustment controls; and obtains the adjustment intention based on the selection operation or adjustment operation.

[0139] In one possible implementation, the acquisition module 901 is used by the command-line tool to modify the target page elements based on adjustment instructions, including: The acquisition module 901 is used to: acquire the tags and adjustment intent of the target page element based on the adjustment instruction; determine the code path corresponding to the target page element based on the tags; and modify the running code of the target page element based on the adjustment intent and the code path.

[0140] In one possible implementation, the acquisition module 901 is used to modify the running code of the target page element based on the adjustment intent and code path, including: The acquisition module 901 is used to call a preset large language model to generate code patches corresponding to the target page elements based on the adjustment intent; and to replace the running code of the target page elements with the code patches through atomic write operations based on the code path.

[0141] In one possible implementation, the update module 902 is configured to, in response to a command-line tool modifying the runtime code, display the updated target page based on the preview interface, including: The update module 902 is used so that the command-line tool sends the runtime log corresponding to the atomic write operation to the browser IDE through the second channel; the browser IDE loads the modified runtime code based on the runtime log, triggers the target page to perform a hot update, and displays the hot-updated target page in the preview interface.

[0142] In a possible implementation, as shown in Figure 9, the page update device further includes a communication module 904;The communication module 904 is configured to: the browser IDE sends a communication connection request to the command line tool through a preset loopback address; the command line tool generates an authentication token based on the communication connection request and sends it to the browser IDE; the browser IDE performs a communication handshake check with the command line tool based on the authentication token; in the case where the communication handshake check passes, a first channel and the second channel are established between the browser IDE and the command line tool based on the preset loopback address.

[0143] In a possible implementation, as shown in Figure 9, the page update device further includes an injection module 905;The injection module 905 is configured to: before the command line tool sends an access path or a running log to the browser IDE through the second channel, inject a preset security request header into the access path or the running log.

[0144] Based on the same inventive concept, one or more embodiments of this specification further provide an electronic device.

[0145] Referring to Figure 10, Figure 10 is a structural block diagram of an electronic device provided by one or more embodiments of this specification. As shown in Figure 10, the electronic device 10 may include a processor 1001 and a memory 1002; the memory 1002 may be coupled to the processor 1001.It should be noted that FIG. 10 is exemplary; other types of structures can also be used to supplement or replace this structure to implement telecommunication functions or other functions.

[0146] In a possible implementation, the functions of the page update device 900 can be integrated into the processor 1001. Among them, the processor 1001 can be configured to perform the following operations: Based on the browser IDE, obtain the target page element selected by the user and the adjustment instruction for the target page element, and send the adjustment instruction to the command line tool, so that the command line tool modifies the running code of the target page element based on the adjustment instruction; In response to the command line tool modifying the running code, display the updated target page based on the preview interface.

[0147] In another possible implementation, the page update device 900 can be separately configured from the processor 1001. For example, the page update device 900 can be configured as a chip connected to the processor 1001, and the page update operation can be implemented through the control of the processor 1001.

[0148] In a possible implementation, the above-mentioned multiple processors 1001 can be processors deployed on the same device. For example, the above-mentioned electronic device can be a high-performance device composed of multiple processors, and the above-mentioned multiple processors 1001 can be the processors configured on this high-performance device.

[0149] In another possible implementation, the above-mentioned multiple processors 1001 can also be processors deployed on different devices. For example, the above-mentioned electronic device can be a server cluster, and the above-mentioned multiple processors 1001 can be the processors on different servers in the server cluster.

[0150] In addition, in some optional implementations, the electronic device 10 may further include: a communication module, an input unit, an audio processor, a display, a power supply, etc.It should be noted that the electronic device 10 does not necessarily have to include all the components shown in Figure 10. In addition, the electronic device 10 may further include components not shown in Figure 10, and reference can be made to the prior art.

[0151] In some alternative implementation manners, the processor 1001, sometimes also referred to as a controller or operation control, may include a microprocessor or other processor devices and / or logic devices. The processor 1001 receives inputs and controls the operations of various components of the electronic device 10.

[0152] Among them, the memory 1002, for example, can be one or more of a buffer, flash memory, hard drive, removable medium, volatile memory, non-volatile memory, or other suitable devices. It can store the information related to the page update device 900 mentioned above. In addition, it can also store programs for executing relevant information. And the processor 1001 can execute the programs stored in the memory 1002 to implement information storage or processing, etc.

[0153] The input unit can provide inputs to the processor 1001. The input unit is, for example, a key or a touch input device. The power supply can be used to provide power to the electronic device 400. The display can be used to display display objects such as images and texts. The display is, for example, an LCD display, but is not limited thereto.

[0154] The memory 1002 can be a solid-state memory. For example, it can be a read-only memory (ROM), a random access memory (RAM), a SIM card, etc. It can also be a memory that stores information even when powered off, can be selectively erased, and has more data. Examples of such a memory are sometimes referred to as EPROMs, etc. The memory 1002 can also be some other type of device. The memory 1002 includes a buffer memory (sometimes referred to as a buffer). The memory 1002 can include an application / function storage part, which is used to store application programs and function programs or the processes for executing the operations of the electronic device 900 by the processor 1001.

[0155] The memory 1002 can also include a data storage part, which is used to store data, such as contacts, digital data, pictures, sounds, and / or any other data used by the electronic device.The driver storage unit of memory 1002 may include various drivers for computer devices for communication functions and / or for performing other functions of the computer device (such as messaging applications, address book applications, etc.).

[0156] The communication module is a transmitter / receiver that transmits and receives signals via an antenna. The communication module (transmitter / receiver) is coupled to the processor 1001 to provide input signals and receive output signals, which can be the same as in a conventional mobile communication terminal.

[0157] Based on different communication technologies, multiple communication modules can be configured in the same computer device, such as cellular network modules, Bluetooth modules, and / or wireless LAN modules. The communication module (transmitter / receiver) is also coupled to a speaker and microphone via an audio processor to provide audio output via the speaker and receive audio input from the microphone, thereby enabling typical telecommunications functions. The audio processor may include any suitable buffer, decoder, amplifier, etc. Additionally, the audio processor is coupled to processor 1001, enabling on-device recording via the microphone and on-device playback of stored sound via the speaker.

[0158] One or more embodiments of this specification also provide a computer-readable storage medium capable of implementing all steps of the page update method in the above embodiments. The computer-readable storage medium stores a computer program that, when executed by a processor, implements all steps of the page update method in the above embodiments. For example, when the processor executes the computer program, it implements the following steps: Based on the browser IDE, the system obtains the target page element selected by the user and the adjustment instructions for the target page element, and sends the adjustment instructions to the command line tool so that the command line tool can modify the running code of the target page element based on the adjustment instructions; In response to changes in the runtime code made by the command-line tool, the updated target page is displayed based on the preview interface.

[0159] Although one or more embodiments of this specification provide the method operation steps as described in the embodiments or flowcharts, more or fewer operation steps may be included based on conventional or non-inventive labor. The order of steps listed in the embodiments is merely one of many possible execution orders and does not represent the only execution order. In actual device or client product execution, the methods shown in the embodiments or drawings can be executed sequentially or in parallel (e.g., in a parallel processor or multi-threaded processing environment).

[0160] Those skilled in the art will understand that the embodiments of this specification can be provided as methods, apparatus (systems) or computer program products.Therefore, the embodiments of this specification may take the form of all hardware embodiments, all software embodiments, or embodiments combining software and hardware aspects. Moreover, one or more embodiments of this specification may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0161] One or more embodiments of this specification are described with reference to the flowcharts and / or block diagrams of methods, apparatuses (systems), and computer program products according to one or more embodiments of this specification. It should be understood that each flow and / or block in the flowchart and / or block diagram, and the combination of flows and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to the processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate a device for implementing the functions specified in one or more flows or a plurality of flows and / or one or more blocks or a plurality of blocks in the flowchart Figure 1.

[0162] These computer program instructions can also be stored in a computer-readable memory that can guide a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer-readable memory generate a manufactured product including an instruction device, and the instruction device implements the functions specified in one or more flows or a plurality of flows and / or one or more blocks or a plurality of blocks in the flowchart Figure 1.

[0163] These computer program instructions may also be loaded onto a computer or other programmable data processing device, so that a series of operation steps are executed on the computer or other programmable device to generate a computer-implemented process, and thus the instructions executed on the computer or other programmable device provide steps for implementing the functions specified in one process or multiple processes and / or one block or multiple blocks in the flow Figure 1.

[0164] Each embodiment in this specification is described in a progressive manner. For the same or similar parts between each embodiment, reference may be made to each other. The key point of each embodiment is to illustrate the differences from other embodiments. In particular, for the device and system embodiments, since they are basically similar to the method embodiments, the description is relatively simple. For the relevant parts, reference may be made to the partial description of the method embodiments.

[0165] In this document, relational terms such as "first" and "second" are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Also, the term "comprising", "including" or any other variant thereof is intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements not only includes those elements, but also includes other elements not explicitly listed, or further includes elements inherent to such process, method, article or device. For those of ordinary skill in the art, the specific meanings of the above terms in one or more embodiments of this specification can be understood according to specific circumstances.

[0166] It should be noted that, without conflict, the features in one or more embodiments of this specification and the embodiments can be combined with each other. One or more embodiments of this specification are not limited to any single aspect, nor to any single embodiment, nor to any arbitrary combination and / or permutation of these aspects and / or embodiments. Moreover, each aspect and / or embodiment of one or more embodiments of this specification can be used alone or in combination with one or more other aspects and / or their embodiments.

[0167] The above embodiments are only used to illustrate the technical solutions of one or more embodiments of this specification, and are not intended to limit them; although one or more embodiments of this specification have been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some or all of the technical features therein; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of one or more embodiments of this specification, and they should all be covered within the scope of the claims and the specification of one or more embodiments of this specification.

[0168] The present specification has described one or more embodiments above with reference to optional implementation methods. However, these embodiments are merely exemplary and serve only an illustrative purpose. Based on this, various substitutions and modifications can be made to one or more embodiments of the present specification, all of which fall within the protection scope of one or more embodiments of the present specification.

[0169] Finally, it should be noted that the user-related information that may be involved in one or more embodiments of this specification is processed in strict accordance with the requirements of laws and regulations, following the principles of legality, legitimacy and necessity, based on the reasonable purpose of the service scenario, and is personal information that users actively provide or generate during the use of the product / service, as well as personal information obtained with user authorization.

[0170] The user-related information processed in one or more embodiments of this specification may vary depending on the specific product / service scenario, and should be based on the specific scenario in which the user uses the product / service. One or more embodiments of this specification attach great importance to the security of user-related information and have taken reasonable and feasible security protection measures that comply with industry standards to protect user information and prevent unauthorized access, public disclosure, use, modification, damage or loss of information.< / iframe>

Claims

1. A page update method, characterized in that, Applied to an electronic device, the electronic device is configured with a browser IDE and a command-line tool, the browser IDE being communicatively connected to the command-line tool, the browser IDE including a preview interface, the method comprising: Based on the browser IDE, the system obtains the target page element selected by the user and the adjustment instructions for the target page element, and sends the adjustment instructions to the command-line tool so that the command-line tool modifies the running code of the target page element based on the adjustment instructions. In response to the command-line tool modifying the runtime code, the updated target page is displayed based on the preview interface.

2. The page update method according to claim 1, characterized in that, The process of obtaining the target page element selected by the user includes: Get the target page selected by the user; Obtain the DOM element selected by the user on the target page, and use the DOM element as the target page element.

3. The page update method according to claim 2, characterized in that, The browser IDE also includes a navigation interface; obtaining the target page selected by the user includes: The navigation interface is used to obtain the page selected by the user to be updated. Obtain the access address of the page to be updated; Based on the access address, the page to be updated is displayed on the preview interface, and the page to be updated is used as the target page.

4. The page update method according to claim 3, characterized in that, The browser IDE and the command-line tool are connected via a dual-channel communication connection, which includes a first channel and a second channel. Obtaining the access address of the page to be updated includes: The browser IDE sends the user-selected page to be updated to the command-line tool through the first channel; The command-line tool generates a corresponding access address based on the running file path of the page to be updated, and sends the access address to the browser IDE through the second channel.

5. The page update method according to claim 2, characterized in that, The step of obtaining the DOM element selected by the user on the target page includes: Add DOM element interaction scripts to the target page; Based on the DOM element interaction script, detect user interaction actions; The DOM element selected by the user is determined based on the interaction action.

6. The page update method according to claim 4, characterized in that, The method further includes: Add tags to all DOM elements on the target page; The tag is associated with the code path of each DOM element, and the code path is used to indicate the location of the code corresponding to the DOM element in the runtime file of the target page.

7. The page update method according to claim 6, characterized in that, The step of obtaining adjustment instructions for the target page element includes: Obtain the user's input regarding the adjustment intent for the target page element; The adjustment intention is encapsulated as the adjustment instruction.

8. The page update method according to claim 7, characterized in that, The step of obtaining the user's input regarding the adjustment intent for the target page element includes: In response to the target page element selected by the user, the system receives the user's intention to adjust the target page element, either in text or voice format.

9. The page update method according to claim 7, characterized in that, The step of obtaining the user's input regarding the adjustment intent for the target page element includes: In response to the target page element selected by the user, a configuration panel is displayed; the configuration panel is set with preset adjustment options or parameter adjustment controls that match the target page element; Based on the configuration panel, the system receives user selections of the preset adjustment options or adjustments of the parameter adjustment controls. The adjustment intention is obtained based on the selection operation or the adjustment operation.

10. The page update method according to claim 7, characterized in that, The command-line tool modifies the runtime code of the target page element based on the adjustment instructions, including: Based on the adjustment instruction, obtain the tag of the target page element and the adjustment intention; The code path corresponding to the target page element is determined based on the tag; Based on the stated adjustment intent and the stated code path, modify the running code of the target page element.

11. The page update method according to claim 10, characterized in that, The modification of the running code of the target page element based on the adjustment intent and the code path includes: Invoke the preset large language model and generate code patches corresponding to the target page elements based on the adjustment intent; Based on the code path, the running code of the target page element is replaced with the code patch through an atomic write operation.

12. The page update method according to claim 11, characterized in that, The step of responding to the command-line tool modifying the runtime code and displaying the updated target page based on the preview interface includes: The command-line tool sends the runtime log corresponding to the atomic write operation to the browser IDE through the second channel; The browser IDE loads the modified runtime code based on the runtime log, triggers a hot update of the target page, and displays the hot-updated target page in the preview interface.

13. The page update method according to claim 12, characterized in that, Before obtaining the target page element selected by the user and the adjustment instructions for the target page element based on the browser IDE, the method further includes: The browser IDE sends a communication connection request to the command-line tool through a preset loopback address; The command-line tool generates an authentication token based on the communication connection request and sends it to the browser IDE; The browser IDE performs a handshake verification with the command-line tool based on the authentication token. If the communication handshake verification passes, the first channel and the second channel are established between the browser IDE and the command-line tool based on the preset loopback address.

14. The page update method according to claim 13, characterized in that, The method further includes: Before the command-line tool sends the access path or the running log to the browser IDE through the second channel, it injects a preset security request header into the access path or the running log.

15. A page updating device, characterized in that, Applied to an electronic device, the electronic device being configured with a browser IDE and a command-line tool, the browser IDE being communicatively connected to the command-line tool, the browser IDE including a preview interface; the device includes: The acquisition module is used to acquire the target page element selected by the user and the adjustment instructions for the target page element based on the browser IDE, and send the adjustment instructions to the command line tool so that the command line tool can modify the running code of the target page element based on the adjustment instructions; The update module is used to respond to the modified runtime code of the command-line tool and display the updated target page based on the preview interface.

16. An electronic device, characterized in that, The electronic device includes: Memory, used to store computer program products; A processor is configured to execute a computer program product stored in the memory, wherein, when the computer program product is executed, it implements the page update method according to any one of claims 1 to 14.

17. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer program instructions, which, when executed, implement the page update method according to any one of claims 1 to 14.

Images