A local debugging function configuration method, device and equipment and a readable storage medium

Abstract

The application discloses a local debugging function configuration method and device, equipment and a readable storage medium, which are applied to the local debugging field, and the method comprises the steps of accessing a website carrying a specified parameter by using a browser; receiving a returned hypertext markup file; executing the hypertext markup file, pulling local static resources by using the browser, and realizing local debugging. According to the principle that the browser can pull local resources, the browser is used for loading, the static resources of a local page requested under an external network domain name are realized, and the static resources are directly forwarded to a local development server. The application does not need a proxy, and the business domain name does not need to be proxied to the local; only if a webpage meets the rules (agreements) of local debugging (can be locally debugged) and carries the specified parameters, the local debugging can be realized, and the application is convenient and fast.

Description

Technical Field

[0001] This application relates to the field of local debugging, and in particular to a method, apparatus, device and readable storage medium for configuring local debugging functions. Background Technology

[0002] Currently, in scenarios requiring secure domain name verification (such as WeChat official accounts and enterprise WeChat), there are generally two methods to debug code on other devices on a local device, where the other device is on the same local area network as the local device. The first method requires opening system files and modifying the relevant configurations in the local device's hosts file (hosts is a system file without an extension). After debugging, the system file must be closed promptly, making the process complex and inconvenient. The second method involves having the local device, which is on the same local area network as the device enabling local debugging, act as a proxy for the local device. However, this method only allows for one-to-one proxying, making the implementation complex and inflexible. Summary of the Invention

[0003] In view of this, the purpose of this application is to provide a local debugging function configuration method, apparatus, device and readable storage medium, which solves the problem of the complexity of the process of implementing local debugging in the prior art.

[0004] To address the aforementioned technical problems, this application provides a method for configuring local debugging functionality, including:

[0005] Access a URL with specified parameters using a browser;

[0006] Receive the returned hypertext markup file;

[0007] The hypertext markup file is executed, and the browser is used to fetch local static resources to enable local debugging.

[0008] Optionally, executing the hypertext markup file and using the browser to fetch local static resources for local debugging includes:

[0009] Execute the mock function in the hypertext markup file to obtain the hypertext markup file stream from the local service;

[0010] The page corresponding to the URL is rendered using the hypertext markup file stream of the local service, thereby enabling the use of the local static resources.

[0011] Optionally, rendering the page corresponding to the URL using the hypertext markup file stream of the local service to utilize the local static resources includes:

[0012] Use the browser to call the document.write function;

[0013] The document.write function is used to run and load the hypertext markup file of the local service.

[0014] Optionally, before accessing the URL carrying the specified parameters using a browser, the method further includes:

[0015] Obtain the URL;

[0016] Use the URL to obtain the external domain name;

[0017] When the external domain name is bound to the gateway, the gateway is used to determine whether the URL carries the specified parameters;

[0018] When the URL carries specified parameters, the process of accessing the URL carrying the specified parameters using a browser is executed.

[0019] Optionally, before accessing the URL carrying the specified parameters using a browser, the method further includes:

[0020] Obtain the URL;

[0021] Use the URL to obtain the external domain name;

[0022] When the external domain name is bound to a static resource, the static resource is used to determine whether the URL carries the specified parameters;

[0023] When the URL carries specified parameters, the process of accessing the URL carrying the specified parameters using a browser is executed.

[0024] Optional, also includes:

[0025] Receive a one-click start local debugging command sent from the third-party display panel;

[0026] Use the aforementioned debugging commands to perform local debugging actions.

[0027] This application also provides a local debugging function configuration device, including:

[0028] The access module is used to access URLs with specified parameters using a browser;

[0029] The receiving module is used to receive the returned hypertext markup files;

[0030] The execution module is used to execute the hypertext markup file and use the browser to fetch local static resources to achieve local debugging.

[0031] Optionally, the execution module includes:

[0032] The execution unit is used to execute the mock function in the hypertext markup file to obtain the hypertext markup file stream of the local service;

