Method capable of directly integrating debugging function in IPTV EPG page

Abstract

The invention discloses a method for directly integrating a debugging function in an IPTV (Internet Protocol Television) EPG (Electronic Program Guide) page, which comprises the following steps of: 1, continuously monitoring JS (JavaScript) exception and an ajax request, and caching the JS exception and the ajax request; 2, monitoring whether 2668765 is sequentially pressed down through the remote controller or not at present, and if yes, calling out a password confirmation window to verify a password; 3, calling out a Control panel for a user to select various function menus; and step 4, when the user clicks the corresponding menu, checking whether the user has the authority, and if not, prompting'no-authority operation '. According to the invention, debugging-related functions such as exception capture, network request, resource request, data storage, page node tree, real-time CSS and the like can be realized.

Description

Technical Field

[0001] The present invention belongs to the technical field of IPTV, and specifically relates to a method for directly integrating a debugging function into an IPTV EPG page. Background Art

[0002] In the field of Internet Protocol Television (IPTV), due to the complexity of set-top box manufacturers and models, the middleware of set-top boxes from different manufacturers or even different models of the same manufacturer varies, and the operations of input devices (remote controls) are limited. The development of EPG pages based on the B / S architecture has always faced the pain point of difficult debugging. Therefore, a unified method that can directly integrate the debugging function into the IPTV EPG page is required. Summary of the Invention

[0003] The technical problem to be solved by the present invention is to provide a method for directly integrating a debugging function into an IPTV EPG page, which can implement functions related to debugging such as exception capture, network requests, resource requests, data storage, page node trees, and real-time CSS.

[0004] To solve the above technical problems, the present invention adopts the following technical solutions:

[0005] A method for directly integrating a debugging function into an IPTV EPG page, comprising the following steps:

[0006] Step 1, continuously monitor JS exceptions and ajax requests and cache them;

[0007] Step 2, monitor whether the numbers 2668765 are sequentially pressed on the remote control. If so, pop up a password confirmation window to verify the password;

[0008] Step 3, pop up a Control panel for the user to select various function menus;

[0009] Step 4, when the user clicks on the corresponding menu, check whether the user has permission. If not, prompt "No permission to operate".

[0010] Further, the function menus include:

[0011] A page menu module, which is used to pop up a page menu list window when a page custom menu is registered;

[0012] A page information module, which is used to pop up a full-screen window and display relevant data of the current web page's encoding, last update time, number of nodes, number of scripts, whether it is an iframe inner page, page title, page URL, source page, Cookie, LocalStorage, and SessionStorage;

[0013] The device information module is used to pop up a full-screen window to display the relevant information of the current set-top box, user-related information, browser-related information, and framework version information;

[0014] The exception information module is used to pop up a window listing the JS exception information monitored in step 1, and the user can view the detailed information of the corresponding item through secondary selection;

[0015] The request record module is used to pop up a window listing the ajax request records monitored in step 1, and the user can view the detailed information of the corresponding item through secondary selection;

[0016] The performance analysis module is used to obtain the moments of various indicators of page loading through the Web Performance API interface, visualize them in a full-screen window, and calculate the white screen time, rendering time, and total time consumption of the page;

[0017] The element inspection module is used to start searching for child nodes from the document element through the Node.childNodes interface and display them in a list window. When the user clicks to expand a child node, the child nodes of the current node are searched again, and so on;

[0018] The focus object module is used to pop up a list window to display the list of focus elements on the current page, and the focus element nodes can be expanded level by level;

[0019] The focus object module is used to pop up a list window to display the list of focus elements on the current page, and the focus element nodes can be expanded level by level;

[0020] The variable inspection module is used to start searching for the object property list from the root variable "window" of Web JS and display it in a list window. If its value is also a property of an object, the property list can be expanded by clicking twice;

[0021] The layout boundary module is used to first generate 8 different colors with high contrast and randomly shuffle the order, and then use the "nth-child(8n+i)" pseudo-class of css3 to set the outline style, so as to highlight the borders of all visible nodes;

[0022] The debug mode module is used to record the enabled state through cookies, provide the corresponding api call log printing function, and only when the debug mode is enabled, the api will actually perform the log printing operation;

[0023] The jump prevention module is used to provide a unified page jump api. When the jump prevention function is enabled, executing this jump api will intercept the browser page jump, and at the same time output the address to be jumped to the screen through the log printing function;

[0024] A resource information module, which is used to obtain the resources loaded on the current page through the "WEB performance.getEntriesByType(...) API", and present the information of the resource name, type, size, and time consumption in a list window on the screen in a certain format. The focus can be moved to the corresponding resource item and clicked to view the complete URL address of the resource;

[0025] An indexedDB module, which is used to obtain all database names through the indexedDB API, and pop up a list window to display the database list on the screen. When the focus is focused on and the corresponding database is clicked, an attempt will be made to connect to the database to read all the repository names under the database and insert them into the list window with a certain indentation.

[0026] Furthermore, in the exception information module, an exception object is checked through the remote control number 5 key based on the check variable module dialog window.

[0027] Furthermore, in the request record module, the user can view the corresponding detailed information through secondary selection, including the request time, address, request method, network status code, time consumption information, header information, form data, response body, and JSON-formatted response body. At the same time, in the current module, the response body is checked through the remote control number 5 key based on the check variable module dialog window.

[0028] Furthermore, the calculation formulas for the white screen time, rendering time, and total time consumption are as follows:

[0029] White screen time = time to complete receiving the response - time to query the domain name;

[0030] Rendering time = time when the page load event is executed and completed - time to complete receiving the response;

[0031] Total time consumption = time when the page load event is executed and completed - time when the previous page is destroyed.

[0032] Furthermore, in the element inspection module,

[0033] Press the remote control 0 key to pop up a full-screen window to display the html content of the current node;

[0034] Press the remote control 5 key to check the current node based on the check variable module dialog window;

[0035] Press the remote control play key to pop up a full-screen window to display the CSS styles that are currently in effect for the current node;

[0036] Press the remote control 1, 2, 3, 4, 6, 7, 8, 9, volume - keys to adjust the display position of the list window on the TV screen;

[0037] Adjust the list window to the maximum display by pressing the volume + button on the remote control.

[0038] Furthermore, under the focus object module,

[0039] Press the 0 button on the remote control to call out the full-screen window to display the basic information of the current focus;

[0040] Press the 5 button on the remote control to check the current focus based on the dialog window of the inspection variable module;

[0041] Press the 1, 2, 3, 4, 6, 7, 8, 9, volume - buttons on the remote control to adjust the display position of the list window on the TV screen;

[0042] Adjust the list window to the maximum display by pressing the volume + button on the remote control.

[0043] Furthermore, under the inspection variable module,

[0044] Press the 0 button on the remote control to call out the full-screen window to display the value after converting the current property into a string;

[0045] Press the 5 button on the remote control to check the current focus based on the dialog window of the inspection variable module;

[0046] Press the 1, 2, 3, 4, 6, 7, 8, 9, volume - buttons on the remote control to adjust the display position of the list window on the TV screen.

[0047] Furthermore, under the indexedDB module,

[0048] The focus can also focus on and click the corresponding repository. When clicking on the corresponding repository, all the index names under the repository will be read. If the focus is on the repository or index item and the 5 button on the remote control is pressed, the corresponding repository or index information and all the data under it will be presented in the format of an object through the dialog window of the inspection variable module.

[0049] The method provided by the present invention for directly integrating the debugging function in the IPTV EPG page has the following beneficial effects:

[0050] 1. All set-top boxes are unified.

[0051] 2. It does not affect the normal interaction in the page.

[0052] 3. It is convenient to use, and developers do not need to spend time and effort embedding the debugging function into their own pages separately.

[0053] 4. Password mechanism, so even if the user accidentally presses the instruction to call out the debugging panel, there is no need to worry about security issues.

[0054] 5. Permission division. When user assistance for debugging is required in the existing network, corresponding permission security can be provided as needed to enable the corresponding function. Description of the Drawings

[0055] Figure 1 is the flowchart of the embodiment of the present invention.

[0056] Figure 2 is the schematic diagram of the outgoing call debugging panel of the embodiment of the present invention.

[0057] Figure 3 is Figure 2 the display diagram of more functions in Detailed Embodiment

[0058] The present invention will be described below with reference to the drawings. The specific embodiments described herein are only for explaining and understanding the present invention, and are not used to limit the present invention. Without departing from the design spirit of the present invention, various deformations and improvements made by those of ordinary skill in the art to the technical solution of the present invention shall fall within the protection scope of the present invention.

[0059] As Figures 1 to 3 shown, the method for directly integrating the debugging function in the IPTV EPG page in this embodiment includes the following steps:

[0060] Step S1: Continuously monitor JS exceptions and ajax requests and cache them.

[0061] Step S2: Monitor whether the remote control is used to press 2668765 in sequence. If so, pop up a password confirmation window to verify the password.

[0062] Step S3: Pop up the Control (debugging) panel for the user to select various function menus.

[0063] Step S4: When the user clicks on the corresponding menu, check whether the user has the permission. If not, prompt "No permission to operate".

[0064] The full name of JS is JavaScript, and the Chinese annotation is: programming language; the Chinese annotation of ajax is: network request.

[0065] The function menus in Step S3 include the following modules:

[0066] (1) Page menu module: Used to pop up a page menu list window when a page custom menu is registered, facilitating developers to embed some hidden function menus in the page and providing some possible hidden requirements.

[0067] (2) Page Information Module: It is used to pop up a full-screen window to display or present relevant data such as the encoding of the current web page, the last update time, the number of nodes, the number of scripts, whether it is an iframe inner page, the page title, the page URL, the source page, Cookie (a simple text file saved on the client), LocalStorage (local storage), SessionStorage (local session), etc.

[0068] (3) Device Information Module: It is used to pop up a full-screen window to display or present relevant information about the current set-top box, user-related information, browser-related information, and framework version information.

[0069] (4) Exception Information Module: It is used to pop up a list window of JS exception information monitored in Step 1. Users can select to view the detailed information of the corresponding item again. In this module, the exception object is checked based on the Check Variable Module dialog window by pressing the number 5 key on the remote control. This module can monitor and collect in real time whether the program code in the page causes an exception. When there is an exception in the page, the specific exception information that can be captured can be viewed in the current "Exception Information" function.

[0070] (5) Request Record Module: It is used to pop up a list window of ajax request records monitored in Step 1. Users can select to view the detailed information of the corresponding item again. The detailed information includes the request time, address, request method, network status code, elapsed time information, header information, form data, response body, and the response body in JSON (an open standard file format and data exchange format) format. In this module, the response body is checked based on the Check Variable Module dialog window by pressing the number 5 key on the remote control.

[0071] (6) Performance Analysis Module: It is used to obtain the moments of various indicators of page loading through the Web Performance API interface (network performance interface) and visualize them in a full-screen window. At the same time, it calculates the "white screen time", "rendering time", and "total elapsed time" of the page. Among them:

[0072] White screen time = responseEnd (time to complete receiving the response) - domainLookupStart (time to query the domain name);

[0073] Rendering time = loadEventEnd (time when the page load event is executed and completed) - responseEnd (time to complete receiving the response);

[0074] Total elapsed time = loadEventEnd (time when the page load event is executed and completed) - navigationStart (time when the previous page is destroyed).

[0075] This module can view the time consumption at corresponding critical moments from the start of loading to the completion of opening the current page, assisting developers in troubleshooting performance consumption locations in the page and providing help for performance optimization.

[0076] (7) Inspection Element Module: Starting from the document element (web page document element), it searches for child nodes through the Node.childNodes interface (interface for obtaining child node elements) and displays them in the list window. When the user clicks to expand a child node, it searches for the child nodes of the current node again, and so on. At the same time, in the current module,

[0077] Press the 0 key on the remote control to call out the full-screen window to display the html content of the current node;

[0078] Press the 5 key on the remote control to check the current node based on the dialog window of the inspection variable module;

[0079] Press the play key on the remote control to call out the full-screen window to display the CSS styles (Cascading Style Sheets) in effect for the current node;

[0080] Press the 1, 2, 3, 4, 6, 7, 8, 9, volume - keys on the remote control to adjust the display position of the list window on the TV screen;

[0081] Press the volume + key on the remote control to adjust the list window to full-screen display.

[0082] This module can provide the function of viewing the real-time html node tree.

[0083] (8) Focus Object Module: Used to call out the list window to display the list of focus elements on the current page, and similar to the inspection element, the focus element nodes can be expanded level by level. At the same time, in the current module,

[0084] Press the 0 key on the remote control to call out the full-screen window to display the basic information of the current focus;

[0085] Press the 5 key on the remote control to check the current focus based on the dialog window of the inspection variable module;

[0086] Press the 1, 2, 3, 4, 6, 7, 8, 9, volume - keys on the remote control to adjust the display position of the list window on the TV screen;

[0087] Press the volume + key on the remote control to adjust the list window to full-screen display.

