Hybrid Mode Mobile Application Debugging System

Abstract

An embodiment of the present application provides a hybrid mode mobile application debugging system, including a debugging device, used to upload the page code of the hybrid mode mobile application to be debugged to the node server; the node server, used to deploy the received page code to the static resource service, and return the network address of the static resource service to the debugging device; the device to be debugged, used to obtain the network address from the debugging device, and obtain and load the page code from the static resource service according to the network address to open the page to be debugged; the debugging device, also used to debug the page to be debugged through the debugging tool installed in the debugging device.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of computer technology, and in particular to a hybrid mode mobile application debugging system. Background Art

[0002] Due to the update of computer application technology and the needs of the market, hybrid mode mobile applications have emerged. Hybrid mode mobile applications are hybrid mode mobile applications between native applications and web applications. After developing a hybrid mode mobile application, in order to find problems in the development process, it is necessary to remotely debug the hybrid mode mobile application. However, the inventors have found that the existing remote debugging methods have the following problems:

[0003] Question 1: When current front-end developers develop Hybrid (hybrid mode mobile application) projects, they can usually only simulate the real device view in the PC browser, but cannot test the actual effect of the interaction between the front-end JavaScript code and Native. There are absolute differences between the two environments, which causes confusion in front-end Hybrid development and difficulties in displaying effects.

[0004] Question 2: To access the static resources of a local development project on a Hybrid page, you need to connect to the intranet through your mobile phone and then connect to Charles proxy. Then, you need to set up a series of mappings such as Map Remote and Map Local to access local resources and view network requests.

[0005] Question 3: Currently, if you want to debug the front-end functions completely through Chrome Devtools like Web development, you need to use the Weinre tool. The disadvantage is that you still need to be in the same network segment and can only use the debugging tools that come with Weinre. The interface and functions are not perfect, and the debugging functions are limited. For iOS pages, due to iOS restrictions on developer accounts and devices, Safari debugging cannot be applied to real devices on a large scale, which creates a high threshold for front-end development.

[0006] In summary, due to the above problems in the existing remote debugging of hybrid mode mobile applications, the remote debugging of hybrid mode mobile applications is very complicated and inconvenient. Summary of the invention

[0007] The purpose of the embodiments of the present application is to provide a hybrid mode mobile application debugging system to solve the problem that the prior art remote debugging of hybrid mode mobile applications is very complicated and inconvenient.

[0008] The embodiment of the present application provides a hybrid mode mobile application debugging system, the application debugging system includes a debugging device, a node server and a device to be debugged, wherein:

[0009] The debugging device is used to upload the page code of the hybrid mode mobile application to be debugged to the node server;

[0010] The node server is used to deploy the received page code to the static resource service and return the network address of the static resource service to the debugging device;

[0011] The device to be debugged is used to obtain the network address from the debugging device, and obtain and load the page code from the static resource service according to the network address to open the page to be debugged;

[0012] The debugging device is further used to debug the page to be debugged through a debugging tool installed in the debugging device.

[0013] Optionally, the debugging device further includes an Electron desktop client and a local project debugging service installed in the debugging device, wherein:

[0014] The Electron desktop client is used to create a local project packaging service, a WebSocket client, a WebSocket server, a first module hot replacement client, and to establish a first WebSocket long connection with the node server through the WebSocket client;

[0015] The Electron desktop client is further used to add a first script for creating a second module hot replacement client and a second script for creating a module hot replacement server in the page code through the local project packaging service, and to start the local project debugging service through the local project packaging service;

[0016] The local project debugging service is used to create a module hot replacement server according to the second script;

[0017] The local project debugging service is further used to package the page code including the first script to generate a page code file directory;

[0018] The local project debugging service is further used to add a code segment for loading a third script of the Service Worker in a preset file in the page code file directory, and to add the third script to the page code file directory;

[0019] The Electron desktop client is also used to package the page code file directory containing the third script to generate a page code file package, and upload the page code file package to the node server.

[0020] The node server is also used to decompress the page code file package to generate a first code file, deploy the generated first code file to the static resource service, and return the network address of the static resource service to the Electron desktop client.

[0021] Optionally, the device to be debugged includes an Android device on which the hybrid mode mobile application is installed, and the debugging tool includes a Chrome Devtools Frontend debugging tool, wherein:

[0022] The hybrid mode mobile application is used to obtain and load the first code file from the static resource service to open the page to be debugged;

[0023] The hybrid mode mobile application is further used to load the third script according to the code segment in the first code file, intercept the network request of the page to be debugged through the third script, and create the second module hot replacement client according to the first script in the first code file;

[0024] The second module hot-replaces the client, and is used to establish a second WebSocket persistent connection with the node server;

[0025] The hybrid mode mobile application is further used to enable the Webview debugging mode, so that the Android device calls the Chromium kernel to create a Unix Domain Socket server according to the Webview debugging mode;

[0026] The hybrid mode mobile application is further used to establish a third WebSocket persistent connection with the Unix Domain Socket server, and to establish a fourth WebSocket persistent connection with the node server;

[0027] The WebSocket client is also used to open a desktop debugging window and load the Chrome Devtools Frontend debugging tool in the desktop debugging window;

[0028] The Chrome Devtools Frontend debugging tool is used to establish a fifth WebSocket persistent connection with the WebSocket server, so as to debug the page to be debugged by exchanging debugging data with the Chromium kernel through the fifth WebSocket persistent connection;

[0029] The node server is further used to notify the Electron desktop client to establish a sixth WebSocket persistent connection between the first module hot replacement client and the module hot replacement server through the first WebSocket persistent connection after the second WebSocket persistent connection is established, so as to implement hot update of the page through the sixth WebSocket persistent connection.

[0030] Optionally, the device to be debugged further includes an iOS simulator, and the debugging tool further includes a Safari browser, wherein:

[0031] The Electron desktop client is also used to create AppleScript automation services and iOS simulator automation services;