[0033] The rendering unit is used to render the page corresponding to the URL using the hypertext markup file stream of the local service, thereby enabling the use of the local static resources.

[0034] This application also provides a local debugging function configuration device, including:

[0035] Memory, used to store computer programs;

[0036] The processor is used to implement the steps of the above-described local debugging function configuration method when executing the computer program.

[0037] This application also provides a readable storage medium storing a computer program, which, when executed by a processor, implements the steps of the above-described local debugging function configuration method.

[0038] As can be seen, this application utilizes a browser to access a URL carrying specified parameters; receives the returned Hypertext Markup File; executes the Hypertext Markup File, and uses the browser to fetch local static resources, thus achieving local debugging. Leveraging the principle that browsers can fetch local resources, this application uses the browser to load and request static resources from a local page under an external domain name, directly forwarding them to the local development server. This application requires no proxy and does not need to proxy the business domain name to the local machine; as long as the webpage conforms to the rules for local debugging (a convention that enables local debugging) and carries the specified parameters, local debugging can be achieved conveniently and quickly.

[0039] In addition, this application also provides a local debugging function configuration device, equipment and storage medium, which also have the above-mentioned beneficial effects. Attached Figure Description

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

[0041] Figure 1 A flowchart illustrating a local debugging function configuration method provided in an embodiment of this application;

[0042] Figure 2 This application provides an interface for implementing a local debugging function.

[0043] Figure 3 A flowchart illustrating a local debugging configuration method provided in an embodiment of this application;

[0044] Figure 4 This application provides a flowchart illustrating a data stream transmission process.

[0045] Figure 5 A schematic diagram of a local debugging function configuration device provided in an embodiment of this application.

[0046] Figure 6 This is a schematic diagram of a local debugging function configuration device provided in an embodiment of this application. Detailed Implementation

[0047] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those of ordinary skill in the art without creative effort are within the scope of protection of this application.

[0048] In existing technologies, for scenarios like WeChat official account web pages that require secure domain name verification, the current approach involves modifying the local hosts file. If debugging is needed on a mobile phone, the computer and phone must be connected to the same local area network (LAN), and the phone's proxy must be changed to the computer's IP address within that LAN. This is cumbersome. This application utilizes a browser to load page resources from an external domain, directly accessing the local development server. Using the local debugging configuration method provided in this application, proxy-free operation is achieved, eliminating the need to proxy the business domain to the local machine. Furthermore, when local static resources are forwarded through a gateway layer, only the static resources need to be started locally, without simultaneously starting the gateway layer service. This application also allows for easy expansion of plugins to quickly enable debugging, allowing for one-click debugging on a real device. Please refer to [link / reference] for details. Figure 1 , Figure 1 A flowchart illustrating a local debugging function configuration method provided in an embodiment of this application. The method may include:

[0049] S101: Access a URL with specified parameters using a browser.

[0050] The execution subject in this embodiment is a terminal. This embodiment does not limit the type of terminal, as long as it can perform the operation of configuring local debugging functions.

[0051] This embodiment does not limit the URL carrying the specified parameters, as long as accessing the URL through a browser returns a Hypertext Markup file (HTML), and this HTML file can be used to retrieve local static resources. For example, the URL carrying the specified parameters can be a URL that includes the `localmock` parameter; or it can carry a specific parameter, such as `localMock=127.0.0.1:8080`, where the parameter value is the address of the local service. When accessing the specified URL through a browser, and the URL carries the specified parameters, local debugging can be performed, and the HTML file will be returned; otherwise, it will be directly proxied and forwarded to the static resources on the corresponding server.

[0052] S102: Receive the returned hypertext markup file.

[0053] In this embodiment, when the browser accesses a URL with specified parameters, it will return the specified hypertext markup file, which can enable the browser to fetch local static resources.

[0054] S103: Executes hypertext markup files and uses the browser to fetch local static resources for local debugging.

[0055] The hypertext markup file returned by this embodiment can be used to load local static resources using a browser, enabling the configuration of local debugging functions.

[0056] Furthermore, to better enable local debugging, the above-mentioned execution of hypertext markup files and utilization of browser to fetch local static resources for local debugging can include the following steps, specifically:

[0057] Step 21: Execute the mock function in the hypertext markup file to obtain the hypertext markup file stream from the local service;

[0058] Step 22: Render the page corresponding to the URL using the hypertext markup file stream of the local service to realize the use of local static resources.

[0059] The returned hypertext markup file contains a mock function. This function is used to obtain the entry file of the hypertext markup file. After the browser loads and runs the hypertext markup file and executes the mock function to obtain the local hypertext markup file stream, it can render the page corresponding to the URL, thus realizing the use of local static resources.

[0060] Furthermore, to achieve faster rendering, the above-mentioned method of rendering the page corresponding to the URL using the hypertext markup file stream of a local service, thereby utilizing local static resources, may include the following steps, specifically:

[0061] Step 31: Use the browser to call the document.write function;

[0062] Step 32: Use the document.write function to run and load the local service's hypertext markup file.

[0063] When a browser loads and runs a Hypertext Markup file, it can call the browser's built-in `document.write` function to run and load the Hypertext Markup file from a local server. During page loading, the browser's default document stream reads the entire page content from top to bottom; the content in `document.write()` is then directly written to the current document stream.

[0064] Furthermore, to address different scenarios, before accessing the URL carrying specified parameters using a browser, the following steps can be included, specifically:

[0065] Step 41: Obtain the URL;

[0066] Step 42: Obtain the external domain name using the URL;

[0067] Step 43: When the external domain name is bound to the gateway, the gateway is used to determine whether the URL carries the specified parameters;

[0068] Step 44: When the URL carries specified parameters, then use the browser to access the URL carrying the specified parameters.

[0069] Steps 41-44 primarily address scenarios where external domain names are directly bound to the gateway. The technical implementation in this application for this scenario involves the browser accessing a specified webpage. The gateway determines whether the webpage carries specified parameters to decide whether local debugging is required. If local debugging is not required, the browser directly forwards the request to the corresponding server's static resources; otherwise, it returns the specified hypertext markup file. This hypertext markup file contains a `mock` function to obtain the local hypertext markup file's entry point. The browser loads and runs this hypertext markup file, executes the `mock` function to obtain the local hypertext markup file stream, and then writes the local hypertext markup file content using `document.write()`.

[0070] Furthermore, to address different scenarios, before accessing the URL carrying specified parameters using a browser, the following steps can be included, specifically:

[0071] Step 51: Obtain the URL;

[0072] Step 52: Obtain the external domain name using the URL;

[0073] Step 53: When an external domain name is bound to a static resource, the static resource is used to determine whether the URL carries the specified parameters;

[0074] Step 54: When the URL carries specified parameters, then execute the command to access the URL carrying the specified parameters using a browser.

[0075] Steps 51-54 primarily address scenarios where external domain names are directly bound to static resources. The technical implementation in this application for this scenario mainly involves accessing a specified webpage through a browser, obtaining the corresponding hypertext markup file, and running it. The static resource checks whether the webpage carries specified parameters to determine whether local debugging is required. If so, the specified hypertext markup file is returned. This hypertext markup file contains a `mock` function used to obtain the local hypertext markup file entry point. The browser loads and runs the hypertext markup file, executes the `mock` function to obtain the local hypertext markup file stream, and then writes the local hypertext markup file content using `document.write()`.

[0076] Furthermore, to make configuration easier for users, the following steps may also be included, specifically:

[0077] Step 61: Receive the one-click start local debugging command sent from the third-party display panel;

[0078] Step 62: Execute local debugging actions using debugging commands.

[0079] The aforementioned local debugging configuration methods are integrated into a plugin, which is then integrated into the local device. This embodiment does not limit the integration panel; for example, the plugin can be integrated into a third-party display panel of the local device, or it can be integrated into a separate panel of the local device. To save space, the plugin can be integrated into a third-party display panel, such as... Figure 2As shown. On the Node.js side, the `local-mock-middleware` middleware is installed. This middleware intercepts requests at the Node.js layer, determines whether the webpage carries specified parameters, and returns a hypertext markup file when the specified parameters are present. On the H5 frontend, the `local-mock-easy` panel plugin is installed for visual processing. Users can enable local debugging with one click on the page. The debugging mode is determined by the external domain name bound to the test project. If the external domain name is bound to a gateway, the proxy forwarding mode is selected; if the external domain name is bound to a static resource, the static resource mode is selected.

