CN114168460A

CN114168460A - Remote debugging method, device and storage medium for front-end code in hybrid development

Info

Publication number: CN114168460A
Application number: CN202111433534.XA
Authority: CN
Inventors: 吴高飞
Original assignee: Beijing 58 Information Technology Co Ltd
Current assignee: Beijing 58 Information Technology Co Ltd
Priority date: 2021-11-29
Filing date: 2021-11-29
Publication date: 2022-03-11

Abstract

The embodiment of the application provides a remote debugging method, equipment and a storage medium for front-end codes in hybrid development. In the embodiment of the application, a plug-in installation package is implanted in the browser in advance, when front-end codes need to be debugged, the front-end codes are operated to render a front-end page, the plug-in installation package is operated to generate a plug-in corresponding to the front-end page, the plug-in intercepts a protocol request generated by the browser due to triggering of a service control on the front-end page, a remote communication connection is established between the plug-in and a native client by means of local service, the protocol request is sent to the native client on the second electronic device, so that the native client calls native capability to respond to the first protocol request, and callback functions and callback data returned by the native client are returned to the browser for further processing, and a processing result reflecting the debugging result of the front-end codes is obtained. The whole debugging process forms a closed loop, simplifies the remote debugging step of the front-end code in the hybrid development and improves the debugging efficiency.

Description

Remote debugging method, device and storage medium for front-end code in hybrid development

Technical Field

The present application relates to the field of internet technologies, and in particular, to a method, an apparatus, and a storage medium for remote debugging of front-end codes in hybrid development.

Background

Mobile applications can be divided into three categories: native applications (native apps), web applications (web apps), and hybrid mobile applications (hybrid apps). hybrid apps are applications developed using hybrid development mode, which is actually a combination of native framework and web content. At present, mainstream mobile applications in the market are applied in a development iteration process, and in order to achieve the purposes of quickly online projects, avoiding a client audit period and the like, a hybrid development mode is mostly used.

In the development process of the hybrid app, a web front-end developer develops a web page corresponding to business logic based on a web environment, a native developer develops a framework of the client app based on a native environment, the developers at the two ends frequently interact to realize functional docking, meanwhile, a third-party agent tool is used for acting static resources of a local web page into the client app, and code logic of the web page is debugged in the native environment of the client app. The existing debugging mode depends on a third-party agent tool, the debugging process is complex, and the cost is high.

Disclosure of Invention

Aspects of the present application provide a method, an apparatus, and a storage medium for remote debugging of front-end codes in hybrid development, so as to simplify remote debugging steps of front-end codes in hybrid development and improve debugging efficiency.

The embodiment of the application provides a remote debugging method for a front-end code in hybrid development, wherein the front-end code is positioned on first electronic equipment, and a browser and a local service are installed on the first electronic equipment, and the method comprises the following steps: the browser runs a front-end code to render a front-end page, wherein the front-end page at least comprises a first type of business control; generating a plug-in required for remotely debugging the front-end page, and establishing remote communication connection between the plug-in and a native client by means of a local service, wherein the native client is positioned on the second electronic equipment and comprises native codes required for generating the hybrid application by mixing and compiling with the front-end codes; responding to the triggering operation of any first-class service control, and generating a first protocol request and a callback function corresponding to the triggered first-class service control, wherein the first protocol request requires a native client to call a native capability for responding; the calling plug-in packages the first protocol request and the callback function into a first remote request, sends the first remote request to the native client through the remote communication connection, and receives the callback function returned by the native client and callback data generated by calling the native capability adapted to the first protocol request; and calling the plug-in to execute the callback function so as to perform service processing on the callback data to obtain a first processing result, wherein the first processing result reflects the debugging result of the front-end code.

An embodiment of the present application further provides a remote debugging device, including: the rendering module is used for running a front-end code to render a front-end page, and the front-end page at least comprises a first type of service control; the processing module is used for generating a plug-in required for remotely debugging the front-end page and establishing remote communication connection between the plug-in and a native client by means of local service, and the native client is positioned on the second electronic equipment and contains native codes required by mixed compiling with the front-end codes to generate mixed application; the processing module is also used for responding to the triggering operation of any first-class service control and generating a first protocol request and a callback function corresponding to the triggered first-class service control, wherein the first protocol request requires a native client to call native capability for responding; the calling module is used for calling the plug-in to package the first protocol request and the callback function into a first remote request, sending the first remote request to the native client through the remote communication connection, and receiving the callback function returned by the native client and callback data generated by calling the native capability adaptive to the first protocol request; the calling module is further used for calling the plug-in to execute the callback function so as to perform service processing on the callback data, and a first processing result is obtained and reflects the debugging result of the front-end code.

The embodiment of the application also provides electronic equipment, wherein the electronic equipment is provided with a browser and local services, and further comprises a memory and a processor, wherein the memory is stored with front-end codes and program codes for realizing a remote debugging function;

the processor is coupled with the memory and is used for executing the program codes for realizing the remote debugging function so as to realize the remote debugging method of the front-end codes in the hybrid development.

In the embodiment of the application, a plug-in installation package is implanted in the browser in advance, when front-end codes need to be debugged, on one hand, the front-end codes are operated to render a front-end page, on the other hand, the plug-in installation package is operated to generate a plug-in corresponding to the front-end page, a protocol request generated by the browser due to triggering of a business control on the front-end page is intercepted by the plug-in, a remote communication connection is established between the plug-in and a native client by means of local service, the protocol request is sent to the native client on the second electronic device, so that the native client calls native capability to respond to the first protocol request, and callback functions and callback data returned by the native client are returned to the browser for further processing, and a processing result reflecting the debugging result of the front-end codes is obtained. The whole debugging process forms a closed loop, a developer or a debugging person does not pay attention to resource proxy and debugging environment differences any more, and only a local application is needed to be opened to start a local service and a browser, so that the remote debugging step of front-end codes in hybrid development is simplified, frequent interaction between front-end developers and native developers can be reduced, and the debugging efficiency is 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 schematic structural diagram of a remote debugging system suitable for a hybrid development scenario according to an exemplary embodiment of the present application;

fig. 2 is a flowchart illustrating a method for remotely debugging front-end code in hybrid development according to an exemplary embodiment of the present application;

FIG. 3 is a flowchart illustrating another method for remote debugging of front-end code in hybrid development according to an exemplary embodiment of the present application;