[0032] The Electron desktop client is further used to open the iOS simulator through the iOS simulator automation service, and after the iOS simulator is opened, install the hybrid mode mobile application through the iOS simulator automation service, and after the hybrid mode mobile application is installed, open the network address in the iOS simulator through the iOS simulator automation service, so that the hybrid mode mobile application calls the WKWebview kernel to load the page to be debugged;

[0033] The Electron desktop client is also used to open the Safari developer tools from the Safari browser via the AppleScript automation service;

[0034] The Safari developer tool is used to establish a connection channel with the WKWebview kernel through the Safari debugging protocol, and debug the page to be debugged through the connection channel.

[0035] Optionally, the Electron desktop client is further used to close all currently enabled iOS simulators through the iOS simulator automation service, and reopen the selected iOS simulator after all iOS simulators are closed.

[0036] Optionally, the hybrid mode mobile application is further configured to, after establishing a fourth WebSocket persistent connection with the node server, send a signal to the node server through the fourth WebSocket persistent connection indicating that the debugging channel of the page to be debugged has been opened;

[0037] The node server is further configured to, after receiving the signal, send the signal to the WebSocket client through the first WebSocket long connection, so that the WebSocket client opens the desktop debugging window after receiving the signal.

[0038] Optionally, the Electron desktop client is further used to request the node server to obtain session credential information;

[0039] The node server is used to generate session credential information when receiving a session credential information acquisition request sent by the Electron desktop client, and send the session credential information to the Electron desktop client, so that the WebSocket client establishes a first WebSocket long connection with the node server according to the session credential information.

[0040] Optionally, the node server is further used to create a directory named after the session credential information is generated in the static resource service, and deploy the first code file to the directory named after the session credential information.

[0041] Optionally, the Unix Domain Socket server has corresponding process identification information, and the hybrid mode mobile application is further used to obtain process identification information of multiple processes currently opened in the Android device, and search for the Unix Domain Socket server according to each process identification information;

[0042] The hybrid mode mobile application is further configured to initiate a handshake request to the Unix Domain Socket server, and after the handshake succeeds, send a protocol upgrade instruction to the Unix Domain Socket server to upgrade the current communication protocol to the WebSocket protocol.

[0043] Optionally, the Chrome Devtools Frontend debugging tool is further used to send a debugging information acquisition request for the Hybrid page to be debugged to the WebSocket server through the fifth WebSocket persistent connection, so that the WebSocket server sends the debugging information acquisition request to the Unix Domain Socket server through the WebSocket client, the channel of the first WebSocket persistent connection, the channel of the fourth WebSocket persistent connection, and the channel of the third WebSocket persistent connection in sequence to obtain debugging information of the page to be debugged from the Unix Domain Socket server.

[0044] The present application also provides a hybrid mode mobile application debugging method, which is applied to a debugging system including a debugging device, a node server, and a device to be debugged, and the method includes:

[0045] Uploading the page code of the hybrid mode mobile application to be debugged to the node server through the debugging device;

[0046] Deploy the received page code to the static resource service through the node server, and return the network address of the static resource service to the debugging device;

[0047] Obtaining the network address from the debugging device through the device to be debugged, and obtaining and loading the page code from the static resource service according to the network address to open the page to be debugged;

[0048] The page to be debugged is debugged by means of a debugging tool installed in the debugging device.

[0049] The hybrid mode mobile application debugging system and method provided in the embodiments of the present application allow front-end developers to directly use a single PC software to develop conventional front-end projects locally, display page effects on real devices and simulators, and can directly perform complete front-end page function debugging on the PC software, and directly preview the real effect of the interaction between the front-end and Native on the real device, greatly improving the convenience and efficiency of front-end developers in developing hybrid projects. BRIEF DESCRIPTION OF THE DRAWINGS

[0050] Figure 1 A schematic diagram of an application environment of a hybrid mode mobile application debugging system is shown schematically;

[0051] Figure 2 A block diagram of a hybrid mode mobile application debugging system according to an embodiment of the present application is schematically shown;

[0052] Figure 3 A flowchart of a hybrid mode mobile application debugging method according to an embodiment of the present application is schematically shown. DETAILED DESCRIPTION

[0053] The advantages of the present application are further described below in conjunction with the accompanying drawings and specific embodiments.

[0054] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present disclosure. Instead, they are merely examples of devices and methods consistent with some aspects of the present disclosure as detailed in the appended claims.

[0055] The terms used in this disclosure are for the purpose of describing specific embodiments only and are not intended to limit the disclosure. The singular forms of "a", "said" and "the" used in this disclosure and the appended claims are also intended to include plural forms unless the context clearly indicates other meanings. It should also be understood that the term "and / or" used herein refers to and includes any or all possible combinations of one or more associated listed items.

[0056] It should be understood that although the terms first, second, third, etc. may be used in the present disclosure to describe various information, such information should not be limited to these terms. These terms are only used to distinguish the same type of information from each other. For example, without departing from the scope of the present disclosure, the first information may also be referred to as the second information, and similarly, the second information may also be referred to as the first information. Depending on the context, the word "if" as used herein may be interpreted as "at the time of" or "when" or "in response to determining".

[0057] In the description of the present application, it should be understood that the numerical labels before the steps do not indicate the order in which the steps are executed, but are only used to facilitate the description of the present application and to distinguish each step, and therefore should not be understood as a limitation on the present application.

[0058] Figure 1The schematic diagram of the application environment of the hybrid mode mobile application debugging system according to the embodiment of the present application is schematically shown. In an exemplary embodiment, the system of the application environment may include a terminal device 10, a device 20 installed with a hybrid mode mobile application to be debugged, and a server 30. Among them, a wireless or wired connection is formed between the terminal device 10, the device 20 installed with the hybrid mode mobile application to be debugged, and the server 30. The terminal device 10 can be a tablet computer, a computer, etc., which is not specifically limited here. The device 20 installed with the hybrid mode mobile application to be debugged can be an Android phone, an Android tablet, or an iOS simulator, etc. The server 30 can be a server cluster or a cloud computing center composed of one server or multiple servers. The server 30 is used to store the page code of the hybrid mode mobile application to be debugged.