[0080] The local debugging configuration method provided in this application involves accessing a URL with specified parameters via a browser; receiving the returned hypertext markup file; executing the hypertext markup file; and using the browser to fetch local static resources, thus achieving local debugging. This application leverages the principle that browsers can fetch local resources, using the browser to load and request static resources from a local page under an external domain name, and directly forwarding them to the local development server. This application requires no proxy and does not need to proxy the business domain name to the local machine; as long as the webpage conforms to the rules for local debugging (the conventions that enable local debugging) and carries the specified parameters, local debugging can be achieved conveniently and quickly.

[0081] To make this application easier to understand, please refer to the following: Figure 3 and Figure 4 , Figure 3 This is a flowchart illustrating a local debugging configuration method provided in an embodiment of this application. Figure 4 This application provides a flowchart illustrating a data stream transmission process. Specifically, it may include:

[0082] Figure 3 The front-end Node layer and Figure 4 The node authorization layer in the system is a remote server, by... Figure 3 As can be seen, when the local debugging device carries the specified parameter `localMock`, the remote server will return a `mock` function. Executing this `mock` function allows the local host's static resources to be obtained, enabling the local debugging device to access these resources for local debugging. Figure 4As can be seen, when accessing the link using a browser, the external domain name is accessed, requesting authorization from Tencent's WeChat Work. After authorization, the entry HTML file is requested from the online service. The online service returns the entry HTML file to the browser, enables localmock, adds the localmock parameter, refreshes the page, requests authorization from the remote server, and after authorization, the webpage carries the specified parameter: localmock, and returns an HTML file stream that executes the mock function to the browser. The browser calls the mock function to obtain the local service address, returns the local service HTML file stream, and uses the browser's document.write to access the local HTML content and utilize local resources.

[0083] The method described in this application has been tested: A public WeChat account was prepared, and basic configurations such as trusted domain names were completed. The service was started using a local computer. When using this invention, the mobile phone opened a page displaying specified parameters (e.g., localMock = 127.0.0.1:8080, where the parameter value is the address of the local service). Refreshing the page confirmed the local service was in use. Without using this invention, the hosts file was modified to resolve the corresponding domain name to 127.0.0.1, and then the computer and mobile phone were connected to the same local area network. The mobile phone's proxy was modified to use the computer's IP address within the local area network; only then could the mobile phone perform the test. Therefore, the local debugging configuration method provided in this application is convenient and efficient.

[0084] The local debugging function configuration device provided in the embodiments of this application is described below. The local debugging function configuration device described below and the local debugging function configuration method described above can be referred to in correspondence.

[0085] Please refer to the details. Figure 5 , Figure 5 A schematic diagram of a local debugging function configuration device provided in this application embodiment may include:

[0086] Access module 100 is used to access a URL carrying specified parameters using a browser;

[0087] The receiving module 200 is used to receive the returned hypertext markup file;

[0088] The execution module 300 is used to execute the hypertext markup file and use the browser to fetch local static resources to achieve local debugging.

[0089] Based on the above embodiments, the execution module 300 may include:

[0090] The execution unit is used to execute the mock function in the hypertext markup file to obtain the hypertext markup file stream of the local service;

[0091] The rendering unit is used to render the page corresponding to the URL using the hypertext markup file stream of the local service, thereby enabling the use of the local static resources.

[0092] Based on the above embodiments, the rendering unit may include:

[0093] The calling sub-unit is used to invoke the document.write function using the browser;

[0094] The loading subunit is used to run and load the hypertext markup file of the local service using the document.write function.

[0095] Based on the above embodiments, the local debugging function configuration device may further include:

[0096] The first acquisition module is used to acquire the URL;

[0097] The first external domain name acquisition module is used to obtain the external domain name using the URL;

[0098] The first judgment module is used to determine whether the URL carries specified parameters when the external domain name is bound to the gateway.

[0099] The first execution access module is used to execute the method of accessing the URL carrying the specified parameters using a browser when the URL carries the specified parameters.

[0100] Based on the above embodiments, the local debugging function configuration device may further include:

[0101] The second acquisition module is used to acquire the URL;

[0102] The second external domain name acquisition module is used to obtain the external domain name using the URL;

[0103] The second judgment module is used to determine whether the URL carries specified parameters when the external domain name is bound to a static resource;

[0104] The second execution access module is used to execute the method of accessing the URL carrying the specified parameters using a browser when the URL carries the specified parameters.

[0105] Based on the above embodiments, the local debugging function configuration device may further include:

[0106] The receiving module is used to receive the one-click start local debugging command sent from the third-party display panel;

[0107] The execution debugging module is used to perform local debugging actions using the debugging instructions.

[0108] It should be noted that the order of the modules and units in the above-mentioned local debugging function configuration device can be changed without affecting the logic.

[0109] The local debugging configuration device provided in this application uses an access module 100 to access a URL carrying specified parameters via a browser; a receiving module 200 to receive the returned hypertext markup file; and an execution module 300 to execute the hypertext markup file, using the browser to retrieve local static resources for local debugging. This application utilizes the principle that browsers can retrieve local resources, using browser loading to request static resources of a local page under an external domain name and directly forward them to the local development server. This application requires no proxy and does not need to proxy the business domain name to the local machine; as long as the webpage conforms to the rules for local debugging (the convention that enables local debugging) and carries the specified parameters, local debugging can be achieved conveniently and quickly.

[0110] The local debugging function configuration device provided in the embodiments of this application is described below. The local debugging function configuration device described below and the local debugging function configuration method described above can be referred to in correspondence.

[0111] Please refer to Figure 6 , Figure 6 A schematic diagram of the structure of the local debugging function configuration device provided in the embodiments of this application may include:

[0112] Memory 10 is used to store computer programs;

[0113] Processor 20 is used to execute computer programs to implement the local debugging function configuration method described above.

[0114] The system includes a memory 10, a processor 20, a communication interface 31, and a communication bus 32. The memory 10, processor 20, and communication interface 31 communicate with each other through the communication bus 32.

[0115] In this embodiment, the memory 10 is used to store one or more programs. The programs may include program code, which includes computer operation instructions. In this embodiment, the memory 10 may store programs for implementing the following functions:

[0116] Access a URL with specified parameters using a browser;

[0117] Receive the returned hypertext markup file;

[0118] Execute the hypertext markup file and use the browser to fetch local static resources to achieve local debugging.

[0119] In one possible implementation, the memory 10 may include a program storage area and a data storage area, wherein the program storage area may store the operating system and applications required for at least one function; and the data storage area may store data created during use.

[0120] Furthermore, memory 10 may include read-only memory and random access memory, providing instructions and data to the processor. A portion of the memory may also include NVRAM. The memory stores operating systems and operating instructions, executable modules, or data structures, or subsets thereof, or extended sets thereof, wherein the operating instructions may include various operating instructions for implementing various operations. The operating system may include various system programs for implementing various basic tasks and handling hardware-based tasks.

[0121] Processor 20 can be a central processing unit (CPU), an application-specific integrated circuit, a digital signal processor, a field-programmable gate array, or other programmable logic device. Processor 20 can be a microprocessor or any conventional processor. Processor 20 can call programs stored in memory 10.

[0122] Communication interface 31 can be an interface for the communication module, used to connect with other devices or systems.

[0123] Of course, it should be noted that, Figure 6 The structure shown does not constitute a limitation on the local debugging function configuration device in the embodiments of this application. In practical applications, the local debugging function configuration device may include more than Figure 6 More or fewer components as shown, or combinations of certain components.

