使用Devtools工具調(diào)試前端頁面

Web組件支持使用DevTools工具調(diào)試前端頁面。DevTools是一個(gè) Web前端開發(fā)調(diào)試工具，提供了調(diào)試移動(dòng)設(shè)備前端頁面的能力。開發(fā)者通過setWebDebuggingAccess()接口開啟Web組件前端頁面調(diào)試能力，利用DevTools工具可以在PC端調(diào)試移動(dòng)設(shè)備上的前端網(wǎng)頁。

使用DevTools工具，可以執(zhí)行以下步驟：

1. 在應(yīng)用代碼中開啟Web調(diào)試開關(guān)，具體如下：

   // xxx.ets
   import web_webview from '@ohos.web.webview';
   
   @Entry
   @Component
   struct WebComponent {
     controller: web_webview.WebviewController = new web_webview.WebviewController();
     aboutToAppear() {
       // 配置web開啟調(diào)試模式
       web_webview.WebviewController.setWebDebuggingAccess(true);
     }
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
       }
     }
   }

2. 將設(shè)備連接上電腦，在電腦端配置端口映射，配置方法如下：

   // 添加映射 
   hdc fport tcp:9222 tcp:9222 
   // 查看映射 
   hdc fport ls

3. 在PC端chrome瀏覽器地址欄中輸入chrome://inspect/#devices，頁面識(shí)別到設(shè)備后，就可以開始頁面調(diào)試。調(diào)試效果如下：
   圖1 頁面調(diào)試效果圖