Method and device for debugging applet

Abstract

The invention belongs to the technical field of applet debugging, and particularly relates to an applet debugging method and device, and the method comprises the following steps: S1, checking a console log: checking information printed by console.log in a console at the bottom of a developer tool, and understanding the running state, error information and warning prompt of an applet; s2, setting a breakpoint: finding a code line needing to be debugged in a'source code 'panel, and setting the breakpoint by clicking a line number; s3, monitoring data in real time: checking a data state of a page in a data panel; the network request sent by the applet and the response received by the applet are monitored and analyzed in a network panel, console log debugging, breakpoint debugging, network request debugging, performance debugging and simulation of a real machine debugging module are carried out on the applet, the possible problems of the applet can be effectively found and solved, and running errors are reduced.

Description

Technical Field

[0001] The present invention relates to the technical field of applet debugging, and in particular to an applet debugging method and device. Background Art

[0002] An applet is an application that can be used without being downloaded and installed. It realizes the dream of making applications "within easy reach". Users can quickly open and use the application by simply scanning or searching, without having to go through the traditional process of downloading and installing. This design embodies the concept of "use and leave". Users don't need to worry about having too many applications installed because the applet can be directly closed after use without being uninstalled. Applets have the following remarkable features: No need to install: Applets are small in size, and users can hardly perceive the download process when using them. They can be used immediately with just a click, which is very convenient. Within easy reach: Users can easily find and open applets through the scanning or search functions on platforms such as WeChat and enjoy instant services. Use and leave: Applets don't require users to perform uninstallation operations. They can be directly closed after use and won't occupy the user's mobile phone space. Wide range of application scenarios: The application scenarios of applets are very extensive, covering many fields such as e-commerce shopping, life services, online education, travel, and catering entertainment, becoming an important bridge connecting users and services.

[0003] In the prior art, it is not convenient to effectively debug applets, and applets are prone to problems during operation. Therefore, we propose an applet debugging method and device to solve the above problems. Summary of the Invention

[0004] The purpose of the present invention is to solve the disadvantages of not being convenient to effectively debug applets and the applets being prone to problems during operation, and to propose an applet debugging method and device.

[0005] To achieve the above purpose, the present invention adopts the following technical solutions:

[0006] An applet debugging method, including the following steps:

[0007] S1. View console logs: In the "Console" at the bottom of the developer tool, view the information printed by console.log to understand the running status, error messages, and warning prompts of the applet;

[0008] S2. Set breakpoints: In the "Source Code" panel, find the code line to be debugged and click on the line number to set breakpoints;

[0009] S3. Real-time monitor data: In the "Data" panel, view the data status of the page;

[0010] S4. View network requests: In the "Network" panel, monitor and analyze the network requests sent by the applet and the responses received;

[0011] S5. Performance analysis: Use the "Performance" panel to analyze the performance of the page, including rendering time and execution time;

[0012] S6. Simulate scenarios for real-device debugging: simulate a weak network environment to check the performance of the mini program when the network is unstable; simulate different types of devices to ensure the adaptability of the mini program to different screen sizes.

[0013] Preferably, in S1, by viewing the log output of the console, the developer can understand the running status, error information, and warning prompts of the mini program, and use the console.log(), console.error(), and console.warn() methods to output customized log information to better track and debug the code.

[0014] Preferably, in S2, a breakpoint is set in the code editor, and when the mini program reaches the breakpoint, execution is paused, the variable values ​​and call stack information at this time are checked, and the code is executed step by step to observe the program running process.

[0015] Preferably, in S4, the network request initiated by the mini program and the data returned by the interface are monitored and analyzed through the "Network" panel in the developer tool. If the interface call fails, the request details can be viewed in the network panel to locate the cause of the problem.

[0016] Preferably, in S5, the performance of the mini program is analyzed, including page rendering time, execution time, and memory usage, and a performance analysis tool is used to discover performance bottlenecks in the mini program and optimize it.

