A method of integrating debugging function directly in IPTV EPG page

Abstract

The application discloses a method for integrating debugging function in IPTV EPG page directly, which comprises the following steps: step 1, continuously monitoring JS exception and ajax request, and caching; step 2, monitoring whether the current is through remote controller pressing 2668765 in turn, if yes, calling password confirmation window to verify password; step 3, calling Control panel for user to select each function menu; step 4, when the user clicks corresponding menu, verifying whether having authority, if not, prompting "no authority operation". The application can realize functions related to debugging, such as exception capture, network request, resource request, storage data, page node tree and real-time CSS.

Description

TECHNICAL FIELD

[0001] The application belongs to the technical field of IPTV, and particularly relates to a method for integrating a debugging function in an IPTV EPG page. BACKGROUND

[0002] In the field of interactive network television (IPTV), due to the complicated set-top box manufacturers and models, the middleware of set-top boxes of different manufacturers or even different models of the same manufacturer is uneven, and the operation of input devices (remote controllers) is limited, the development of an EPG page based on a B / S architecture has always faced the pain point of debugging difficulty, therefore, a unified method for directly integrating a debugging function in an IPTV EPG page is needed. SUMMARY

[0003] The application solves the technical problem of providing a method for directly integrating a debugging function in an IPTV EPG page, which can realize functions related to debugging such as exception capture, network request, resource request, storage data, page node tree and real-time CSS.

[0004] To solve the above technical problem, the application adopts the following technical scheme:

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

[0006] Step 1, continuously monitoring JS exceptions and ajax requests and caching;

[0007] Step 2, monitoring whether the current is pressed 2668765 in turn through a remote controller, if yes, calling a password confirmation window to verify the password;

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

[0009] Step 4, when the user clicks the corresponding menu, verifying whether the user has the permission, if not, prompting "no permission operation".

[0010] Further, the function menu comprises:

[0011] A page menu module for popping up a page menu list window in the case of registering a page self-defined menu;

[0012] A page information module for popping up a full-screen window and displaying the relevant data of the coding, the last update time, the node quantity, the script quantity, whether it is an iframe inner page, the page title, the page URL, the source page, Cookie, LocalStorage and SessionStorage of the current web page;

[0013] device information module, for popping up a full-screen window to display current set-top box related information, user related information, browser related information and framework version information;

[0014] abnormal information module, for popping up a JS abnormal information list window monitored in step 1, and the user views the detailed information of the corresponding item through secondary selection;

[0015] request record module, for popping up an ajax request record list window monitored in step 1, and the user views the detailed information of the corresponding item through secondary selection;

[0016] performance analysis module, for obtaining the indicators of page loading through the Web Performance API interface, visualizing them into a full-screen window, and calculating the white screen time, rendering time and total time consumption of the page;

[0017] element inspection module, for finding child nodes from the document element through the Node.childNodes interface and displaying them into a list window, and when the user clicks to expand the child nodes, the child nodes of the current node are found again, and the process is repeated;

[0018] focus object module, for calling out a list window to display the focus element list of the current page, and being able to expand the focus element nodes step by step;

[0019] focus object module, for calling out a list window to display the focus element list of the current page, and being able to expand the focus element nodes step by step;

[0020] variable inspection module, for finding the object attribute list from the root variable "window" of Web JS and displaying them into a list window, and if the value is also an object attribute, the attribute list can be clicked to expand it again;

[0021] layout boundary module, for first generating 8 different and high-contrast colors and randomly shuffling the order, and then using the "nth-child(8n+i)" pseudo class of css3 to set the outline style, so as to highlight the border of all visible nodes;

[0022] debug mode module, for recording the opening state through cookies, providing corresponding api call log printing function, and only when the debug mode is opened, the api call will really perform log printing operation;

[0023] jump prevention module, for providing a unified page jump api, when the jump prevention function is opened, executing the jump api will intercept the browser page jump, and the address to be jumped will be output to the screen through the log printing function;

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

[0025] The indexedDB module is used to obtain all database names through the indexedDB API, and call a list window to display the database list on the screen. When the focus is focused on the corresponding database, the database will be connected to read all the warehouse names under the database and inserted into the list window in a certain indentation.

[0026] Furthermore, under the exception information module, the remote control number 5 key is used to check the exception object based on the check variable module dialog window.

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

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

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

[0030] Rendering time = page load event execution completion time - complete response receiving time;

[0031] Total time consumption = page load event execution completion time - last page destruction time.

[0032] Furthermore, under the check element module,

[0033] The full-screen window is called through the remote control 0 key to display the HTML content of the current node;

[0034] The current node is checked through the remote control 5 key based on the check variable module dialog window;

[0035] The full-screen window is called through the remote control play key to display the CSS style currently in effect of the current node;

[0036] The display position of the list window in the television screen is adjusted through the remote control 1, 2, 3, 4, 6, 7, 8, 9, and volume- keys;

[0037] Adjust the list window to be maximized display by the remote control volume + key.

[0038] Further, under the focus object module,

[0039] Call the full screen window to display the basic information of the current focus by the remote control 0 key;

[0040] Check the current focus based on the check variable module dialog window by the remote control 5 key;

[0041] Adjust the display position of the list window in the television screen by the remote control 1, 2, 3, 4, 6, 7, 8, 9, volume - key;

[0042] Adjust the list window to be maximized display by the remote control volume + key.

[0043] Further, under the check variable module,

[0044] Call the full screen window to display the value converted from the string of the current attribute by the remote control 0 key;

[0045] Check the current focus based on the check variable module dialog window by the remote control 5 key;

[0046] Adjust the display position of the list window in the television screen by the remote control 1, 2, 3, 4, 6, 7, 8, 9, volume - key.

[0047] Further, under the indexedDB module,

[0048] The focus can also focus on the corresponding warehouse, and when the corresponding warehouse is clicked, all index names under the warehouse are read, if the focus is on the warehouse or the index item and the remote control 5 key is pressed, the corresponding warehouse or index information and all data under the same are presented in the form of object object through the check variable module dialog window.

[0049] The method provided by the application can directly integrate the debugging function in the IPTV EPG page, and 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. Convenient to use, developers do not need to separately embed debugging functions in their own pages.

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

[0054] 5. Authority division, when there is a need for user assistance debugging in the existing network, the corresponding authority can be provided as needed to safely pass through the corresponding function. BRIEF DESCRIPTION OF DRAWINGS

[0055] Figure 1 is a flowchart of an embodiment of the present application.

[0056] Figure 2 is a schematic diagram of a call debugging panel of an embodiment of the present application.

[0057] Figure 3 is Figure 2 a display diagram of more functions in the embodiment. DETAILED DESCRIPTION

[0058] The present application will be described below in conjunction with the accompanying drawings, and the specific embodiments described herein are only used to illustrate and explain the present application, and are not used to limit the present application, and various modifications and improvements to the technical solutions of the present application made by those of ordinary skill in the art without departing from the design spirit of the present application shall fall within the protection scope of the present application.

[0059] As Figures 1 to 3 shown, the method of the present embodiment which can directly integrate debugging functions in the IPTV EPG page includes the following steps:

[0060] Step S1: continuously monitor JS exceptions and ajax requests, and cache.

[0061] Step S2: monitor whether the current is pressed 2668765 in sequence by the remote control, if so, call the password confirmation window to verify the password.

[0062] Step S3: call the Control (debugging) panel for the user to select the function menu.

[0063] Step S4: when the user clicks the corresponding menu, check whether the user has the authority, if not, prompt "no authority operation".

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

[0065] The function menu in step S3 includes the following modules:

[0066] (1) page menu module: used to pop up the page menu list window in the case of registering the page custom menu, to facilitate developers to embed some hidden function menus in the page, and to provide some hidden needs that may be needed.

[0067] (2) Page information module: used to pop up a full-screen window to display or present the relevant data of the current webpage, such as encoding, last update time, node quantity, script quantity, whether it is an iframe inner page, page title, page URL, source page, Cookie (a simple text file saved in the client), LocalStorage (local storage), SessionStorage (local session), etc.

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

[0069] (4) Exception information module: used to pop up a step 1 monitored JS exception information list window, and the user can secondarily select to view the detailed information of the corresponding item. Under the current module, the remote control number 5 key is used to check the exception object based on the check variable module dialog window. The module can monitor and collect in real time whether the program code in the page causes an exception. When the page has an exception, the specific exception information that can be captured can be viewed in the current "exception information" function.

[0070] (5) Request record module: used to pop up a step 1 monitored ajax request record list window, and the user can secondarily select to view the detailed information of the corresponding item. The detailed information includes request time, address, request method, network status code, time-consuming information, header information, form data, response body, JSON (open standard file format and data exchange format) formatted response body. Under the current module, the remote control number 5 key is used to check the response body based on the check variable module dialog window.

[0071] (6) Performance analysis module: used to obtain the indicators of the page loading at any time through the Web Performance API interface (network performance interface), and visualize them in a full-screen window. At the same time, the "white screen time", "rendering time" and "total time consumption" of the page are calculated, wherein:

[0072] White screen time = completion of receiving response time (responseEnd) - domain name query time (domainLookupStart);

[0073] Rendering time = page load event execution completion time (loadEventEnd) - completion of receiving response time (responseEnd);

[0074] Total time consumption = page load event execution completion time (loadEventEnd) - last page destruction time (navigationStart).

[0075] The module can view the time consumption from the start loading to the corresponding key moment of the current page opening completion, assist the developer in troubleshooting the performance consumption position in the page, and provide help for performance optimization.

[0076] (7) Check element module: find the child nodes from the document element (web document element) through the Node.childNodes interface (get child node element interface) and display them into the list window. When the user clicks to expand the child nodes, find the child nodes of the current node again, and so on. At the same time, under the current module,

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

[0078] Check the current node based on the check variable module dialog window through the 5 key of the remote control;

[0079] Call out the full-screen window to display the CSS style (cascading style sheet) currently in effect of the current node through the play key of the remote control;

[0080] Adjust the display position of the list window in the television screen through the 1, 2, 3, 4, 6, 7, 8, 9, volume- keys of the remote control;

[0081] Adjust the list window to maximum display through the volume+ key of the remote control.

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

[0083] (8) Focus object module: used to call out the list window to display the focus element list of the current page. Similar to the check element, the focus element node can be expanded level by level. At the same time, under the current module,

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

[0085] Check the current focus based on the check variable module dialog window through the 5 key of the remote control;

[0086] Adjust the display position of the list window in the television screen through the 1, 2, 3, 4, 6, 7, 8, 9, volume- keys of the remote control;

[0087] Adjust the list window to maximum display through the volume+ key of the remote control.

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

[0089] (9) Check variable module: find the object property list from the root variable "window" of Web JS (browser programming language) and display them into the list window. If the value is also an object property, click to expand the property list again. Under the current module,

[0090] Call the full-screen window display the value of the current attribute converted into a string by the remote control 0 key;

[0091] Check the current focus through the remote control 5 key based on the check variable module dialog window;

[0092] Adjust the display position of the list window in the television screen through the remote control 1, 2, 3, 4, 6, 7, 8, 9, and volume- keys.

[0093] The module can provide a reference function of all global variables and values in the page, and allow developers to embed some local variable check functions as needed.

[0094] (10) Layout boundary module: 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 sheet 3) to set the outline style, that is, to highlight the border of all visible nodes. The Chinese annotation of the "nth-child(8n+i)" pseudo class is: child pseudo class (every 8 one cycle).

[0095] The module adds a border with a random color to the nodes used for UI layout in the page, so that these nodes are "visible".

[0096] (11) Debug mode module: uses cookies to record the opening state, provides corresponding api (interface) call log printing function, and only when the debug mode is opened, the api call will actually perform log printing operation, at the same time, the opening and closing of the debug mode will also correspondingly throw the corresponding event broadcast, which can provide some custom related functions for developers.

[0097] (12) Prevent jump module: used to provide a unified page jump api (navigator api, navigator interface), when the prevent jump function is opened, executing the jump api will intercept the browser page jump, and the address to be jumped will be output to the screen through the log printing function.

[0098] (13) Resource information module: based on the "WEB performance.getEntriesByType(...) API" (network resource list interface) to get the loaded resources of the current page, and according to the resource name, type, size, time-consuming and other information, in a certain format, in the form of a list window, it is presented on the screen, and the focus can be moved to the corresponding resource item to click to view the complete url address of the resource.

[0099] (14)indexedDB module: based on indexedDB API, all database names are acquired, and a list window is called to display the database list on the screen. When the focus is focused on the corresponding database, the database will be connected to read all the store names under the database and inserted into the list window with a certain indentation. Similarly, the focus can also be focused on the corresponding store. When the corresponding store is clicked, all index names under the store will be read. If the focus is focused on the store or the index item and the remote control 5 key is pressed, the corresponding store or index information and all the data under it will be presented in the format of object object through the inspection variable module dialog window.

[0100] The method of the embodiment can directly integrate the debugging function in the IPTV EPG page. The method is based on the standard WEBAPI to realize the functions related to debugging, such as exception capture, network request, resource request, storage data, page node tree, real-time CSS, 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. Convenient to use, developers do not need to separately embed debugging functions in their own pages.

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

[0105] 5. Authority division, when there is a need for user assistance in the existing network, the corresponding authority can be provided as needed to pass the corresponding function.

Claims

1. A method for directly integrating debugging functions into the IPTV EPG page, characterized in that, Includes the following steps: Step 1: Continuously monitor JS exceptions and AJAX requests, and cache them; Step 2: Listen to whether the password 2668765 has been pressed sequentially via the remote control. If so, a password confirmation window will appear to verify the password. Step 3: Bring up the Control panel for users to select various function menus; Step 4: When the user clicks the corresponding menu, check if they have permission. If not, display "No permission to operate". The function menu includes: The page menu module is used to pop up a page menu list window when a custom page menu has been registered. This module allows developers to embed hidden functions in the page and provides hiding options. The page information module is used to pop up a full-screen window and display the current webpage's encoding, last update time, number of nodes, number of scripts, whether it is an iframe inner page, page title, page URL, source page, and related data such as Cookie, LocalStorage, and SessionStorage. The device information module is used to pop up a full-screen window to display information about the current set-top box, the user, the browser, and the framework version. The exception information module is used to pop up a list window of JS exception information listened to in step 1. Users can view the detailed information of the corresponding items by making a second selection. This module can listen and collect whether the program code in the page is abnormal in real time. When there is an exception on the page, the specific exception information that can be captured can be viewed in the current module. The request record module is used to pop up a list window of AJAX request records listened to in step 1, and users can view the detailed information of the corresponding items by making a second selection; The performance analysis module is used to obtain various metrics of page loading through the Web Performance API interface and visualize them in a full-screen window. It also calculates the page's white screen time, rendering time, and total time. This module can view the time spent from the start of loading to the completion of the current page loading, helping developers to identify the performance consumption points on the page and providing assistance for performance optimization. The Element Inspection module is used to find child nodes starting from the document element using the Node.childNodes interface and display them in a list window. When the user clicks to expand child nodes, the module searches for the child nodes of the current node again, and so on. This module can provide a real-time HTML node count query function. The Focus Object module is used to bring up a list window to display the list of focus elements on the current page. It can expand the focus element nodes level by level and provides the function of viewing the focus element node tree on the page. The Variable Inspection module is used to search for a list of object properties starting from the root variable "window" in Web JS and display it in a list window. If its value is also a property of the object, it can be clicked to expand the property list. This module can provide the function of viewing all global variables and values ​​on the page, and allows developers to embed some local variable inspection functions as needed. The layout boundary module first generates eight different, high-contrast colors and randomly shuffles them. Then, it uses the CSS3 "nth-child(8n+i)" pseudo-class to set the outline style, which highlights the borders of all visible nodes. This module adds borders of random colors to the nodes used for UI layout on the page, making these nodes "visible". The debug mode module records the enabled state via cookies, provides corresponding API call log printing functionality, and the log printing operation will only be executed when API calls are enabled; enabling and disabling debug mode will throw corresponding event broadcasts, which can provide developers with custom related functions; The redirect blocking module provides a unified page redirection API. When the redirect blocking function is enabled, executing this redirection API will intercept the browser page redirection and output the address to be redirected to the screen through the log printing function. The resource information module is used to obtain the resources loaded on the current page through the "WEB performance.getEntriesByType(...) API" and present them on the screen in a list window in a certain format according to the resource name, type, size, and time consumed. You can move the focus to the corresponding resource item and click to view the complete URL address of the resource. The indexedDB module is used to obtain all database names through the indexedDB API and display the database list on the screen. When the focus is on the corresponding database, it will attempt to connect to the database, read all the repository names under the database, and insert them into the list window with certain indentation.

2. The method according to claim 1, characterized in that, Under the Exception Information module, use the number 5 key on the remote control to check for exception objects based on the Variable Checking module dialog box.

3. The method according to claim 1, characterized in that, In the request log module, users can view detailed information, including the request time, address, request method, network status code, time taken, header information, form data, response body, and JSON-formatted response body, through a second selection. At the same time, in the current module, users can check the response body through the variable check module dialog box by pressing the number 5 key on the remote control.

4. The method according to claim 1, characterized in that, The formulas for calculating white screen time, rendering time, and total time are as follows: White screen time = Time to complete receiving response - Time to query domain name; Rendering time = Page load event completion time - Response reception time; Total time = Page load event completion time - Previous page destruction time.

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

6. The method according to claim 1, characterized in that, Under the Focus Object module, Press the 0 key on the remote control to bring up a full-screen window that displays basic information about the current focus; Check the current focus using the check variable module dialog box via button 5 on the remote control; Use the remote control buttons 1, 2, 3, 4, 6, 7, 8, 9, and the volume down button to adjust the display position of the list window on the TV screen; Use the volume up button on the remote control to maximize the list window.

7. The method according to claim 1, characterized in that, Under the variable inspection module, Press the 0 key on the remote control to bring up a full-screen window displaying the current attribute's value converted to a string; Check the current focus using the check variable module dialog box via button 5 on the remote control; Use the remote control buttons 1, 2, 3, 4, 6, 7, 8, 9, and the volume down button to adjust the display position of the list window on the TV screen.

8. The method according to claim 2, characterized in that, Under the indexedDB module, The focus can also be focused on the corresponding warehouse. When the corresponding warehouse is clicked, all index names under that warehouse will be read. If the focus is on the warehouse or index item and the 5 button on the remote control is pressed, the corresponding warehouse or index information and all the data under it will be presented in the form of an object through the Inspect Variables module dialog box.

Images