[0059] See also Figure 2 , which is a block diagram of a hybrid mode mobile application debugging system according to an embodiment of the present application. As can be seen from the figure, the hybrid mode mobile application debugging system provided in this embodiment includes a debugging device 200, a device to be debugged 201 and a node server 202, wherein:

[0060] The debugging device 200 is used to upload the page code of the hybrid mode mobile application to be debugged to the node server 202.

[0061] Specifically, the debugging device 200 refers to a device used in the hybrid mode mobile application debugging system to debug the debugging device 200. In this embodiment, before debugging the hybrid mode mobile application (Hybrid application), the page code of the hybrid mode mobile application needs to be uploaded to the node server 202 through the debugging device 200.

[0062] In an exemplary embodiment, the debugging device 200 includes an Electron desktop client and a local project debugging service installed in the debugging device 200 .

[0063] Among them, the Electron desktop client is a desktop client for MacOS and Windows based on the Electron open source framework. It can realize the debugging coupling middle layer between PC (computer), node server 202, real machine (Android phone) or simulator (iOS simulator). It is the UI access layer for desktop client users, which aggregates multiple functions such as PC underlying system, WebSocket communication, Chromium kernel control, etc. Specifically, the Electron desktop client can realize AppleScript automation service and node-simctl iOS simulator automation service, and realize the automation process of all relevant links of page HMR (hot module replacement), including injection configuration, bridging middle layer, etc.

[0064] In this embodiment, when the Electron desktop client is started, it will create a WebSocket client and a WebSocket server locally on the PC.

[0065] The WebSocket client will actively initiate a connection request to the node server 202 to establish a first WebSocket persistent connection between the two, and the data obtained from the node server 202 can be forwarded to the WebSocket client through the first WebSocket persistent connection. The WebSocket client will also forward the data obtained from the WebSocket server (the data is obtained through the internal data channel between the WebSocket server and the WebSocket client) to the node server 202 through the first WebSocket persistent connection.

[0066] In an exemplary embodiment, in order to prevent unauthorized devices from connecting to the node server 202, the Electron desktop client is also used to request the node server 202 to obtain session credential information; the node server 202 is used to generate session credential information when receiving the session credential information acquisition request sent by the Electron desktop client, and send the session credential information to the Electron desktop client, so that the WebSocket client establishes a first WebSocket long connection with the node server 202 based on the session credential information.

[0067] Specifically, after receiving the session credential information acquisition request, the node server 202 can randomly generate session credential information, where the session credential information is the credential for establishing a connection with the node server 202 . Only a device with the session credential can establish a connection with the node server 202 .

[0068] The WebSocket server serves as a data transfer station for debugging data of the page to be debugged, HMR hot update data of the page to be debugged, and data related to Service Worker hijacking request forwarding. The WebSocket server can be connected to a debugging tool (e.g., Chrome Devtools Frontend debugging tool) to achieve communication between the node server 202 and the Chrome Devtools Frontend debugging tool, Webpack service, Hybrid application (hybrid mode mobile application), the page to be debugged, and Service Worker.

[0069] In this embodiment, after starting the Electron desktop client, it will also create a first module hot replacement client locally on the PC.

[0070] Specifically, the first module hot replacement client is a local WebSocket client created by the Electron desktop client, which is used to communicate with the module hot replacement server to realize the exchange of HMR hot update JSON data.

[0071] In this embodiment, in order to process the page code in time through the local project debugging service, after starting the Electron desktop client, it will also create a local project packaging service locally on the PC to start the local project debugging service through the local project packaging service.

[0072] Specifically, the local project packaging service is a Webpack development server created by a child process of the Electron client, which is used to execute and enable the local project debugging service and process the page code with the local project debugging service.

[0073] In this embodiment, the Electron desktop client is also used to add a first script for creating a second module hot replacement client and a second script for creating a module hot replacement server in the page code through the local project packaging service.

[0074] Specifically, the module hot replacement server is a WebSocket server created locally by Webpack when Webpack turns on DevServer mode, for the first module hot replacement client to connect to and provide HMR hot update JSON data.

[0075] Among them, the first script is a JavaScript script, which is used to replace the built-in module hot replacement client of Webpack. By adding the first script to the page code, a WebSocket long connection will be established with the built-in module hot replacement server of Webpack when the page code is loaded, which is used to exchange the JSON data of HMR hot update. In this embodiment, the second module hot replacement client created by the first script can change the default WebSocket long connection target address of the HMR hot update of the page to be debugged to the node server 202 address, which is used to forward the JSON data of HMR hot update to the node server 202.

[0076] Among them, Webpack is a module bundler whose main purpose is to bundle JavaScript code files that run on the browser.

[0077] It should be noted that HMR hot update, that is, hot module replacement, is a function that replaces, adds or deletes modules during the running of the application without reloading the entire page. It has the following characteristics:

[0078] 1. Preserve the page status (page status includes form, routing, etc.).

[0079] 2. Only update the changed content, and pack, load and render pages faster to save valuable development time.

[0080] 3. When CSS / JS is modified in the source code, it will be updated immediately in the browser, which is almost equivalent to changing the style directly in the browser devtools.

[0081] Among them, the second script is also a JavaScript script, which can be used to replace the built-in module hot replacement server of Webpack. Specifically, the core of the JavaScript script is to change the serverPath path of the built-in module hot replacement server to a custom path so that a WebSocket long connection can be established with the created module hot replacement client.

[0082] In an exemplary embodiment, when the first script and the second script are added to the page code through the local project packaging service, the configuration file code contained in the page code can be parsed to obtain gitignore and git filemode configurations, and the first script and the second script are added to the configuration file obtained after parsing. After the first script and the second script are added, a new project configuration file can be generated according to the existing config configuration file.

[0083] In this embodiment, after the local project packaging service completes adding the first script and the second script to the page code, the local project debugging service can create a module hot replacement service end according to the second script.

