请选择 进入手机版 | 继续访问电脑版

积分1659 / 贡献20

提问18答案被采纳67文章41

[经验分享] OpenHarmony使用DevTool对应用进行调试 原创

深开鸿_王石 显示全部楼层 发表于 2024-9-4 10:37:29

简介

开发html5页面用浏览器的调试模式就非常的方便,在浏览器里按F12键就可以立即调试,找出布局的问题,debug以及log输出。现在H5和原生的混合开发(原生内嵌H5页面)使用非常广泛,但是总会遇到各种兼容问题(浏览器正常,手机上异常;不同设备上有兼容问题;或者同一平台下不同机型也有兼容问题),此时就需要在真机上调试webView中的页面H5页面,接下来看一下如何调试在OpenHarmony设备上调试Web页面。

参考链接:使用Devtools工具调试前端页面

总结内容如下:

  1. 开发个sample应用,调用webview,开启web调试开关setWebDebuggingAccess()

    import web_webview from '@ohos.web.webview';
    
    @Entry
    @Component
    struct Index {
      @State message: string = 'Hello World';
      controller: web_webview.WebviewController = new web_webview.WebviewController();
      aboutToAppear() {
        // 配置Web开启调试模式
        web_webview.WebviewController.setWebDebuggingAccess(true);
      }
      build() {
        Row() {
          Column() {
            Text(this.message)
              .fontSize(50)
              .fontWeight(FontWeight.Bold)
            Web({ src: 'www.example.com', controller: this.controller })
          }
          .width('100%')
        }
        .height('100%')
      }
    }

    增加权限

    "requestPermissions":[
      {
        "name" : "ohos.permission.INTERNET"
      }
    ]

    运行程序

  2. 转发端口

    • 查看进程pid

      # ps -A | grep [myweb]   //myweb就是我测试app的进程名字
       1920 ?        00:00:02 m.example.myweb    // browser 进程
       1979 ?        00:00:00 m.example.myweb    // render 进程
      # exit
    • 转发端口

      > hdc_std.exe fport tcp:9222 localabstract:webview_devtools_remote_1920
      Forwardport result:OK
    • 查看端口

      > hdc_std.exe fport ls
      'tcp:9222 localabstract:webview_devtools_remote_1920'   [Forward]
  3. 开chrome,地址栏输入chrome://inspect/#devicesimage.png

  4. 看到了Example的网页,点击inspect可以进入调试

    image.png


©著作权归作者所有,转载或内容合作请联系作者

您尚未登录,无法参与评论,登录后可以:
参与开源共建问题交流
认同或收藏高质量问答
获取积分成为开源共建先驱

Copyright   ©2023  OpenHarmony开发者论坛  京ICP备2020036654号-3 |技术支持 Discuz!

返回顶部