[0088] This module can provide the function of viewing the focus element node tree in the page.

[0089] (9) Inspection Variable Module: Starting from the root variable "window" of Web JS (browser programming language), it searches for the list of object properties and displays them in the list window. If the value is also a property of an object, the property list can be expanded by clicking twice. In the current module,

[0090] Press the 0 key on the remote control to call out the full-screen window and display the value of the current property converted into a string.

[0091] Press the 5 key on the remote control to check the current focus based on the dialog window of the inspection variable module.

[0092] Press the 1, 2, 3, 4, 6, 7, 8, 9, and Volume - keys on the remote control to adjust the display position of the list window on the TV screen.

[0093] This module can provide the function of viewing all global variables and values in the page, and allows developers to embed the inspection function of some local variables as needed.

[0094] (10) Layout boundary module: It is used to first generate 8 different and high-contrast colors and randomly shuffle the order, and then use the "nth-child(8n + i)" pseudo-class of css3 (Cascading Style Sheets 3) to set the outline style, so as to highlight the borders of all visible nodes. The Chinese comment of the "nth-child(8n + i)" pseudo-class is: child element pseudo-class (every 8 in a cycle).

[0095] This module adds randomly colored borders to the nodes used for UI layout in the page, making these nodes "visible".

[0096] (11) Debug mode module: It uses cookies to record the on / off state, provides the corresponding api (interface) call log printing function, and only when the debug mode is enabled, the api call will actually perform the log printing operation. At the same time, the on / off of the debug mode will also throw corresponding event broadcasts, which can provide some custom-related functions for developers.

[0097] (12) Block jump module: It is used to provide a unified page jump api (navigator api, navigator interface). When the block jump function is enabled, executing this jump api will intercept the browser page jump, and at the same time output the address about to be jumped to the screen through the log printing function.

[0098] (13) Resource information module: Based on the "WEB performance.getEntriesByType(...)API" (interface for obtaining the list of loaded resources in the network), it obtains the resources that have been loaded on the current page, and presents them in the form of a list window on the screen according to the resource name, type, size, time-consuming and other information in a certain format. The focus can be operated to move to the corresponding resource item and click to view the complete url address of the resource.

[0099] (14) IndexedDB module: Obtain all database names based on the IndexedDB API, pop up a list window to display the database list on the screen. When the focus is on a corresponding database and clicked, it will attempt to connect to the database to read all the store names under the database and insert them into the list window with a certain indentation. Similarly, the focus can also be on a corresponding store and clicked. When a corresponding store is clicked, all the index names under the store will be read. If the focus is on a store or index item and the remote control key 5 is pressed, the corresponding store or index information and all the data under it will be presented in the format of an object through the inspection variable module dialog window.

[0100] The method for directly integrating the debugging function in the IPTV EPG page in this embodiment realizes functions related to debugging such as exception capture, network request, resource request, data storage, page node tree, real-time CSS, etc. based on the standard WEBAPI, and has the following beneficial effects:

[0101] 1. All set-top boxes are unified.

[0102] 2. It does not affect the normal interaction in the page.

[0103] 3. It is convenient to use. Developers do not need to separately embed the debugging function in their own pages with time and effort.

[0104] 4. Password mechanism. Even if the user accidentally presses the instruction to pop up the debugging panel, there is no need to worry about security issues.

[0105] 5. Permission division. When user assistance for debugging is needed in the live network, corresponding permissions can be provided as needed to safely open the corresponding functions.

Claims

1. A method for directly integrating a debugging function in an IPTV EPG page, characterized in that, It includes the following steps: Step 1, continuously monitor JS exceptions and ajax requests and cache them; Step 2, monitor whether the numbers 2668765 are sequentially pressed on the remote control. If so, pop up a password confirmation window to verify the password; Step 3, pop up the Control panel for the user to select various function menus; Step 4, when the user clicks on the corresponding menu, check whether the user has the permission. If not, prompt "No permission to operate".

