热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

RemoteDebugging之放开那个webview让我来调戏(试)

(此段可以略过)随着H5的发展,在安卓开发中逐渐影响了我们原来的一些开发模式。例如现在在原生中有很多活动页和一些需要经常变化的页都是用嵌在webview里的模式。而这个时候更必不可少

(此段可以略过)
随着H5的发展,在安卓开发中逐渐影响了我们原来的一些开发模式。
例如现在在原生中有很多活动页和一些需要经常变化的页都是用嵌在webview里的模式。
而这个时候更必不可少的会遇到的问题就是,安卓与js相互调用的问题。
今天就给大家讲一下,通过调试webview来解决js相互调用出现的问题。

(—-正题开始—)
本来有一个项目A,现在要在项目B里面把A的一部分功能分离出来作为一个单独的APP。
于是乎就开启了我们最喜欢的,复制粘贴模式!
这里写图片描述

可是正当我沉浸在复制粘贴模式的时候,突然发了一个问题。
在webview基类里有一个调用相册的方法怎么弄都不会被js调起,一行一行的对照了A项目的代码(正常,且同一个界面同一个类同一个url),都是一样的,可是在B项目里就不行。

然后我就想了下是不是传递出去的链接不同,后台对链接加了判断。

于是我把A项目的链接直接copy到B项目里,结果还是不行,但是同样的webview基类和同样的url,在A项目就可以,然后我就想啊想,想啊想就是想不到原因- -WT安福?

这里写图片描述

实在是没有解决的思路,想的我都开始怀疑人生了,我从哪里来,要往哪里去······
这里写图片描述

算了,去找找写js的人吧- -可是心里又在想,怎么说呢,跟人家说同一个url,俩个项目一个可以一个不可以,给看看?- -但是自己这边实在没思路还是硬着头皮去了。
结果:不出所料被嘲讽了一波后说:这块是之前别人写的,我这忙你先自己看看………这里写图片描述
不知道大家有没有遇到过这种情况- -当时就想的,哎要是自己也会前端(H5云云~)就好了可以自己调试了。
!!!等等,什么?调试?对了,能不能自己调试webviwe 啊(以前都是js相互调用就ok了,还真没遇到过调试webviwe这种需求- -)
随手打开了我的大Google,随便一搜,不负众望,果然大Google已经为我们想到了会有这个需求。
dong!dong!dong!dong!接下来我们的主角要登场了:
这里写图片描述

接下来我们要讲讲怎么使用它了,Remote Debugging 大哥骑着Chrome看起来很吊的样子,可是使用起来却很简单。

使用步骤
O:调试WebView需要满足安卓系统版本为Android 4.4+已上。并且需要再你的APP内配置相应的代码,在WebView类中调用,如下:
if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {

WebView.setWebContentsDebuggingEnabled(true);

}

一:USB调试打开
二:在电脑上打开Chrome浏览器的菜单– 更多工具 – 检查设备(Chromemenu > More tools > Inspect Devices),或者直接在浏览器地址栏输入chrome://inspect 或者about:inspect

三:找到需要调试的目标页面(在手机打开对应的webview页面后即可看到如下:)打开后DevTools后,确保打钩选中Discover USB devices

这里写图片描述

四:点击inspect即可打开DevTools如下图(示例):

这里写图片描述

如图:
1.先找到需要调试的功能区域。
2.找到对应的前端代码模块,此处是图2位置的div。
3.点击图2后会出现,图2处的div对应的最右侧相关信息,其中有个click点击信息。
4。打开lick后面,再锁定div模块,然后会出现div模块对应的js代码,此时,用鼠标点击即可调到该处。

然后进入到下图此模块的核心js代码:
这里写图片描述

此时我们可以看到最上面的是init初始化方法,init方法下面才是拍照方法。
通过点击左侧数字加入断点调试我们会发现,程序执行到init方法里面的initShare方法报错了。
这是因为这个方法是A项目中的分享组件里面的方法。可是B是精简版项目没有这个方法。
所以走到init方法里面的initShare方法的时候抛出了错误程序没有往下执行,导致我们点击拍照按钮无法调起APP里面的拍照方法。

这真是前端写的一个大坑,各个方法直接不是并列的而是耦合在一起,没有就报错…非空等判断都没有加入。

无力吐槽这代码逻辑…(Remote Debugging的使用比较强大就不在这里太具体说了,写不下…具体大家可以搜索一下。)

然后顺利的给了一个空的share()后它,init()方法不报错了,然后下面的拍照方法也能在拍照点击时正常响应了,一切调用都正常了。。。不说了,别拦我!那个前端你过来一下!!!

这里写图片描述

不得不感谢Remote Debugging哥,有了他,妈妈再也不怕我写的webview有问题了,只要有问题就让他调戏(试)一下webvie妹子就能知道到底是我惹webview妹子生气了,具体哪里惹的,或者是那个小三(前端- -)惹的。

