CN115328817A

CN115328817A - Debugging method, device and application for rapidly and synchronously developing end and mobile end

Info

Publication number: CN115328817A
Application number: CN202211264532.7A
Authority: CN
Inventors: 马技超; 谭美红
Original assignee: Hangzhou Feizhu Technology Co ltd
Current assignee: Hangzhou Feizhu Technology Co ltd
Priority date: 2022-10-17
Filing date: 2022-10-17
Publication date: 2022-11-11
Anticipated expiration: 2042-10-17
Also published as: CN115328817B

Abstract

The scheme provides a debugging method, a debugging device and an application of a quick synchronous development end and a mobile end, wherein a local IP of the development end is obtained and injected into a development environment where the development end is located; assembling a page address of a development page based on a local IP and page information of a current development page, and if the development page is a debugging page, adding a debugging identifier after the development page address; generating unique identification information dynamically according to the address of the development page, and constructing a visual component suspended in the development page based on the unique identification information; when the visual component detects the debugging identification and the environment corresponding to the route is a development environment, the unique identification information is displayed, and therefore the rapid synchronous debugging of the development end and the mobile end is achieved in the mode. Debugging personnel at a mobile terminal do not need to manually input page addresses in a reciprocating manner, so that the debugging efficiency is greatly improved.

Description

Debugging method, device and application for rapidly and synchronously developing end and mobile end

Technical Field

The present application relates to the field of debugging, and in particular, to a method, an apparatus, and an application for quickly and synchronously debugging a development end and a mobile end.

Background

With the mass popularization of mobile devices, mobile-end-based web development is increasing, and at present, web development for a mobile end still needs to be developed at a development end according to functional requirements and then deployed to a corresponding mobile end for debugging, and the deployment mode mainly includes deployment on a test server of a corresponding server end or manual query of a local IP at the mobile end and manual input of a debugging link of the development end. However, development and debugging are a continuous and reciprocating process, which results in that new debugging links need to be redeployed or input again each time debugging is carried out again, and a great deal of work energy of development and debugging personnel is consumed.

In other words, at present, there is no stable and easy-to-use scheme for debugging of the mobile-end web development process, and there are many problems of slow compilation, long deployment, difficult debugging, and the like, which further affects the development efficiency of the mobile-end web.

Disclosure of Invention

The scheme of the application provides a debugging method, a debugging device and an application of a quick synchronous development end and a mobile end, can realize quick synchronous debugging between the mobile end and the development end, is not limited by the same local area network, and can solve the problem of low debugging efficiency.

In order to achieve the above object, the present technical solution provides a method for rapidly and synchronously debugging a development end and a mobile end, including the following steps:

acquiring a local IP of a development end and injecting the local IP into a development environment in which the development end is located;

assembling a page address of the development page based on the local IP and page information of the current development page, wherein the development page address at least comprises a local protocol, the local IP, a local port and a current url path, and if the development page is a debugging page, adding a debugging identifier behind the development page address;

generating unique identification information dynamically according to the development page address, and constructing a visual component suspended in the development page based on the unique identification information;

and when the visualization component detects the debugging identification and the environment corresponding to the route is a development environment, displaying the unique identification information.

In a second aspect, the present solution provides a debugging apparatus for rapidly and synchronously developing a terminal and a mobile terminal, including:

the IP acquisition unit is used for acquiring a local IP of a development end and injecting the local IP into a development environment in which the development end is positioned;

the address packaging unit is used for assembling a page address of the development page based on the local IP and the page information of the current development page, wherein the development page address at least comprises a local protocol, a local IP, a local port and a current url path, and if the development page is a debugging page, a debugging identifier is added behind the development page address;

the visual component mounting unit is used for dynamically generating unique identification information according to the development page address and constructing a visual component suspended in the development page based on the unique identification information; and when the visual component detects the debugging identification and the environment corresponding to the route is a development environment, displaying the unique identification information.

In a third aspect, the present disclosure provides an electronic apparatus, including a memory and a processor, where the memory stores a computer program, and the processor is configured to execute the computer program to perform the debugging method of the fast synchronization initiating terminal and the mobile terminal.

In a fourth aspect, the present disclosure provides a readable storage medium having stored therein a computer program including program code for controlling a process to execute a procedure including the method for debugging the fast sync development side and the mobile side.

Compared with the prior art, the technical scheme has the following characteristics and beneficial effects:

according to the scheme, the local IP of the development end is obtained and is globally injected into a development environment, the page address is packaged based on the local IP and the page information of the development page, the page address is packaged into a component capable of being mounted on the page, if the page needs to be debugged, a debugging identifier is added behind the page path of the current development page, when the component identifies the debugging identifier, the component is displayed on the page, and the mobile end can obtain the address of the development page in a mode of acquiring the component by scanning codes or copying, so that the rapid synchronous debugging of the development end and the mobile end is realized. Debugging personnel at a mobile terminal do not need to manually input page addresses in a reciprocating manner, so that the debugging efficiency is greatly improved.

