A page debugging method, device, equipment and storage medium

Abstract

The present invention discloses a page debugging method, device, equipment and storage medium, which belongs to the technical field of computer software development, including: starting a preset browser plug-in, and obtaining the initial target resource list of the page to be debugged; creating a first-level right-click menu, and regularly pulling the latest target resource list of the page to be debugged; comparing the latest target resource list with the initial target resource list to obtain the change file, and updating the target cache in the browser front-end database; monitoring the update of the target cache and obtaining all current data items in the target cache, creating a second-level right-click menu under the first-level right-click menu according to the current data items; in response to the user clicking the first-level right-click menu or the second-level right-click menu, the corresponding file is stored in the local file system. The application allows users to directly save the updated CSS file locally, reducing the time consumption caused by the user carrying the code, and improving the development efficiency.

Description

Technical Field

[0001] The present invention relates to the technical field of computer software development, and in particular to a page debugging method, device, equipment and storage medium. Background Art

[0002] With the rapid development of information technology, front-end development has become an indispensable part of building modern Internet applications. In this field, the browser, as the main debugging tool for front-end development, is of self-evident importance. When developers debug pages, they usually rely on the browser's developer tools, especially the Elements panel, to intuitively view and modify the styles of DOM (Document Object Model) elements.

[0003] During debugging, developers may find that they need to modify multiple styles to achieve the desired effect. At this time, they often find the corresponding DOM element directly in the Elements panel of the browser and make instant modifications in the Styles area on the right. Although this method is fast, it has a significant problem, that is, the modified style cannot be synchronized to the source code.

[0004] In order to reflect the changes made in the browser to the source code, developers need to locate the corresponding style file in the code base, find the corresponding class name or selector, and then manually add the changes made in the browser. At the same time, when there are many styles that need to be modified, this process becomes extremely cumbersome and error-prone. For example, the developer may forget to reflect some changes made in the browser in the source code, or introduce new errors during the modification process.

[0005] In addition, even if developers successfully reflect all modifications in the source code, due to the lack of an effective recording and tracking mechanism during the modification process, it is difficult for them to ensure that all modifications are correct. Once the page is refreshed to view the effect, the modifications that were not correctly synchronized will be lost, forcing developers to start debugging again, which not only wastes a lot of time but also reduces development efficiency. Summary of the invention

[0006] The purpose of the present invention is to provide a page debugging method, device, equipment and storage medium to solve the problem in the prior art that page style debugging requires manually adding modifications in the browser to the source code, which is prone to errors, time-consuming and has low development efficiency.

[0007] To achieve the above objectives, this application adopts the following technical solutions:

[0008] A page debugging method of the present application comprises the following steps:

[0009] Starting a preset browser plug-in for page debugging, and obtaining an initial target resource list of the page to be debugged based on the preset browser plug-in;

[0010] Creating a primary right-click menu for triggering a batch file saving operation, and using the preset browser plug-in to periodically pull the latest target resource list of the page to be debugged;

[0011] Compare the latest target resource list with the initial target resource list to obtain a change file, and update the target cache in the browser front-end database according to the change file;

[0012] Calling a third-party library to monitor updates of the target cache and obtain all current data items in the target cache, and creating at least one secondary right-click menu for triggering a single file save operation under the primary right-click menu according to the current data items;

[0013] In response to the user clicking on the primary right-click menu or the secondary right-click menu, the corresponding file is stored in the local file system.

[0014] Preferably, the obtaining the initial target resource list of the page to be debugged based on the preset browser plug-in includes:

[0015] Call the chrome.devtools.inspectedWindow.getResources method to pull all resources of the page to be debugged, and in its callback function, filter out all cascading style sheets based on the resource extensions;

[0016] All cascading style sheets are saved in a global variable named resource array to obtain an initial target resource list of the page to be debugged.

[0017] Preferably, the step of creating a primary right-click menu for triggering a batch file saving operation includes:

[0018] Call the chrome.contextMenus.create method to create a primary right-click menu, and configure a first click event handler for the primary right-click menu, where the first click event handler is used to perform a batch save file operation.

