• 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-arkweb/js-apis-webview.md#setwebdebuggingaccess) to enable frontend page debugging for the **Web** component and make sure the test device connected to the PC runs 4.1.0 or a later version.
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   ```
312. Declare the required permission in the **module.json5** file of the application project in DevEco Studio.
32
33   ```
34   "requestPermissions":[
35      {
36        "name" : "ohos.permission.INTERNET"
37      }
38    ]
39   ```
40
413. Connect your device to a PC, and configure port mapping on the PC as follows:
42
43   ```
44   // Search for the domain socket name required for DevTools. The name is related to the process ID. After the application being debugged is restarted, repeat this step to complete port forwarding.
45   cat /proc/net/unix | grep devtools
46   // Configure port mapping. Replace [pid] with the actual process ID.
47   hdc fport tcp:9222 localabstract:webview_devtools_remote_[pid]
48   // View port mapping.
49   hdc fport ls
50   Example:
51   hdc shell
52   cat /proc/net/unix | grep devtools
53   // Display webview_devtools_remote_3458.
54   exit
55   hdc fport tcp:9222 localabstract:webview_devtools_remote_3458
56   hdc fport ls
57   ```
58
594. 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:
60
61     **Figure 1** Page debugging effect
62
63     ![debug-effect](figures/debug-effect.png)
64
65