使用Devtools工具调试前端页面
1、在应用代码中开启Web调试开关
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
aboutToAppear() {
// 配置web开启调试模式
web_webview.WebviewController.setWebDebuggingAccess(true);
}
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
2、module.json5文件中添加网络权限
"requestPermissions":[
{
"name" : "ohos.permission.INTERNET"
}
]
3、windows便捷脚本，复制以下信息建立bat文件，开启调试应用后执行：
@echo off
setlocal
:: Set devtools parameter
hdc shell param set web.debug.devtools true
if errorlevel 1 (
echo Error: Failed to set devtools parameter.
pause
exit /b
)
:: Get the domain socket name of devtools
for /f "tokens=*" %%a in ('hdc shell "cat /proc/net/unix | grep devtools"') do set SOCKET_NAME=%%a
if not defined SOCKET_NAME (
echo Error: Failed to get the domain socket name of devtools.
pause
exit /b
)
:: Extract process ID
for /f "delims=_ tokens=4" %%a in ("%SOCKET_NAME%") do set PID=%%a
if not defined PID (
echo Error: Failed to extract process ID.
pause
exit /b
)
:: Add mapping
hdc fport tcp:9222 localabstract:webview_devtools_remote_%PID%
if errorlevel 1 (
echo Error: Failed to add mapping.
pause
exit /b
)
:: Check mapping
hdc fport ls
echo.
echo Script executed successfully. Press any key to exit...
pause >nul
start chrome chrome:
endlocal