[0019] Preferably, updating the target cache in the browser front-end database according to the change file comprises:

[0020] Check whether the target cache exists in the browser front-end database;

[0021] When the target cache does not exist, creating the target cache in the front-end database, and storing the file name, path and file content of the changed file in the form of data items in the target cache;

[0022] When the target cache exists, determine whether the target cache contains a file whose name and file path are the same as those of the changed file. If so, update its content. Otherwise, store the file name, path and file content of the changed file in the form of a data item in the target cache.

[0023] Preferably, the step of creating at least one secondary right-click menu for triggering a single file save operation under the primary right-click menu according to the current data item includes:

[0024] The chrome.contextMenus.create method is called to create a secondary right-click menu with the primary right-click menu as the parent menu for each current data item, and a second click event handler is configured for each secondary right-click menu, where the second click event handler is used to execute the operation of saving files separately.

[0025] Preferably, in response to the user clicking the primary right-click menu or the secondary right-click menu, storing the corresponding file in the local file system includes:

[0026] When the user clicks on the first-level right-click menu, the first click event handler queries whether there is a target cache in the browser front-end database. When the target cache exists and its array length is greater than 0, it traverses and reads the file name, path and file content in each data item in the array, and saves all corresponding file contents to the local file system according to the file name and path.

[0027] Preferably, in response to the user clicking the primary right-click menu or the secondary right-click menu, storing the corresponding file in the local file system includes:

[0028] When the user clicks on the secondary right-click menu, the second click event handler queries whether there is a target cache in the browser front-end database. When the target cache exists and its array length is greater than 0, the file name, path and file content in the corresponding data item of the secondary right-click menu are read, and the file content is saved to the local file system according to the file name and path.

[0029] A page debugging device, comprising:

[0030] An acquisition module, used to start a preset browser plug-in for page debugging, and acquire an initial target resource list of the page to be debugged based on the preset browser plug-in;

[0031] A pulling module, used to create a primary right-click menu for triggering a batch file saving operation, and to periodically pull the latest target resource list of the page to be debugged using the preset browser plug-in;

[0032] A comparison module, used for comparing the latest target resource list with the initial target resource list to obtain a change file, and updating the target cache in the browser front-end database according to the change file;

[0033] A creation module is used to call a third-party library to monitor the update of the target cache and obtain all current data items in the target cache, and create at least one secondary right-click menu for triggering a single file save operation under the primary right-click menu according to the current data items;

[0034] The saving module is used to store the corresponding file in the local file system in response to the user clicking the first-level right-click menu or the second-level right-click menu.

[0035] An electronic device comprises a memory and a processor, wherein the memory is used to store one or more computer instructions, wherein the one or more computer instructions are executed by the processor to implement a page debugging method as described in any one of the above.

[0036] A computer-readable storage medium storing a computer program, wherein the computer program enables a computer to implement a page debugging method as described in any one of the above when executed.

[0037] The present invention has the following beneficial effects:

[0038] This application ensures that the browser can automatically monitor changes in CSS files and update the information in IndexDB when changes are detected. At the same time, it provides an interactive interface for users through the right-click menu provided by the preset browser plug-in, allowing users to directly save the updated CSS files locally, reducing the time spent by users on moving code and improving development efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] Figure 1 is a design principle diagram of the browser plug-in provided in the embodiment of the present application;

[0040] Figure 2 is a first flow chart of a page debugging method provided by an embodiment of the present application;

[0041] Figure 3 It is a structural diagram of a page debugging device provided in an embodiment of the present application;

[0042] Figure 4It is a schematic diagram of an electronic device for implementing a page debugging method provided in an embodiment of the present application. DETAILED DESCRIPTION

[0043] To make the technical solution of the present application clearer, the present invention is further described in detail below in conjunction with the accompanying drawings and specific embodiments. The terms "first", "second", etc. in the claims and specification of the present application are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the terms used in this way can be interchangeable under appropriate circumstances. This is only to describe the distinction method used when describing objects with the same attributes in the embodiments of the present application. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, so that a process, method, system, product or device containing a series of units is not necessarily limited to those units, but may include other units that are not clearly listed or inherent to these processes, methods, products or devices.