[0084] The local project debugging service may also package the page code including the first script to generate a page code file directory.

[0085] The local project debugging service is a Dev running service of a local front-end project based on Webpack.

[0086] The page code file directory refers to the dist file, which includes multiple files. For example, the dist file contains the project static resource html, css, js files, etc.

[0087] In this embodiment, the local project debugging service is also used to add a code segment for loading a third script of Service Worker in a preset file in the page code file directory, and to add the third script to the page code file directory.

[0088] Among them, Service Worker is an event-driven Worker registered under the specified source and path. It uses JavaScript to control the associated page or website, intercept and modify access and request resources, and cache resources in a fine-grained manner. It essentially acts as a proxy server between web applications, browsers, and the network. It runs in the Worker context, that is, in other threads rather than the browser main thread, so it cannot access the page DOM and will not cause blocking. It can only be carried by HTTPS and is a thread that is completely asynchronous with the browser main thread.

[0089] In this embodiment, when loading a page to be debugged, Service Worker can intercept all HTTP / HTTPS network requests in the current page to be debugged, modify the network request and response results, and then return them to the current page to be debugged as the network request result of the current page to be debugged. In this embodiment, a code segment for loading the Service Worker script can be pre-added in the page code file directory, so that when loading the page code, another thread can be started through the code segment to run the third script of the Service Worker to take over the current page to be debugged.

[0090] In this embodiment, the preset file is a pre-set file for adding code segments, which is specifically an html file in the page code file target.

[0091] In this embodiment, after adding the code segment, the third script of the JavaScript of the Service Worker can be placed in the page code file directory, so that the ServiceWorker script can be packaged together with other static resource files in the page code file directory through the Electron desktop client to generate a page code file package, and the page code file package can be uploaded to the node server 202.

[0092] In an exemplary implementation, the page code file directory containing the third script can be packaged into a tar package through the Electron desktop client. In this way, the Electron desktop client can upload the tar package to the node server 202 via an HTTP request. Specifically, the Electron desktop client can put the tar package into the request body of the HTTP request.

[0093] The node server 202 is used to deploy the received page code to the static resource service and return the network address of the static resource service to the debugging device 200 .

[0094] Specifically, the node server 202 can be deployed in a public network environment to carry API interface services, manage WebSocket long connection data interaction, receive, decompress, and manage session credentials (Session ID) and project static resources of different clients, and provide static resource services, etc. The static resource service is a container in the node server 202 for storing page codes.

[0095] In this embodiment, after receiving the page code uploaded by the debugging device 200 , the node server 202 deploys the received page code to the static resource service and returns the network address of the static resource service to the debugging device 200 .

[0096] In an exemplary embodiment, when the page code received by the node server 202 is a page code file package generated by packaging through the Electron desktop client, the node server 202 is also used to decompress the page code file package to generate a first code file, and deploy the generated first code file to the static resource service, and return the network address of the static resource service to the Electron desktop client.

[0097] It is understandable that when the page code received by the node server 202 is in the form of a file package, the page code file package needs to be decompressed first, and then the decompressed first code file will be deployed to the static resource service, so that the device 201 to be debugged can obtain the first code file from the static resource service.

[0098] In an exemplary embodiment, in order to quickly find the page code (or the first code file) stored in the static resource service, the node server 202 can create a directory named after the session credential information in the static resource service after generating the session credential information. In this way, when the page code file (or the first code file) is subsequently deployed, the received page code file package can be decompressed, and the page code obtained after decompression can be deployed to the directory named after the session credential information.

[0099] The device to be debugged 201 is used to obtain the network address from the debugging device 200, and obtain and load the page code from the static resource service according to the network address to open the page to be debugged.

[0100] Specifically, the device to be debugged 201 is a device that needs to be debugged by the debugging device 200. In this embodiment, when debugging the device to be debugged 201, the device to be debugged 201 will first obtain the network address from the debugging device 200, so that the page code can be obtained and loaded from the static resource server according to the network address, thereby opening the page to be debugged.

[0101] The debugging device 200 is further used to debug the page to be debugged by using a debugging tool installed in the debugging device 200 .

[0102] Specifically, the debugging tool is a tool required to be used in the process of remote debugging of the device to be debugged 201. In this embodiment, when debugging, after opening the page to be debugged, the debugging tool can be used to directly perform remote page debugging on the page to be debugged. Among them, page debugging can include page debugging operations such as reviewing elements, console printing, viewing network, memory management, etc.

[0103] In an exemplary implementation, the device to be debugged 201 may include an Android device installed with the hybrid mode mobile application. The Android device refers to a device using the Android system.

[0104] The debugging tools include the Chrome Devtools Frontend debugging tool. The Chrome Devtools Frontend debugging tool is based on the Chrome Devtools Protocol cross-end debugging protocol for page debugging. The protocol is based on JSON format data for page debugging data interaction. There is no device restriction. Most mainstream browsers and Webviews based on Chromium and Blink kernels on the market can be used to implement cross-end debugging.

[0105] The hybrid mode mobile application is used to obtain and load the first code file from the static resource service to open the page to be debugged.

[0106] Specifically, in order to enable the hybrid mode mobile application to conveniently obtain and load the first code file from the static resource service, the Electron desktop client can generate a corresponding identification code according to the network address after receiving the network address returned by the node server 202, wherein the identification code can be a QR code, a barcode, etc. In this way, when the hybrid mode mobile application needs to obtain the first code file, it can scan the barcode to obtain the network address from the barcode, and then obtain and load the first code file from the static resource service according to the network address to open the page to be debugged.

[0107] In one embodiment, in order to facilitate the subsequent hybrid mode mobile application to establish a WebSocket persistent connection with the node server 202, the Electron desktop client can also splice the session credential information with the network address, and generate a corresponding identification code based on the character information obtained after splicing; the hybrid mode mobile application is also used to establish the fourth WebSocket persistent connection with the node server 202 based on the session credential information identified from the identification code.