注意事项
1.此工具第一次使用需要翻墙(不然会导致打开工具白屏)
2.主机尽量和移动设备处在同一网段的局域网内

·在这里友情感谢妈蛋表情网和有心课堂的大力支持。


推荐阅读
  • IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]
  • 在Docker中,将主机目录挂载到容器中作为volume使用时,常常会遇到文件权限问题。这是因为容器内外的UID不同所导致的。本文介绍了解决这个问题的方法,包括使用gosu和suexec工具以及在Dockerfile中配置volume的权限。通过这些方法,可以避免在使用Docker时出现无写权限的情况。 ... [详细]
  • 生成式对抗网络模型综述摘要生成式对抗网络模型(GAN)是基于深度学习的一种强大的生成模型,可以应用于计算机视觉、自然语言处理、半监督学习等重要领域。生成式对抗网络 ... [详细]
  • 云原生边缘计算之KubeEdge简介及功能特点
    本文介绍了云原生边缘计算中的KubeEdge系统,该系统是一个开源系统,用于将容器化应用程序编排功能扩展到Edge的主机。它基于Kubernetes构建,并为网络应用程序提供基础架构支持。同时,KubeEdge具有离线模式、基于Kubernetes的节点、群集、应用程序和设备管理、资源优化等特点。此外,KubeEdge还支持跨平台工作,在私有、公共和混合云中都可以运行。同时,KubeEdge还提供数据管理和数据分析管道引擎的支持。最后,本文还介绍了KubeEdge系统生成证书的方法。 ... [详细]
  • PHP图片截取方法及应用实例
    本文介绍了使用PHP动态切割JPEG图片的方法,并提供了应用实例,包括截取视频图、提取文章内容中的图片地址、裁切图片等问题。详细介绍了相关的PHP函数和参数的使用,以及图片切割的具体步骤。同时,还提供了一些注意事项和优化建议。通过本文的学习,读者可以掌握PHP图片截取的技巧,实现自己的需求。 ... [详细]
  • 本文介绍了设计师伊振华受邀参与沈阳市智慧城市运行管理中心项目的整体设计,并以数字赋能和创新驱动高质量发展的理念,建设了集成、智慧、高效的一体化城市综合管理平台,促进了城市的数字化转型。该中心被称为当代城市的智能心脏,为沈阳市的智慧城市建设做出了重要贡献。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • 自动轮播,反转播放的ViewPagerAdapter的使用方法和效果展示
    本文介绍了如何使用自动轮播、反转播放的ViewPagerAdapter,并展示了其效果。该ViewPagerAdapter支持无限循环、触摸暂停、切换缩放等功能。同时提供了使用GIF.gif的示例和github地址。通过LoopFragmentPagerAdapter类的getActualCount、getActualItem和getActualPagerTitle方法可以实现自定义的循环效果和标题展示。 ... [详细]
  • CF:3D City Model(小思维)问题解析和代码实现
    本文通过解析CF:3D City Model问题,介绍了问题的背景和要求,并给出了相应的代码实现。该问题涉及到在一个矩形的网格上建造城市的情景,每个网格单元可以作为建筑的基础,建筑由多个立方体叠加而成。文章详细讲解了问题的解决思路,并给出了相应的代码实现供读者参考。 ... [详细]
  • Ubuntu 9.04中安装谷歌Chromium浏览器及使用体验[图文]
    nsitionalENhttp:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd ... [详细]
  • FeatureRequestIsyourfeaturerequestrelatedtoaproblem?Please ... [详细]
  • 本文介绍了在多平台下进行条件编译的必要性,以及具体的实现方法。通过示例代码展示了如何使用条件编译来实现不同平台的功能。最后总结了只要接口相同,不同平台下的编译运行结果也会相同。 ... [详细]
  • 本文总结了在开发中使用gulp时的一些技巧,包括如何使用gulp.dest自动创建目录、如何使用gulp.src复制具名路径的文件以及保留文件夹路径的方法等。同时介绍了使用base选项和通配符来保留文件夹路径的技巧,并提到了解决带文件夹的复制问题的方法,即使用gulp-flatten插件。 ... [详细]
  • Day2列表、字典、集合操作详解
    本文详细介绍了列表、字典、集合的操作方法,包括定义列表、访问列表元素、字符串操作、字典操作、集合操作、文件操作、字符编码与转码等内容。内容详实,适合初学者参考。 ... [详细]
  • 本文介绍了在CentOS上安装Python2.7.2的详细步骤,包括下载、解压、编译和安装等操作。同时提供了一些注意事项,以及测试安装是否成功的方法。 ... [详细]
author-avatar
男孩形式恋人
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有