FIG. 4 is a flowchart illustrating another method for remote debugging of front-end code in hybrid development according to an exemplary embodiment of the present application;

FIG. 5 is a flowchart illustrating another method for remote debugging of front-end code in hybrid development according to an exemplary embodiment of the present application;

FIG. 6 is a flowchart illustrating another method for remote debugging of front-end code in hybrid development according to an exemplary embodiment of the present application;

fig. 7 is a schematic structural diagram of a remote debugging apparatus according to an exemplary embodiment of the present application;

fig. 8 is a schematic structural diagram of an electronic device according to an exemplary embodiment of the present application.

Detailed Description

In order to make the objects, technical solutions and advantages of the present application more apparent, the technical solutions of the present application will be described in detail and completely with reference to the following specific embodiments of the present application and the accompanying drawings. It should be apparent that the described embodiments are only some of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.

The technical solutions provided by the embodiments of the present application are described in detail below with reference to the accompanying drawings.

The following embodiments of the application are applied to a hybrid development scenario, where the hybrid development scenario mainly refers to a scenario in which a hybrid development mode is adopted to develop a mobile application, and specifically refers to a scenario in which a frame code of the hybrid mobile application is developed based on a native (native) system environment, a service code required by the hybrid mobile application is developed based on a web development environment, and finally the frame code developed based on the native system environment and the service code developed based on the web development environment are mixed and compiled to obtain the hybrid mobile application.