[0017] Preferably, in S6, the process of simulating a weak network environment is as follows: open the mini-program developer tool and load the mini-program project to be tested. In the menu bar or setting interface of the developer tool, find network-related options, such as "Network" or "Simulated Network". In the network settings, select the option to simulate a weak network environment and reload the mini-program. At this time, the mini-program will be in a simulated weak network or no network signal state.

[0018] Preferably, in a simulated weak network environment, carefully observe the behavior of the mini-program, including page loading speed and function response. Check whether the mini-program can correctly prompt the user about the network status, and whether it can properly handle user requests or provide appropriate feedback in the absence of network or in a weak network situation. According to the test results, make corresponding optimizations and adjustments to the mini-program to improve the user experience in a weak network environment. For example, the logic of network requests can be optimized, a cache manager can be used to reduce the number and amount of data in network requests, or a more user-friendly prompt and interaction interface can be provided in a weak network.

[0019] Preferably, the simulation of different device models is as follows: Open the WeChat Developer Tools and load the mini-program project you need to test. In the Developer Tools, find the simulator function. In the toolbar of the simulator, there will be a selection box for the phone model. Click on this selection box and select the phone model you want to simulate. If the device model you need to simulate is not in the provided list, you can also select a custom device. In the custom device, enter the specific information of the device, such as resolution and screen size, to meet more special test requirements. After selecting the device model, you can start the simulation test.

[0020] Preferably, the real device debugging is as follows: Click the "Real Device Debugging" button on the toolbar of the Developer Tools. The tool will process and package the local code and upload it. Use the mobile WeChat to scan the QR code generated on the Developer Tools to start remote debugging. The debugging window is divided into a debugger view and an information view. Debug the code in the debugger and view the Storage situation; the information view can view the connection status with the mobile phone and the server, as well as the error information that occurs. In the debugger of the remote debugging, debug the code in the Console panel and view the log output. In the Sources panel, view the source code of the mini-program and perform breakpoint single-step debugging. In the Storage panel, view the Storage usage of the mini-program.

[0021] The present invention also proposes a debugging device for the mini-program, including:

[0022] A console log debugging module, which is used to view the log output of the console, and can understand the running status, error information, and warning prompts of the mini-program. Use methods such as console.log(), console.error(), and console.warn() to output custom log information for better tracking and debugging of the code;

[0023] A breakpoint debugging module, which is used to set breakpoints in the code editor. When the mini-program runs to the breakpoint, it pauses execution; check the variable values and call stack information at this time, and execute the code step by step to observe the program running process;

[0024] A network request debugging module is used to monitor and analyze the network requests initiated by the applet and the data returned by the interfaces. If the interface call fails, the request details can be viewed in the network panel to locate the cause of the problem.

[0025] A performance debugging module is used to analyze the performance of the applet, including page rendering time, execution time, and memory usage. A performance analysis tool is used to discover performance bottlenecks in the applet and optimize them.

[0026] Compared with the prior art, the advantages of the present invention are as follows:

[0027] A console log debugging module is used to view the log output of the console, so as to understand the running status, error messages, and warning prompts of the applet. The console.log(), console.error(), and console.warn() methods are used to output custom log information for better tracking and debugging of the code; A breakpoint debugging module is used to set breakpoints in the code editor. When the applet runs to the breakpoint, it pauses execution; Check the variable values and call stack information at this time, and execute the code step by step to observe the program running process; A network request debugging module is used to monitor and analyze the network requests initiated by the applet and the data returned by the interfaces. If the interface call fails, the request details can be viewed in the network panel to locate the cause of the problem; A performance debugging module is used to analyze the performance of the applet, including page rendering time, execution time, and memory usage. A performance analysis tool is used to discover performance bottlenecks in the applet and optimize them; A simulated real device debugging module is used to simulate a weak network environment and check the performance of the applet when the network is unstable; Simulate different models of devices to ensure the adaptability of the applet under different screen sizes;