Drawings

The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the application and together with the description serve to explain the application and not to limit the application. In the drawings:

fig. 1 is a flowchart illustrating a debugging method of a fast synchronization development side and a mobile side according to an embodiment of the present disclosure;

FIG. 2 is a schematic diagram of a debugging interface effect according to an embodiment of the present disclosure;

fig. 3 is a schematic frame diagram of a debugging apparatus for fast synchronization of a development side and a mobile side according to an embodiment of the present solution;

fig. 4 is a schematic diagram of the electronic device of the present solution.

Detailed Description

Reference will now be made in detail to the exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, like numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the following exemplary embodiments do not represent all implementations consistent with one or more embodiments of the present specification. Rather, they are merely examples of apparatus and methods consistent with certain aspects of one or more embodiments of the specification, as detailed in the claims which follow.

It should be noted that: in other embodiments, the steps of the corresponding methods are not necessarily performed in the order shown and described herein. In some other embodiments, the method may include more or fewer steps than those described herein. Moreover, a single step described in this specification may be broken down into multiple steps for description in other embodiments; multiple steps described in this specification may be combined into a single step in other embodiments.

Example one

As shown in fig. 1, the present application provides a method for debugging a fast and synchronous development end and a mobile end, including the following steps:

assembling a page address of the development page based on the local IP and the page information of the current development page, wherein the development page address at least comprises a local protocol, a local IP, a local port and a current url path, and if the development page is a debugging page, adding a debugging identifier behind the development page address;

and when the visual component detects the debugging identification and the environment corresponding to the route is a development environment, displaying the unique identification information. It is worth mentioning that in the scheme, the development IP of the development end and the page information of the debugging page are packaged into unique identification information, debugging personnel of the mobile end can quickly and synchronously debug the page by identifying the unique identification information, a plurality of mobile ends can be synchronously adjusted at the same time, any modification of the development end can be synchronously performed, and the debugging efficiency is greatly improved. In addition, the debugging method of the scheme relates to an implementation method packaged into a debugging component form, and a user can realize rapid synchronous debugging of the development end and the mobile end only by installing a component plug-in.

In an embodiment of the present disclosure, in the step of "obtaining the local IP of the development end", a nodejs environment is installed in the development environment of the development end, and the routing table of the development environment is traversed through an os library built in the nodejs, so as to obtain the local IP of the development end.

In the step of injecting the local IP into the development environment in which the development end is located, the local IP is injected into the development environment through an IP injection tool so as to obtain the local IP in a global object of the development environment.

In embodiments of the present solution, the IP injection tool includes, but is not limited to, webpack or vite. When the IP injection tool is webpack, the webpack globally injects the native IP into the development environment through the defineplus plug-in as content of process. Examples are as follows:

new webpack.DefinePlugin({

'process.env': {IP: ip}

})。

when the IP injection tool is a vite, the vite globally injects the local IP into the development environment in a define manner. Examples are as follows:

define: {

VITE_DEV_IP: JSON.stringify(ip)

}。

it is worth mentioning that the present solution can develop a debugging function for fast and synchronously developing the mobile terminal and the originating terminal based on the HMR framework, so that the HMR framework (such as webpack or vite) can be adopted to realize global injection of the local IP in the development environment.

In the step of assembling the page address of the development page based on the local IP and the page information of the current development page, a developer develops the page on a development end, and the page information of the development page comprises a local protocol, a local port and a current url path. Not all development pages need to be debugged, and if the development pages are debugging pages, adding the debugging identification to the page address. The debugging identification is a query parameter of url of a development page to be debugged, and can be customized according to the requirements of developers. According to the scheme, whether the current development page needs to be debugged or not is judged through the debugging identification, and the debugging identification is added to the page needing to be debugged.

In a specific embodiment, the debug identifier is added after the current url path. And if the current development page is a debugging page, adding a debugging path after the page path of the current development page by the developer.

In the step of dynamically generating unique identification information according to the development page address and constructing a visual component suspended in the debugging page based on the unique identification information, the unique identification information comprises but is not limited to a unique identification two-dimensional code and a unique identification address, and the unique identification two-dimensional code and/or the unique identification address comprise the development page address.

When the unique identification information is the unique identification two-dimensional code, the content displayed by the visual component is the unique identification two-dimensional code, and the mobile terminal scans the unique identification two-dimensional code to obtain a corresponding page address and further obtain a development page needing debugging; when the unique identification information is a unique identification address, the content displayed by the visual component is a replicable link corresponding to the unique identification address, and the mobile terminal obtains a corresponding page address by copying the link so as to obtain a development page needing debugging. The visualization component of the present solution is designed as a closeable component which displays the visualization component only when a configuration of a debug identifier in the route is detected. The design has the advantages that the unique identification information is only displayed on the debugging page shared by the developers, and other development pages which do not need to be debugged do not need to be displayed or need not to be displayed, and the information security of the development end is controlled within a controllable range.

Specifically, in the step of displaying the unique identification information when the visualization component detects that the route contains the debugging identifier and the environment corresponding to the route is the development environment, the visualization component detects whether the current url path contains the debugging identifier, and if so, the visualization component is mounted on the current development page if the environment corresponding to the route is the development environment.

Specifically, the scheme judges whether the development environment is the development environment or not through the global variable of the development environment. If the development environment is the case, the webpack injects process. The view will inject the import.

As shown in fig. 2, debug =1 in fig. 2 is a debugging mark, the visualization component includes a unique identification two-dimensional code and a unique identification address at the same time, and at this time, the unique identification two-dimensional code and the unique identification address are mounted on the current development page.

The method comprises the following steps after the visualization component is displayed on the current development page: and the mobile terminal scans the unique identification two-dimensional code to directly open the development page needing debugging, or clicks and copies the unique identification address to open the address of the development page needing debugging by using the mobile terminal.

It should be noted that the unique identification address provided by the present solution is a replicable link, and the present solution implements the above function through the vue-clipboard2 component. Specifically, there are two implementation manners: first, directly copying a unique identification address; secondly, the support development end loads the unique identification address into the webview of the mobile end in a secret password mode.

In addition, it is worth mentioning that the mobile terminal and the development terminal of the scheme need to be in the same local area network, so that the development terminal and the mobile terminal can both access the local IP.

In addition, as mentioned above, the solution is obtained by packaging in a component form, the mobile debugging component vconsole is built in the corresponding component, and after the mobile terminal opens the development page to be debugged according to the unique identification two-dimensional code or the unique identification address, the debugging of the page can be performed through the mobile debugging component vconsole.

Example two

As shown in fig. 3, the present solution provides a debugging apparatus for rapidly synchronizing an initiating terminal and a mobile terminal, including:

the IP acquisition unit is used for acquiring a local IP of a development end and injecting the local IP into a development environment where the development end is located;

the visual component mounting unit is used for dynamically generating unique identification information according to the development page address and constructing a visual component suspended in the development page based on the unique identification information; and when the visualization component detects the debugging identification and the environment corresponding to the route is a development environment, displaying the unique identification information.

The technical features of the second embodiment that are the same as those of the first embodiment are described, and the embodiment is not redundantly described here.

EXAMPLE III

The present embodiment further provides an electronic apparatus, referring to fig. 4, comprising a memory 404 and a processor 402, wherein the memory 404 stores a computer program, and the processor 402 is configured to execute the computer program to perform the steps of any one of the embodiments of the development method for a rapid development client and a development method for a mobile client.

Specifically, the processor 402 may include a Central Processing Unit (CPU), or an Application Specific Integrated Circuit (ASIC), or may be configured to implement one or more integrated circuits of the embodiments of the present application.

Memory 404 may include, among other things, mass storage 404 for data or instructions. By way of example, and not limitation, memory 404 may include a hard disk drive (hard disk drive, HDD for short), a floppy disk drive, a solid state drive (SSD for short), flash memory, an optical disk, a magneto-optical disk, tape, or a Universal Serial Bus (USB) drive or a combination of two or more of these. Memory 404 may include removable or non-removable (or fixed) media, where appropriate. The memory 404 may be internal or external to the data processing apparatus, where appropriate. In a particular embodiment, the memory 404 is a Non-Volatile (Non-Volatile) memory. In particular embodiments, memory 404 includes Read-only memory (ROM) and Random Access Memory (RAM). The ROM may be mask-programmed ROM, programmable ROM (PROM), erasable PROM (EPROM), electrically Erasable PROM (EEPROM), electrically rewritable ROM (EAROM), or FLASH memory (FLASH), or a combination of two or more of these, where appropriate. The RAM may be a static random-access memory (SRAM) or a dynamic random-access memory (DRAM), where the DRAM may be a fast page mode dynamic random-access memory 404 (FPMDRAM), an extended data output dynamic random-access memory (EDODRAM), a synchronous dynamic random-access memory (SDRAM), or the like.

Memory 404 may be used to store or cache various data files for processing and/or communication use, as well as possibly computer program instructions for execution by processor 402.

The processor 402 reads and executes the computer program instructions stored in the memory 404 to implement the implementation process of any one of the above embodiments of the development method for the fast development side and the mobile side.

Optionally, the electronic apparatus may further include a transmission device 406 and an input/output device 408, where the transmission device 406 is connected to the processor 402, and the input/output device 408 is connected to the processor 402.