In the embodiment of the present application, the native system environment may be an Android (Android) system environment or an ios system environment, and the native system environment has natural convenience in interacting with a mobile component (e.g., a camera, a phone, an SMS (Short Message Service, etc.), and the embodiment of the present application develops a framework code of a hybrid mobile application based on the native system environment, so that the hybrid mobile application has efficient performance and higher reliability, and the native system environment may further provide a built-in database, so that a user may use at least part of functions of the hybrid mobile application offline without internet connection. In addition, business codes required by the development of the hybrid mobile application based on the web development environment have a cross-platform characteristic, can support instant update, do not need to download and install patch packages, and have good user experience. In the embodiment of the present application, the industrial code developed based on the web development environment is referred to as front-end code or web code, the framework code developed based on the native system environment is referred to as native code, and a product form corresponding to the native code is referred to as a native client, that is, the native client contains native code.

In the embodiment of the present application, a development tool used for developing the hybrid mobile application is not limited, for example, Electron, which is an open source library for developing a desktop application using Web technologies such as JavaScript, HTML, CSS, and the like, may be adopted, and with the aid of the development tool, the hybrid mobile application running on the Android or ios system may be developed.

It should be noted that, during the running process of the hybrid mobile application, the front-end code needs to interact with the native code, for example, the native code needs to call the underlying mobile components such as camera, SMS, phone, etc. Before the two parts of codes are mixed, the correctness of the front-end codes can be verified in the running environment of the native client, and the normal interaction between the two parts of codes can be ensured. Therefore, the following embodiments of the present application provide a remote debugging system suitable for a hybrid development scenario, where the system is configured to debug a front-end code in an environment where a native client is located before the front-end code and the native client are mixed to form a hybrid mobile application, that is, verify the logical correctness of the front-end code. Fig. 1 is a schematic structural diagram of a remote debugging system suitable for a hybrid development scenario according to an exemplary embodiment of the present application.

Referring to fig. 1, the system includes a first electronic device and a second electronic device. The first electronic device is a terminal device capable of running a front-end code developed based on a web framework in a hybrid development scene, and may be, for example, a terminal device used by a developer to perform front-end development, or certainly, a terminal device used by a debugger to perform front-end debugging; in addition, from the perspective of the device form, the first electronic device may be a notebook computer, a desktop computer, a tablet computer, or the like. The second electronic device is a terminal device capable of operating a native client developed based on a native environment in a hybrid development scene, and may be, for example, a terminal device used by a developer to perform native development, a terminal device used by a debugger to perform native debugging, or any terminal device having a native operating environment; in addition, from the viewpoint of device form, the second electronic device may be, but is not limited to, the following terminal device: a mobile phone, a tablet computer or a vehicle-mounted terminal, etc.

In the embodiment of the present application, a browser is installed on the first electronic device, and may be responsible for running the front-end code mentioned above to render a front-end page corresponding to the front-end code. It should be noted that the front end page corresponding to the front end code may include one or more pages, which is not limited to this. And the front-end page comprises a plurality of business controls through which a user can interact with the hybrid mobile application to use various functions of the hybrid mobile application. In the embodiment of the present application, implementation forms of the service controls are not limited, and for example, the service controls may be a Button control (Button), a text entry box (TextBox), a drop-down box (DropList), a Date/time control (Date/TimePicker), (picture, file) Upload control (Upload), a list box (ListBox), a Tab control, a link or hyperlink control, and the like. And the second electronic equipment is provided with a native client and is responsible for providing an environment required by the operation of the native client, and starting and operating the native client according to the starting instruction. In this embodiment, the front-end code and the native client are located on different electronic devices, and therefore, the front-end code needs to be debugged across devices through network communication, which is called a remote debugging process. In order to facilitate remote debugging of the front-end code, a local service is also run on the first electronic device, and the local service is mainly used for establishing remote process communication between the native code and the native client, such as a socket connection, but not limited thereto. In addition, in this embodiment, a plug-in installation package is also embedded in the browser in advance, and based on the plug-in installation package, the browser may generate a plug-in for the front-end page in the process of rendering the front-end page, and the plug-in performs data interaction with the native client running on the second electronic device by means of the communication capability provided by the local service. Specifically, the plug-in has at least the following two functions: on one hand, protocol requests from the front-end page can be intercepted, the intercepted protocol requests are packaged into remote requests, and the remote requests are sent to the native client on the second electronic equipment by means of the communication capacity provided by the local service for response processing of the native client; on the other hand, in the case that the native client needs to return result data in response to the protocol request, the result data returned by the native client can also be received by means of the communication capability provided by the local service, and further business processing is performed on the result data. In the context of the interaction between the browser, the plug-in, the local service, and the native client, the detailed process of remotely debugging the front-end code in the environment of the second electronic device where the native client is located may be referred to the following detailed description of the embodiment shown in fig. 2 and fig. 3.

Fig. 2 is a flowchart illustrating a method for remotely debugging front-end code in hybrid development according to an exemplary embodiment of the present application. As shown in fig. 2, the method may include the steps of:

201. the browser runs the front-end code to render a front-end page, and the front-end page at least comprises a first type of business control.

202. The browser generates a plug-in required for remote debugging of the front-end page and establishes a telecommunication connection by means of a local service between the plug-in and a native client, the native client being located on the second electronic device and containing native code required for generating the hybrid application by co-programming with the front-end code.

203. The browser responds to the triggering operation of any first type of business control, and generates a first protocol request and a callback function corresponding to the triggered first type of business control, wherein the first protocol request requires a native client to call native capability for responding.

204. The browser calls the plug-in to encapsulate the first protocol request and the callback function into a first remote request, and sends the first remote request to the native client through the remote communication connection, and receives the callback function returned by the native client and callback data generated by calling the native capability adapted to the first protocol request.

205. The browser calls the plug-in to execute the callback function so as to perform service processing on the callback data, and a first processing result is obtained and reflects the debugging result of the front-end code.

In an embodiment of the present application, the front-end code is code of a web page developed by a web front-end developer. When a web front-end developer has a web page debugging requirement, the browser can be triggered to run front-end codes so as to render a front-end page in the browser. The front page includes at least one business control. In this embodiment, the service controls are divided into two types, namely, a first type service control and a second type service control. The first type of service control is a type of service control in which a protocol request generated by the first type of service control is triggered requires that a native client invokes a native capability on a second electronic device where the native client is located to respond and returns a response result. The second type of service control is a type of service control in which a protocol request generated by the service control is triggered only by calling the native capability of the second electronic device where the native client is located to respond without returning a response result. In this embodiment, at least one of the at least one service control included in the front-end page includes at least a first type of service control, and the number of the first type of service controls may be one or more. For example, a first class of business controls includes, but is not limited to: the system comprises a camera control used for triggering a native client to call a camera to collect image data, a microphone control used for triggering the native client to call a microphone to collect sound data or an input control used for triggering the native client to call an input device to collect input data, and a control used for triggering the native client to call other native components to perform corresponding operations and generate result data.

Further, in order to meet the remote debugging requirement of the front-end code of the web front-end developer, in the process of rendering the front-end page, the browser can also run the plug-in installation package installed in the front-end page so as to generate the plug-in required for remotely debugging the front-end page. Optionally, one plug-in corresponds to one front-end page, and is used as a transit server between the front-end page and the native client, but is not limited thereto. In addition, the browser can also establish a remote communication connection between the plug-in and the native client by means of a local service, and after the remote communication connection is established, the browser can perform bidirectional data interaction with the native client through the plug-in. Wherein the local service running on the first electronic device is capable of providing at least a telecommunication connection service and an information transfer service, the local service can be seen as a communication proxy between the plug-in and the native client.

In an embodiment of the application, the native client is located on the second electronic device and contains native code required for generating the hybrid application by being mixed with the front-end code. Further optionally, the front-end code in this embodiment may be one or multiple, where in the case that there are multiple front-end codes, each front-end code corresponds to a different native client, and the different front-end codes and the corresponding native clients are mixed to generate different mixed applications. It should be noted that, in the case that there are a plurality of front-end codes, the browser on the first electronic device may run the plurality of front-end codes, and different front-end codes may be distinguished by the unique identifier of the front-end code.

In the embodiment of the present application, the function debugging of the front-end code mainly includes, but is not limited to: whether a business control on a front-end page corresponding to the front-end code can respond to the triggering operation of a user or not is debugged, whether a corresponding protocol request can be successfully sent to the native client or not under the condition that the triggering operation is responded is judged, whether response data returned by the native client can be successfully received and reasonable business processing is carried out on the received response data under the condition that the response result is required to be returned by the native client or not is judged. Based on this, when the front-end page contains the first-class service control, a debugger may initiate a trigger operation on any first-class service control, where the trigger operation is performed in a manner including, but not limited to: single click, double click, long press, touch, mouse over, and the like. At this time, the browser responds to the triggering operation of any first-class service control, and if the browser can successfully respond to the triggering operation, a first protocol request and a callback function corresponding to the triggered first-class service control are generated. In the embodiment of the present application, the protocol request corresponding to the first type of service control is referred to as a first protocol request, because the first type of service control needs to generate not only the protocol request corresponding to the first type of service control but also a callback function corresponding to the first type of service control; on one hand, the callback function is used for indicating that the native client needs to call the native capability for responding to the first protocol request and return response data, and in the embodiment, the response data is called callback data; on the other hand, the callback function also represents the processing logic of callback data, and the corresponding callback functions of different first-class service controls are different. And then, the browser calls a plug-in corresponding to the front-end page, encapsulates the first protocol request and the callback function into a first remote request, and sends the first remote request to a local service, and the local service sends the first remote request to the native client. The native client invokes a native capability adapted to the first protocol request in response to the first remote request and returns a callback function to the local service along with callback data generated in response to the first remote request. The local service transmits a callback function returned by the native client and callback data generated in response to the first remote request to the plug-in, the plug-in executes the callback function to perform service processing on the callback data to obtain a first processing result, and the first processing result reflects a part of debugging results of the front-end code.

The method and the device for the browser call plug-in execution callback function execution and the method and the device for the browser call plug-in execution callback function execution do not limit the mode of service processing of callback data. In an example, when the browser calls the plug-in to execute the callback function to perform service processing on the callback data and obtain the first processing result, the browser may call the plug-in to execute the callback function to render the callback data onto a result page corresponding to the front-end page to obtain the first processing result. For this case, the debugging personnel can conveniently view the debugging result of the front-end code through the rendering result.

For example, after the browser displays the front-end page, some functions of the front-end page need to call a camera function, at this time, a web front-end developer triggers a camera control of the front-end page, the browser responds to a trigger operation acting on the camera control to generate a camera call request and a call-back function, the browser calls a plug-in to package the camera call request and the call-back function into a camera remote call request, the plug-in is called to send the camera remote call request to a local service, and the local service sends the camera remote call request to a native client; the method comprises the steps that after a native client receives a camera remote calling request, image data collected by a camera on second electronic equipment where the native client is located are called, when the native client executes a callback function, the image data collected by the camera is returned to local service of the first electronic equipment, the local service sends the image data collected by the camera to a plug-in, a browser calls the plug-in to continuously process the image data, the processed image data can be rendered to a front end page of the browser to be displayed, if a debugging person sees the image data, the debugging person can consider that the debugging is successful, and if the debugging person cannot see the image data or cannot see the image data in time, the debugging is considered to be failed.

For another example, after the browser displays the front-end page, some functions of the front-end page need to call a microphone function, at this time, a web front-end developer triggers a microphone control of the front-end page, the browser responds to a trigger operation acting on the microphone control to generate a microphone call request and a call-back function corresponding to the microphone control, the browser calls a plug-in to package the microphone call request and the call-back function into a microphone remote call request, the call plug-in sends the microphone remote call request to a local service, and the local service sends the microphone remote call request to a native client; the method comprises the steps that after a native client receives a microphone remote calling request, sound data collected by a microphone on second electronic equipment where the native client is located are called, when the native client executes a callback function, the sound data collected by the microphone is returned to local service of the first electronic equipment, the local service sends the sound data collected by the microphone to a plug-in, a browser calls the plug-in to continuously process the sound data, the processed sound data can be broadcasted through the microphone of the first electronic equipment, if debugging personnel hear the sound data broadcasted by the microphone, debugging can be considered to be successful, and if the debugging personnel fail to hear or do not hear the sound data broadcasted by the microphone in time, debugging can be considered to be failed.

For another example, after the browser displays the front-end page, some functions of the front-end page need to call input equipment on the electronic equipment where the native client is located, at this time, a web front-end developer triggers an input control of the front-end page, the browser generates an input equipment call request and a callback function in response to a trigger operation acting on the input control, the browser calls a plug-in to package the input equipment call request and the callback function into an input equipment remote call request, the browser calls the plug-in to send the input equipment remote call request to the local service, and the local service sends the input equipment remote call request to the native client; the method comprises the steps that after a native client receives an input device remote calling request, input data input by a user and collected by input devices on second electronic equipment where the native client is located are called, when a callback function is executed by the native client, the input data are returned to local services of first electronic equipment, the local services send the input data to a plug-in, the browser calls the plug-in to continuously process the input data, the processed input data can be rendered into a front-end page displayed by the browser, if a debugger sees the input data, the debugging can be considered to be successful, and if the debugger fails to see the input data or cannot see the input data in time, the debugging can be considered to be failed.

In another example, the browser calls the plug-in to execute the callback function to perform service processing on the callback data, and when the first processing result is obtained, the browser calls the plug-in to execute the callback function to upload the callback data to the service server, and the browser receives a result of processing the callback data by the service server as the first processing result. For this case, the debugging personnel can conveniently view the debugging result of the front-end code through the rendering result. For example, after the browser receives longitude and latitude position information of the second electronic device where the native client is located, the browser calls the plug-in to upload the longitude and latitude position information returned by the native client to the service server, the service server provides some search information matched with the longitude and latitude position information, and the browser receives the search information and displays the search information on a front-end page. If the debugging personnel see the specific search information, the debugging can be considered to be successful, and if the debugging personnel cannot see or cannot see the specific search information in time, the debugging can be considered to be failed. At this time, the calling plug-in executes the callback function to perform service processing on the callback data, namely, uploading the data returned by the client to the service server, and calling the service result of the service server to process the uploaded data.

In an optional embodiment, the local service may be associated with the plug-in advance, and specifically, a message page provided by the local service may be embedded in the plug-in, where the message page is used to carry the callback function and the callback data from the native client, so that the local service can provide the callback function and the callback data from the native client to the plug-in quickly and conveniently. In addition, in this alternative embodiment, in addition to the functions mentioned above, the plug-in may also provide a corresponding debug page, and provide scannable code graphics on the debug page, so that the local service can quickly establish a communication connection between the plug-in and the native client. Based on this, the way the browser establishes a telecommunication connection between the front-end page and the native client by means of the local service may be: the browser displays a debugging page corresponding to the plug-in, wherein the debugging page comprises a scannable coding graph, and the coding graph points to a message page provided by a local service; and the browser responds to the scanning operation of the native client to the coded graph, displays the message page, and sends the identifier of the front-end page and the identifier of the native client to the local service so that the local service establishes socket connection with the plug-in and the native client respectively.

Specifically, after the plug-in is generated in the browser, the browser may display a debugging page corresponding to the plug-in, where the debugging page includes scannable coded graphics, such as, but not limited to, a two-dimensional code image and a barcode image. When the encoded graphic is scanned, the browser displays a message page provided by the local service. The message page can be used for bearing callback functions and callback data returned by the original client. Further, the browser responds to the scanning operation of the native client on the coding graph, can also acquire the identifier of the native client, and sends the identifier of the front-end page and the identifier of the native client to the local service, and after the local service acquires the identifier of the front-end page and the identifier of the native client, the local service establishes socket (socket) connection with the plug-in and the native client respectively.

Further optionally, one implementation manner in which the browser sends and receives the callback function returned by the native client and the callback data generated by the browser calling the native capability adapted to the first protocol request through the remote communication connection is as follows: sending the first remote request to a local service, so that the local service sends the first remote request to a native client based on the socket connection between the local service and the native client and receives callback functions and callback data returned by the native client; and receiving a callback function and callback data which are sent by the local service based on the socket connection between the local service and the plug-in, and adding the callback function and the callback data to a message list on a message page for processing by the plug-in.

Specifically, the browser calls the plug-in to send the first remote request to the local service, the local service sends the first remote request to the native client to respond, the local service receives the callback function and the callback data returned by the native client, the local service adds the callback function and the callback data returned by the native client to a message list on a message page, and the browser can call the plug-in to execute the callback function in the message list to perform service processing on the callback data.

According to the remote debugging method for the front-end code in the hybrid development, a plug-in installation package is implanted into a browser in advance, when the front-end code needs to be debugged, on one hand, the front-end code is operated to render a front-end page, on the other hand, the plug-in installation package is operated to generate a plug-in corresponding to the front-end page, the plug-in intercepts a protocol request generated by the browser due to triggering of a business control on the front-end page, a remote communication connection is established between the plug-in and a native client through a local service, the protocol request is sent to the native client on second electronic equipment, so that the native client calls native capability to respond to the first protocol request, and a callback function and callback data returned by the native client are returned to the browser for further processing, and a processing result reflecting the debugging result of the front-end code is obtained. The whole debugging process forms a closed loop, a developer or a debugging person does not pay attention to resource proxy and debugging environment differences any more, and only a local application is needed to be opened to start a local service and a browser, so that the remote debugging step of front-end codes in hybrid development is simplified, frequent interaction between front-end developers and native developers can be reduced, and the debugging efficiency is improved.

Further optionally, as shown in fig. 3, the method may further include step 200: configuring an identifier of a native client corresponding to a front-end code and a data format supported by the native client in a browser in advance; correspondingly, the step 204 of calling the plug-in to encapsulate the first protocol request and the callback function into the first remote request specifically includes: and the calling plug-in converts the first protocol request and the callback function into a data format supported by the native client and encapsulates the format-converted first protocol request and the callback function into a first remote request. In this way, the native client can directly parse the recognizable first protocol request from the first remote request, which facilitates quick response.

Further, when there are a plurality of front-end codes, the identifier of each front-end code and the identifier of the corresponding native client may be configured in advance, and further, the data format supported by the native client corresponding to each front-end code may be configured in the browser. Further optionally, the whole remote debugging process of the embodiment may be divided into two stages, namely an initialization stage and a debugging stage; the above configuration operations and the above mentioned processes of generating plug-in, starting local service, establishing communication connection, etc. may be completed in the initialization phase, and the related operations described in

step

203 and 205 may be completed in the debugging phase, as shown in fig. 2 specifically.

In some embodiments of the present application, the front-end page not only includes the first type of service control, but also includes the second type of service control, and the number of the second type of service control is one or more. Based on this, on the embodiment shown in fig. 2, as shown in fig. 3, the debugging process for the front-end code further includes the following steps:

206. and the browser responds to the triggering operation of any second type of service control and generates a second protocol request corresponding to the triggered second type of service control, wherein the second protocol request requires the native client to call the native capability for responding.

207. The browser calls the plug-in to package the second protocol request into a second remote request, and sends the second remote request to the native client through the remote communication connection, so that the native client calls the native capability adaptive to the second protocol request to execute corresponding service processing to obtain a second processing result; the second processing result reflects a debugging result of the front-end code.

It is to be noted that, in the embodiment of the present application, a processing order of the first type of service control and the second type of service control is not limited. Specifically, steps 203 and 204 may be performed first, and then steps 205 and 206 may be performed. Alternatively, steps 205 and 206 may be performed first, followed by

steps

203 and 204.

In the embodiment of the present application, at least one service control included in the front-end page includes at least a second type of service control, and the number of the second type of service controls may be one or more. For example, the second class of business controls includes, but is not limited to: the system comprises a popup display control for triggering a native client to display a popup, a page jump control for triggering a native client to jump to a page, a brightness adjustment control for triggering a native client to adjust the brightness of the page, and the like.

Further optionally, in order to facilitate the web front-end developer to view the debugging result, a function of returning a second processing result may be added to the native client, and the function only plays a role in the debugging stage. Based on the above, the browser can also receive a second processing result returned by the native client through the remote communication connection; and generating a debugging result of the front-end code according to the first processing result and the second processing result, and outputting the debugging result.

In some embodiments of the present application, in a case that a debugging result of the front-end code is pass, the method further includes: storing the front-end codes and the native clients to a packaging platform which simultaneously supports a front-end development environment and a native development environment, and compiling and packaging the front-end codes and the native clients by using the packaging platform to obtain an installation package of the hybrid application; the installation package at least comprises a front-end code, a native client and a bridging layer, wherein the bridging layer is located between the front-end code and the native client and is used for being responsible for communication between the front-end code and the native client in the running process of the hybrid application. It should be noted that, in the hybrid mobile Application according to the embodiment of the present Application, the front-end code runs in the web view container of the native operating system, looks like a real mobile Application, but cannot directly interact with an API (Application Programming Interface) and a controller in the native operating system environment, for example, cannot directly interact with underlying components such as a camera, an SMS, a phone, and the like, so a bridge layer is added between the two components in the embodiment.

In an embodiment of the application, the bridge layer may enable bidirectional data interaction between a front-end page rendered based on front-end codes and a native client. Specifically, the bridge layer receives a call request of a second end, wherein the call request comprises a first method name and a second callback method; the bridge layer stores a first method name and a first callback method; the first method name is a method name corresponding to the service of the first end, the first callback method is a method for indicating the first end to perform the service corresponding to the first method name by the bridge layer, and the second callback method is a method for returning data to the second end by the bridge layer; the bridge layer calls a first callback method to indicate the first end to carry out a service corresponding to the first method name; the bridging layer receives result data returned by the first end, wherein the result data is obtained after the first end executes the service corresponding to the first method name; the bridge layer calls a second callback method and sends the result data to the second end; wherein, in case the first end is a native client, the second end is a front-end code for rendering a front-end page in the browser; or, in the case where the first end is front-end code for rendering a front-end page in a browser, the second end is a native client.

It should be noted that the bridge layer in the embodiment of the present application is a functional module in the hybrid mobile application formed after the hybrid application is compiled, and functions in the running process of the hybrid mobile application are not exactly the same as the functions of the plug-in or the local service in the foregoing, and the application environment and the stage where the application environment is located are also different.

In order to better understand the remote debugging method of the front-end code in hybrid development provided by the embodiment of the present application, the following description is made with reference to fig. 4. The remote debugging process of the front-end code comprises an initialization phase and a debugging phase. In the initialization phase, the following work mainly needs to be done: rendering a front-end page in a browser, generating a plug-in, starting a local-end service, establishing a plug-in, a socket connection between the local service and a native client, and performing identification configuration and data format configuration in the browser. The identification configuration refers to configuring the identification of each front-end code and the identification of the corresponding native client in the browser. The data format configuration refers to configuring the data format supported by the native client corresponding to each front-end code in the browser. In the debugging stage, the browser responds to the triggering operation aiming at the business control on the front-end page, calls a protocol to generate a corresponding protocol request and a callback function, a plug-in packages the protocol request and the callback function into a remote request to be sent to a local service, the local service sends the remote request to a native client, and the native client responds to the remote request and returns the callback function and callback data to the local service after executing the callback function: the local service returns the callback function and the callback data to the plug-in, and the plug-in executes the callback function to process the callback data to obtain a processing result. The plug-in can control the browser to load the processing result in the front page.

The method embodiments described above focus on the description from the perspective of the browser on the first electronic device interacting with the native client, where, from a purely plug-in perspective, it performs some of the steps shown in fig. 5 below. From a local service perspective, it performs some of the steps shown in fig. 6 below.

Fig. 5 is a flowchart illustrating another method for remotely debugging front-end code in hybrid development according to an exemplary embodiment of the present application. The execution subject of the method is a plug-in, and referring to fig. 5, the method may include the following steps:

501. and the plug-in selects the debugging APP environment.

After the browser generates the plug-in, the plug-in may select the debugging environment as the debugging APP environment.

502. The plug-in connects to the local service.

503. The plug-in receives the protocol request and callback data and encapsulates them into a remote request.

504. The plug-in forwards the remote request to the local service so that the local service sends the remote request to the native client.

505. The plug-in receives the callback function and callback data forwarded by the local service that was sent by the native client in response to the remote request.

506. And the plug-in executes the callback function to process the callback data to obtain a processing result.

For specific implementation of each step in the embodiment shown in fig. 5, reference may be made to the specific implementation of each step in the foregoing embodiments, and details are not described here again.

Fig. 6 is a flowchart illustrating another method for remotely debugging front-end code in hybrid development according to an exemplary embodiment of the present application. The execution subject of the method is a local service, and referring to fig. 6, the method may include the following steps:

601. a local start port number (port number 4396, for example) to start local services.

602. Establishing socket connections with plug-ins and native clients

603. And receiving a remote request sent by the plug-in, and forwarding the remote request to the native client for the native client to respond.

604. And receiving the callback function and the callback data sent by the native client in response to the remote request, and forwarding the callback function and the callback data to the plug-in.

For specific implementation of each step in the embodiment shown in fig. 6, reference may be made to the specific implementation of each step in the foregoing embodiment, and details are not described here again.

It should be noted that the execution subjects of the steps of the methods provided in the above embodiments may be the same device, or different devices may be used as the execution subjects of the methods. For example, the execution subjects of step 201 to step 203 may be device a; for another example, the execution subject of steps 201 and 202 may be device a, and the execution subject of step 203 may be device B; and so on.

In addition, in some of the flows described in the above embodiments and the drawings, a plurality of operations are included in a specific order, but it should be clearly understood that the operations may be executed out of the order presented herein or in parallel, and the sequence numbers of the operations, such as 201, 202, etc., are merely used for distinguishing different operations, and the sequence numbers do not represent any execution order per se. Additionally, the flows may include more or fewer operations, and the operations may be performed sequentially or in parallel. It should be noted that, the descriptions of "first", "second", etc. in this document are used for distinguishing different messages, devices, modules, etc., and do not represent a sequential order, nor limit the types of "first" and "second" to be different.

Fig. 7 is a schematic structural diagram of a remote debugging apparatus according to an exemplary embodiment of the present application. As shown in fig. 7, the apparatus may include: rendering module 71, processing module 72 and calling module 73.

The rendering module 71 is configured to run a front-end code to render a front-end page, where the front-end page at least includes a first type of service control;

a processing module 72 for generating a plug-in required for remote debugging of the front-end page and establishing a remote communication connection between the plug-in and a native client by means of a local service, the native client being located on the second electronic device and containing native code required for generating the hybrid application by co-programming with the front-end code;

the processing module 72 is further configured to respond to a triggering operation on any one of the first type of service controls, and generate a first protocol request and a callback function corresponding to the triggered first type of service control, where the first protocol request requires a native client to call a native capability for responding;

the calling module 73 is used for calling the plug-in to encapsulate the first protocol request and the callback function into a first remote request, sending the first remote request to the native client through the remote communication connection, and receiving the callback function returned by the native client and callback data generated by calling the native capability adapted to the first protocol request;

the calling module 73 is further configured to call the plug-in to execute a callback function to perform service processing on callback data, so as to obtain a first processing result, where the first processing result reflects a debugging result of the front-end code.

Further optionally, the front-end page further includes a second type of service control, and the processing module 72 is further configured to respond to a trigger operation on any one of the second type of service controls, and generate a second protocol request corresponding to the triggered second type of service control, where the second protocol request requires that the native client invokes the native capability to respond;

the invoking module 73 is further configured to invoke a plug-in to encapsulate the second protocol request into a second remote request, and send the second remote request to the native client through the remote communication connection, so that the native client invokes a native capability adapted to the second protocol request to execute corresponding service processing, so as to obtain a second processing result; the second processing result reflects a debugging result of the front-end code.

Further optionally, the processing module 72 is further configured to: receiving a second processing result returned by the native client through the remote communication connection; and generating a debugging result of the front-end code according to the first processing result and the second processing result, and outputting the debugging result.

Further optionally, when the processing module 72 establishes the remote communication connection between the front-end page and the native client by means of the local service, it is specifically configured to:

displaying a debugging page corresponding to the plug-in, wherein the debugging page comprises a scannable coding graph, and the coding graph points to a message page provided by a local service;

and responding to the scanning operation of the native client to the coding graph, displaying the message page, and sending the identifier of the front-end page and the identifier of the native client to the local service so that the local service establishes socket connection with the front-end page and the native client respectively.

Further optionally, when the calling module 73 sends the callback function returned by the native client and receives callback data generated by calling the native capability adapted to the first protocol request through the remote communication connection, the calling module is specifically configured to:

sending the first remote request to a local service, so that the local service sends the first remote request to a native client based on the socket connection between the local service and the native client and receives callback functions and callback data returned by the native client; and receiving a callback function and callback data which are sent by the local service based on the socket connection between the local service and the front-end page, and adding the callback function and the callback data to a message list on the message page for processing by the plug-in.

Further optionally, the invoking module 73 invokes the plug-in to execute the callback function to perform service processing on the callback data, and when the first processing result is obtained, the invoking module is specifically configured to:

calling the plug-in to execute a callback function so as to render callback data to a result page corresponding to the front-end page, and obtaining a first processing result;

alternatively, the first and second electrodes may be,

and the calling plug-in executes the callback function so as to upload the callback data to the service server, and receives a result of processing the callback data by the service server as a first processing result.

Further optionally, the processing module 72 is further configured to: configuring the identification of the native client and the data format supported by the native client in a browser in advance;

correspondingly, when the calling module 73 calls a plug-in to encapsulate the first protocol request and the callback function into the first remote request, the calling module is specifically configured to: and the calling plug-in converts the first protocol request and the callback function into a data format supported by the native client and encapsulates the format-converted first protocol request and the callback function into a first remote request.

Optionally, the number of the front-end codes is multiple, each front-end code corresponds to a different native client, and the different front-end codes and the corresponding native clients are mixed to generate different mixed applications.

Further optionally, in the case that the debugging result of the front-end code is pass, the processing module 72 is further configured to: storing the front-end codes and the native clients to a packaging platform which simultaneously supports a front-end development environment and a native development environment, and compiling and packaging the front-end codes and the native clients by using the packaging platform to obtain an installation package of the hybrid application; the installation package at least comprises a front-end code, a native client and a bridging layer, wherein the bridging layer is located between the front-end code and the native client and is used for being responsible for communication between the front-end code and the native client in the running process of the hybrid application.

The specific implementation of the remote debugging apparatus shown in fig. 7 has been described in detail in the above embodiment of the method, and will not be described in detail here.

Fig. 8 is a schematic structural diagram of an electronic device according to an exemplary embodiment of the present application. The electronic equipment is provided with a browser and a local service. Referring to fig. 8, the electronic device includes: a memory 81 and a processor 82. The memory 81 stores therein front-end code and program code for implementing a remote debugging function.

Memory 81 is used to store computer programs and may be configured to store other various data to support operations on the computing platform. Examples of such data include instructions for any application or method operating on the computing platform, contact data, phonebook data, messages, pictures, videos, and so forth.

The memory 81 may be implemented by any type or combination of volatile or non-volatile memory devices, such as Static Random Access Memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic or optical disks.

A processor 82 coupled to the memory 81 for executing the computer program in the memory 81 for:

running a front-end code to render a front-end page, wherein the front-end page at least comprises a first type of business control; generating a plug-in required for remotely debugging the front-end page, and establishing remote communication connection between the plug-in and a native client by means of a local service, wherein the native client is positioned on the second electronic equipment and comprises native codes required for generating the hybrid application by mixing and compiling with the front-end codes; responding to the triggering operation of any first-class service control, and generating a first protocol request and a callback function corresponding to the triggered first-class service control, wherein the first protocol request requires a native client to call a native capability for responding; the calling plug-in packages the first protocol request and the callback function into a first remote request, sends the first remote request to the native client through the remote communication connection, and receives the callback function returned by the native client and callback data generated by calling the native capability adapted to the first protocol request; and calling the plug-in to execute the callback function so as to perform service processing on the callback data to obtain a first processing result, wherein the first processing result reflects the debugging result of the front-end code.

Further optionally, the front-end page further includes a second type of service control, and the processor 82 is further configured to: responding to the triggering operation of any second type of service control, and generating a second protocol request corresponding to the triggered second type of service control, wherein the second protocol request requires a native client to call a native capability for responding; the calling plug-in packages the second protocol request into a second remote request and sends the second remote request to the native client through the remote communication connection, so that the native client calls the native capability adaptive to the second protocol request to execute corresponding service processing to obtain a second processing result; the second processing result reflects a debugging result of the front-end code.

Further optionally, the processor 82 is further configured to: receiving a second processing result returned by the native client through the remote communication connection; and generating a debugging result of the front-end code according to the first processing result and the second processing result, and outputting the debugging result.

Further optionally, the processor 82 is further configured to: establishing a telecommunication connection between a front-end page and a native client by means of a local service, in particular for:

Further optionally, when the processor 82 sends the callback function returned by the native client and receives callback data generated by calling the native capability adapted to the first protocol request through the remote communication connection, the method is specifically configured to:

Further optionally, the processor 82 calls the plug-in to execute the callback function to perform service processing on the callback data, and when the first processing result is obtained, the method is specifically configured to:

alternatively, the first and second electrodes may be,

Further optionally, the processor 82 is further configured to: configuring the identification of the native client and the data format supported by the native client in a browser in advance;

accordingly, when the processor 82 calls the plug-in to encapsulate the first protocol request and the callback function into the first remote request, the following steps are specifically performed: and the calling plug-in converts the first protocol request and the callback function into a data format supported by the native client and encapsulates the format-converted first protocol request and the callback function into a first remote request.

Further optionally, in the case that the debugging result of the front-end code is pass, the processor 82 is further configured to: storing the front-end codes and the native clients to a packaging platform which simultaneously supports a front-end development environment and a native development environment, and compiling and packaging the front-end codes and the native clients by using the packaging platform to obtain an installation package of the hybrid application; the installation package at least comprises a front-end code, a native client and a bridging layer, wherein the bridging layer is located between the front-end code and the native client and is used for being responsible for communication between the front-end code and the native client in the running process of the hybrid application.

Further, as shown in fig. 8, the electronic device further includes: communication components 83, display 84, power components 85, audio components 86, and the like. Only some of the components are schematically shown in fig. 8, and the electronic device is not meant to include only the components shown in fig. 8. In addition, the components within the dashed line frame in fig. 8 are optional components, not necessary components, and may be determined according to the product form of the electronic device. The electronic device of this embodiment may be implemented as a terminal device such as a desktop computer, a notebook computer, a smart phone, or an IOT device, or may be a server device such as a conventional server, a cloud server, or a server array. If the electronic device of this embodiment is implemented as a terminal device such as a desktop computer, a notebook computer, a smart phone, etc., the electronic device may include components within a dashed line frame in fig. 8; if the electronic device of this embodiment is implemented as a server device such as a conventional server, a cloud server, or a server array, the components in the dashed box in fig. 8 may not be included.

Accordingly, the present application further provides a computer-readable storage medium storing a computer program, where the computer program is capable of implementing the steps that can be executed by the electronic device in the foregoing method embodiments when executed.

The communication component is configured to facilitate wired or wireless communication between the device in which the communication component is located and other devices. The device where the communication component is located can access a wireless network based on a communication standard, such as a WiFi, a 2G, 3G, 4G/LTE, 5G and other mobile communication networks, or a combination thereof. In an exemplary embodiment, the communication component receives a broadcast signal or broadcast related information from an external broadcast management system via a broadcast channel. In one exemplary embodiment, the communication component further includes a Near Field Communication (NFC) module to facilitate short-range communications. For example, the NFC module may be implemented based on Radio Frequency Identification (RFID) technology, infrared data association (IrDA) technology, Ultra Wideband (UWB) technology, Bluetooth (BT) technology, and other technologies.

The display includes a screen, which may include a Liquid Crystal Display (LCD) and a Touch Panel (TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive an input signal from a user. The touch panel includes one or more touch sensors to sense touch, slide, and gestures on the touch panel. The touch sensor may not only sense the boundary of a touch or slide action, but also detect the duration and pressure associated with the touch or slide operation.

The power supply assembly provides power for various components of the device in which the power supply assembly is located. The power components may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power for the device in which the power component is located.

The audio component may be configured to output and/or input an audio signal. For example, the audio component includes a Microphone (MIC) configured to receive an external audio signal when the device in which the audio component is located is in an operational mode, such as a call mode, a recording mode, and a voice recognition mode. The received audio signal may further be stored in a memory or transmitted via a communication component. In some embodiments, the audio assembly further comprises a speaker for outputting audio signals.

As will be appreciated by one skilled in the art, embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.

The present application is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the application. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

In a typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.

The memory may include forms of volatile memory in a computer readable medium, Random Access Memory (RAM) and/or non-volatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). Memory is an example of a computer-readable medium.

Computer-readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, a computer readable medium does not include a transitory computer readable medium such as a modulated data signal and a carrier wave.

It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.

The above description is only an example of the present application and is not intended to limit the present application. Various modifications and changes may occur to those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.

Claims

1. A remote debugging method for front-end codes in hybrid development is characterized in that the front-end codes are located on first electronic equipment, and a browser and local services are installed on the first electronic equipment, and the method comprises the following steps:

the browser runs the front-end code to render a front-end page, wherein the front-end page at least comprises a first type of business control;

generating a plug-in required for remotely debugging the front-end page, and establishing a remote communication connection between the plug-in and a native client by means of a local service, wherein the native client is positioned on a second electronic device and contains native code required for generating a hybrid application by mixing and compiling with the front-end code;

responding to the triggering operation of any first type of service control, and generating a first protocol request and a callback function corresponding to the triggered first type of service control, wherein the first protocol request requires the native client to call native capability for responding;

calling the plug-in to package the first protocol request and the callback function into a first remote request, sending the first remote request to the native client through the remote communication connection, and receiving the callback function returned by the native client and callback data generated by calling a native capability adapted to the first protocol request;

and calling the plug-in to execute the callback function so as to perform service processing on the callback data to obtain a first processing result, wherein the first processing result reflects the debugging result of the front-end code.

2. The method of claim 1, further comprising a second type of business control on the front-end page, the method further comprising:

responding to the triggering operation of any second type of service control, and generating a second protocol request corresponding to the triggered second type of service control, wherein the second protocol request requires the native client to call native capability for responding;

calling the plug-in to package the second protocol request into a second remote request, and sending the second remote request to the native client through the remote communication connection, so that the native client calls a native capability adaptive to the second protocol request to execute corresponding business processing to obtain a second processing result; the second processing result reflects a debugging result of the front-end code.

3. The method of claim 2, further comprising:

receiving a second processing result returned by the native client through the remote communication connection;

and generating a debugging result of the front-end code according to the first processing result and the second processing result, and outputting the debugging result.

4. The method of claim 1, wherein establishing a remote communication connection between the front-end page and a native client by means of a local service comprises:

responding to the scanning operation of the native client to the coding graph, displaying the message page, and sending the identifier of the front-end page and the identifier of the native client to a local service, so that the local service establishes socket connection with the front-end page and the native client respectively.

5. The method of claim 4, wherein sending to the native client over the remote communication connection and receiving callback data generated by the callback function returned by the native client and its native capabilities calling to fit the first protocol request comprises:

sending the first remote request to a local service for the local service to send to the native client based on a socket connection between the local service and the native client and receive the callback function and the callback data returned by the native client;

and receiving the callback function and the callback data which are sent by the local service based on the socket connection between the local service and the front-end page, and adding the callback function and the callback data to a message list on the message page for processing by the plug-in.

6. The method of claim 1, wherein invoking the plug-in to execute the callback function to perform business processing on the callback data to obtain a first processing result comprises:

calling the plug-in to execute the callback function so as to render the callback data to a result page corresponding to the front-end page, and obtaining a first processing result;

alternatively, the first and second electrodes may be,

and calling the plug-in to execute the callback function so as to upload the callback data to a service server, and receiving a result of processing the callback data by the service server as a first processing result.

7. The method according to any one of claims 1-6, further comprising:

configuring the identification of the native client and the data format supported by the native client in the browser in advance;

accordingly, invoking the plug-in to encapsulate the first protocol request and the callback function into a first remote request, comprising: and calling the plug-in to convert the first protocol request and the callback function into a data format supported by the native client, and encapsulating the first protocol request and the callback function after format conversion into a first remote request.

8. The method according to any one of claims 1-6, wherein the front-end code is plural, each front-end code corresponds to a different native client, and the different front-end codes are shuffled with their corresponding native clients to generate different hybrid applications.

9. The method according to any one of claims 1-6, wherein in case the debugging result of the front-end code is a pass, the method further comprises:

storing the front-end code and the native client to a packaging platform which simultaneously supports a front-end development environment and a native development environment, and compiling and packaging the front-end code and the native client by using the packaging platform to obtain an installation package of the hybrid application;

the installation package at least comprises the front-end code, the native client and a bridge layer, wherein the bridge layer is located between the front-end code and the native client and is used for being responsible for communication between the front-end code and the native client in the running process of the hybrid application.

10. A remote debugging apparatus, comprising:

the rendering module is used for running front-end codes to render a front-end page, and the front-end page at least comprises a first type of business control;

the processing module is used for generating a plug-in required for remotely debugging the front-end page and establishing a remote communication connection between the plug-in and a native client by means of a local service, wherein the native client is positioned on a second electronic device and contains native codes required for generating a hybrid application by mixing and compiling with the front-end codes;

the processing module is further used for responding to the triggering operation of any first-class service control, and generating a first protocol request and a callback function corresponding to the triggered first-class service control, wherein the first protocol request requires the native client to call native capability for responding;

the calling module is used for calling the plug-in to package the first protocol request and the callback function into a first remote request, sending the first remote request to the native client through the remote communication connection, and receiving the callback function returned by the native client and callback data generated by calling the native capability adaptive to the first protocol request;

and the calling module is also used for calling the plug-in to execute the callback function so as to perform service processing on the callback data to obtain a first processing result, and the first processing result reflects the debugging result of the front-end code.

11. An electronic device, wherein a browser and a local service are installed on the electronic device, the electronic device further comprises a memory and a processor, and a front-end code and a program code for implementing a remote debugging function are stored in the memory;

the processor is coupled with the memory for executing the program code for implementing the remote debugging functionality to implement the method of any of claims 1-9.

12. A computer-readable storage medium storing a computer program, the computer program, when executed by a processor, causing the processor to implement the method of any one of claims 1-9.