[0028] Through the console log debugging, breakpoint debugging, network request debugging, performance debugging, and simulated real device debugging modules for the applet, the present invention can effectively discover and solve possible problems of the applet and reduce running errors. Brief Description of the Drawings

[0029] Figure 1 It is a flowchart of the debugging method for the applet proposed by the present invention. Detailed Embodiments

[0030] Next, the technical solutions in this embodiment will be clearly and completely described in conjunction with the drawings in this embodiment. Obviously, the described embodiments are only a part of the embodiments of this embodiment, rather than all the embodiments.

[0031] Embodiment 1

[0032] Referring to Figure 1 , the debugging method for the applet includes the following steps:

[0033] S1. View Console Logs: In the "Console" at the bottom of the developer tools, view the information printed by console.log to understand the running status, error messages, and warning prompts of the mini-program.

[0034] S2. Set Breakpoints: In the "Source Code" panel, find the code line to be debugged and click on the line number to set breakpoints.

[0035] S3. Monitor Data in Real Time: In the "Data" panel, view the data status of the page.

[0036] S4. View Network Requests: In the "Network" panel, monitor and analyze the network requests sent by the mini-program and the responses received.

[0037] S5. Performance Analysis: Use the "Performance" panel to analyze the performance of the page, including rendering time and execution time.

[0038] S6. Simulate Scenarios for Real Device Debugging: Simulate a weak network environment to check the performance of the mini-program when the network is unstable; simulate different device models to ensure the adaptability of the mini-program under different screen sizes.

[0039] In this embodiment, in S1, by viewing the log output of the console, developers can understand the running status, error messages, and warning prompts of the mini-program, and use methods such as console.log(), console.error(), and console.warn() to output custom log information for better tracking and debugging of the code.

[0040] In this embodiment, in S2, set breakpoints in the code editor. When the mini-program runs to the breakpoint, it pauses execution, checks the variable values and call stack information at this time, and gradually executes the code to observe the program running process.

[0041] In this embodiment, in S4, through the "Network" panel in the developer tools, monitor and analyze the network requests initiated by the mini-program and the data returned by the interfaces. If the interface call fails, the request details can be viewed in the network panel to locate the cause of the problem.

[0042] In this embodiment, in S5, analyze the performance of the mini-program, including page rendering time, execution time, and memory usage, and use performance analysis tools to discover performance bottlenecks in the mini-program and optimize them.

[0043] In this embodiment, in S6, the process of simulating a weak network environment is as follows: Open the applet developer tool and load the applet project to be tested. In the menu bar or settings interface of the developer tool, find the option related to the network, such as "Network" or "Simulate Network". In the network settings, select the option to simulate a weak network environment, and then reload the applet. At this time, the applet will be in a simulated weak network or no network signal state.

[0044] In this embodiment, in the simulated weak network environment, carefully observe the behavior of the applet, including the page loading speed and function response. Check whether the applet can correctly prompt the user about the network status, and whether the applet can normally process user requests or provide appropriate feedback in the absence of network or in a weak network. According to the test results, make corresponding optimizations and adjustments to the applet to improve the user experience in a weak network environment. For example, the logic of network requests can be optimized, a cache manager can be used to reduce the number and amount of network requests, or a more user-friendly prompt and interaction interface can be provided in a weak network.

[0045] In this embodiment, the specific method of simulating different device models is as follows: Open the WeChat developer tool and load the applet project to be tested. In the developer tool, find the simulator function. In the toolbar of the simulator, there will be a selection box for mobile phone models. Click on this selection box and select the mobile phone model you want to simulate. If the device model to be simulated is not in the provided list, you can also select a custom device. In the custom device, enter the specific information of the device, such as resolution and screen size, to meet more special test requirements. After selecting the device model, you can start the simulation test.

