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 { webview } from '@kit.ArkWeb';
15
16   @Entry
17   @Component
18   struct WebComponent {
19     controller: webview.WebviewController = new webview.WebviewController();
20
21     aboutToAppear() {
22       // Enable web frontend page debugging.
23       webview.WebviewController.setWebDebuggingAccess(true);
24     }
25 
26     build() {
27       Column() {
28         Web({ src: 'www.example.com', controller: this.controller })
29       }
30     }
31   }
32   ```
332. Declare the required permission in the **module.json5** file of the HAP module in the application project in DevEco Studio. For details, see [Declaring Permissions in the Configuration File](../security/AccessToken/declare-permissions.md).
34
35   ```
36   "requestPermissions":[
37      {
38        "name" : "ohos.permission.INTERNET"
39      }
40    ]
41   ```
42
433. Connect your device to a PC, and configure port mapping on the PC as follows:
44
45   ```
46   // 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.
47   cat /proc/net/unix | grep devtools
48   // Configure port mapping. Replace [pid] with the actual process ID.
49   hdc fport tcp:9222 localabstract:webview_devtools_remote_[pid]
50   // View port mapping.
51   hdc fport ls
52   Example:
53   hdc shell
54   cat /proc/net/unix | grep devtools
55   // Display webview_devtools_remote_3458.
56   exit
57   hdc fport tcp:9222 localabstract:webview_devtools_remote_3458
58   hdc fport ls
59   ```
60
614. 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:
62
63     **Figure 1** Page debugging effect 
64
65     ![debug-effect](figures/debug-effect.png)
66
67
685. To debug multiple applications, click **Configure** under **Devices** and add multiple port numbers.
69
70     **Figure 2** Adding port numbers 
71
72     ![debug-effect](figures/debug-domains.png)
73
746. You can use a script to accelerate debugging on Windows as follows: Create a .bat file that contains the following information, start the application to debug, and run the script:
75
76   ```
77   @echo off
78   setlocal enabledelayedexpansion
79
80   :: Initialize port number and PID list
81   set PORT=9222
82   set PID_LIST=
83
84   :: Get the list of all forwarded ports and PIDs
85   for /f "tokens=2,5 delims=:_" %%a in ('hdc fport ls') do (
86       if %%a gtr !PORT! (
87           set PORT=%%a
88       )
89       for /f "tokens=1 delims= " %%c in ("%%b") do (
90           set PID_LIST=!PID_LIST! %%c
91       )
92   )
93
94   :: Increment port number for next application
95   set temp_PORT=!PORT!
96   set /a temp_PORT+=1  
97   set PORT=!temp_PORT! 
98
99   :: Get the domain socket name of devtools
100   for /f "tokens=*" %%a in ('hdc shell "cat /proc/net/unix | grep devtools"') do (
101       set SOCKET_NAME=%%a
102
103       :: Extract process ID
104       for /f "delims=_ tokens=4" %%b in ("!SOCKET_NAME!") do set PID=%%b
105 
106       :: Check if PID already has a mapping
107       echo !PID_LIST! | findstr /C:" !PID! " >nul
108       if errorlevel 1 (
109           :: Add mapping
110           hdc fport tcp:!PORT! localabstract:webview_devtools_remote_!PID!
111           if errorlevel 1 (
112               echo Error: Failed to add mapping.
113               pause
114               exit /b
115           )
116
117           :: Add PID to list and increment port number for next application 
118           set PID_LIST=!PID_LIST! !PID!
119           set temp_PORT=!PORT!
120           set /a temp_PORT+=1  
121           set PORT=!temp_PORT! 
122       )
123   )
124
125   :: If no process ID was found, prompt the user to open debugging in their application code and provide the documentation link
126   if "!SOCKET_NAME!"=="" (
127       echo No process ID was found. Please open debugging in your application code using the corresponding interface. You can find the relevant documentation at this link: [https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/web/web-debugging-with-devtools.md]
128       pause
129       exit /b
130   )
131
132   :: Check mapping
133   hdc fport ls
134
135   echo.
136   echo Script executed successfully. Press any key to exit...
137   pause >nul
138
139   :: Try to open the page in Edge
140   start msedge chrome://inspect/#devices.com
141
142   :: If Edge is not available, then open the page in Chrome
143   if errorlevel 1 (
144       start chrome chrome://inspect/#devices.com
145   )
146
147   endlocal
148   ```
149
1507. You can use a script to accelerate debugging on macOS or Linux: Create an .sh file that contains the following information (pay attention to chmod and format conversion), start the application to debug, and run the script:
151   ```
152   #!/bin/bash
153
154   # Initial port number
155   INITIAL_PORT=9222
156    
157   # Get the current port number, use initial port number if not set previously
158   CURRENT_PORT=${PORT:-$INITIAL_PORT}
159
160   # Get the list of all PIDs that match the condition
161   PID_LIST=$(hdc shell cat /proc/net/unix | grep webview_devtools_remote_ | awk -F '_' '{print $NF}')
162
163   if [ -z "$PID_LIST" ]; then
164       echo "Failed to retrieve PID from the device"
165       exit 1
166   fi
167
168   # Increment the port number
169   PORT=$CURRENT_PORT
170
171   # Forward ports for each application one by one
172   for PID in $PID_LIST; do
173       # Increment the port number
174       PORT=$((PORT + 1))
175
176       # Execute the hdc fport command
177       hdc fport tcp:$PORT localabstract:webview_devtools_remote_$PID
178    
179       # Check if the command executed successfully
180       if [ $? -ne 0 ]; then
181           echo "Failed to execute hdc fport command"
182           exit 1
183       fi
184   done
185
186   # List all forwarded ports
187   hdc fport ls
188   ```
189