[0044] In the prior art, when a user previews a page of front-end local code through a browser, it can be seen that the browser has loaded all local resources. When a developer modifies the page style during debugging, the browser's resource file will also be modified. This application uses this feature to pre-develop a browser plug-in Apply-Debug-Style, where a browser plug-in is also called a browser extension. It is a software component that can enhance or modify browser functions. It is usually designed by a third-party developer and developed in accordance with the development interface and specifications of a specific browser, and allows users to add new functions or improve existing functions to the browser according to personal preferences or specific needs. The preset browser plug-in Apply-Debug-Style in this application is mainly used for page debugging of Google Chrome. After enabling the preset Apply-Debug-Style, after obtaining the resource file loaded by the browser and the corresponding file path, the original file corresponding to the latest resource file on the browser side can be found locally according to its file path and overwritten, thereby achieving the effect of applying the debugging code to the development code with one click. Its design principle is as follows Figure 1 shown.

[0045] like Figure 2 As shown, the present application provides a page debugging method, which is mainly implemented based on the above-mentioned preset browser plug-in Apply-Debug-Style, and specifically includes the following steps:

[0046] S110: Start a preset browser plug-in for page debugging, and obtain an initial target resource list of the page to be debugged based on the preset browser plug-in.

[0047] Before starting the preset browser plug-in Apply-Debug-Style, you need to install the plug-in in the browser first. There are two ways. One is to install it directly through the browser extension store, that is, first open the Google Chrome browser and visit the browser's extension store Chrome Web Store, then enter "Apply-Debug-Style" in the search bar to find the extension, then click "Add to browser" or a similar button, and finally complete the installation process according to the browser prompts; the other is to add the downloaded extension directly to the browser. Specifically, first download the installation package of the preset browser plug-in Apply-Debug-Style, which is usually a file with the suffix .crx. .crx is the extension package file format of the Google Chrome browser, then turn on the developer mode on the browser's extension page, click the "Load unzipped extension" button and select the folder where the installation package is located, and finally complete the installation process according to the browser prompts.

[0048] Furthermore, based on the preset browser plug-in, an initial target resource list of the page to be debugged is obtained, including:

[0049] Call the chrome.devtools.inspectedWindow.getResources method to pull all resources of the page to be debugged, and in its callback function, filter out all cascading style sheets based on the resource extensions;

[0050] Save all cascading style sheets into a global variable named resource array to obtain the initial target resource list of the page to be debugged.

[0051] After the installation is complete, start the preset browser plug-in Apply-Debug-Style, and based on the preset plug-in, call the chrome.devtools.inspectedWindow.getResources method to pull all the resources of the current page, which is the page to be debugged. The chrome.devtools.inspectedWindow.getResources method is a function in the ChromeDevTools Protocol or Chrome extension API, which is used to obtain resource information in the current inspected window (usually the page or tab to which the developer tool is attached). Chrome DevTools Protocol is a set of remote debugging protocols provided by Google Chrome browser for debugging and analyzing web pages. It allows developers to communicate with a running Chrome browser to check the browser status, control its behavior, and collect debugging information.

[0052] In the Chrome developer tool, when the chrome.devtools.inspectedWindow.getResources method is called, a callback function must be provided to process the obtained resource list. In this embodiment, this callback function is used to filter out all files with the .css suffix, namely, cascading style sheets CSS. Because this embodiment is mainly aimed at page style debugging, the target resources here refer to style files, and these cascading style sheets CSS are stored in a global variable resources array, thereby generating an initial target resource list for the page to be debugged.

[0053] S120: creating a first-level right-click menu for triggering a batch file saving operation, and using a preset browser plug-in to periodically pull the latest target resource list of the page to be debugged.