2. The method according to claim 1, wherein The function menus include: The page menu module is used to pop up a page menu list window when a page custom menu is registered; The page information module is used to pop up a full-screen window and display the encoding of the current web page, the last update time, the number of nodes, the number of scripts, whether it is an inner page in an iframe, the page title, the page URL, the source page, Cookie, LocalStorage, and SessionStorage related data; The device information module is used to pop up a full-screen window to display the current set-top box related information, user related information, browser related information, and framework version information; The exception information module is used to pop up a list window of the JS exception information monitored in Step 1, and the user can view the detailed information of the corresponding item through secondary selection; The request record module is used to pop up a list window of the ajax request records monitored in Step 1, and the user can view the detailed information of the corresponding item through secondary selection; The performance analysis module is used to obtain the moments of various indicators of page loading through the Web Performance API interface, visualize them in a full-screen window, and calculate the white screen time, rendering time, and total time consumption of the page; The element inspection module is used to start searching for child nodes from the document element through the Node.childNodes interface and display them in a list window. When the user clicks to expand a child node, search for the child nodes of the current node again, and so on; The focus object module is used to pop up a list window to display the focus element list of the current page, and the focus element nodes can be expanded level by level; The focus object module is used to pop up a list window to display the focus element list of the current page, and the focus element nodes can be expanded level by level; The variable inspection module is used to start searching for the object property list from the root variable "window" of Web JS and display it in a list window. If its value is also the property of an object, the property list can be clicked to expand it twice; The layout boundary module is used to first generate 8 different colors with high contrast and shuffle them randomly, and then use the "nth-child(8n+i)" pseudo-class of css3 to set the outline style, so as to highlight the borders of all visible nodes; The debug mode module is used to record the on / off state through cookies, provide the corresponding api call log printing function, and only when the debug mode is enabled, the api will actually perform the log printing operation; The jump prevention module is used to provide a unified page jump API. When the jump prevention function is enabled, executing this jump API will intercept the browser page jump, and at the same time output the address to be jumped to the screen through the log printing function; The resource information module is used to obtain the resources already loaded on the current page through the "WEB performance.getEntriesByType(...) API", and present the information of the resource name, type, size, and time consumption in a list window on the screen in a certain format. The focus can be moved to the corresponding resource item and clicked to view the complete URL address of the resource; The indexedDB module is used to obtain all database names through the indexedDB API, and pop up a list window to display the database list on the screen. When the focus is focused on and the corresponding database is clicked, an attempt will be made to connect to the database to read all the repository names under the database and insert them into the list window with a certain indentation.

3. The method according to claim 2, wherein In the exception information module, the exception object is checked through the remote control number 5 key based on the check variable module dialog window.

4. The method according to claim 2, wherein In the request record module, the user can view the corresponding detailed information through secondary selection, including the request time, address, request method, network status code, time consumption information, header information, form data, response body, and JSON-formatted response body; at the same time, in this module, the response body is checked through the remote control number 5 key based on the check variable module dialog window.

5. The method according to claim 2, wherein The calculation formulas for the white screen time, rendering time, and total time consumption are as follows: White screen time = time when the response is completely received - time to query the domain name; Rendering time = time when the page load event is executed and completed - time when the response is completely received; Total time consumption = time when the page load event is executed and completed - time when the previous page is destroyed.

6. The method according to claim 2, characterized in that, In the inspection element module, Press the remote control 0 key to pop up a full-screen window to display the html content of the current node; Press the remote control 5 key to check the current node based on the check variable module dialog window; Press the remote control play key to pop up a full-screen window to display the CSS styles that are currently in effect for the current node; Use the remote control 1, 2, 3, 4, 6, 7, 8, 9, volume - keys to adjust the display position of the list window on the TV screen; Use the remote control volume + key to adjust the list window to maximize the display.

7. The method according to claim 2, characterized in that, In the focus object module, Press the remote control 0 key to pop up a full-screen window to display the basic information of the current focus; Press the remote control 5 key to check the current focus based on the check variable module dialog window; Use the remote control 1, 2, 3, 4, 6, 7, 8, 9, volume - keys to adjust the display position of the list window on the TV screen; Use the remote control volume + key to adjust the list window to maximize the display.

8. The method according to claim 2, characterized in that, In the check variable module, Press the remote control 0 key to pop up a full-screen window to display the value after converting the current property to a string; Press the remote control 5 key to check the current focus based on the check variable module dialog window; Use the remote control 1, 2, 3, 4, 6, 7, 8, 9, volume - keys to adjust the display position of the list window on the TV screen.

9. The method according to claim 2, characterized in that, In the indexedDB module, The focus can also focus on and click the corresponding warehouse. When clicking on the corresponding warehouse, all the index names under that warehouse will be read. If the focus is on a warehouse or an index item and the remote control key 5 is pressed, the corresponding warehouse or index information and all the data under it will be presented in the format of an object through the inspection variable module dialogue window.

Images