1# 使用Devtools工具调试前端页面 2 3 4Web组件支持使用DevTools工具调试前端页面。DevTools是一个 Web前端开发调试工具，提供了电脑上调试移动设备前端页面的能力。开发者通过[setWebDebuggingAccess()](../reference/apis/js-apis-webview.md#setwebdebuggingaccess)接口开启Web组件前端页面调试能力，利用DevTools工具可以在电脑上调试移动设备上的前端网页。 5 6 7使用DevTools工具，可以执行以下步骤： 8 9 101. 在应用代码中开启Web调试开关，具体如下： 11 12 ```ts 13 // xxx.ets 14 import web_webview from '@ohos.web.webview'; 15 16 @Entry 17 @Component 18 struct WebComponent { 19 controller: web_webview.WebviewController = new web_webview.WebviewController(); 20 aboutToAppear() { 21 // 配置web开启调试模式 22 web_webview.WebviewController.setWebDebuggingAccess(true); 23 } 24 build() { 25 Column() { 26 Web({ src: 'www.example.com', controller: this.controller }) 27 } 28 } 29 } 30 ``` 31 322. 将设备连接上电脑，在电脑端配置端口映射，配置方法如下： 33 34 ``` 35 // 添加映射 36 hdc fport tcp:9222 tcp:9222 37 // 查看映射 38 hdc fport ls 39 ``` 40 413. 在电脑端chrome浏览器地址栏中输入chrome://inspect/\#devices，页面识别到设备后，就可以开始页面调试。调试效果如下： 42 43 **图1** 页面调试效果图 44 45  46