[0054] The preset browser plug-in Apply-Debug-Style is mainly responsible for providing a right-click menu for developers when debugging page styles. Therefore, after starting the preset plug-in, it is also necessary to call the chrome.contextMenus.create method to create a first-level right-click menu. The chrome.contextMenus.create method is a method in the Chrome extension API, which allows extension developers to create new menu items in the context menu of the Chrome browser, i.e., the right-click menu. In this embodiment, the created first-level right-click menu is named "Apply All" and is configured with a first click event handler, which is used to perform batch file saving operations.

[0055] A timer is also created, the time interval of which can be set according to actual needs and is not limited here. Through this timer, the chrome.devtools.inspectedWindow.getResources method can be called to periodically pull the latest resource list of the page to be debugged.

[0056] S130: Compare the latest target resource list with the initial target resource list to obtain a change file, and update the target cache in the browser front-end database according to the change file.

[0057] Compare the latest target resource list with the initial target resource list. If the content of a cascading style sheet CSS has changed, the cascading style sheet CSS is the changed file. For example, if the content of a file named a.css has changed, a.css is the changed file.

[0058] Further, the target cache in the browser front-end database is updated according to the changed file, including:

[0059] Check whether the target cache exists in the browser front-end database;

[0060] When the target cache does not exist, the target cache is created in the front-end database, and the file name, path and file content of the changed file are stored in the target cache in the form of data items;

[0061] When the target cache exists, determine whether there is a file in the target cache with the same name and file path as the changed file. If so, update its content. Otherwise, store the file name, path and file content of the changed file in the form of data items in the target cache.

[0062] After confirming the changed file, first go to the browser front-end database IndexDB to query whether there is a target cache named APPLY_DEBUG_STYLES_MODIFY_FILES. This target cache only stores the changed cascading style sheet CSS information in the form of an array, which consists of data items representing a single cascading style sheet CSS information. IndexDB is an API for efficiently storing structured data in the browser. It not only provides object storage, transaction processing, index creation, and asynchronous operations, but also provides efficient data query. If this target cache does not exist in IndexDB, first create the target cache APPLY_DEBUG_STYLES_MODIFY_FILES, and then store the file name, path, and file content of the changed file in the form of data items in the target cache. In the cache array, taking a.css as the changed file as an example, the content {path:{a.path},fileName:'a.css',content:{a.content}} is added to the newly created target cache APPLY_DEBUG_STYLES_MODIFY_FILES; if the target cache APPLY_DEBUG_STYLES_MODIFY_FILES exists in IndexDB, it is queried whether there is a file named a.css in the target cache and the file path is consistent with the current a.css. If so, the content of the file named a.css in the target cache is updated. If not, the content {path:{a.path},fileName:'a.css',content:{a.content}} is still added to the target cache.

[0063] S140: Call a third-party library to monitor updates of the target cache and obtain all current data items in the target cache, and create at least one secondary right-click menu for triggering a single file save operation under the primary right-click menu according to the current data items.

[0064] Introduce the third-party library idb, and call the openDB method in the third-party library to listen to the update of the target cache in IndexDB. The reason why idb is introduced here is that it has the ability to listen to the changes in IndexDB. Developers can also develop a library with this function according to their own needs without referencing a third-party library. When idb listens to the changes in the target cache in IndexDB, it will obtain all data items in the current target cache, and set the parent menu unique identifier parentId in the chrome.contextMenus.create method parameter to the id of the first-level right-click menu named "Apply All", and then call the chrome.contextMenus.create method to create a corresponding second-level right-click menu for each data item, and configure a second click event handler for each second-level right-click menu. The second click event generator is used to perform the operation of saving files separately.

[0065] S150. In response to the user clicking on the primary right-click menu or the secondary right-click menu, the corresponding file is stored in the local file system.

[0066] Finally, different file saving logic is executed according to the right-click menu of different levels clicked by the user.

[0067] Furthermore, when the user clicks on the first-level right-click menu, the first click event handler queries whether there is a target cache in the browser front-end database. When the target cache exists and its array length is greater than 0, it traverses and reads the file name, path and file content in each data item in the array, and saves all corresponding file contents to the local file system according to the file name and path.

