美文网首页
使用Chrome Device进行移动App调试

使用Chrome Device进行移动App调试

作者: 来碗鸡蛋面 | 来源:发表于2019-08-03 00:05 被阅读0次

原创声明

本文系作者辛苦码字所得,欢迎分享和转载,但请在明显位置注明作者的如下信息:
笔名:来碗鸡蛋面
简书主页:https://www.jianshu.com/u/4876275b5a73
邮箱:job_tom@foxmail.com
CSDN ID:tom_wong666

需求:

使用Chrome Device进行移动App调试

步骤:

一,确保网络环境可以打开https://www.google.com/
二,手机上安装以webView方式混合原生和H5开发的App,并打开APP中H5开发的页面;
三,打开手机开发者模式,打开USB调试和允许ADB调试,以华为荣耀8X为例为例,见下图:


四,按f12进入控制台,进入控制台后选择更多--->More tools--->Remote devices,选择位置示意见下图:

五,选择后见到下图的控件,此时Devices下面没有任何设备显示:

六,用数据线连接手机和电脑,如果是初次连接,连接后,手机上应该会出现是否允许调试的提醒,选择是,稍等一会儿Devices下面应该会出现设备name和绿色原点提示Connected,如下图:

七,绿色原点出现以后,在浏览器输入:chrome://inspect/#devices,进入DevTools,红色区域内的选项记得勾选,这时应该能看到绿色区域内的设备和设备上开启的WebView应用:

八,选择黄色区域内,你需要调试的应用,点击 inspect,好吧,这时你就能看到期待已久的chrome调试台,这里出现的调试台跟我们在本地开发环境点击F12打开的调试台,是一样的用法,就不再赘述了。

局限性说明:

1,只能调试安卓手机;
2,如果网络请求是通过原生拦截中转的,我们在NetWork里面就看不到请求的发送和接收状态;
3,调试过程中极耗性能(手机和电脑都很慢);

相关文章

  • 使用Chrome Device进行移动App调试

    原创声明 本文系作者辛苦码字所得,欢迎分享和转载,但请在明显位置注明作者的如下信息:笔名:来碗鸡蛋面简书主页:ht...

  • 跨域调试解决办法

    进行web移动app前后端对接开发时难免会发生跨域问题,这里记录的是使用chrome进行开发调试时的解决办法 直接...

  • x5 webview Remote Debugging chro

    移动端Web开发调试之Chrome远程调试(Remote Debugging) 使用x5webview,chrom...

  • WebView调试

    1.在APP中启用 WebView 调试,开启调试后,Chrome DevTools才能对WebView进行远程调...

  • 2020-03-25 使用VSCode调试JS

    学语言,调试环境免不了,之前使用Chrome进行断点调试,今天发现了廖大神的文章,使用VSCode调试JS,感觉非...

  • Chrome 调试技巧

    写在前面本文包括浏览器调试,不包括web移动端调试。本文调试均在chrome浏览器进行 alert 这个不用多说了...

  • 简析chrome调试技巧

    写在前面本文包括浏览器调试,不包括web移动端调试。本文调试均在chrome浏览器进行 alert 这个不用多说了...

  • 在 vscode 中 debugger 调试

    如何使用 Debugger for Chrome 这个插件在 vscode 中进行 debugger 调试。项目地...

  • 如何使用chrome浏览器调试?

    做前端开始的,基本有很多人都在使用chrome浏览器的调试功能,我基本上是全部使用chrome浏览器进行调试的。I...

  • Laya 调试工具——Weinre

    开发游戏避免不了调试,如果游戏的运行环境是移动设备的话,安卓可以使用Chrome inspect调试,IOS如果没...

网友评论

      本文标题:使用Chrome Device进行移动App调试

      本文链接:https://www.haomeiwen.com/subject/garddctx.html