The transmitting device 406 may be used to receive or transmit data via a network. Specific examples of the network described above may include wired or wireless networks provided by communication providers of the electronic devices. In one example, the transmission device includes a Network adapter (NIC) that can be connected to other Network devices through a base station so as to communicate with the internet. In one example, the transmitting device 406 may be a Radio Frequency (RF) module, which is used to communicate with the internet in a wireless manner.

The input and output devices 408 are used to input or output information. In the present embodiment, the output information may be unique identification information.

Optionally, in this embodiment, the processor 402 may be configured to execute the following steps by a computer program:

It should be noted that, for specific examples in this embodiment, reference may be made to the examples described in the foregoing embodiment and optional implementation manners, and details of this embodiment are not described herein again.

In general, the various embodiments may be implemented in hardware or special purpose circuits, software, logic or any combination thereof. Some aspects of the invention may be implemented in hardware, while other aspects may be implemented in firmware or software which may be executed by a controller, microprocessor or other computing device, although the invention is not limited thereto. While various aspects of the invention may be illustrated and described as block diagrams, flow charts, or using some other pictorial representation, it is well understood that these blocks, apparatus, systems, techniques or methods described herein may be implemented in, as non-limiting examples, hardware, software, firmware, special purpose circuits or logic, general purpose hardware or controller or other computing devices, or some combination thereof.

Embodiments of the invention may be implemented by computer software executable by a data processor of the mobile device, such as in a processor entity, or by hardware, or by a combination of software and hardware. Computer software or programs (also referred to as program products) including software routines, applets and/or macros can be stored in any device-readable data storage medium and they include program instructions for performing particular tasks. The computer program product may comprise one or more computer-executable components configured to perform embodiments when the program is run. The one or more computer-executable components may be at least one software code or a portion thereof. Further in this regard it should be noted that any block of the logic flow as in the figures may represent a program step, or an interconnected logic circuit, block and function, or a combination of a program step and a logic circuit, block and function. The software may be stored on physical media such as memory chips or memory blocks implemented within the processor, magnetic media such as hard or floppy disks, and optical media such as, for example, DVDs and data variants thereof, CDs. The physical medium is a non-transitory medium.

It should be understood by those skilled in the art that various features of the above embodiments can be combined arbitrarily, and for the sake of brevity, all possible combinations of the features in the above embodiments are not described, but should be considered as within the scope of the present disclosure as long as there is no contradiction between the combinations of the features.

The above examples only express several embodiments of the present application, and the description thereof is more specific and detailed, but not to be construed as limiting the scope of the present application. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the concept of the present application, which falls within the scope of protection of the present application. Therefore, the protection scope of the present application should be subject to the appended claims.

Claims

1. A debugging method for rapidly synchronizing an initiating terminal and a mobile terminal is characterized by comprising the following steps:

acquiring a local IP of a development end and injecting the local IP into a development environment in which the development end is positioned;

2. The debug method of fast sync development end and mobile end as claimed in claim 1, wherein said local IP is injected into said development environment by IP injection tools, including but not limited to webpack or vite.

3. The debugging method of claim 1, wherein the debugging identifier is a query parameter of url of a development page to be debugged.

4. The debugging method of claim 1, wherein said unique identification information includes but is not limited to a unique two-dimensional code and a unique identification address, and said unique two-dimensional code and/or said unique identification address each include said development page address.

5. The debugging method of claim 4, wherein when the unique identification information is a unique identification two-dimensional code, the content displayed by the visual component is the unique identification two-dimensional code, and the mobile terminal scans the unique identification two-dimensional code to obtain a corresponding development page address and further obtain a development page to be debugged.

6. The method according to claim 4, wherein when the unique identification information is a unique identification address, the content displayed by the visualization component is a replicable link corresponding to the unique identification address, and the mobile terminal obtains a corresponding page address by copying the link to obtain a development page to be debugged.

7. The debug method of a flash synchronization development terminal and a mobile terminal according to claim 1, wherein said debug method of a flash synchronization development terminal and a mobile terminal is packaged in a form of a component.

8. The utility model provides a quick debugging device who opens end and removal end in step which characterized in that includes:

the visual component mounting unit is used for dynamically generating unique identification information according to the development page address and constructing visual components suspended in the development page based on the unique identification information; and when the visualization component detects the debugging identification and the environment corresponding to the route is a development environment, displaying the unique identification information.

9. An electronic device comprising a memory and a processor, wherein the memory stores a computer program, and the processor is configured to execute the computer program to perform the debugging method of the fast sync development end and the mobile end according to any one of claims 1 to 7.

10. A readable storage medium, characterized in that a computer program is stored therein, the computer program comprising program code for controlling a process to execute a process, the process comprising the rapid synchronization development side and mobile side debugging method according to any one of claims 1 to 7.