[0068] When the user clicks on the first-level right-click menu, the first click event handler configured for the first-level right-click menu will go to IndexDB to query whether there is a target cache named APPLY_DEBUG_STYLES_MODIFY_FILES. If it exists and its array length is greater than 0, it will traverse the file name, path, and file content in each data item in the array, and then call the window.showSaveFilePicker method to save all the file contents corresponding to each data item to the local file system according to the file name and the corresponding path; if it does not exist, it will directly return return, which means no response to the click operation. The window.showSaveFilePicker method is a method in the web API for displaying a file save dialog box, which allows a web page to request the user to select a location to save files.

[0069] Furthermore, when the user clicks on the secondary right-click menu, the second click event handler queries the browser front-end database whether there is a target cache. When the target cache exists and its array length is greater than 0, the file name, path and file content in the corresponding data item of the secondary right-click menu are read, and the file content is saved to the local file system according to the file name and path.

[0070] When the user clicks on the secondary right-click menu, the second click event handler configured for the secondary right-click menu will go to IndexDB to query whether there is a target cache named APPLY_DEBUG_STYLES_MODIFY_FILES. If it exists and its array length is greater than 0, it will traverse the file name, path, and file content in the data item corresponding to the secondary right-click menu in its array, and then call the window.showSaveFilePicker method to save the file content in this data item to the local file system according to the file name and the corresponding path.

[0071] This embodiment ensures that the browser can automatically monitor changes in CSS files and update the information in IndexDB when changes are detected. At the same time, the right-click menu provided by the preset browser plug-in provides users with an interactive interface, allowing users to directly save updated CSS files locally, reducing the time spent by users on moving code and improving development efficiency.

[0072] The specific application of the above method is illustrated by an example below.

[0073] Add Apply-Debug-Style to the Chrome browser extensions. When you see Apply-Debug-Style in the extension list, turn on Apply-Debug-Style.

[0074] Open a local demo project and use a browser to preview the project. Assume that the preview page is PageA. At this time, we double-click on a blank space on the browser page PageA to bring up the right-click menu. Click "Inspect" to open the console. Then double-click on a blank space on the browser page PageA to bring up the right-click menu. You will see an additional first-level right-click menu option called "Apply All".

[0075] Next, modify the style in the console and find that the modified style code has achieved the ideal effect. Two different style files b.css and c.css have been modified. Double-click to call out the right-click menu. Two secondary right-click menus "Apply File b" and "Apply File c" appear under "Apply All". Click the first-level right-click menu "Apply All". Apply-Debug-Style will get the b.css and c.css files modified by the browser, and then directly overwrite the original files according to the file path; if you click "Apply File b", you will get the modified b.css and c.css and overwrite the original file. At this time, when the user refreshes the page, he will find that the loaded resources are already the modified content.

[0076] like Figure 3 As shown, the present application also provides a page debugging device, including:

[0077] An acquisition module is used to start a preset browser plug-in for page debugging, and obtain an initial target resource list of the page to be debugged based on the preset browser plug-in;

[0078] The pull module is used to create a first-level right-click menu for triggering batch file saving operations, and use a preset browser plug-in to periodically pull the latest target resource list of the page to be debugged;

[0079] A comparison module is used to compare the latest target resource list with the initial target resource list to obtain a changed file, and update the target cache in the browser front-end database according to the changed file;

[0080] Create a module for calling a third-party library to monitor updates of the target cache and obtain all current data items in the target cache, and create at least one secondary right-click menu under the primary right-click menu according to the current data items for triggering a single file save operation;

[0081] The saving module is used to store the corresponding file in the local file system in response to the user clicking the first-level right-click menu or the second-level right-click menu.

[0082] The above-mentioned device can execute the methods provided by all the aforementioned embodiments of the present application, and has the corresponding functional modules and beneficial effects for executing the above-mentioned methods. For technical details not fully described in this embodiment, please refer to the methods provided by all the aforementioned embodiments of the present invention.

[0083] like Figure 4As shown, the present application also provides a computer device, including a memory, a processor, and a computer program stored in the memory, wherein the processor executes the computer program to implement the steps of the above-mentioned page debugging method.