[0124] The storage medium provided in the embodiments of this application is described below. The storage medium described below can be referred to in correspondence with the local debugging function configuration method described above.

[0125] This application also provides a storage medium storing a computer program, which, when executed by a processor, implements the steps of the local debugging function configuration method described above.

[0126] The computer-readable storage medium may include various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0127] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on its differences from other embodiments. Similar or identical parts between embodiments can be referred to interchangeably. For the apparatus disclosed in the embodiments, since it corresponds to the method disclosed in the embodiments, the description is relatively simple; relevant parts can be referred to in the method section.

[0128] Those skilled in the art will further recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of both. To clearly illustrate the interchangeability of hardware and software, the components and steps of the various examples have been generally described in terms of functionality in the foregoing description. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementations should not be considered beyond the scope of this application.

[0129] Finally, it should be noted that in this document, relationships such as "first" and "second" are used merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article, or apparatus.

[0130] The above provides a detailed description of a local debugging function configuration method, apparatus, device, and storage medium provided in this application. Specific examples have been used to illustrate the principles and implementation methods of this application. The description of the above embodiments is only for the purpose of helping to understand the method and core ideas of this application. At the same time, for those skilled in the art, there will be changes in the specific implementation methods and application scope based on the ideas of this application. Therefore, the content of this specification should not be construed as a limitation of this application.

Claims

1. A method for configuring local debugging functionality, characterized in that, include: Access a URL with specified parameters using a browser; Receive the returned hypertext markup file; Execute the hypertext markup file and use the browser to fetch local static resources to achieve local debugging; The execution of the hypertext markup file, utilizing the browser to fetch local static resources for local debugging, includes: Execute the mock function in the hypertext markup file to obtain the hypertext markup file stream from the local service; The page corresponding to the URL is rendered using the hypertext markup file stream of the local service, thereby enabling the use of the local static resources; The step of rendering the page corresponding to the URL using the hypertext markup file stream of the local service to utilize the local static resources includes: Use the browser to call the document.write function; The document.write function is used to run and load the hypertext markup file of the local service.

2. The local debugging function configuration method according to claim 1, characterized in that, Before accessing the URL carrying the specified parameters using a browser, the following is also included: Obtain the URL; Use the URL to obtain the external domain name; When the external domain name is bound to the gateway, the gateway is used to determine whether the URL carries the specified parameters; When the URL carries specified parameters, the process of accessing the URL carrying the specified parameters using a browser is executed.

3. The local debugging function configuration method according to claim 1, characterized in that, Before accessing the URL carrying the specified parameters using a browser, the following is also included: Obtain the URL; Use the URL to obtain the external domain name; When the external domain name is bound to a static resource, the static resource is used to determine whether the URL carries the specified parameters; When the URL carries specified parameters, the process of accessing the URL carrying the specified parameters using a browser is executed.

4. The local debugging function configuration method according to claim 1, characterized in that, Also includes: Receive a one-click start local debugging command sent from a third-party display panel; Use the aforementioned debugging commands to perform local debugging actions.

5. A local debugging function configuration device, characterized in that, include: The access module is used to access URLs with specified parameters using a browser; The receiving module is used to receive the returned hypertext markup files; The execution module is used to execute the hypertext markup file and use the browser to fetch local static resources to enable local debugging. The execution module includes: The execution unit is used to execute the mock function in the hypertext markup file to obtain the hypertext markup file stream of the local service; The rendering unit is used to render the page corresponding to the URL using the hypertext markup file stream of the local service, thereby enabling the use of the local static resources; The rendering unit includes: The calling sub-unit is used to invoke the document.write function using the browser; The loading subunit is used to run and load the hypertext markup file of the local service using the document.write function.

6. A local debugging function configuration device, characterized in that, include: Memory, used to store computer programs; A processor, configured to implement the steps of the local debugging function configuration method as described in any one of claims 1 to 4 when executing the computer program.

7. A readable storage medium, characterized in that, The readable storage medium stores a computer program that, when executed by a processor, implements the steps of the local debugging function configuration method as described in any one of claims 1 to 4.

Images