[0046] In this embodiment, the specific method of real device debugging is as follows: Click the "Real Device Debugging" button on the toolbar of the developer tool. The tool will process and package the local code and upload it. Use the mobile WeChat to scan the QR code generated on the developer tool to start remote debugging. The debugging window is divided into a debugger view and an information view. Debug the code in the debugger and view the Storage situation; the information view can view the connection status with the mobile phone and the server, as well as the error information that occurs. In the debugger of the remote debugging, debug the code in the Console panel and view the log output. In the Sources panel, view the source code of the applet and perform breakpoint single-step debugging. In the Storage panel, view the Storage usage of the applet.

[0047] The present invention also proposes a debugging device for an applet, including:

[0048] The console log debugging module is used to view the log output of the console, enabling you to understand the running status, error messages, and warning prompts of the mini-program. You can use methods such as console.log(), console.error(), and console.warn() to output custom log information for better code tracking and debugging.

[0049] The breakpoint debugging module is used to set breakpoints in the code editor. When the mini-program runs to a breakpoint, its execution pauses. You can then check the variable values and call stack information at that time and step through the code to observe the program's execution flow.

[0050] The network request debugging module is used to monitor and analyze the network requests initiated by the mini-program and the data returned by the interfaces. If an interface call fails, you can view the request details in the network panel to locate the cause of the problem.

[0051] The performance debugging module is used to analyze the performance of the mini-program, including page rendering time, execution time, and memory usage. Use performance analysis tools to identify performance bottlenecks in the mini-program and optimize them.

[0052] Embodiment 2

[0053] The difference from Embodiment 1 is that the debugging method of the mini-program includes the following steps:

[0054] S1. View console logs: In the "Console" at the bottom of the developer tools, view the information printed by console.log to understand the running status, error messages, and warning prompts of the mini-program.

[0055] S2. Set breakpoints: In the "Source Code" panel, find the code line that needs to be debugged and click on the line number to set a breakpoint.

[0056] S3. Monitor data in real time: In the "Data" panel, view the data status of the page.

[0057] S4. View network requests: In the "Network" panel, monitor and analyze the network requests sent by the mini-program and the received responses.

[0058] S5. Performance analysis: Use the "Performance" panel to analyze the performance of the page, including rendering time and execution time.

[0059] S6. Simulate scenarios for real device debugging: Simulate a weak network environment to check the performance of the mini-program when the network is unstable; simulate different device models to ensure the adaptability of the mini-program under different screen sizes.

[0060] S7. By using the page element viewer to view elements, styles, events, etc. in the page, it helps to debug page layout and interaction problems, modify styles and view the effects in real time, so as to quickly locate and solve style problems.

[0061] As mentioned above, the above is only the preferred specific implementation manner of this embodiment, but the protection scope of this embodiment is not limited thereto. Any person skilled in the art within the technical scope disclosed by this embodiment, according to the technical solution and inventive concept of this embodiment, makes equivalent replacements or changes, and should be covered within the protection scope of this embodiment.

Claims

1. A method for debugging a small program, characterized in that: The following steps are involved: S1. Check the console log: In the "Console" at the bottom of the developer tools, check the information printed by console.log to understand the running status, error messages, and warning prompts of the mini program; S2. Set breakpoints: In the "Source Code" panel, find the line of code that needs to be debugged and click the line number to set a breakpoint; S3. Real-time monitoring of data: In the "Data" panel, check the data status of the page; S4. View network requests: In the "Network" panel, monitor and analyze the network requests sent by the applet and the responses received; S5. Performance analysis: Use the "Performance" panel to analyze the performance of the page, including rendering time and execution time; S6. Simulate scenarios for real-device debugging: simulate a weak network environment and check the performance of the mini program when the network is unstable; Simulate different types of devices to ensure the adaptability of the mini program to different screen sizes.

2. The method for debugging a small program according to claim 1, characterized in that: In S1, by viewing the log output of the console, the developer can understand the running status, error information, and warning prompts of the mini program, and use the console.log(), console.error(), and console.warn() methods to output customized log information to better track and debug the code.

