CN107688529B - Component debugging method and device - Google Patents
Component debugging method and device Download PDFInfo
- Publication number
- CN107688529B CN107688529B CN201710091768.8A CN201710091768A CN107688529B CN 107688529 B CN107688529 B CN 107688529B CN 201710091768 A CN201710091768 A CN 201710091768A CN 107688529 B CN107688529 B CN 107688529B
- Authority
- CN
- China
- Prior art keywords
- debugging
- component
- browser
- instruction
- plug
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/362—Software debugging
- G06F11/3648—Software debugging using additional hardware
- G06F11/3656—Software debugging using additional hardware using a specific debug interface
Landscapes
- Engineering & Computer Science (AREA)
- Computer Hardware Design (AREA)
- Theoretical Computer Science (AREA)
- Quality & Reliability (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
The invention discloses a component debugging method, which is applied to a browser, wherein the browser is provided with a debugging plug-in, and the component debugging method comprises the following steps: when an assembly debugging instruction is received, determining an assembly to be debugged corresponding to the debugging instruction; calling an Application Program Interface (API) of the browser through the installed debugging plug-in; and executing debugging operation on the component to be debugged on a preset page of the browser based on the called API. The invention also discloses a device for debugging the component. According to the method and the device, the API is called in the browser based on the installed debugging plug-in, so that the debugging of the component can be realized in the preset page of the browser, the debugging of the component is more convenient, the debugging process can be displayed in the preset page, the debugging condition can be intuitively known, and the debugging of the component is more accurate and intelligent.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a method and a device for debugging a component.
Background
The traditional component debugging is generally realized in a mobile terminal provided with an IOS operating system or an Android operating system, the mobile terminal needs to be connected in the debugging process, if the mobile terminal is not connected, the debugging can not be carried out, and the limitation of the component debugging is large; moreover, when the debugging of the component is carried out in the mobile terminal, the visual operation process cannot be presented, and a user cannot visually know the debugging condition, so that the debugging of the component is not accurate and intelligent enough.
Disclosure of Invention
The invention mainly aims to provide a method and a device for debugging a component, and aims to solve the technical problems that the existing component debugging mode has large limitation on component debugging and the debugging of the component is not accurate and intelligent enough.
In order to achieve the above object, the present invention provides a component debugging method, which is applied to a browser, where the browser is installed with a debugging plug-in, and the component debugging method includes:
when an assembly debugging instruction is received, determining an assembly to be debugged corresponding to the debugging instruction;
calling an Application Program Interface (API) of the browser through the installed debugging plug-in;
and executing debugging operation on the component to be debugged on a preset page of the browser based on the called API.
Preferably, when receiving a component debugging instruction, the step of determining the component to be debugged corresponding to the debugging instruction includes:
when a component debugging instruction is received, judging whether a preset debugger colludes a component or not;
and if the debugger selects the component, taking the selected component as the component to be debugged corresponding to the debugging instruction.
Preferably, after the step of determining whether a component is checked in a preset debugger when the component debugging instruction is received, the component debugging method further includes:
if the debugger does not check the component, displaying a component selection window in a debugging interface of the debugging plug-in;
and taking the component selected by the outside on the basis of the component selection window as the component to be debugged corresponding to the debugging instruction.
Preferably, the component debugging method further includes:
when a debugging data updating instruction of the component is received, displaying a debugging interface of the debugging plug-in so that the external world can update the debugging data of the component in the debugging interface;
acquiring debugging data updated based on the debugging interface;
transmitting the updated debugging data to the preset page of the browser, so as to execute debugging operation based on the updated debugging data in the preset page.
Preferably, before the step of determining the component to be debugged corresponding to the debugging instruction when the component debugging instruction is received, the component debugging method further includes:
setting a communication mechanism for the preset page of the browser;
and setting the debugging plug-in of the browser as a communication object.
In addition, to achieve the above object, the present invention further provides a component debugging apparatus, which is applied to a browser, where the browser is installed with a debugging plug-in, and the component debugging apparatus includes:
the device comprises a determining module, a debugging module and a debugging module, wherein the determining module is used for determining a component to be debugged corresponding to a debugging instruction when the component debugging instruction is received;
the calling module is used for calling an Application Program Interface (API) of the browser through the installed debugging plug-in;
and the debugging module is used for executing debugging operation on the component to be debugged on a preset page of the browser based on the called API.
Preferably, the determining module comprises:
the device comprises a judging unit, a debugging unit and a judging unit, wherein the judging unit is used for judging whether a preset debugger colludes a component or not when receiving a component debugging instruction;
and the determining unit is used for taking the selected component as the component to be debugged corresponding to the debugging instruction if the component is selected in the debugger.
Preferably, the determining module further comprises:
the display unit is used for displaying a component selection window in a debugging interface of the debugging plug-in if the component is not checked in the debugger;
the determining unit is further configured to use an external component selected based on the component selection window as the component to be debugged corresponding to the debugging instruction.
Preferably, the component debugging apparatus further includes:
the display module is used for displaying the debugging interface of the debugging plug-in when a debugging data updating instruction of the component is received so that the external world can update the debugging data of the component in the debugging interface;
the acquisition module is used for acquiring debugging data updated based on the debugging interface;
the transmission module is used for transmitting the updated debugging data to the preset page of the browser so as to execute debugging operation based on the updated debugging data in the preset page.
Preferably, the component debugging apparatus further includes:
the setting module is used for setting a communication mechanism for the preset page of the browser;
the setting module is further used for setting the debugging plug-in of the browser as a communication object.
The method and the device for debugging the components are applied to a browser, when a component debugging instruction is received, the component to be debugged corresponding to the debugging instruction is determined, then the API of the browser is called through the installed debugging plug-in, and finally debugging operation is executed on a preset page of the browser on the component to be debugged based on the called API. The debugging plug-in based on installation calls API in the browser, can realize the debugging of subassembly in the preset page of browser, even do not throw out the mobile terminal, also can carry out the debugging of subassembly, and is more convenient to the debugging of subassembly to the debugging process can show in the preset page, the condition of the debugging of being convenient for directly perceivedly to know, and is more accurate and intelligent to the debugging of subassembly.
Drawings
FIG. 1 is a flowchart illustrating a first embodiment of a method for debugging a device according to the present invention;
FIG. 2 is a schematic diagram of a first detailed flowchart of step S10 in FIG. 1;
FIG. 3 is a schematic diagram of a second detailed flowchart of step S10 in FIG. 1;
FIG. 4 is a flowchart illustrating a second embodiment of a method for debugging a device according to the present invention;
FIG. 5 is a flowchart illustrating a third embodiment of a method for debugging a component according to the present invention
FIG. 6 is a functional block diagram of a device debugging apparatus according to a first embodiment of the present invention;
FIG. 7 is a schematic diagram of a first refinement function module of the determination module 10 of FIG. 6;
FIG. 8 is a schematic diagram of a second refinement function module of the determination module 10 of FIG. 6;
FIG. 9 is a functional block diagram of a device debugging apparatus according to a second embodiment of the present invention;
fig. 10 is a functional block diagram of a device debugging apparatus according to a third embodiment of the present invention.
The implementation, functional features and advantages of the objects of the present invention will be further explained with reference to the accompanying drawings.
Detailed Description
It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
The solution of the embodiment of the invention is mainly as follows: when an assembly debugging instruction is received, determining an assembly to be debugged corresponding to the debugging instruction; calling an Application Programming Interface (API) of the browser through the installed debugging plug-in; and executing debugging operation on the component to be debugged on a preset page of the browser based on the called API. The problem of current subassembly debugging, it is great to the limitation of subassembly debugging, and the subassembly debugging is accurate intelligent enough is solved.
It should be noted that, in the prior art, the debugging of the component is not only realized by connecting the mobile terminal, but also the debugging process is invisible; moreover, in the debugging process, if the debugging data is to be modified, the original code of the original installation package needs to be modified to regenerate the installation package, and then the installation package is compiled and loaded, which takes a long time, resulting in low debugging efficiency of the component.
Just because the prior art has many defects in the way of debugging components through a mobile terminal, the component debugging is considered to be transferred to a browser for debugging.
However, when a conventional component is debugged in a browser, since the component is separated from a Native environment (i.e., Android and IOS operating system environments), when security and capability are limited, only script program codes can be input into the browser, and simple functions can be executed. However, for some functions of a high-level point, such as http (Hyper Text Transfer Protocol), cross-domain request, and modification of cookies (a technology for a website server to store a small amount of data in a hard disk or a memory of a client, or to read data from a hard disk of a client), which is not a domain name at present, information is stored in a computer by using a small Text file), cross-domain setting, or a popup function of a browser is realized, and the like, since no debugging code is provided inside a component, an API of the browser cannot be called, which results in failure to realize the function, that is, if a pure JS (JavaScript, direct translation scripting language) script simulating a native environment is used, simulation cannot be performed due to security problems and limited capability.
Based on the defects in the prior art, the invention provides a component debugging method.
Referring to fig. 1, fig. 1 is a flowchart illustrating a method for debugging a component according to a first embodiment of the present invention.
In this embodiment, the component debugging method is applied to a browser, where a debugging plug-in is installed in the browser, and the component debugging method includes:
when an assembly debugging instruction is received, determining an assembly to be debugged corresponding to the debugging instruction; calling an Application Program Interface (API) of the browser through the installed debugging plug-in; and executing debugging operation on the component to be debugged on a preset page of the browser based on the called API.
In this embodiment, a debugging plug-in is installed in a browser, where the type of the browser is not limited, and the browser may be a browser using a conventional IE kernel, such as an IE browser and a TT browser, or a browser using a dual-core CPU, such as a QQ high-speed browser and a dog-searching high-speed browser, or a google browser using a kernel (an engine behind the google browser), and so on. Because google browsers support javascript, Html5, and the like well and render pages fast, in this embodiment, the browser may preferably be a google browser. Installing a debugging plug-in a browser, namely actually adding a debugging plug-in the browser, wherein the debugging plug-in is written and set according to the actual situation, and the method is not limited here, so that the API of the browser can be called based on the debugging plug-in later.
In the embodiment, the components include, but are not limited to, a Hybird component, an Activity component, and a Service component, and for better understanding of the implementation, the following description should be taken as an example, and the description is preferably given by taking the Hybird component as an example. It should be noted that there is only one debug plug-in this embodiment, but the components include a plurality of debug plug-ins.
The following are specific steps for gradually implementing component debugging in this embodiment:
step S10, when receiving a component debugging instruction, determining a component to be debugged corresponding to the debugging instruction;
in this embodiment, the preset page is preferably an H5 (i.e., HTM L5, Hyper Text Markup L angle 5, 5 th generation hypertext Markup language) page, and hereinafter, where the preset page needs to be exemplified, an H5 page is taken as an example for explanation.
When receiving a component debug instruction, further determining a component to be debugged corresponding to the debug instruction, specifically, the implementation manner of step S10 includes:
1) in the first mode, referring to fig. 2, the step S10 includes:
step S11, when receiving the debugging command of the component, judging whether the preset debugger colludes the component;
and step S12, if the debugger selects the component, taking the selected component as the component to be debugged corresponding to the debugging instruction.
In this embodiment, when a component debugging instruction is received, it is first determined whether a component is hooked in a debugger associated with the browser. It is understood that a user may check components in the debugger in advance, specifically: and displaying each component option in the debugger, and when a user selects a corresponding component based on each component option displayed by the debugger, taking the selected component as a to-be-debugged component to be continued. If the selected component is selected in the debugger in advance, the selected component can be directly used as the component to be debugged corresponding to the debugging instruction.
In this embodiment, if the user selects a component in the debugger in advance, it is equivalent to debug the selected component, and then, when a debug instruction is received, the debug operation may be performed based on the previously selected component. The specific time when to select the components can be set according to actual needs.
2) In a second mode, referring to fig. 3, after the step S12, the step S10 further includes:
step S13, if the component is not selected in the debugger, displaying a component selection window in the debugging interface of the debugging plug-in;
and step S14, taking the component selected by the outside based on the component selection window as the component to be debugged corresponding to the debugging instruction.
Of course, if the component is not selected in the debugger in advance, the component selection window may be directly displayed in the debugging interface of the debugging plug-in, so that the user may select the corresponding component based on the component selection window, and the selected component is used as the component to be debugged.
In this embodiment, if the component is not checked in the debugger in advance, a component selection window may be displayed in the debugging interface where the debugging plug-in of the browser is located during debugging, so that the user may select the component, and the selected component may be used as the component to be debugged.
Step S20, calling an Application Program Interface (API) of the browser through the installed debugging plug-in;
and step S30, executing debugging operation on the component to be debugged on a preset page of the browser based on the called API.
In this embodiment, after determining the component to be debugged, the application program interface API of the browser may be called through the installed debugging plug-in, and then, based on the called API, a debugging operation is performed on the component to be debugged in a preset page of the browser. Wherein the debugging operations include, but are not limited to: http cross-domain request, modifying current non-domain cookies, cross-domain setting, or a popup function of a browser, and the like.
Because the above-mentioned ways of determining the component to be debugged include two ways, one is to check the component in the debugger, and the other is to select the component in the debugging interface of the debugging plug-in, executing the debugging operation on the component to be debugged on the preset page of the browser also includes two ways:
the method comprises the steps of capturing a function corresponding to a checked component from the debugger, and if the corresponding function is selected from the checked component in advance, directly executing debugging operation corresponding to the selected function on the component to be debugged on a preset page of the browser.
And capturing the function corresponding to the selected component from the debugging interface of the debugging plug-in, and if the corresponding function is selected in the selected component in advance, directly executing the debugging operation corresponding to the selected function on the component to be debugged on a preset page of the browser, for example, if the function selected in advance is an http cross-domain request, executing the operation of the http cross-domain request on the component to be debugged on the preset page of the browser.
It should be understood that after the components are checked, the data in the checked components can be changed later, and the data finally fed back to the H5 page for debugging is different, and if the components are not checked, the data in the components are not changed later, and the original data of the components are directly fed back to the H5 page for debugging.
In the embodiment, correspondingly, through the installed debugging plug-in, a Native environment is simulated, and the Hybird component successfully executes debugging operation on the H5 page of the browser to realize various debugging functions, so that development and debugging are facilitated, and visual debugging is performed through the debugging plug-in, so that the debugging of the component is more accurate, and even if a mobile terminal is lacked, the Hybird project can be directly run on the browser and developed and debugged.
The component debugging method provided by the embodiment is applied to a browser, when a component debugging instruction is received, a component to be debugged corresponding to the debugging instruction is determined, then the API of the browser is called through the installed debugging plug-in, and finally debugging operation is executed on a preset page of the browser for the component to be debugged based on the called API. The debugging plug-in based on installation calls API in the browser, can realize the debugging of subassembly in the preset page of browser, even do not throw out the mobile terminal, also can carry out the debugging of subassembly, and is more convenient to the debugging of subassembly to the debugging process can show in the preset page, the condition of the debugging of being convenient for directly perceivedly to know, and is more accurate and intelligent to the debugging of subassembly.
Further, in order to improve flexibility of component debugging, a second embodiment of the component debugging method according to the present invention is proposed based on the first embodiment, and in this embodiment, referring to fig. 4, the component debugging method further includes:
step S40, when a debugging data updating instruction of the component is received, displaying a debugging interface of the debugging plug-in so that the external world can update the debugging data of the component in the debugging interface;
step S50, acquiring debugging data updated based on the debugging interface;
step S60, transmitting the updated debugging data to the preset page of the browser, so as to execute a debugging operation based on the updated debugging data in the preset page.
It should be noted that steps S40 to S60 in the present embodiment may be operations performed after step S30, that is, after performing a debugging operation, updating and re-debugging the debugging data of the component; of course, the operation performed in the process of step S30 may also be the operation performed in the process of performing the debugging operation, that is, the debugging data of the component is updated to implement the debugging operation, and the specific manner is determined according to the actual situation, and is not limited herein.
In this embodiment, if a debug data update instruction of a component is received, a debug interface of the debug plug-in is displayed in the browser.
In this embodiment, the debugging interface of the debugging plug-in and the preset page of the browser, such as the H5 page, are two independent pages, the H5 page is the front page of the browser, and the debugging page of the debugging plug-in is a page displayed on the upper layer of the H5 page and is not covered by the H5 page. And the debugging interface is also different from the component selection window, and the component selection window is equivalent to a child window of the debugging interface.
It should be understood that, in the existing component debugging process, since the debugging data is written in the code file, an installation package is generated corresponding to one debugging data, the original code in the installation package needs to be modified each time the debugging data is to be changed, after the code is modified, a new installation package is generated, and then the new installation package is compiled, loaded and run to perform debugging again, which results in long time spent in the debugging process of the component, and low debugging efficiency.
It should be appreciated that the first embodiment uses data already in the system for debugging and therefore does not require a display interface. In this embodiment, when data needs to be updated, a debugging interface corresponding to the debugging plug-in is displayed, so that a user updates debugging data of the component in the debugging interface, where the debugging data refers to data involved in a debugging process of the component, and after it is detected that the user inputs the updated debugging data based on the debugging interface, the debugging data updated based on the debugging interface by the user is acquired, and the updated debugging data is transmitted to the preset page of the browser, so that a debugging operation is performed based on the updated debugging data in the preset page. Compared with the prior art, the method and the device have the great difference that when the data is updated, the data input by the user can be directly updated in the debugging interface without updating the original data in the installation package, so that the data updating mode is more convenient.
The implementation is equivalent to directly skipping the steps of compiling and generating the installation package by the Android and IOS operating systems, directly seeing the page effect, dynamically modifying data in the debugging page of the debugging plug-in, not changing the original code, and improving the debugging working efficiency.
Further, in order to improve flexibility of component debugging, a third embodiment of the component debugging method according to the present invention is proposed based on the first or second embodiment, and in this embodiment, referring to fig. 5, before the step S10, the component debugging method further includes:
step S70, setting a communication mechanism for the preset page of the browser;
and step S80, setting the debugging plug-in of the browser as a communication object.
In this embodiment, to implement debugging of a component in a browser, before debugging of the component, a communication mechanism is first set for the preset page of the browser, which specifically includes: binding the preset page of the browser with a debugging plug-in; of course, if the component is to be debugged according to the Android and IOS operating systems of the mobile terminal, the preset page of the browser needs to be bound to the operating system of the mobile terminal.
Since the present embodiment is mainly directed to a browser, after a communication mechanism is set, a debugging plug-in of the browser is set as a communication object. Of course, if the object to be communicated is the operating system of the mobile terminal, the communication connection relationship between the preset page and the Native interface of the operating system is established, that is, the operating system of the mobile terminal is set as the communication object.
In this embodiment, before debugging the component, a communication mechanism is set for the preset page of the browser, and then the component can be debugged based on the set communication mechanism, so that the debugging of the component is very convenient.
The invention further provides a device for debugging the component.
Referring to fig. 6, fig. 6 is a functional block diagram of a device 100 for debugging components according to a first embodiment of the present invention.
It should be emphasized that the functional block diagram of fig. 6 is merely an exemplary diagram of a preferred embodiment, and those skilled in the art can easily add new functional blocks around the functional block of the component debugging apparatus 100 shown in fig. 6; the names of the function modules are self-defined names only for assisting understanding of the program function blocks of the device debugging apparatus 100, and are not limited to the technical solution of the present invention, which is mainly characterized in that the functions to be achieved by the function modules with the respective defined names.
In this embodiment, the component debugging apparatus is applied to a browser, the browser is installed with a debugging plug-in, and the component debugging apparatus includes:
the device comprises a determining module 10, a debugging module and a debugging module, wherein the determining module is used for determining a to-be-debugged component corresponding to a debugging instruction when the component debugging instruction is received;
the calling module 20 is used for calling an Application Program Interface (API) of the browser through the installed debugging plug-in;
and the debugging module 30 is configured to execute a debugging operation on the component to be debugged on a preset page of the browser based on the called API.
In this embodiment, a debugging plug-in is installed in a browser, where the type of the browser is not limited, and the browser may be a browser using a conventional IE kernel, such as an IE browser and a TT browser, or a browser using a dual-core CPU, such as a QQ high-speed browser and a dog-searching high-speed browser, or a google browser using a kernel (an engine behind the google browser), and so on. Because google browsers support javascript, Html5, and the like well and render pages fast, in this embodiment, the browser may preferably be a google browser. Installing a debugging plug-in a browser, namely actually adding a debugging plug-in the browser, wherein the debugging plug-in is written and set according to the actual situation, and the method is not limited here, so that the API of the browser can be called based on the debugging plug-in later.
In the embodiment, the components include, but are not limited to, a Hybird component, an Activity component, and a Service component, and for better understanding of the implementation, the following description should be taken as an example, and the description is preferably given by taking the Hybird component as an example. It should be noted that there is only one debug plug-in this embodiment, but the components include a plurality of debug plug-ins.
The following is a detailed description of each module that gradually implements component debugging in this embodiment:
the determining module 10 is configured to determine, when an assembly debugging instruction is received, an assembly to be debugged corresponding to the debugging instruction;
in this embodiment, the receiving manner of the component debugging instruction includes displaying a preset page of the browser, then displaying a component debugging control in the preset page, and when receiving a click operation or a touch operation based on the component debugging control, the determining module 10 determines that the component debugging instruction is received.
When receiving a component debugging instruction, the determining module 10 further determines a component to be debugged corresponding to the debugging instruction, specifically, an embodiment of the determining module 10 includes:
1) in a first way, referring to fig. 7, the determining module 10 includes:
the judging unit 11 is configured to judge whether a component is hooked in a preset debugger when a component debugging instruction is received;
and the determining unit 12 is configured to, if a component is selected in the debugger, use the selected component as the component to be debugged corresponding to the debug instruction.
In this embodiment, when receiving a component debugging instruction, the determining unit 11 first determines whether a component is hooked in a debugger related to the browser. It is understood that a user may check components in the debugger in advance, specifically: and displaying each component option in the debugger, and when a user selects a corresponding component based on each component option displayed by the debugger, taking the selected component as a to-be-debugged component to be continued. If a component is selected in the debugger in advance, the determining unit 12 may directly use the selected component as the component to be debugged corresponding to the debug instruction.
In this embodiment, if the user selects a component in the debugger in advance, it is equivalent to debug the selected component, and then, when a debug instruction is received, the debug operation may be performed based on the previously selected component. The specific time when to select the components can be set according to actual needs.
2) In a second mode, referring to fig. 8, the determining module 10 further includes:
a display unit 13, configured to display a component selection window in a debugging interface of the debugging plug-in if a component is not checked in the debugger;
the determining unit 12 is further configured to use an external component selected based on the component selection window as the component to be debugged corresponding to the debugging instruction.
Of course, if no component is selected in the debugger in advance, the display unit 13 may directly display a component selection window in the debugging interface of the debugging plug-in for the user to select a corresponding component based on the component selection window, and the determining unit 12 takes the selected component as the component to be debugged.
In this embodiment, if the component is not checked in the debugger in advance, a component selection window may be displayed in the debugging interface where the debugging plug-in of the browser is located during debugging, so that the user may select the component, and the selected component may be used as the component to be debugged.
The calling module 20 is configured to call an application program interface API of the browser through the installed debugging plug-in;
the debugging module 30 is configured to execute a debugging operation on the component to be debugged on a preset page of the browser based on the called API.
In this embodiment, after determining the component to be debugged, the calling module 20 may call an application program interface API of the browser through the installed debugging plug-in, and then the debugging module 30 executes a debugging operation on the component to be debugged in a preset page of the browser based on the called API. Wherein the debugging operations include, but are not limited to: http cross-domain request, modifying current non-domain cookies, cross-domain setting, or a popup function of a browser, and the like.
Since the above-mentioned ways of determining the component to be debugged include two ways, one is to check the component in the debugger, and the other is to select the component in the debugging interface of the debugging plug-in, the debugging module 30 also includes two ways to execute the debugging operation on the component to be debugged on the preset page of the browser:
the method comprises the steps of capturing a function corresponding to a checked component from the debugger, and if the corresponding function is selected from the checked component in advance, directly executing debugging operation corresponding to the selected function on the component to be debugged on a preset page of the browser. Of course, if the function is not selected in advance, the functions of the component to be debugged may be sequentially executed according to a preset sequence.
And capturing the function corresponding to the selected component from the debugging interface of the debugging plug-in, and if the corresponding function is selected in the selected component in advance, directly executing the debugging operation corresponding to the selected function on the component to be debugged on a preset page of the browser, for example, if the function selected in advance is an http cross-domain request, executing the operation of the http cross-domain request on the component to be debugged on the preset page of the browser. Similarly, if the function is not selected in advance, the functions of the components to be debugged can be sequentially executed according to the preset sequence.
It should be understood that after the components are checked, the data in the checked components can be changed later, and the data finally fed back to the H5 page for debugging is different, and if the components are not checked, the data in the components are not changed later, and the original data of the components are directly fed back to the H5 page for debugging.
In the embodiment, correspondingly, through the installed debugging plug-in, a Native environment is simulated, and the Hybird component successfully executes debugging operation on the H5 page of the browser to realize various debugging functions, so that development and debugging are facilitated, and visual debugging is performed through the debugging plug-in, so that the debugging of the component is more accurate, and even if a mobile terminal is lacked, the Hybird project can be directly run on the browser and developed and debugged.
The component debugging apparatus 100 provided in this embodiment is applied to a browser, and when a component debugging instruction is received, the component to be debugged corresponding to the debugging instruction is determined first, then the API of the browser is called through the installed debugging plug-in, and finally, based on the called API, a preset page of the browser executes debugging operation on the component to be debugged. The debugging plug-in based on installation calls API in the browser, can realize the debugging of subassembly in the preset page of browser, even do not throw out the mobile terminal, also can carry out the debugging of subassembly, and is more convenient to the debugging of subassembly to the debugging process can show in the preset page, the condition of the debugging of being convenient for directly perceivedly to know, and is more accurate and intelligent to the debugging of subassembly.
Further, in order to improve flexibility of component debugging, a second embodiment of the component debugging apparatus of the present invention is proposed based on the first embodiment, and in this embodiment, referring to fig. 9, the component debugging apparatus further includes:
the display module 40 is configured to display a debugging interface of the debugging plug-in when a debugging data update instruction of the component is received, so that the external world can update the debugging data of the component in the debugging interface;
an obtaining module 50, configured to obtain debugging data updated based on the debugging interface;
a transmission module 60, configured to transmit the updated debugging data to the preset page of the browser, so as to execute a debugging operation based on the updated debugging data in the preset page.
It should be noted that the operations performed by the display module 40 to the transmission module 60 in the present embodiment may be operations performed after the debugging module 30, that is, after the debugging operation is performed, the debugging data of the component is updated and debugged again; of course, the debugging operations may also be performed during the debugging module 30 performs the debugging operations, that is, during the debugging operations, the debugging data of the component is updated to implement the debugging operations, and the specific manner is determined according to the actual situation, and is not limited herein.
In this embodiment, if a debugging data update instruction of the component is received, the display module 40 first displays a debugging interface of the debugging plug-in the browser.
In this embodiment, the debugging interface of the debugging plug-in and the preset page of the browser, such as the H5 page, are two independent pages, the H5 page is the front page of the browser, and the debugging page of the debugging plug-in is a page displayed on the upper layer of the H5 page and is not covered by the H5 page. And the debugging interface is also different from the component selection window, and the component selection window is equivalent to a child window of the debugging interface.
It should be understood that, in the existing component debugging process, since the debugging data is written in the code file, an installation package is generated corresponding to one debugging data, the original code in the installation package needs to be modified each time the debugging data is to be changed, after the code is modified, a new installation package is generated, and then the new installation package is compiled, loaded and run to perform debugging again, which results in long time spent in the debugging process of the component, and low debugging efficiency.
It should be appreciated that the first embodiment uses data already in the system for debugging and therefore does not require a display interface. In this embodiment, when data needs to be updated, the display module 40 displays a debugging interface corresponding to the debugging plug-in, so that a user can update debugging data of the component in the debugging interface, where the debugging data refers to data involved in a debugging process of the component, and after detecting that the user inputs updated debugging data based on the debugging interface, the transmission module 60 obtains the debugging data updated based on the debugging interface by the user, and transmits the updated debugging data to the preset page of the browser, so as to execute a debugging operation based on the updated debugging data in the preset page. Compared with the prior art, the method and the device have the great difference that when the data is updated, the data input by the user can be directly updated in the debugging interface without updating the original data in the installation package, so that the data updating mode is more convenient.
The implementation is equivalent to directly skipping the steps of compiling and generating the installation package by the Android and IOS operating systems, directly seeing the page effect, dynamically modifying data in the debugging page of the debugging plug-in, not changing the original code, and improving the debugging working efficiency.
Further, in order to improve flexibility of component debugging, a third embodiment of the component debugging apparatus of the present invention is proposed based on the first or second embodiment, and in this embodiment, referring to fig. 10, the component debugging apparatus further includes:
a setting module 70, configured to set a communication mechanism for the preset page of the browser;
the setting module 70 is further configured to set a debugging plug-in of the browser as a communication object.
In this embodiment, to implement debugging of a component in a browser, before debugging of the component, a setting module 70 sets a communication mechanism for the preset page of the browser, which specifically includes: binding the preset page of the browser with a debugging plug-in; of course, if the component is to be debugged according to the Android and IOS operating systems of the mobile terminal, the preset page of the browser needs to be bound to the operating system of the mobile terminal.
Since the present embodiment is mainly directed to a browser, after the communication mechanism is set, the setting module 70 sets the debugging plug-in of the browser as a communication object. Of course, if the object to be communicated is the operating system of the mobile terminal, the communication connection relationship between the preset page and the Native interface of the operating system is established, that is, the operating system of the mobile terminal is set as the communication object.
In this embodiment, before debugging the component, a communication mechanism is set for the preset page of the browser, and then the component can be debugged based on the set communication mechanism, so that the debugging of the component is very convenient.
It should be noted that, in this document, 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-mentioned serial numbers of the embodiments of the present invention are merely for description and do not represent the merits of the embodiments.
Through the above description of the embodiments, those skilled in the art will clearly understand that the method of the above embodiments can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware, but in many cases, the former is a better implementation manner. Based on such understanding, the technical solutions of the present invention may be embodied in the form of a software product, which is stored in a storage medium (such as ROM/RAM, magnetic disk, optical disk) and includes instructions for enabling a terminal device (such as a mobile phone, a computer, a server, an air conditioner, or a network device) to execute the method according to the embodiments of the present invention.
The above description is only a preferred embodiment of the present invention, and not intended to limit the scope of the present invention, and all modifications of equivalent structures and equivalent processes, which are made by using the contents of the present specification and the accompanying drawings, or directly or indirectly applied to other related technical fields, are included in the scope of the present invention.
Claims (8)
1. The component debugging method is applied to a browser, the browser is provided with a debugging plug-in, and the component debugging method comprises the following steps:
when an assembly debugging instruction is received, determining an assembly to be debugged corresponding to the debugging instruction;
calling an Application Program Interface (API) of the browser through the installed debugging plug-in;
executing debugging operation on the component to be debugged on a preset page of the browser based on the called API;
when receiving a component debugging instruction, the step of determining the component to be debugged corresponding to the debugging instruction comprises the following steps:
when a component debugging instruction is received, judging whether a preset debugger colludes a component or not;
and if the debugger selects the component, taking the selected component as the component to be debugged corresponding to the debugging instruction.
2. The component debugging method according to claim 1, wherein after the step of determining whether a component is hooked in a preset debugger or not when the component debugging instruction is received, the component debugging method further comprises:
if the debugger does not check the component, displaying a component selection window in a debugging interface of the debugging plug-in;
and taking the component selected by the outside on the basis of the component selection window as the component to be debugged corresponding to the debugging instruction.
3. The component debugging method of claim 1, wherein the component debugging method further comprises:
when a debugging data updating instruction of the component is received, displaying a debugging interface of the debugging plug-in so that the external world can update the debugging data of the component in the debugging interface;
acquiring debugging data updated based on the debugging interface;
transmitting the updated debugging data to the preset page of the browser, so as to execute debugging operation based on the updated debugging data in the preset page.
4. The component debugging method according to any one of claims 1 to 3, wherein, before the step of determining the component to be debugged corresponding to the debugging instruction when the component debugging instruction is received, the component debugging method further comprises:
setting a communication mechanism for the preset page of the browser;
and setting the debugging plug-in of the browser as a communication object.
5. The utility model provides a component debugging device, its characterized in that is applied to in the browser, debugging plug-in is installed to the browser, component debugging device includes:
the device comprises a determining module, a debugging module and a debugging module, wherein the determining module is used for determining a component to be debugged corresponding to a debugging instruction when the component debugging instruction is received;
the calling module is used for calling an Application Program Interface (API) of the browser through the installed debugging plug-in;
the debugging module is used for executing debugging operation on the component to be debugged on a preset page of the browser based on the called API;
wherein the determining module comprises:
the device comprises a judging unit, a debugging unit and a judging unit, wherein the judging unit is used for judging whether a preset debugger colludes a component or not when receiving a component debugging instruction;
and the determining unit is used for taking the selected component as the component to be debugged corresponding to the debugging instruction if the component is selected in the debugger.
6. The component debugging apparatus of claim 5 wherein the determination module further comprises:
the display unit is used for displaying a component selection window in a debugging interface of the debugging plug-in if the component is not checked in the debugger;
the determining unit is further configured to use an external component selected based on the component selection window as the component to be debugged corresponding to the debugging instruction.
7. The component debugging apparatus according to claim 5, characterized in that the component debugging apparatus further comprises:
the display module is used for displaying the debugging interface of the debugging plug-in when a debugging data updating instruction of the component is received so that the external world can update the debugging data of the component in the debugging interface;
the acquisition module is used for acquiring debugging data updated based on the debugging interface;
the transmission module is used for transmitting the updated debugging data to the preset page of the browser so as to execute debugging operation based on the updated debugging data in the preset page.
8. The component debugging apparatus according to any one of claims 5 to 7, characterized in that the component debugging apparatus further comprises:
the setting module is used for setting a communication mechanism for the preset page of the browser;
the setting module is further used for setting the debugging plug-in of the browser as a communication object.
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710091768.8A CN107688529B (en) | 2017-02-20 | 2017-02-20 | Component debugging method and device |
| PCT/CN2017/111886 WO2018149190A1 (en) | 2017-02-20 | 2017-11-20 | Component debugging method, device and apparatus, and computer readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710091768.8A CN107688529B (en) | 2017-02-20 | 2017-02-20 | Component debugging method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107688529A CN107688529A (en) | 2018-02-13 |
| CN107688529B true CN107688529B (en) | 2020-07-21 |
Family
ID=61152420
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710091768.8A Active CN107688529B (en) | 2017-02-20 | 2017-02-20 | Component debugging method and device |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN107688529B (en) |
| WO (1) | WO2018149190A1 (en) |
Families Citing this family (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108415844B (en) * | 2018-03-22 | 2022-03-08 | 北京奇虎科技有限公司 | Plug-in debugging method and device |
| CN109726109A (en) * | 2018-06-04 | 2019-05-07 | 平安普惠企业管理有限公司 | Code debugging method, apparatus, equipment and computer storage medium |
| CN108897531B (en) * | 2018-06-29 | 2021-11-16 | 播思通讯技术（北京）有限公司 | Carplay development and debugging method |
| CN109144497B (en) * | 2018-07-06 | 2021-07-20 | 中科星图股份有限公司 | Geographic space browser platform based on android and construction method |
| CN109189663B (en) * | 2018-07-12 | 2021-10-29 | 武汉精测电子集团股份有限公司 | Plug-in debugging method, plug-in testing method and micro-kernel architecture system |
| CN109992485B (en) * | 2019-03-20 | 2023-02-03 | 郑州阿帕斯科技有限公司 | Debugging log providing method, terminal device and server |
| CN111831538B (en) * | 2019-04-18 | 2024-03-26 | 腾讯科技（深圳）有限公司 | Debugging method, device and storage medium |
| CN110633220A (en) * | 2019-09-25 | 2019-12-31 | 北京明略软件系统有限公司 | Debugging information display method and device, storage medium and electronic equipment |
| CN110990078B (en) * | 2019-11-29 | 2021-05-11 | 浙江大搜车软件技术有限公司 | Application initialization method and device, storage medium and mobile terminal |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105357323A (en) * | 2015-12-11 | 2016-02-24 | 北京京东尚科信息技术有限公司 | HTML5 page debugging method and device in APP |
| CN106228071A (en) * | 2016-07-20 | 2016-12-14 | 北京奇虎科技有限公司 | A kind of method and apparatus testing encoding and decoding assembly |
| CN106383785A (en) * | 2016-09-21 | 2017-02-08 | 网易（杭州）网络有限公司 | Mobile application debugging method and apparatus |
Family Cites Families (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20030079052A1 (en) * | 2001-10-24 | 2003-04-24 | Kushnirskiy Igor Davidovich | Method and apparatus for a platform independent plug-in |
| CN103684899B (en) * | 2012-09-17 | 2019-01-08 | 腾讯科技（深圳）有限公司 | remote debugging method and device |
| US9135145B2 (en) * | 2013-01-28 | 2015-09-15 | Rackspace Us, Inc. | Methods and systems of distributed tracing |
| CN104461855B (en) * | 2013-09-22 | 2019-03-26 | 腾讯科技（北京）有限公司 | A kind of Web automated testing method, system and device |
| CN104778121B (en) * | 2015-03-25 | 2018-09-18 | 网易（杭州）网络有限公司 | The test method of games, apparatus and system |
| CN105138451B (en) * | 2015-07-31 | 2017-12-26 | 百度在线网络技术（北京）有限公司 | A kind of methods, devices and systems of function for probe card |
| CN105117339B (en) * | 2015-08-27 | 2018-03-06 | 广州市百果园网络科技有限公司 | A kind of method and apparatus that native command debugging routine is debugged using plug-in unit |
| CN105404504B (en) * | 2015-11-02 | 2018-12-25 | 北京锐安科技有限公司 | A kind of adjustment method and device of Web component |
-
2017
- 2017-02-20 CN CN201710091768.8A patent/CN107688529B/en active Active
- 2017-11-20 WO PCT/CN2017/111886 patent/WO2018149190A1/en active Application Filing
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105357323A (en) * | 2015-12-11 | 2016-02-24 | 北京京东尚科信息技术有限公司 | HTML5 page debugging method and device in APP |
| CN106228071A (en) * | 2016-07-20 | 2016-12-14 | 北京奇虎科技有限公司 | A kind of method and apparatus testing encoding and decoding assembly |
| CN106383785A (en) * | 2016-09-21 | 2017-02-08 | 网易（杭州）网络有限公司 | Mobile application debugging method and apparatus |
Non-Patent Citations (1)
| Title |
|---|
| "移动端Web开发调试之Weinre调试教程";清枫草塘;《blog.csdn.net/freshlower/article/details/42640253》;20150112;全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN107688529A (en) | 2018-02-13 |
| WO2018149190A1 (en) | 2018-08-23 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107688529B (en) | Component debugging method and device | |
| US9342237B2 (en) | Automated testing of gesture-based applications | |
| CN108293081B (en) | Deep linking of program playback to mobile application state through user interface events | |
| CN105354014B (en) | Application interface renders methods of exhibiting and device | |
| CN106326104B (en) | Terminal control testing method and device | |
| CN103777967B (en) | Page returning method, page generation method and device | |
| CN106874519B (en) | Page display method and device | |
| CN109240697B (en) | Call processing method and device and storage medium | |
| CN111090431B (en) | Data processing method and device | |
| CN105224456A (en) | A kind of test script generates methods, devices and systems | |
| CN104821954A (en) | Cross-platform remote procedure call method | |
| JP7106001B2 (en) | SUB-APPLICATION DEVELOPMENT METHOD, APPARATUS, COMPUTER DEVICE, AND COMPUTER PROGRAM | |
| CN108197024B (en) | Embedded browser debugging method, debugging terminal and computer readable storage medium | |
| CN111666199B (en) | Debugging method executed on intelligent terminal and software debugger | |
| CN104850498A (en) | Filling information testing method and filling information testing system | |
| CN113704110A (en) | Automatic testing method and device for user interface | |
| CN106557411B (en) | Method and system for testing Hybrid application in Android system | |
| CN107102937B (en) | User interface testing method and device | |
| CN112866312A (en) | Script generation method, remote operation method and related equipment | |
| CN112988588B (en) | Client software debugging method and device, storage medium and electronic equipment | |
| CN104834594B (en) | Web system method of testing and device | |
| CN113094138A (en) | Interface display method and device, electronic equipment and storage medium | |
| CN108009084B (en) | Testing method, device and system for hybrid mobile application | |
| CN107391354B (en) | Method and system for automatically monitoring terminal performance and storage device | |
| JP2006276939A (en) | Program starting method for virtual machine, and client server system |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |