Information analysis method, device and equipment for mobile terminal webpage and readable medium

Abstract

Embodiments of the present disclosure disclose an information analysis method, device and equipment for mobile web page and readable medium. A specific embodiment of the method comprises: in response to detecting a selection operation on a walkthrough item, displaying a web page indicated by the selected walkthrough item according to preset display parameters, and displaying a design draft page of the web page on the same screen, wherein the web page is a mobile web page; in a walkthrough mode, in response to detecting a selection operation on a target element in the web page, determining attribute information of the target element; in the design draft page, determining a target layer corresponding to the target element and design information of the target layer; and performing difference analysis on the attribute information and the design information. The embodiment proposes a design walkthrough method for mobile web page. The method can intelligently analyze the difference between page elements and corresponding layer information, thereby reducing manual operation and improving walkthrough efficiency.

Description

Technical Field

[0001] Embodiments of this disclosure relate to the field of computer technology, and more specifically to methods, apparatus, devices, and readable media for information analysis of mobile web pages. Background Technology

[0002] Currently, mobile H5 (HTLM5) pages are generally referred to as marketing pages (i.e., H5 pages) in daily use. They typically refer to web pages (World Wide Web) with special effects, interactive sound effects, and other features distributed on mobile devices. Mobile web pages are usually H5 pages.

[0003] With the continuous development of the internet, web pages are displaying increasingly diverse content, and they carry more and more information. From conception to deployment, a web page goes through many stages, among which the design and development of the visual UI (User Interface) is indispensable. The final product often differs from the original design, resulting in a lower degree of visual fidelity. Therefore, it is necessary to conduct design reviews during the testing and acceptance phases. This process mainly involves comparing the web page with the design draft and making timely adjustments to ensure accurate fidelity. Summary of the Invention

[0004] The summary portion of this disclosure is intended to provide a brief overview of concepts that will be described in detail in the detailed description portion. This summary portion is not intended to identify key or essential features of the claimed technical solutions, nor is it intended to limit the scope of the claimed technical solutions. Some embodiments of this disclosure propose methods, apparatus, electronic devices, and computer-readable media for information analysis of mobile web pages.

[0005] In a first aspect, some embodiments of this disclosure provide an information analysis method for mobile web pages, including: in response to detecting a selection operation on a walkthrough item, displaying a web page indicated by the selected walkthrough item according to preset display parameters, and displaying a design draft page of the web page on the same screen, wherein the web page is a mobile web page; in walkthrough mode, in response to detecting a selection operation on a target element in the web page, determining the attribute information of the target element; in the design draft page, determining the target layer corresponding to the target element and the design information of the target layer; and performing a difference analysis on the attribute information and the design information.

[0006] In some embodiments, the method further includes at least one of the following steps: displaying attribute information of the target element and design information of the target layer; marking the size and / or position of the target element on the web page; marking the size and / or position of the target layer on the design draft page.

[0007] In some embodiments, determining the target layer corresponding to the target element includes: determining a set of layers in the design draft page that match the position information of the target element in the web page; selecting a layer from the layer set, and determining the selected layer as the target layer corresponding to the target element.

[0008] In some embodiments, selecting a layer from a layer set includes at least one of the following steps: selecting a layer from the layer set whose size information and color match the target element's size information and color, and distinguishing the selected layer from other layers in the layer set; and distinguishing the selected layer from other layers in the layer set in response to detecting a selection operation on a layer in the layer set.

[0009] In some embodiments, the web page and the design draft page are displayed in different areas of the same interface, wherein the interface is provided with a display parameter input control; and the method further includes: adjusting the display of the web page according to the parameters input by the user in the display parameter input control, wherein the display parameters include display size and / or magnification ratio.

[0010] In some embodiments, the method further includes: generating a walkthrough task based on the discrepancy information in response to determining that there is a difference between the attribute information and the design information.

[0011] In some embodiments, generating a walkthrough task based on difference information includes: capturing an element image of a target element and a layer image of a target layer, wherein the element image includes a static image or a dynamic image; and generating a walkthrough task based on the element image, the layer image, and the difference information.

[0012] In some embodiments, the method further includes: displaying a walkthrough task; generating marker information for the walkthrough task based on its task status; and displaying the marker information at a preset position of the target element, wherein the task status of the walkthrough task includes at least one of the following: pending repair, pending acceptance, or completed; and displaying information about the walkthrough task in response to detecting a trigger operation on the marker information.

[0013] In some embodiments, the method further includes: in response to detecting a selection operation on a target walkthrough task, acquiring and displaying attribute information of elements and design information of layers in the target walkthrough task, wherein the target walkthrough task is a walkthrough task with a task status of pending acceptance; performing a difference analysis on the acquired attribute information and design information; and adjusting the task status of the target walkthrough task based on the difference analysis results.

[0014] In some embodiments, the method further includes: recording the walkthrough tasks and generating task management information, wherein the task management information includes at least one of the following: information of the webpage to which the task belongs, task description, image information, priority, information of the person handling the task, task status, and messages; performing statistical analysis on each walkthrough task in the task management information to generate the restoration degree and repair rate of the webpage, wherein the restoration degree is inversely proportional to the number of walkthrough tasks belonging to the webpage, and the repair rate is determined based on the number of walkthrough tasks belonging to the webpage and the task status.

[0015] In some embodiments, the method further includes: generating a walkthrough project of a web page based on the information entered by the user on the project information input page, wherein the project information input page includes at least one of the following: project name, associated design draft, terminal type, personnel information, and web page address, and the web page address includes at least one of the following: network address in the actual operating environment, network address in the test environment, and domain name range.

[0016] Secondly, some embodiments of this disclosure provide an information analysis device for mobile web pages, including: a page display unit configured to, in response to detecting a selection operation on a walkthrough item, display a web page indicated by the selected walkthrough item according to preset display parameters, and a design draft page of the web page displayed on the same screen, wherein the web page is a mobile web page; an element determination unit configured to, in walkthrough mode, in response to detecting a selection operation on a target element in the web page, determine the attribute information of the target element; a layer determination unit configured to, in the design draft page, determine the target layer corresponding to the target element and the design information of the target layer; and an analysis unit configured to perform a difference analysis on the attribute information and the design information.

[0017] In some embodiments, the apparatus further includes at least one of the following: an information display unit configured to display attribute information of the target element and design information of the target layer; an element annotation unit configured to annotate the size and / or position of the target element on a web page; and a layer annotation unit configured to annotate the size and / or position of the target layer on a design draft page.

[0018] In some embodiments, the layer determination unit is further configured to determine a set of layers in the design draft page that match the position information of the target element in the web page; select a layer from the layer set, and determine the selected layer as the target layer corresponding to the target element.

[0019] In some embodiments, the layer determination unit is further configured to: select a layer from the layer set whose size information and color match the target element's size information and color, and distinguish the selected layer from other layers in the layer set; in response to detecting a selection operation on a layer in the layer set, distinguish the selected layer from other layers in the layer set.

[0020] In some embodiments, the web page and the design draft page are displayed in different areas of the same interface, wherein the interface is provided with a display parameter input control; and the device further includes a display adjustment unit configured to adjust the display of the web page according to the parameters input by the user in the display parameter input control, wherein the display parameters include display size and / or magnification ratio.

[0021] In some embodiments, the apparatus further includes a generation unit configured to generate a walkthrough task based on the discrepancy information determined between attribute information and design information.

[0022] In some embodiments, the generation unit is further configured to capture an element image of the target element and a layer image of the target layer, wherein the element image includes a static image or a dynamic image; and to generate a walkthrough task based on the element image, the layer image, and the difference information.

[0023] In some embodiments, the device further includes: a task display unit configured to display a walkthrough task; a marker generation unit configured to generate marker information for the walkthrough task based on the task status of the walkthrough task, and to display the marker information at a preset position of the target element, wherein the task status of the walkthrough task includes at least one of the following: pending repair, pending acceptance, or completed; and to display the information of the walkthrough task in response to detecting a trigger operation on the marker information.

[0024] In some embodiments, the apparatus further includes a state adjustment unit configured to, in response to detecting a selection operation on a target walkthrough task, acquire and display attribute information of elements and design information of layers in the target walkthrough task, wherein the target walkthrough task is a walkthrough task with a task status of pending acceptance; perform a difference analysis on the acquired attribute information and design information; and adjust the task status of the target walkthrough task based on the difference analysis results.

[0025] In some embodiments, the apparatus further includes: a management information generation unit configured to record walkthrough tasks and generate task management information, wherein the task management information includes at least one of the following: information of the webpage to which the task belongs, task description, image information, priority, information of the person handling the task, task status, and message; and a statistics unit configured to perform statistical analysis on each walkthrough task in the task management information and generate the restoration degree and repair rate of the webpage, wherein the restoration degree is inversely proportional to the number of walkthrough tasks belonging to the webpage, and the repair rate is determined based on the number of walkthrough tasks belonging to the webpage and the task status.

[0026] In some embodiments, the apparatus further includes a project generation unit configured to generate a walkthrough project for a webpage based on information entered by the user on the project information input page. The project information input page includes at least one of the following: project name, associated design draft, terminal type, personnel information, and webpage address. The webpage address includes at least one of the following: network address in the actual operating environment, network address in the test environment, and domain name range.

[0027] Thirdly, some embodiments of this disclosure provide an electronic device, including: one or more processors; and a storage device having one or more programs stored thereon, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement the method described in any of the implementations of the first aspect above.

[0028] Fourthly, some embodiments of this disclosure provide a computer-readable medium having a computer program stored thereon, wherein the program, when executed by a processor, implements the method described in any of the implementations of the first aspect above.

[0029] The above-described embodiments of this disclosure have the following beneficial effects: the information analysis method for mobile web pages in some embodiments of this disclosure can improve the efficiency of walkthroughs. Specifically, the reason for the low efficiency of existing walkthroughs is that existing walkthrough methods mainly rely on manual measurement and comparison, which is complex and inefficient. Based on this, the information analysis method for mobile web pages in some embodiments of this disclosure, based on the selection operation of target elements, can determine the attribute information of the target elements and the design information of the corresponding target layers. Then, difference analysis can be performed on the two types of information. That is, this method can intelligently analyze the differences between page elements and their corresponding layer information. Compared with the screenshot comparison method, it not only ensures the accuracy of the analysis results but also reduces manual operation, helping to improve the efficiency of page design walkthroughs. In addition, the web page can be displayed according to preset display parameters. Furthermore, the design draft page and the web page can be displayed on the same screen. In this way, the true display effect of the web page on the mobile device can be restored, and it is convenient for users to compare. This avoids the need for repeated page switching and adjustment operations as with the comparison method that modifies transparency. Attached Figure Description

[0030] The above and other features, advantages, and aspects of the embodiments of this disclosure will become more apparent from the accompanying drawings and the following detailed description. Throughout the drawings, the same or similar reference numerals denote the same or similar elements. It should be understood that the drawings are schematic, and elements are not necessarily drawn to scale.

[0031] Figure 1 This is an architecture diagram of an exemplary system to which some embodiments of this disclosure can be applied;

[0032] Figure 2 This is a flowchart of some embodiments of the information analysis method according to this disclosure;

[0033] Figure 3 This is a flowchart of some implementations of the repair walkthrough task;

[0034] Figure 4 These are flowcharts of some implementation examples of acceptance inspection tasks;

[0035] Figure 5 These are schematic diagrams illustrating the structure of some embodiments of the information analysis apparatus according to this disclosure;

[0036] Figure 6 This is a schematic diagram of the structure of an electronic device suitable for implementing some embodiments of the present disclosure. Detailed Implementation

[0037] Embodiments of this disclosure will now be described in more detail with reference to the accompanying drawings. While some embodiments of this disclosure are shown in the drawings, it should be understood that this disclosure can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of this disclosure. It should be understood that the accompanying drawings and embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of protection of this disclosure.

[0038] It should also be noted that, for ease of description, only the parts relevant to the invention are shown in the accompanying drawings. Unless otherwise specified, the embodiments and features described in this disclosure can be combined with each other.

[0039] It should be noted that the concepts of "first" and "second" mentioned in this disclosure are used only to distinguish different devices, modules or units, and are not used to limit the order of functions performed by these devices, modules or units or their interdependencies.

[0040] It should be noted that the terms "a" and "a plurality of" used in this disclosure are illustrative rather than restrictive, and those skilled in the art should understand that, unless otherwise expressly indicated in the context, they should be understood as "one or more".

[0041] The names of messages or information exchanged between multiple devices in the embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of such messages or information.

[0042] This disclosure will now be described in detail with reference to the accompanying drawings and embodiments.

[0043] Figure 1 An exemplary system architecture 100 for information analysis methods or apparatus for mobile web pages, to which some embodiments of the present disclosure may be applied, is shown.

[0044] like Figure 1 As shown, system architecture 100 may include terminal device 101, network 102, server 103, and database server 104. Network 102 can be used as a medium to provide communication links between terminal device 101 and server 103 and database server 104. Network 102 may include various connection types, such as wired or wireless communication links or fiber optic cables, etc.

[0045] Users can use terminal device 101 to interact with server 103 and database server 104 via network 102 to receive or send messages, etc. Various client applications can be installed on terminal device 101, such as web information analysis (or web design review) applications, web browsers, and instant messaging tools.

[0046] Here, terminal device 101 can display the created walkthrough items. If a selection operation on a walkthrough item is detected, terminal device 101 can display the webpage indicated by the selected walkthrough item according to preset display parameters. Simultaneously, its design draft page can be displayed on the same screen. In walkthrough mode, when a selection operation on a target element in the webpage is detected, the attribute information of the target element can be determined. Furthermore, the target layer and its design information in the design draft page can be determined. This allows for a difference analysis of the two types of information.

[0047] The terminal device 101 here can be either hardware or software. When the terminal device 101 is hardware, it can be various electronic devices with a large display screen, including but not limited to tablet computers, e-book readers, smart TVs, laptops, and desktop computers. When the terminal device 101 is software, it can be installed in the electronic devices listed above. It can be implemented as, for example, multiple software programs or software modules used to provide distributed services, or it can be implemented as a single software program or software module. No specific limitations are made here.

[0048] Server 103 can be a server that provides various services, such as a backend server that supports web information analysis applications. The backend server can detect various user operations on terminal device 101 and send corresponding feedback information to terminal device 101. Database server 104 can be a data storage server, such as one that can pre-store design drafts.

[0049] The server 103 and database server 104 here can be either hardware or software. When server 103 and database server 104 are hardware, they can be implemented as a distributed server cluster consisting of multiple servers, or as a single server. When server 103 and database server 104 are software, they can be implemented as, for example, multiple software programs or software modules used to provide distributed services, or as a single software program or software module. No specific limitations are made here.

[0050] It should be noted that the method provided in the embodiments of this disclosure can be executed by either the terminal device 101 or the server 103. Accordingly, the device can be located in either the terminal device 101 or the server 103. No specific limitation is made here. In addition, if the server 103 has the function of a database server 104, the system architecture 100 may not need to include a database server 104.

[0051] It should be understood that Figure 1The number of terminal devices, networks, servers, and database servers shown is merely illustrative. Any number of terminal devices, networks, servers, and database servers can be included depending on actual needs.

[0052] Continue to refer to Figure 2 The diagram illustrates a flow 200 of some embodiments of a method for information analysis of mobile web pages according to the present disclosure. The method includes the following steps:

[0053] Step 201: In response to the detection of a selection operation for the walkthrough item, the web page indicated by the selected walkthrough item is displayed according to the preset display parameters, and the design draft page of the web page is displayed on the same screen.

[0054] In some embodiments, the entity performing the information analysis method (e.g. Figure 1 When the terminal device 101 shown detects a selection operation for a walkthrough item, it can display the webpage indicated by the selected walkthrough item according to preset display parameters. This webpage is typically a mobile (e.g., smartphone) webpage (i.e., an H5 page). In other words, it's a webpage that needs to be displayed on a mobile device's screen. Furthermore, the executing entity can display the design draft of the webpage on the same screen. This facilitates user review and walkthrough.

[0055] Here, the walkthrough items can be used to characterize the relationship between a webpage and a design draft. As an example, the walkthrough items may include, but are not limited to, the identification information of the webpage and the corresponding design draft. This identification information can be, for example, a name or URL. In this way, the executing entity can obtain the webpage and the design draft page based on the identification information and display the webpage according to preset display parameters. These preset display parameters can be display-related parameters, including but not limited to at least one such parameter such as display size and display resolution. This allows the executing entity to recreate the actual display scenario, i.e., the display effect of the webpage on a mobile device.

[0056] Understandably, there are no restrictions on how the webpage and design draft page can be displayed on the same screen. For example, the webpage and design draft page can be displayed in two windows on the same screen. Compared to the size of a computer screen, mobile screens are typically smaller. Therefore, alternatively, the application can also display the webpage and design draft page in different areas of the same interface.

[0057] Step 202: In walkthrough mode, in response to the detection of a selection operation on a target element in the webpage, determine the attribute information of the target element.

[0058] In some embodiments, during a walkthrough mode, if a selection operation on a target element in the currently displayed webpage is detected, the executing entity can determine the attribute information of the target element. Here, walkthrough mode typically refers to the design walkthrough phase, i.e., the process of identifying and reducing discrepancies between the actual webpage implementation (the webpage actually presented by R&D) and the design draft. Walkthrough mode is generally contrasted with browsing mode. Browsing mode typically refers to the existing webpage browsing process. The operation method for the above selection operation is not limited here; it can be achieved through voice selection, click selection, or selection by moving the mouse display position (e.g., pausing for a certain period of time).

[0059] In some embodiments, the aforementioned webpage is generally a draft of a mobile webpage. The target element can be any element on the webpage, such as a background, icon, text, etc. The attribute information of the target element can be information used to display the target element, such as size, position, color, font, etc. Here, the executing entity can determine the attribute information of the target element in various ways. As an example, the executing entity can have a built-in walkthrough tool to measure the target element and obtain its attribute information. The walkthrough tool can include a ruler, a color picker, etc. The ruler can measure the target element's size, absolute position, and relative position (such as its distance from surrounding elements), etc. The absolute position can be the target element's coordinates from the origin or its distance from the four sides of the page. The relative position can be the target element's distance from surrounding (specified or nearest) elements.

[0060] In some embodiments, to facilitate information comparison, in walkthrough mode, the executing entity can also annotate the size and / or position of target elements on the webpage. As an example, the executing entity can listen for user selection actions on the webpage. If the mouse is detected to move to (or remain on for a certain period of time or be clicked) the location of an element, the executing entity can draw the outline of that element and annotate its width and height. If another element is detected to be clicked (or double-clicked or right-clicked), the executing entity can draw the outline of that element and annotate its width and height, and can also annotate the distance between the two elements.

[0061] Optionally, the executing entity can also be equipped with an element inspector. This allows the user to obtain the attribute information of the target element. Furthermore, to further facilitate information comparison, the executing entity can display the target element's attribute information. The display method and location are not limited. For example, it can be displayed on a webpage or within the window containing the webpage.

[0062] Step 203: On the design draft page, determine the target layer and its design information corresponding to the target element.

[0063] In some embodiments, on the design draft page, the implementing entity can determine the target layer corresponding to the target element and the design information of the target layer. This design information is typically the information the designer envisions for presenting the target element with the desired display effect, i.e., the raw information.

[0064] Here, the executing entity can determine the target layer in several ways. For example, a user can select the location of the target element on the design draft page. When the executing entity detects this selection, it can determine the layer set near the location indicated by the selection. It can then select a layer from this layer set and designate the selected layer as the target layer corresponding to the target element.

[0065] For example, to reduce user operations, the executing entity can determine the set of layers in the design draft that match the target element's location information (such as coordinates) on the webpage. Then, a layer can be selected from this set as the target layer.

[0066] Here, the method of selecting layers is unrestricted. For example, the executing entity can select layers located at preset layers (such as the top or bottom layer) in the layer set. Alternatively, the executing entity can select layers from the layer set whose size information (such as width, height, and area) and color (such as background color or line color) match the target element's size information (such as width, height, and area) (e.g., same or similar). As an example, the executing entity can first calculate the area of ​​the target element, thereby performing a fuzzy match for layers with similar areas to obtain a layer set, thus narrowing down the search. Then, it can determine from the layer set layers that have similar width and height to the target element and the same color as it, as the target layer. That is, it intelligently locates the closest layer. In this way, intelligent linkage between page elements and design draft layers can be achieved, enabling rapid problem localization.

[0067] Furthermore, to facilitate user navigation and understanding of the currently selected layer, the executing entity can also differentiate the selected layer from other layers in the layer set. The method of differentiation can be configured according to the actual situation, such as maintaining a continuous layer color or flashing a highlight.

[0068] In some embodiments, to improve the accuracy of layer selection, a human-computer interaction selection method can also be adopted. That is, after the executing entity selects layers from the layer set and displays them separately, the user, with the assistance of the executing entity, can further select layers from the layer set to determine the target layer. For example, if a selection operation (such as a click) on the area containing the currently selected layer is detected, the executing entity can confirm that the user has also selected that layer and maintain its separate display. If another selection operation on the area containing that layer is detected, the executing entity can confirm the layer located one layer above (or below) that layer as the layer selected by the user and display it separately. This logic is followed to iterate through and differentiate the layers in the layer set, thereby achieving layer selection. This also helps improve the efficiency of selecting the target layer.

[0069] In addition, the executing entity can determine the design information of the target layer in various ways. For example, it can use the built-in walkthrough tool mentioned above. Alternatively, the executing entity can be equipped with a layer viewer. This layer viewer allows the obtaining of the target layer's design information. To facilitate comparison with the target element's attribute information, the executing entity can also display the target layer's design information. And / or the executing entity can also annotate the target layer's size and / or position on the design draft page. Here, the display method and position are not limited. For example, it can be displayed on the design draft page or in its corresponding window interface.

[0070] It's important to note that one existing walkthrough method utilizes browser extensions to overlay the design draft onto the implemented version. By adjusting the transparency of the design draft and comparing the differences, visual issues can be identified. However, once a discrepancy appears in the implementation of a single element, all subsequent comparisons become misaligned, rendering the entire system unusable. Furthermore, adjusting the transparency reduces clarity. This walkthrough method is also inefficient. The information analysis method disclosed herein does not require browser developer tools to obtain relevant information. By integrating the element inspector and layer inspector into a single tool, it facilitates direct comparison between the implemented and design drafts, ensuring the accuracy of measurement results. It is simple to operate, facilitates difference comparison, and improves walkthrough efficiency.

[0071] Step 204: Perform a difference analysis on the attribute information and design information.

[0072] In some embodiments, based on the attribute information of the target element determined in step 202 and the design information of the target layer determined in step 203, the executing entity can perform a difference analysis on the attribute information and the design information. For example, the executing entity can compare and analyze the attribute values ​​of the same attributes (such as position, font, size, etc.) in both. If the attribute values ​​are different, it indicates that there is a difference between the two.

[0073] Understandably, for information with identical attributes, the executing entity can automatically compare and analyze it. In some cases, a human-computer combined comparison method can also be used. By displaying the attribute information of the target element and the design information of the target layer, users can compare and analyze the information with different attributes in the two. This not only improves analysis efficiency but also helps to improve the accuracy of the analysis results.

[0074] It should be noted that one existing method of walkthrough analysis involves designers manually measuring and comparing screenshots in design software (such as Photoshop), performing color sampling, and drawing lines to identify problems. This screenshot comparison method is inefficient and the measurement results are not accurate enough. The method disclosed in this paper, however, can intelligently analyze the differences between page elements and layer information. Not only are the measurement and analysis results accurate, but it also improves walkthrough efficiency. Furthermore, by displaying the information, users can easily perform direct comparison and analysis, further enhancing walkthrough efficiency.

[0075] Furthermore, if discrepancies are found between the attribute information and the design information, the executing entity can generate a walkthrough task based on these discrepancies. For example, if there are differences between the attribute information and the design information, the executing entity can display a task information input page (i.e., a new task page) on the screen, and can also display the discrepancy information on this page. For example, the task information input page may include a "Problem Description" field. The executing entity can then input the discrepancy information here, thereby generating the walkthrough task. Users can manually modify the problem description information according to the actual situation.

[0076] Here, difference information is used to characterize discrepancies between attribute information and design information. Its specific content is not limited here. For example, difference information can be attributes and / or attribute values ​​that differ; it can also be information generated as a result, such as incorrect (or different) font size, incorrect color, etc. Understandably, for different attributes, the executing entity cannot directly compare attribute values. In this case, difference information can be generated, such as the existence of different attributes (or specific attribute names), to facilitate subsequent manual processing.

[0077] In some embodiments, to make the problem description clearer and easier for users to understand, the executing entity can capture element images of the target element and layer images of the target layer. The element images can include static or dynamic images. Then, based on the element images, layer images, and difference information, a walkthrough task is generated. As an example, the task information input page can also include "Implementation Draft Image" and "Design Draft Image" fields. In this case, the executing entity can input the element images and layer images into the aforementioned two fields respectively.

[0078] In some embodiments, the executing entity can automatically capture element images and layer images. For example, the executing entity can obtain the coordinates of four nodes of a target element (or target layer), thereby capturing an image of the area enclosed by the four nodes as the element image of the target element or the layer image of the target layer. Optionally, the user can also manually take a screenshot (e.g., by swiping). In this case, in response to detecting the user's screenshot operation, the executing entity can capture an image of the area indicated by the operation.

[0079] Optionally, the walkthrough task can also include task priority and handler information. The handler here is typically the R&D personnel who need to fix discrepancies. This facilitates task selection and management, and helps improve task processing efficiency.

[0080] It should be noted that existing walkthrough methods are complex in terms of problem description and submission, typically requiring users to use third-party documentation tools to paste screenshots and write problem descriptions. Furthermore, mobile web interfaces are generally small and inconvenient for users. The method disclosed herein, however, can automatically capture images and output discrepancy information without requiring manual copying and pasting, thus facilitating the rapid generation of walkthrough tasks.

[0081] It's understandable that different mobile screen sizes will result in different display sizes for web pages. Since mobile web pages are typically smaller, the preset display parameters mentioned above can also include a magnification ratio to facilitate user navigation. This allows the execution entity to proportionally enlarge the web page for display.

[0082] Here, the aforementioned preset display parameters can be pre-set. Optionally, to facilitate user adjustments to the webpage display, a display parameter input control can be provided in the interface where the webpage and design draft are displayed side-by-side. The display parameters may include, but are not limited to, at least one of the following: display size, magnification ratio, etc. In this case, the executing entity can adjust the webpage display based on the parameters entered by the user in the display parameter input control. The input method is not limited here; it can be manual input or selection from a display parameter list. This allows for one-click switching of webpage display parameters, improving the flexibility and efficiency of display adjustments, thereby adapting to and covering various mobile scenarios. This also helps to broaden the applicability of the submission information analysis method.

[0083] It should be noted that the aforementioned attribute information and annotation dimensions (and / or positions) are unaffected by zoomed-in display. That is, regardless of the zoom level of the webpage, the attribute information and annotation dimensions determined by the executing entity are the actual parameters before zooming in. This avoids inconsistencies in size between the webpage and the design draft due to zooming, which could impact the review process. Simultaneously, it resolves the issue of poor user experience in information comparison and review task submission caused by the small display interface of mobile webpages.

[0084] Optionally, to facilitate user navigation, the executing entity can also magnify a specific area of ​​the webpage. For example, upon detecting a selection operation on a target area of ​​the webpage, the executing entity can magnify that target area. The target area can be any area on the webpage. The selection method is also unrestricted; users can select by sliding on the screen (e.g., with a mouse or finger) or by using a selection box with editable dimensions. Here, the executing entity can display the target area on the same screen as the webpage, as different areas of the same interface. As an example, the interface displayed on the same screen can include a magnification control to enable and disable the magnification function for specific areas.

[0085] In addition, to facilitate user access and real-time monitoring of the progress, the executing entity can synchronize the target area with the webpage. For example, if a user selects a target element in the target area of ​​the webpage and marks its size, the selection and marking of the target element can also be displayed in the enlarged display area of ​​the target area.

[0086] To facilitate comparison and analysis between the implemented and designed versions of a webpage, and to implement a design walkthrough, walkthrough projects can be pre-created, and the walkthrough environment and relevant data sources can be set. As an example, a project information input (i.e., walkthrough project creation) page can be set up. Based on the information entered by the user on the project information input page, a walkthrough project for the webpage can be generated. The project information input page can include, but is not limited to, at least one of the following: project name, associated design draft (name or address), terminal type, personnel information, and webpage address. The webpage address can include at least one of the following: a network address in the actual operating environment (e.g., URL, Uniform Resource Locator), a network address in the test environment, or a domain name range. The terminal type generally refers to the type of terminal on which the webpage is applicable, which can include PCs (Personal Computers) and mobile devices (e.g., smartphones, watches).

[0087] Optionally, layered data of the design source file can be obtained through the development API (Application Programming Interface) provided by design tools (such as Photoshop, Sketch, Figma, etc.). This layered data can then be pre-stored in a database. The layered data may include the coordinates, dimensions, and type of each layer. Thus, when the design page is opened, the renderer can use the layered information in the database to draw the design layer by layer.

[0088] Understandably, after a participant selects (or enters) a particular project, the execution entity can dynamically inject the project's configured environment parameters to initialize the project environment. The project's homepage (i.e., the webpage) can then be opened in a webview window provided by a desktop development framework (such as Electron), with the associated design draft page appearing in the adjacent area. The webpage can be displayed according to the set display parameters. This interface can include a mode switching control to switch between visitor and browsing modes. In visitor mode, after the visitor page is loaded, the execution entity injects a script (such as JavaScript, a programming language). This script primarily listens for mouse movement and click events. Participants can then use the mouse to select target elements on the interface. This allows the execution entity to perform the information analysis methods described in steps 201 to 204, thereby assisting in the description and generation of the visitor task.

[0089] In some embodiments, to facilitate user access to and switching between walkthrough tasks, the executing entity can also display the walkthrough tasks. As an example, the interface displaying two pages can also include a task display area. This allows the executing entity to showcase the walkthrough tasks in the task display area. In some application scenarios, the task display area can overlap with the task information input page, i.e., reuse the same display area. When discrepancies are identified, i.e., when a walkthrough task needs to be generated, the task information input page can be displayed in this area. After the walkthrough task is generated, the executing entity can close the page and display the walkthrough task list in this area. Furthermore, to facilitate switching between the two pages, a display switching control can be provided in the interface (as described above, the same display area) to control the switching between the two pages.

[0090] Furthermore, based on the task status of the walkthrough, marker information for the walkthrough can be generated. This marker information can then be displayed at a preset location (such as the upper right corner) of the target element (the element indicated by the walkthrough task). This enables rapid location of the walkthrough task, thereby improving walkthrough efficiency. The format of the marker information is not limited here; it can include numbers, letters, symbols, images, etc. The task status of the walkthrough can include at least one of the following: pending repair, pending acceptance (repaired), or completed.

[0091] Understandably, when a walkthrough task is created, its status is generally "Pending Repair," meaning it awaits repair by developers. After repair by developers, the task status is generally "Pending Acceptance," meaning it awaits acceptance by the walkthrough team. Once the walkthrough task has been accepted by developers and confirmed to be problem-free, its status can be "Completed."

[0092] Here, the executing entity can display the tagging information for all walkthrough tasks on the webpage. Alternatively, it can display only the tagging information for a subset of walkthrough tasks, such as a user-selected task or a list of filtered tasks. For example, if a developer selects a walkthrough task from the task list in the task display area, the tagging information for that task can be displayed on the webpage. This tagging information allows users to quickly locate problems, improving the efficiency of walkthrough task processing. The tagging information differs depending on the task status, such as displaying different colors or different content. For completed walkthrough tasks, their tagging information may not be displayed on the webpage.

[0093] Optionally, in response to a detected trigger action (such as a click) on the marked information, the executing entity can display information about the walkthrough task. This allows users to easily view the problems with the task and quickly modify its status.

[0094] As an example, such as Figure 3 The diagram illustrates a flowchart for developers to fix walkthrough tasks. After developers open the walkthrough project, the execution entity can automatically open the walkthrough webpage (both the main webpage and the design draft page) in the webview interface and inject the walkthrough script. The interface displays all walkthrough tasks on the current webpage (e.g., a walkthrough task list). It also displays marker information for each walkthrough task on corresponding elements on the webpage. Developers can click on the marker information to view the walkthrough task details. Based on the suggested modifications (e.g., task descriptions), developers can then fix the walkthrough task and adjust its status.

[0095] In some embodiments, in response to detecting a selection operation on a target walkthrough task, the executing entity can acquire and display the attribute information of elements and the design information of layers in the target walkthrough task. The target walkthrough task is a walkthrough task with a task status of "pending acceptance." Next, a difference analysis can be performed on the acquired attribute information and design information. Then, based on the difference analysis results, the task status of the target walkthrough task can be adjusted. For example, if there is no difference between the two types of information, it indicates successful repair. In this case, the task status of the target walkthrough task can be adjusted to "completed." If a difference still exists between the two types of information, it indicates that the repair is not yet complete. In this case, the task status of the target walkthrough task can be adjusted to "pending repair."

[0096] As an example, such as Figure 4 The diagram illustrates the flowchart for the acceptance of a walkthrough task by the inspectors. After the inspectors select a walkthrough item, the executing entity can open the walkthrough page to be accepted in the webview interface and inject the walkthrough script. The interface can also display all walkthrough tasks on the current webpage, using different float colors to mark walkthrough tasks with different statuses. Inspectors can select the walkthrough task to be accepted by color. The executing entity can automatically obtain the attribute and layer information of the walkthrough task and automatically provide comparison opinions on the repair results. Alternatively, the executing entity can display attribute and layer information according to the walkthrough mode for inspectors to manually check the repair status. After confirming successful repair, the task status of the walkthrough task can be updated and the task closed.

[0097] In some application scenarios, the executing entity can also record the generated walkthrough tasks and generate task management information (such as a task management table). This task management information can include at least one of the following: the webpage information, task description (problem description), image information (element images and layer images), priority, personnel handling the task (walkthrough personnel and R&D personnel), task status, comments, etc. This facilitates user tracking and management of walkthrough tasks and helps to understand the repair progress in a timely manner.

[0098] Furthermore, the executing entity can perform statistical analysis on each walkthrough task in the task management information, generating and displaying the restoration rate and repair rate of the webpage. The restoration rate is inversely proportional to the number of walkthrough tasks belonging to the webpage; that is, the more tasks, the lower the restoration rate. The repair rate, on the other hand, is determined based on the number of walkthrough tasks belonging to the webpage and their status. That is, the more walkthrough tasks that have been repaired (pending acceptance) and completed, the higher the repair rate.

[0099] It should be noted that existing walkthrough methods require users to manually maintain walkthrough tasks and their resolution status. Furthermore, they lack issue tracking and management, and cannot quantify or evaluate the application's fidelity and quality. The information analysis method disclosed herein can automatically manage and statistically analyze generated walkthrough tasks. Moreover, it can automatically adjust the statistical results based on changes in task status. This not only reduces the user's workload but also allows users to easily understand the walkthrough progress in real time.

[0100] In some embodiments, the score F(x) of the degree of restoration can be obtained using the following formula:

[0101]

[0102] Where i represents the priority level, with a value range of [0, n], where n is a positive integer; f i This represents the deduction value for the i-th priority level. T i represents the weight of the i-th priority level, with a value range of (0, 100); q represents the restoration coefficient, with a value range of (0, 1); m represents the number of issues or tasks with the i-th priority level; the constraints are as follows:

[0103] As an example, if T0 = 20, T1 = 15, q = 0.1, the number of walkthrough tasks with priority P0 is 1, and the number of walkthrough tasks with priority P1 is 3, then the score for restoration is

[0104] Further reference Figure 5 As a response to the above Figure 2 The implementation of the method shown in this disclosure provides some embodiments of an information analysis device for mobile web pages, and these device embodiments are similar to... Figure 2 Corresponding to the method embodiments shown, the device can be specifically applied to various electronic devices.

[0105] like Figure 5 As shown, some embodiments of the information analysis device 500 for mobile web pages may include: a page display unit 501, configured to, in response to detecting a selection operation on a walkthrough item, display the web page indicated by the selected walkthrough item according to preset display parameters, and a design draft page of the web page displayed on the same screen, wherein the web page is a mobile web page; an element determination unit 502, configured to, in walkthrough mode, in response to detecting a selection operation on a target element in the web page, determine the attribute information of the target element; a layer determination unit 503, configured to, in the design draft page, determine the target layer corresponding to the target element and the design information of the target layer; and an analysis unit 504, configured to perform a difference analysis on the attribute information and the design information.

[0106] In some embodiments, the device 500 further includes at least one of the following: an information display unit ( Figure 5 (Not shown in the image), configured to display the attribute information of the target element and the design information of the target layer; element annotation unit ( Figure 5 (not shown in the image), configured to annotate the size and / or position of target elements on a web page; layer annotation unit ( Figure 5 (not shown in the image), is configured to indicate the size and / or position of the target layer on the design page.

[0107] In some embodiments, the layer determination unit 503 is further configured to determine a set of layers in the design draft page that match the position information of the target element in the web page; select a layer from the layer set, and determine the selected layer as the target layer corresponding to the target element.

[0108] In some embodiments, the layer determination unit 503 is further configured to: select a layer from the layer set whose size information and color match the target element's size information and color, and distinguish the selected layer from other layers in the layer set; in response to detecting a selection operation on a layer in the layer set, distinguish the selected layer from other layers in the layer set.

[0109] In some embodiments, the web page and the design draft page are displayed in different areas of the same interface, wherein the interface is provided with display parameter input controls; and the device 500 further includes a display adjustment unit. Figure 5 (Not shown in the image), is configured to adjust the display of the webpage according to the parameters entered by the user in the display parameter input control, wherein the display parameters include display size and / or magnification ratio.

[0110] In some embodiments, the device 500 further includes a generation unit ( Figure 5 (Not shown in the image), is configured to generate a walkthrough task based on the discrepancy information determined between attribute information and design information.

[0111] In some embodiments, the generation unit is further configured to capture an element image of the target element and a layer image of the target layer, wherein the element image includes a static image or a dynamic image; and to generate a walkthrough task based on the element image, the layer image, and the difference information.

[0112] In some embodiments, the device 500 further includes: a task display unit ( Figure 5 (not shown in the image), configured to display the walkthrough task; marker generation unit ( Figure 5(Not shown in the image), is configured to generate marker information for a walkthrough task based on the task status of the walkthrough task, and to display the marker information at a preset position of the target element, wherein the task status of the walkthrough task includes at least one of the following: pending repair, pending acceptance, or completed; and to display the walkthrough task information in response to detecting a trigger operation on the marker information.

[0113] In some embodiments, the device 500 further includes a state adjustment unit ( Figure 5 (Not shown in the image) is configured to, in response to the detection of a selection operation on a target walkthrough task, acquire and display the attribute information of elements and the design information of layers in the target walkthrough task, wherein the target walkthrough task is a walkthrough task with a task status of pending acceptance; perform a difference analysis on the acquired attribute information and design information; and adjust the task status of the target walkthrough task based on the difference analysis results.

[0114] In some embodiments, the device 500 further includes: a management information generation unit ( Figure 5 (Not shown in the image), configured to record walkthrough tasks and generate task management information, wherein the task management information includes at least one of the following: the webpage information to which it belongs, task description, image information, priority, personnel information, task status, and message; statistical unit ( Figure 5 (Not shown in the image) is configured to perform statistical analysis on each walkthrough task in the task management information to generate the restoration degree and repair rate of the web page. The restoration degree is inversely proportional to the number of walkthrough tasks belonging to the web page, and the repair rate is determined based on the number of walkthrough tasks belonging to the web page and the task status.

[0115] In some embodiments, the device 500 further includes a project generation unit ( Figure 5 (Not shown in the image) is configured to generate a webpage for a walkthrough project based on information entered by the user on the project information input page. The project information input page includes at least one of the following: project name, associated design draft, terminal type, personnel information, and webpage address. The webpage address includes at least one of the following: network address in the actual operating environment, network address in the test environment, and domain name range.

[0116] It is understandable that the units described in the device 500 are related to the reference. Figure 2 The steps in the described method correspond accordingly. Therefore, the operations, features, and beneficial effects described above for the method also apply to the device 500 and the units contained therein, and will not be repeated here.

[0117] The following is for reference. Figure 6 It illustrates electronic devices suitable for implementing some embodiments of this disclosure (e.g., Figure 1 A structural diagram of the terminal device (600) in the middle. Figure 6 The electronic device shown is merely an example and should not be construed as limiting the functionality and scope of the embodiments of this disclosure.

[0118] like Figure 6 As shown, electronic device 600 may include a processing device (e.g., a central processing unit, a graphics processor, etc.) 601, which can perform various appropriate actions and processes according to a program stored in read-only memory (ROM) 602 or a program loaded from storage device 608 into random access memory (RAM) 603. RAM 603 also stores various programs and data required for the operation of electronic device 600. Processing device 601, ROM 602, and RAM 603 are interconnected via bus 604. Input / output (I / O) interface 605 is also connected to bus 604.

[0119] Typically, the following devices can be connected to I / O interface 605: input devices 606 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, etc.; output devices 607 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 608 including, for example, magnetic tapes, hard disks, etc.; and communication devices 609. Communication device 609 allows electronic device 600 to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 6 An electronic device 600 with various devices is shown; however, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively. Figure 6 Each box shown can represent a device or multiple devices as needed.

[0120] In particular, according to some embodiments of this disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, some embodiments of this disclosure include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device 609, or installed from a storage device 608, or installed from a ROM 602. When the computer program is executed by the processing device 601, it performs the functions defined above in the methods of some embodiments of this disclosure.

[0121] It should be noted that, in some embodiments of this disclosure, the computer-readable medium may be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium may be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In some embodiments of this disclosure, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In some embodiments of this disclosure, a computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium can be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wires, optical fibers, RF (radio frequency), etc., or any suitable combination thereof.

[0122] In some implementations, clients and servers can communicate using any currently known or future-developed network protocol such as HTTP (Hypertext Transfer Protocol) and can interconnect with digital data communication (e.g., communication networks) of any form or medium. Examples of communication networks include local area networks (“LANs”), wide area networks (“WANs”), the Internet (e.g., the Internet of Things), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future-developed networks.

[0123] The aforementioned computer-readable medium may be included in the aforementioned electronic device; or it may exist independently and not assembled into the electronic device. The aforementioned computer-readable medium carries one or more programs that, when executed by the electronic device, cause the electronic device to: in response to detecting a selection operation on a walkthrough item, display a webpage indicated by the selected walkthrough item according to preset display parameters, and simultaneously display a design draft page of the webpage, wherein the webpage is a mobile webpage; in walkthrough mode, in response to detecting a selection operation on a target element in the webpage, determine the attribute information of the target element; in the design draft page, determine the target layer corresponding to the target element and the design information of the target layer; and perform a difference analysis on the attribute information and the design information.

[0124] Furthermore, computer program code for performing operations of some embodiments of this disclosure can be written in one or more programming languages ​​or a combination thereof. Programming languages ​​include object-oriented programming languages—such as Java, Smalltalk, and C++—and conventional procedural programming languages—such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a local area network (LAN) or a wide area network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0125] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0126] The units described in some embodiments of this disclosure can be implemented in software or hardware. The described units can also be housed in a processor; for example, a processor may be described as including a page display unit, an element determination unit, a layer determination unit, and an analysis unit. The names of these units do not necessarily limit the specific unit; for example, an element determination unit may also be described as a "unit for determining the attribute information of a target element."

[0127] The functions described above in this document can be performed, at least in part, by one or more hardware logic components. For example, exemplary types of hardware logic components that can be used, without limitation, include: Field Programmable Gate Arrays (FPGAs), Application-Specific Integrated Circuits (ASICs), Application Standard Products (ASSPs), System-on-Chip (SoCs), Complex Programmable Logic Devices (CPLDs), and so on.

[0128] The above description is merely a selection of preferred embodiments of this disclosure and an explanation of the technical principles employed. Those skilled in the art should understand that the scope of the invention involved in the embodiments of this disclosure is not limited to technical solutions formed by specific combinations of the above-described technical features, but should also cover other technical solutions formed by arbitrary combinations of the above-described technical features or their equivalents without departing from the above-described inventive concept. For example, technical solutions formed by substituting the above-described features with (but not limited to) technical features with similar functions disclosed in the embodiments of this disclosure.

Claims

1. An information analysis method for a mobile webpage, comprising: in response to detecting a selection operation on a walkthrough item in a window interface developed by using a webpage view framework, displaying a webpage page indicated by the selected walkthrough item according to preset display parameters, and displaying a design draft page of the webpage page on the same screen, wherein the webpage page is a mobile webpage page, the webpage page and the design draft page are displayed in different display areas in the window interface, the design draft page is located in a side area of the webpage page, and the window interface is integrated with an element viewer and a layer viewer; in a walkthrough mode, in response to detecting a selection operation on a target element in the webpage page, determining attribute information of the target element, the attribute information being information for displaying the target element; in the design draft page, determining a layer set corresponding to the target element, selecting a target layer from the layer set by using human-computer interaction, and determining design information of the target layer, wherein the selected layer is displayed differently in an interaction process; performing difference analysis on the attribute information and the design information, wherein attribute values of the same attribute in the attribute information and the design information are compared and analyzed.

2. The method of claim 1, wherein, The method further comprises at least one of the following steps: displaying the attribute information of the target element and the design information of the target layer; and marking a size and / or a position of the target element in the webpage page; marking a size and / or a position of the target layer in the design draft page.

3. The method of claim 1, wherein, The determination of the target layer corresponding to the target element comprises: determining a layer set corresponding to position information of the target element in the webpage page in the design draft page; selecting a layer from the layer set, and determining the selected layer as the target layer corresponding to the target element.

4. The method of claim 3, wherein, The selection of the layer from the layer set comprises at least one of the following steps: selecting a layer with matching size information and color from the layer set according to size information and color of the target element, and displaying the selected layer differently from other layers in the layer set; and in response to detecting a selection operation on a layer in the layer set, displaying the selected layer differently from other layers in the layer set.

5. The method of claim 1, wherein, The webpage page and the design draft page are respectively displayed in different areas of the same interface, wherein the interface is provided with a display parameter input control; and The method further comprises: adjusting display of the webpage page according to parameters input by a user in the display parameter input control, wherein the display parameters include display size and / or magnification.

6. The method of claim 1, wherein, The method further comprises: in response to determining that there is difference information between the attribute information and the design information, generating a walkthrough task according to the difference information.

7. The method of claim 6, wherein, The generation of the walkthrough task according to the difference information comprises: capturing an element image of the target element and a layer image of the target layer, wherein the element image includes a static image or a dynamic image; generating a walkthrough task according to the element image, the layer image, and the difference information.

8. The method of claim 6, wherein, The method further comprises: displaying the inspection task; generating mark information of the inspection task according to a task state of the inspection task, and displaying the mark information at a preset position of the target element, wherein the task state of the inspection task comprises at least one of the following: to be repaired, to be accepted, and completed; and in response to detecting a triggering operation on the mark information, displaying information of the inspection task.

9. The method of claim 8, wherein, The method further comprises: in response to detecting a selection operation on a target inspection task, acquiring and displaying attribute information of an element and design information of a layer in the target inspection task, wherein the target inspection task is an inspection task with a task state of to be accepted; performing difference analysis on the acquired attribute information and design information; adjusting the task state of the target inspection task according to the difference analysis result.

10. The method of claim 6, wherein, The method further comprises: recording the inspection task to generate task management information, wherein the task management information comprises at least one of the following: webpage page information, task description, image information, priority, processing personnel information, task state, and message; statistically analyzing each inspection task in the task management information to generate a restoration degree and a repair rate of the webpage page, wherein the restoration degree is inversely proportional to the number of inspection tasks belonging to the webpage page, and the repair rate is determined based on the number of inspection tasks belonging to the webpage page and the task state.

11. The method according to one of claims 1-10, wherein, The method further comprises: generating an inspection project of the webpage page according to information input by a user on a project information input page, wherein the project information input page comprises at least one of the following: project name, associated design draft, terminal type, processing personnel information, and address of the webpage page, and the address of the webpage page comprises at least one of the following: network address in an actual running environment, network address in a test environment, and domain name range.

12. An information analysis device for a mobile terminal webpage, comprising: a page display unit configured to, in response to detecting a selection operation on an inspection project in a window interface developed by using a webpage view framework, display a webpage page indicated by the selected inspection project according to preset display parameters, and display a design draft page of the webpage page on the same screen, wherein the webpage page is a mobile terminal webpage page, the webpage page and the design draft page are displayed in different display areas in the window interface, the design draft page is located in a side area of the webpage page, and the window interface is integrated with an element viewer and a layer viewer; an element determination unit configured to, in an inspection mode, determine attribute information of a target element in response to detecting a selection operation on the target element in the webpage page, wherein the attribute information is information used to display the target element; a layer determination unit configured to determine a layer set matched with the target element in the design draft page, select a target layer from the layer set in a human-computer interaction manner, and determine design information of the target layer, wherein the selected layer is displayed differently in the interaction process. An analysis unit configured to perform a difference analysis on the attribute information and the design information, wherein attribute values of same attributes in the attribute information and the design information are compared and analyzed. 13.An electronic device, comprising: one or more processors; a memory device having stored thereon one or more programs, when the one or more programs are executed by the one or more processors, cause the one or more processors to carry out the method of any one of claims 1-11.

14. A computer readable medium having stored thereon a computer program, wherein, the program, when executed by a processor, carries out the method of any one of claims 1-11. the program, when executed by a processor, carries out the method of any one of claims 1-11.

Images