3. The method for debugging a small program according to claim 2, characterized in that: In S2, a breakpoint is set in the code editor, and when the applet reaches the breakpoint, execution is paused, the variable values ​​and call stack information at this time are checked, and the code is executed step by step to observe the program running process.

4. The method for debugging a small program according to claim 3, characterized in that: In S4, the "Network" panel in the developer tools is used to monitor and analyze the network requests initiated by the mini program and the data returned by the interface. If the interface call fails, the request details can be viewed in the network panel to locate the cause of the problem.

5. The method for debugging a small program according to claim 4, characterized in that: In S5, the performance of the mini program is analyzed, including page rendering time, execution time, and memory usage, and a performance analysis tool is used to discover performance bottlenecks in the mini program and optimize it.

6. The method for debugging a small program according to claim 5, characterized in that: In S6, the process of simulating a weak network environment is as follows: open the mini-program developer tool and load the mini-program project to be tested. In the menu bar or setting interface of the developer tool, find network-related options, such as "Network" or "Simulated Network". In the network settings, select the option to simulate a weak network environment and reload the mini-program. At this time, the mini-program will be in a simulated weak network or no network signal state.

7. The method for debugging a small program according to claim 6, characterized in that: In a simulated weak network environment, carefully observe the behavior of the mini program, including page loading speed and function response, check whether the mini program can correctly prompt the user's network status, and whether the mini program can normally process user requests or provide appropriate feedback when there is no network or a weak network. Based on the test results, optimize and adjust the mini program accordingly to improve the user experience in a weak network environment. You can optimize the logic of network requests, use the cache manager to reduce the number and amount of network requests, or provide more friendly user prompts and interactive interfaces when the network is weak.

8. The method for debugging a small program according to claim 7, characterized in that: The specific steps of simulating different device models are as follows: open the WeChat developer tool and load the mini-program project you need to test. In the developer tool, find the simulator function. In the simulator's toolbar, there will be a selection box for mobile phone models. Click this selection box and select the mobile phone model you want to simulate. If the device model you need to simulate is not in the provided list, you can also select a custom device. In the custom device, enter the specific information of the device, such as resolution and screen size, to meet more special testing requirements. After selecting the device model, you can start the simulation test.

9. The method for debugging a small program according to claim 8, characterized in that: The real-machine debugging is specifically as follows: click the "Real-machine debugging" button on the developer tool toolbar, the tool will process, package and upload the local code, use WeChat on your mobile phone to scan the QR code generated on the developer tool to start remote debugging. The debugging window is divided into debugger view and information view. Debug the code in the debugger and view the Storage status; the information view can view the connection status with the mobile phone and server, as well as the error information that occurred. In the remote debugging debugger, debug the code in the Console panel and view the log output. In the Sources panel, view the source code of the mini program and perform breakpoint single-step debugging. In the Storage panel, view the Storage usage of the mini program.

10. A debugging device for a small program, characterized in that: include: The console log debugging module is used to view the log output of the console. You can understand the running status, error information, and warning prompts of the mini program. Use the console.log(), console.error(), and console.warn() methods to output customized log information to better track and debug the code. Breakpoint debugging module, used to set breakpoints in the code editor and pause execution when the applet reaches the breakpoint; Check the variable values ​​and call stack information at this time, and execute the code step by step to observe the program running process; The network request debugging module is used to monitor and analyze the network requests initiated by the mini-program and the data returned by the interface. If the interface call fails, you can view the request details in the network panel to locate the cause of the problem; Performance debugging module, used to analyze the performance of the mini program, including page rendering time, execution time, memory usage, and use performance analysis tools to find performance bottlenecks in the mini program and optimize it; The simulation real machine debugging module is used to simulate a weak network environment and check the performance of the mini program when the network is unstable; Simulate different types of devices to ensure the adaptability of the mini program to different screen sizes.

Images