• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Debugging Frontend Pages by Using DevTools
2
3
4The **Web** component supports debugging of web frontend pages by using DevTools, a web frontend development and debugging tool that allows you to debug an application's frontend pages on a PC. Before you do this, use [setWebDebuggingAccess()](../reference/apis/js-apis-webview.md#setwebdebuggingaccess) to enable frontend page debugging for the **Web** component.
5
6
7To use DevTools for frontend page debugging, perform the following steps:
8
9
101. Enable web frontend page debugging in the application code.
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       // Enable web frontend page debugging.
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. Connect your device to a PC, and configure port mapping on the PC as follows:
33
34   ```
35   // Configure port mapping.
36   hdc fport tcp:9222 tcp:9222
37   // View port mapping.
38   hdc fport ls
39   ```
40
413. Enter **chrome://inspect/\#devices** in the address box of the Chrome browser on the PC. Once the device is identified, you can get started with page debugging. The debugging effect is as follows:
42
43     **Figure 1** Page debugging effect
44
45     ![debug-effect](figures/debug-effect.png)
46