[0108] The hybrid mode mobile application is also used to load the third script according to the code segment in the first code file, intercept the network request of the page to be debugged through the third script, and create the second module hot replacement client according to the first script in the first code file.

[0109] Specifically, since the acquired first page code contains a code segment for loading the third script (ServiceWorker's script), the Service Worker's script can be loaded simultaneously during the process of loading the acquired first page code file, and the network request of the page to be debugged can be intercepted by the Service Worker, so that the request address of the intercepted network request can be modified to the API interface service address of the node server 202.

[0110] In an exemplary embodiment, when the Service Worker modifies the request address of the intercepted network request to the API interface service address of the node server 202, the node server 202 will send the network request to the WebSocket client through the first WebSocket long connection. After receiving the network request, the WebSocket client performs domain name resolution on the network request through the Electron desktop client, and sends the network request to the server according to the address obtained after resolution. After receiving the network request, the server can respond to the network request.

[0111] Among them, the server-side server is the server for deploying API interface services, which is usually deployed in multiple environments, such as testing, PRE, and formal environments, and is used for front-end and back-end joint debugging at different stages.

[0112] In an exemplary embodiment, when the node server 202 receives the network request through the API interface service address, it will parse the network request and encapsulate the first network request obtained after parsing into a second network request including a request sequence number, a request address, a request method, a request header and a request body.

[0113] In an exemplary embodiment, after receiving the network request, the service-side server will respond to the network request to generate a response result, and return the response result to the Electron desktop client. In this embodiment, when the Electron desktop client receives the response result returned by the service-side server, it can encapsulate the response result and send the encapsulated first response result to the node server 202 through the WebSocket client; then, the node server 202 will parse the received first response result and return the second response result obtained after parsing to the Service Worker, so that the Service Worker uses the second response result as the response result of the network request contained in the page to be debugged.

[0114] In one embodiment, in order to facilitate the analysis of the response result, after the Electron desktop client receives the first response result, it will encapsulate the received first response result into a second response result including a response sequence number, a response status code, response status information, a response header and a response body.

[0115] The second module hot replacement client is used to establish a second WebSocket persistent connection with the node server 202 .

[0116] Specifically, the second module hot replacement client is a WebSocket client created when loading the first page code file, and is used to establish a WebSocket long connection with the node server 202 to exchange HMR hot update JSON data. In this embodiment, after receiving the HMR hot update JSON data, the second module hot replacement client will actively load the packaged hot module file to replace the local module in the page to be debugged, so as to achieve the effect of hot update.

[0117] The hybrid mode mobile application is also used to enable the Webview debugging mode, so that the Android device calls the Chromium kernel to create a Unix Domain Socket server according to the Webview debugging mode.

[0118] Specifically, Webview debugging mode is a mode for remote debugging of applications. The Unix DomainSocket server is a service for providing external connections, communications, and exchange of JSON data for hybrid page debugging. Its process ID format is @webview_devtools_remote_${pid}, where pid is the Webview process ID. When the Unix Domain Socket server communicates with the hybrid application, it uses an IPC (Inter-Process-Communication) communication method based on the file system that does not require network transmission. This communication method does not require network packaging, verification, and unpacking, and is more reliable and efficient.

[0119] The hybrid mode mobile application is further used to establish a third WebSocket persistent connection with the Unix Domain Socket server, and to establish a fourth WebSocket persistent connection with the node server 202 .

[0120] Specifically, when the hybrid mode mobile application establishes the fourth WebSocket persistent connection with the node server 202, the session credential information can be first identified from the identification code, and then the fourth WebSocket persistent connection can be established with the node server 202 based on the session credential information, so that the debugging JSON data of the page to be debugged can be exchanged with the node server 202 through the fourth WebSocket persistent connection.

[0121] In an exemplary embodiment, the Unix Domain Socket server has corresponding process identification information, and the hybrid mode mobile application is further used to obtain process identification information of multiple processes currently opened in the Android device, and search for the Unix Domain Socket server according to each process identification information; the hybrid mode mobile application is further used to initiate a handshake request to the Unix Domain Socket server, and after the handshake is successful, send a protocol upgrade instruction to the Unix Domain Socket server to upgrade the current communication protocol to the WebSocket protocol.

[0122] Specifically, the process identification information is information used to distinguish different processes. The hybrid mode mobile application can use the LocalSocket library to find the corresponding process of the Unix Domain Socket server according to the process identification information of each currently opened process, and then initiate a handshake request to the found process. After the handshake is successful, an HTTP message is sent to the Socket socket to upgrade the current communication protocol to the WebSocket protocol. After the upgrade is successful, the hybrid mode mobile application can communicate with the Unix Domain Socket Server server through corresponding messages based on the WebSocket protocol.

[0123] The WebSocket client is also used to open a desktop debugging window and load the Chrome Devtools Frontend debugging tool in the desktop debugging window.

[0124] Specifically, the Chrome Devtools Frontend debugging tool is used to debug the front-end UI of the page. It can be separated from the Chromium kernel and run independently as a front-end project. It communicates with the Chromium kernel through the WebSocket protocol to exchange debugging data in JSON format, thereby achieving the development effect of Chrome's built-in Devtools.

[0125] The Chrome Devtools Frontend debugging tool is used to establish a fifth WebSocket persistent connection with the WebSocket server, so as to debug the page to be debugged by exchanging debugging data with the Chromium kernel through the fifth WebSocket persistent connection.

[0126] Specifically, when the Chrome Devtools Frontend debugging tool establishes the fifth WebSocket persistent connection with the WebSocket server, it can first obtain the address information of the WebSocket server through the WebSocket client, and then establish a WebSocket persistent connection with the WebSocket server according to the obtained address information of the WebSocket server.

[0127] In one embodiment, when the Chrome Devtools Frontend debugging tool debugs the page to be debugged through the fifth WebSocket persistent connection, it can send a debugging request to the WebSocket server through the fifth WebSocket persistent connection, so that the WebSocket server can sequentially send the debugging request to the Unix Domain Socket server through the WebSocket client, the channel of the first WebSocket persistent connection, the channel of the fourth WebSocket persistent connection, and the channel of the third WebSocket persistent connection, thereby debugging the page to be debugged.

[0128] In another embodiment, when the debugging tool debugs the page to be debugged through the fifth WebSocket persistent connection, it can also send a debugging information acquisition request of the Hybrid page to be debugged to the WebSocket server through the fifth WebSocket persistent connection, so that the WebSocket server can sequentially send the debugging information acquisition request to the UnixDomain Socket server through the WebSocket client, the channel of the first WebSocket persistent connection, the channel of the fourth WebSocket persistent connection, and the channel of the third WebSocket persistent connection, thereby acquiring the debugging information of the page to be debugged from the Unix Domain Socket server and performing debugging operations according to the acquired debugging information.

[0129] In an exemplary embodiment, in order to debug the page to be debugged in a timely manner, the hybrid mode mobile application is also used to send a signal that the debugging channel of the page to be debugged has been opened to the node server 202 through the fourth WebSocket long connection after establishing a fourth WebSocket long connection with the node server 202; the node server 202 is also used to send the signal to the WebSocket client through the first WebSocket long connection after receiving the signal, so that the WebSocket client opens the desktop debugging window after receiving the signal.

[0130] In this embodiment, the desktop debugging window is opened only when a signal indicating that the debugging channel has been opened is received, so as to officially start page debugging of the page to be debugged.

[0131] The node server 202 is further used to notify the Electron desktop client to establish a sixth WebSocket persistent connection between the first module hot replacement client and the module hot replacement server through the first WebSocket persistent connection after the second WebSocket persistent connection is established, so as to implement hot update of the page through the sixth WebSocket persistent connection.

[0132] Specifically, after the second WebSocket long connection is established, the node server 202 will notify the Electron desktop client through the first WebSocket long connection to establish a sixth WebSocket long connection between the first module hot replacement client and the module hot replacement server. In this way, the second module hot replacement client can send the page hot update data request to the module hot replacement server through the channel of the second WebSocket long connection, the channel of the first WebSocket long connection, and the channel of the sixth WebSocket long connection in sequence, so as to obtain the data of the page hot update.

[0133] In an exemplary embodiment, when the page code is modified, the Electron desktop client can also send the modified page code to the second module hot replacement client through the module hot replacement server in sequence through the channel of the sixth WebSocket long connection, the channel of the first WebSocket long connection, and the channel of the second WebSocket long connection, so as to implement hot update of the page according to the modified page code through the second module hot replacement client.

[0134] In an exemplary implementation, the device to be debugged 201 further includes an iOS simulator, and the debugging tool further includes a Safari browser, wherein:

[0135] The Electron desktop client is also used to create AppleScript automation services and iOS Simulator automation services.

[0136] Specifically, AppleScript is a scripting language created by Apple for MacOS 7.1 and later. It allows users to directly control scriptable MacOS applications and some built-in functions and applications of MacOS itself. It can help users use AppleScript scripts in MacOS to control applications such as System Events, Safari browser, iOS Simulator simulator, etc. The AppleScript automation service written in this AppleScript can be used to open the Safari developer tools of the Safari browser.

[0137] The iOS simulator automation service uses the node-simctl third-party library to execute the xcrun simctl command to control the iOS simulator, including starting and shutting down the simulator, installing apps, opening URLs, etc.

[0138] Among them, xcrun is a command line tool provided by the Xcode application under MacOS, which is used to control Xcode development-related functions.

[0139] simctl is a subcommand of the xcrun tool, which is used to control the simulator and provides functions such as starting and shutting down the simulator, installing applications, and opening URLs.

[0140] node-simctl is a Node version of the simctl tool provided by Appium. It is used to control the iOS Simulator in a Node program.

[0141] The Electron desktop client is also used to open the iOS simulator through the iOS simulator automation service, and after the iOS simulator is opened, install the hybrid mode mobile application through the iOS simulator automation service, and after the hybrid mode mobile application is installed, open the network address in the iOS simulator through the iOS simulator automation service, so that the hybrid mode mobile application calls the WKWebview kernel to load the page to be debugged.

[0142] Specifically, the iOS simulator is a software used to simulate a real iOS device. In this embodiment, in order to save time required during the debugging process, the iOS simulator is automatically started through the iOS simulator automation service, and after the iOS simulator is started, the hybrid mode mobile application is installed through the iOS simulator automation service, and after the hybrid mode mobile application is installed, the network address is opened in the iOS simulator through the iOS simulator automation service, thereby achieving fully automated installation of the hybrid mode mobile application in the iOS simulator and opening the page to be debugged through the hybrid mode mobile application.

[0143] The WKWebView kernel is the core part of the modern WebKit API in iOS 8 and OS X Yosemite applications. It replaces UIWebView in UIKit and WebView in AppKit, providing a unified cross-platform API (iOS and OS).

[0144] In an exemplary implementation, in order to avoid having multiple iOS simulators opened at the same time, in this embodiment, when opening the iOS simulator through the iOS simulator automation service, the Electron desktop client can first close all currently opened iOS simulators through the iOS simulator automation service, and after all iOS simulators are closed, reopen the default or user-selected iOS simulator. Afterwards, the hybrid mode mobile application can be installed through the iOS simulator automation service.

[0145] In an exemplary embodiment, after completing the installation of the hybrid mode mobile application, the Electron desktop client can also install the test environment certificate (eg, SSL certificate) through the iOS simulator automation service so that the hybrid mode mobile application can access the HTTPS service of the test environment.

[0146] In an exemplary embodiment, after the Electron desktop client opens the network address in the iOS simulator through the iOS simulator automation service, the hybrid mode mobile application can be started through the URL Schema, so that the hybrid mode mobile application can call the WKWebview kernel to load the page to be debugged.

[0147] Among them, URL Schema is currently supported by most apps. It has the function of waking up the app and opening the corresponding page when the URL is opened in the browser of a real device.

[0148] Since iOS 8, WKWebview has gradually replaced UIWebview and become the main Webview used by iOS App. WKWebview is based on the Webkit kernel.

[0149] In an exemplary implementation, the hybrid mode mobile application calls the WKWebview kernel to load the page to be debugged, including: the hybrid mode mobile application calls the WKWebview kernel to start the WKWebview kernel debugging service, and calls the WKWebview kernel to render the page to be debugged using the Webkit engine.

[0150] Specifically, the WKWebview kernel debugging service is the Webview debugging service enabled locally by the WKWebview kernel, similar to the Chromium kernel debugging service of Android. However, due to the limitations of iOS, third-party applications cannot control the rendering and internal debugging of WKWebview under normal circumstances, nor can they access the WKWebview kernel debugging service. Only the Safari developer tool can communicate with and debug the service, and the debugging protocol is based on the Webkit-like kernel debugging protocol. After enabling the kernel debugging service, the WKWebview kernel will use the Webkit engine to render the page to be debugged.

[0151] The Electron desktop client is also used to open Safari developer tools from the Safari browser via AppleScript automation services.

[0152] Specifically, the Electron desktop client can simulate clicking the Safari developer tool in the Safari browser through the AppleScript automation service to open the Safari developer tool.

[0153] The Safari developer tool is a tool provided by the Safari browser for debugging an iOS real device or simulator. It is similar to the Chrome Devtools tool and can perform debugging functions such as element review, console printing, and management of Network requests.

[0154] The Safari developer tool is used to establish a connection channel with the WKWebview kernel through the Safari debugging protocol, and debug the page to be debugged through the connection channel.

[0155] Specifically, after establishing a connection channel, the Safari developer tool and the WKWebview kernel debugging service of the iOS simulator can communicate based on the Webkit-like debugging protocol, exchange page debugging data, and perform fully functional page debugging.

[0156] The hybrid mode mobile application debugging system in this application allows front-end developers to directly use a single PC software to develop regular front-end projects locally, display page effects on real devices and simulators, and perform complete front-end page function debugging directly on the PC software, and preview the real effect of the interaction between the front-end and Native directly on the real device, greatly improving the convenience and efficiency of front-end developers in developing hybrid projects.

[0157] Reference Figure 3 , which is a hybrid mode mobile application debugging method of an embodiment of the present application, applied to a debugging system including a debugging device, a node server and a device to be debugged, wherein the debugging system is the debugging system in the above embodiment and will not be repeated in this embodiment.

[0158] In this embodiment, the method includes:

[0159] Step S30, uploading the page code of the hybrid mode mobile application to be debugged to the node server through the debugging device;

[0160] Step S31, deploying the received page code to the static resource service through the node server, and returning the network address of the static resource service to the debugging device;

[0161] Step S32, obtaining the network address from the debugging device through the device to be debugged, and obtaining and loading the page code from the static resource service according to the network address to open the page to be debugged;

[0162] Step S33: Debug the page to be debugged by using a debugging tool installed in the debugging device.

[0163] The hybrid mode mobile application debugging method in this application allows front-end developers to directly use a single PC software to develop regular front-end projects locally, display page effects on real devices and simulators, and perform complete front-end page function debugging directly on the PC software, and preview the real effect of the interaction between the front-end and Native directly on the real device, greatly improving the convenience and efficiency of front-end developers in developing hybrid projects.

[0164] The device embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on at least two network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the embodiment scheme of the present application. Those of ordinary skill in the art may understand and implement it without creative labor.

[0165] Through the description of the above implementation methods, ordinary technicians in this field can clearly understand that each implementation method can be implemented by means of software plus a general hardware platform, and of course, it can also be implemented by hardware. Ordinary technicians in this field can understand that all or part of the processes in the above-mentioned embodiment method can be completed by instructing related hardware through a computer program, and the program can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, the storage medium can be a disk, an optical disk, a read-only memory (ROM) or a random access memory (RAM), etc.

[0166] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit it. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or replace some or all of the technical features therein with equivalents. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present application.

Claims

1. A hybrid mode mobile application debugging system, characterized in that the application debugging system includes a debugging device, a node server and a device to be debugged, wherein: The debugging device is used to upload the page code of the hybrid mode mobile application to be debugged to the node server; The node server is used to deploy the received page code to the static resource service and return the network address of the static resource service to the debugging device; The device to be debugged is used to obtain the network address from the debugging device, and obtain and load the page code from the static resource service according to the network address to open the page to be debugged; The debugging device is further used to debug the page to be debugged through a debugging tool installed in the debugging device; The debugging device further includes an Electron desktop client and a local project debugging service installed in the debugging device, wherein: The Electron desktop client is used to create a local project packaging service, a WebSocket client, a WebSocket server, a first module hot replacement client, and to establish a first WebSocket long connection with the node server through the WebSocket client; The Electron desktop client is further used to add a first script for creating a second module hot replacement client and a second script for creating a module hot replacement server in the page code through the local project packaging service, and to start the local project debugging service through the local project packaging service; The local project debugging service is used to create a module hot replacement server according to the second script; The local project debugging service is further used to package the page code including the first script to generate a page code file directory; The local project debugging service is further used to add a code segment for loading a third script of the Service Worker in a preset file in the page code file directory, and to add the third script to the page code file directory; The Electron desktop client is further used to package the page code file directory containing the third script to generate a page code file package, and upload the page code file package to the node server; The node server is also used to decompress the page code file package to generate a first code file, deploy the generated first code file to the static resource service, and return the network address of the static resource service to the Electron desktop client.

2. The hybrid mode mobile application debugging system according to claim 1, characterized in that: The device to be debugged includes an Android device installed with the hybrid mode mobile application, and the debugging tool includes the Chrome Devtools Frontend debugging tool, wherein: The hybrid mode mobile application is used to obtain and load the first code file from the static resource service to open the page to be debugged; The hybrid mode mobile application is further used to load the third script according to the code segment in the first code file, intercept the network request of the page to be debugged through the third script, and create the second module hot replacement client according to the first script in the first code file; The second module hot-replaces the client, and is used to establish a second WebSocket persistent connection with the node server; The hybrid mode mobile application is further used to enable the Webview debugging mode, so that the Android device calls the Chromium kernel to create a Unix Domain Socket server according to the Webview debugging mode; The hybrid mode mobile application is further used to establish a third WebSocket persistent connection with the Unix Domain Socket server, and to establish a fourth WebSocket persistent connection with the node server; The WebSocket client is also used to open a desktop debugging window and load the Chrome Devtools Frontend debugging tool in the desktop debugging window; The Chrome Devtools Frontend debugging tool is used to establish a fifth WebSocket persistent connection with the WebSocket server, so as to debug the page to be debugged by exchanging debugging data with the Chromium kernel through the fifth WebSocket persistent connection; The node server is further used to notify the Electron desktop client to establish a sixth WebSocket persistent connection between the first module hot replacement client and the module hot replacement server through the first WebSocket persistent connection after the second WebSocket persistent connection is established, so as to implement hot update of the page through the sixth WebSocket persistent connection.

3. The hybrid mode mobile application debugging system according to claim 2, characterized in that: The device to be debugged also includes an iOS simulator, and the debugging tool also includes a Safari browser, wherein: The Electron desktop client is also used to create AppleScript automation services and iOS simulator automation services; The Electron desktop client is further used to open the iOS simulator through the iOS simulator automation service, and after the iOS simulator is opened, install the hybrid mode mobile application through the iOS simulator automation service, and after the hybrid mode mobile application is installed, open the network address in the iOS simulator through the iOS simulator automation service, so that the hybrid mode mobile application calls the WKWebview kernel to load the page to be debugged; The Electron desktop client is also used to open the Safari developer tools from the Safari browser via the AppleScript automation service; The Safari developer tool is used to establish a connection channel with the WKWebview kernel through the Safari debugging protocol, and debug the page to be debugged through the connection channel.

4. The hybrid mode mobile application debugging system according to claim 3, characterized in that: The Electron desktop client is also used to close all currently enabled iOS simulators through the iOS simulator automation service, and reopen the selected iOS simulator after all iOS simulators are closed.

5. The hybrid mode mobile application debugging system according to claim 2, characterized in that: The hybrid mode mobile application is further configured to send a signal that the debugging channel of the page to be debugged has been opened to the node server through the fourth WebSocket persistent connection after establishing a fourth WebSocket persistent connection with the node server; The node server is further configured to, after receiving the signal, send the signal to the WebSocket client through the first WebSocket long connection, so that the WebSocket client opens the desktop debugging window after receiving the signal.

6. The hybrid mode mobile application debugging system according to claim 1, characterized in that: The Electron desktop client is also used to request the node server to obtain session credential information; The node server is used to generate session credential information when receiving a session credential information acquisition request sent by the Electron desktop client, and send the session credential information to the Electron desktop client, so that the WebSocket client establishes a first WebSocket long connection with the node server according to the session credential information.

7. The hybrid mode mobile application debugging system according to claim 6, characterized in that: The node server is further used to create a directory named after the session credential information is generated in the static resource service, and deploy the first code file to the directory named after the session credential information.

8. The hybrid mode mobile application debugging system according to claim 2, characterized in that: The Unix Domain Socket server has corresponding process identification information, and the hybrid mode mobile application is further used to obtain process identification information of multiple processes currently opened in the Android device, and search for the Unix Domain Socket server according to each process identification information; The hybrid mode mobile application is further configured to initiate a handshake request to the Unix Domain Socket server, and after the handshake succeeds, send a protocol upgrade instruction to the Unix Domain Socket server to upgrade the current communication protocol to the WebSocket protocol.

9. The hybrid mode mobile application debugging system according to claim 2, characterized in that: The ChromeDevtools Frontend debugging tool is further used to send a debugging information acquisition request of a Hybrid page to be debugged to the WebSocket server through the fifth WebSocket persistent connection, so that the WebSocket server sequentially sends the debugging information acquisition request to the Unix DomainSocket server through the WebSocket client, the channel of the first WebSocket persistent connection, the channel of the fourth WebSocket persistent connection, and the channel of the third WebSocket persistent connection to obtain debugging information of the page to be debugged from the Unix Domain Socket server.

10. A hybrid mode mobile application debugging method, applied to a debugging system including a debugging device, a node server and a device to be debugged, characterized in that: The method comprises: Uploading the page code of the hybrid mode mobile application to be debugged to the node server through the debugging device; Deploy the received page code to the static resource service through the node server, and return the network address of the static resource service to the debugging device; Obtaining the network address from the debugging device through the device to be debugged, and obtaining and loading the page code from the static resource service according to the network address to open the page to be debugged; Debugging the page to be debugged by using a debugging tool installed in the debugging device; The debugging device further includes an Electron desktop client and a local project debugging service installed in the debugging device, wherein: Create a local project packaging service, a WebSocket client, a WebSocket server, and a first module hot replacement client through the Electron desktop client, and establish a first WebSocket long connection between the WebSocket client and the node server; Through the Electron desktop client, the local project packaging service adds a first script for creating a second module hot replacement client and a second script for creating a module hot replacement server in the page code, and enables the local project packaging service to start the local project debugging service; Creating a module hot replacement server according to the second script through the local project debugging service; By means of the local project debugging service, the page code including the first script is packaged to generate a page code file directory; By using the local project debugging service, a code segment for loading a third script of the Service Worker is added to a preset file in the page code file directory, and the third script is added to the page code file directory; By means of the Electron desktop client, the page code file directory containing the third script is packaged to generate a page code file package, and the page code file package is uploaded to the node server; Through the node server, the page code file package is decompressed to generate a first code file, and the generated first code file is deployed to the static resource service, and the network address of the static resource service is returned to the Electron desktop client.

11. A computer program product comprising computer instructions, characterized in that: When the computer instructions are executed by a processor, the steps of the method according to claim 10 are implemented.

Images