OpenHarmony uses Devtools tools to debug front-end pages

OpenHarmony uses Devtools tools to debug front-end pages

Author: Nut
Team: Nut Party: Currently there are 6 Huawei HDEs.
Public account: "Big Front-end Journey"
Runkaihong technical expert, Huawei HDE, CSDN blog expert, CSDN super individual, CSDN special guest, InfoQ Signed author, OpenHarmony evangelist, electronics enthusiast expert blog, 51CTO blog expert, good at HarmonyOS/OpenHarmony application development, familiar with service card development, served as the team leader in the "War Code Pioneer" activity, trained three team leaders in total, and led 100+ The team members completed the submission and integration of Pr.
Welcome to contact me through the homepage or private message to join the Nut Party and learn HarmonyOS/OpenHarmony application development together.

Web component supports using DevTools tools to debug front-end pages. DevTools is a web front-end development and debugging tool that provides the ability to debug mobile device front-end pages on a computer. Developers enable the debugging capability of Web component front-end pages through the setWebDebuggingAccess() interface, and use DevTools tools to debug front-end web pages on mobile devices on computers.

step

1. Turn on Web debugging

Turn on the Web debugging switch in the application code, as follows:

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
    
    
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  aboutToAppear() {
    
    
    // 配置web开启调试模式

    try {
    
    
      web_webview.WebviewController.setWebDebuggingAccess(true);
    } catch (error) {
    
    
      console.error(`ErrorCode: ${
      
      error.code},  Message: ${
      
      error.message}`);
    }


  }

  build() {
    
    
    Column() {
    
    
      Web({
    
     src: 'https://blog.csdn.net/qq_39132095', controller: this.controller })
    }
  }
}

2. Add permissions in module.json5

To enable debugging, you need to add permissions in module.json5 of the DevEco Studio application project, as follows:

"requestPermissions":[
   {
    
    
     "name" : "ohos.permission.INTERNET"
   }
 ]

3. Configure port mapping

Connect the device to the computer and configure port mapping on the computer. The configuration method is as follows:

// 添加映射 
hdc fport tcp:9222 tcp:9222 
或者
./HdcExternal fport tcp:9222 tcp:9222 
// 查看映射 
hdc fport ls
或者
./HdcExternal fport ls

Mine is set up as follows

4. Visit chrome://inspect/#devices on the computer

Enter chrome://inspect/#devices in the address bar of the chrome browser on the computer. After the page recognizes the device, you can start page debugging. The effect is as follows:

Finished, Nut Pie is far ahead.