Skip to main content

HTML5 Debugging Guide

Overview​

Debugging mobile H5 applications is more challenging than desktop debugging, primarily due to the following reasons:

  • Cannot directly use the Developer Tools of desktop browsers.
  • Variations in the performance and network environments of mobile devices
  • Touch interaction and screen adaptation issues
  • Compatibility differences among various mobile browsers and WebViews

This guide focuses on how to use tools like VConsole for debugging mobile HTML5 applications in WeDa.

Debugging with VConsole​

VConsole is a lightweight, extensible front-end developer debug panel for mobile web pages, open-sourced by Tencent, and particularly well-suited for mobile debugging.

Installing and Integrating VConsole​

Usage in WeDa Applications​

In the WeDa application editor, VConsole can be introduced through the following methods:

  1. In the "Development Settings" section of the application settings, add:

  2. Dynamically load using new VConsole() in the page's lifecycle events:

  3. Effect Display

Introduction to the VConsole Function Panel​

After launching, VConsole displays a green floating button in the lower-right corner of the page. Clicking this button opens the debug panel, which includes the following functions:

1. Log Panel​

  • Function: View log information output by console
  • Usage scenario: Debug JavaScript code, inspect variable values, and track program execution flow
  • Operational Tips:
    • Supports console.log, console.warn, console.error, etc.
    • Filter different types of logs using the filter
    • Supports clearing log records
// Example: Add debug logs in the code
console.log("Page load completed");
console.warn("This is a warning message");
console.error("This is an error message");

// Print objects and arrays
const userInfo = { name: "Zhang San", age: 25 };
console.log("User information:", userInfo);

2. System Panel​

  • Function: Displays system information and basic page information
  • Information included:
    • User Agent
    • Screen resolution
    • Network Type
    • Page URL
    • WeDa application related information

3. Network Panel​

  • Function: Monitors network requests
  • Usage scenario: Debug API interface calls, inspect request parameters and response data
  • Features:
    • Displays request method, URL, status code
    • Displays request headers and response headers
    • Displays request parameters and response data
    • Supports copying request information

4. Element Panel​

  • Function: Views and modifies page elements
  • Usage scenario: Debugging page layout and style issues
  • Operation Method:
    • Click the element selector to select the page element
    • View the HTML structure of the element
    • Modifies element styles in real time

5. Storage Panel​

  • Function: Views and manages local storage
  • Contains:
    • Cookies
    • LocalStorage
    • SessionStorage
    • Views, edits, and deletes storage data

2. Custom Configuration​

const vConsole = new VConsole({
  theme: "dark", // Theme setting
  defaultPlugins: ["system", "network", "element", "storage"], // Enabled plugins
  maxLogNumber: 1000, // Maximum log entries
  onReady: function () {
    console.log("VConsole is ready");
  },
});

When debugging is complete, remember to remove the VConsole-related code:

// Destroy the VConsole instance
if (window.vConsole) {
  window.vConsole.destroy();
}

Notes​

  1. Performance Impact: VConsole will have some impact on page performance. It is recommended to use it only during development and testing phases.
  2. Security Considerations: Do not enable VConsole in the production environment to avoid exposing sensitive information
  3. Compatibility: VConsole supports most modern mobile browsers, including WeChat's built-in browser.
  4. Log Volume: Avoid outputting excessive logs, as it may impact page performance and user experience

Summary​

By properly using VConsole and other debugging tools, the debugging efficiency of mobile HTML5 applications can be significantly improved. In actual development, it is recommended that:

  1. Development Phase: Use VConsole for real-time debugging
  2. Testing Phase: Combine real-device debugging to verify functionality
  3. Production Phase: Remove all debugging code to ensure performance and security

Remember that good debugging habits and proper tool usage can help quickly locate and resolve issues, improving development efficiency and application quality.