[0084] The computer device can be a server or a terminal. The computer device includes a processor, a memory, an input / output interface (I / O for short) and a communication interface. The processor, the memory and the input / output interface are connected via a system bus, and the communication interface is connected to the system bus via the input / output interface. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program and a database. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The input / output interface of the computer device is used to exchange information between the processor and an external device. The communication interface of the computer device is used to communicate with an external terminal via a network connection. When the computer program is executed by the processor, a page debugging method is implemented.

[0085] This embodiment further provides a computer-readable storage medium on which a computer program or instruction is stored. When the computer program or instruction is executed by a processor, the steps of the page debugging method described above are implemented.

[0086] The computer-readable program instructions described herein can be downloaded from a computer-readable storage medium to each computing / processing device, or downloaded to an external computer or external storage device via a network, such as the Internet, a local area network, a wide area network, and / or a wireless network. The network can include copper transmission cables, optical fiber transmissions, wireless transmissions, routers, firewalls, switches, gateway computers, and / or edge servers. The network adapter card or network interface in each computing / processing device receives the computer-readable program instructions from the network and forwards the computer-readable program instructions for storage in the computer-readable storage medium in each computing / processing device.

[0087] The computer program instructions for performing the operation of the present invention may be assembler instructions, instruction set architecture (ISA) instructions, machine instructions, machine-dependent instructions, microcode, firmware instructions, state setting data, or source code or object code written in any combination of one or more programming languages, including object-oriented programming languages, such as Smalltalk, C++, etc., and conventional procedural programming languages, such as "C" language or similar programming languages. Computer-readable program instructions may be executed completely on a user's computer, partially on a user's computer, as an independent software package, partially on a user's computer, partially on a remote computer, or completely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer via any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., using an Internet service provider to connect via the Internet). In some embodiments, an electronic circuit, such as a programmable logic circuit, a field programmable gate array (FPGA), or a programmable logic array (PLA), may be personalized by utilizing the state information of the computer-readable program instructions, and the electronic circuit may execute the computer-readable program instructions, thereby realizing various aspects of the present invention.

[0088] These computer-readable program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing device, thereby producing a machine, so that when these instructions are executed by the processor of the computer or other programmable data processing device, a device that implements the functions / actions specified in one or more boxes in the flowchart and / or block diagram is generated. These computer-readable program instructions can also be stored in a computer-readable storage medium, and these instructions cause the computer, programmable data processing device, and / or other equipment to work in a specific manner, so that the computer-readable medium storing the instructions includes a manufactured product, which includes instructions for implementing various aspects of the functions / actions specified in one or more boxes in the flowchart and / or block diagram.

[0089] Computer-readable program instructions may also be loaded onto a computer, other programmable data processing apparatus, or other device so that a series of operating steps are performed on the computer, other programmable data processing apparatus, or other device to produce a computer-implemented process, thereby causing the instructions executed on the computer, other programmable data processing apparatus, or other device to implement the functions / actions specified in one or more boxes in the flowchart and / or block diagram.

[0090] The above-mentioned embodiments only express several implementation methods of the present invention, and the description thereof is relatively specific and detailed, but it cannot be understood as limiting the scope of the patent of the present invention. It should be pointed out that, for ordinary technicians in this field, several variations and improvements can be made without departing from the concept of the present invention, which all belong to the protection scope of the present invention. Therefore, the protection scope of the patent of the present invention shall be subject to the attached claims.

Claims

1. A page debugging method, characterized in that: The following steps are involved: Starting a preset browser plug-in for page debugging, and obtaining an initial target resource list of the page to be debugged based on the preset browser plug-in; Creating a primary right-click menu for triggering a batch file saving operation, and using the preset browser plug-in to periodically pull the latest target resource list of the page to be debugged; Compare the latest target resource list with the initial target resource list to obtain a change file, and update the target cache in the browser front-end database according to the change file; Calling a third-party library to monitor updates of the target cache and obtain all current data items in the target cache, and creating at least one secondary right-click menu for triggering a single file save operation under the primary right-click menu according to the current data items; In response to a user clicking on the primary right-click menu or the secondary right-click menu, storing the corresponding file in the local file system; The obtaining of an initial target resource list of a page to be debugged based on the preset browser plug-in includes: Call the chrome.devtools.inspectedWindow.getResources method to pull all resources of the page to be debugged, and in its callback function, filter out all cascading style sheets based on the resource extensions; All cascading style sheets are saved in a global variable named resource array to obtain an initial target resource list of the page to be debugged.

2. A page debugging method according to claim 1, characterized in that: The step of creating a primary right-click menu for triggering a batch file saving operation includes: The chrome.contextMenus.create method is called to create a primary right-click menu, and a first click event handler is configured for the primary right-click menu, where the first click event handler is used to execute a batch save file operation.

3. A page debugging method according to claim 2, characterized in that: The updating of the target cache in the browser front-end database according to the change file comprises: Check whether the target cache exists in the browser front-end database; When the target cache does not exist, creating the target cache in the front-end database, and storing the file name, path and file content of the changed file in the form of data items in the target cache; When the target cache exists, determine whether the target cache contains a file whose name and file path are the same as those of the changed file. If so, update its content. Otherwise, store the file name, path and file content of the changed file in the form of a data item in the target cache.

4. A page debugging method according to claim 3, characterized in that: The step of creating at least one secondary right-click menu for triggering a single file saving operation under the primary right-click menu according to the current data item includes: The chrome .contextMenus .create method is called to create a secondary right-click menu with the primary right-click menu as the parent menu for each current data item, and a second click event handler is configured for each secondary right-click menu, where the second click event handler is used to execute an operation of saving a file separately.

5. A page debugging method according to claim 4, characterized in that: In response to the user clicking the primary right-click menu or the secondary right-click menu, storing the corresponding file in the local file system includes: When the user clicks on the first-level right-click menu, the first click event handler queries whether there is a target cache in the browser front-end database. When the target cache exists and its array length is greater than 0, it traverses and reads the file name, path and file content of each data item in the array, and saves all corresponding file contents to the local file system according to the file name and path.

6. A page debugging method according to claim 4, characterized in that: In response to the user clicking the primary right-click menu or the secondary right-click menu, storing the corresponding file in the local file system includes: When the user clicks on the secondary right-click menu, the second click event handler queries whether there is a target cache in the browser front-end database. When the target cache exists and its array length is greater than 0, the file name, path and file content of the data item corresponding to the secondary right-click menu are read, and the file content is saved to the local file system according to the file name and path.

7. A page debugging device, characterized in that: include: An acquisition module, used to start a preset browser plug-in for page debugging, and acquire an initial target resource list of the page to be debugged based on the preset browser plug-in; A pulling module, used to create a primary right-click menu for triggering a batch file saving operation, and to periodically pull the latest target resource list of the page to be debugged using the preset browser plug-in; A comparison module, used for comparing the latest target resource list with the initial target resource list to obtain a change file, and updating the target cache in the browser front-end database according to the change file; A creation module is used to call a third-party library to monitor the update of the target cache and obtain all current data items in the target cache, and create at least one secondary right-click menu for triggering a single file save operation under the primary right-click menu according to the current data items; A saving module, configured to store the corresponding file in a local file system in response to a user clicking on the primary right-click menu or the secondary right-click menu; Wherein, the obtaining module obtains the initial target resource list of the page to be debugged based on the preset browser plug-in, including: Call the chrome.devtools.inspectedWindow.getResources method to pull all resources of the page to be debugged, and in its callback function, filter out all cascading style sheets based on the resource extensions; All cascading style sheets are saved in a global variable named resource array to obtain an initial target resource list of the page to be debugged.

8. An electronic device, characterized in that: It comprises a memory and a processor, wherein the memory is used to store one or more computer instructions, wherein the one or more computer instructions are executed by the processor to implement a page debugging method according to any one of claims 1 to 6.

9. A computer-readable storage medium storing a computer program, characterized in that: The computer program enables a computer to implement a page debugging method according to any one of claims 1 to 6 when executed.

Images