热门标签 | 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.主机尽量和移动设备处在同一网段的局域网内

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


推荐阅读
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 本文介绍了如何使用PHP向系统日历中添加事件的方法,通过使用PHP技术可以实现自动添加事件的功能,从而实现全局通知系统和迅速记录工具的自动化。同时还提到了系统exchange自带的日历具有同步感的特点,以及使用web技术实现自动添加事件的优势。 ... [详细]
  • IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]
  • [译]技术公司十年经验的职场生涯回顾
    本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同,令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望,认为人类有能力不断改善自己。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • scrcpy通过adb调试的方式来将手机屏幕投到电脑上,并可以通过电脑控制您的Android设备。它可以通过USB连接,也可以通过Wifi连接(类似于隔空投屏),而且不需要任何ro ... [详细]
  • Apple iPad:过渡设备还是平板电脑?
    I’vebeenagonizingoverwhethertopostaniPadarticle.Applecertainlydon’tneedmorepublicityandthe ... [详细]
  • 计算机原理概念:1、CPU和内存中的存储单元通信线路称为总线(BUS),总线是被指令和数据复用的,所以也称为前端总线。2、计算机中计算频率的时间标准即晶体振荡器原理,精确计算时间长 ... [详细]
  • 篇首语:本文由编程笔记#小编为大家整理,主要介绍了移动web性能测试笔记之一相关的知识,希望对你有一定的参考价值。收集整理@2017/12/16 ... [详细]
  • js-sdk上传图片,在Androidwebview中,不能调起功能。 ... [详细]
  • vue 地图使用navigator_weex踩坑之旅第五弹 ~ 使用navigator内置模块实现导航
    目前,我个人认为在weex中实现页面跳转的方式有两种,一种是通过weex提供的navigator模块,一种是通过vue-router之类的 ... [详细]
  • 资源:吊炸天!74款APP完整源码!android界面中点击输入框时弹出输入法如果输入框在底部会出现输入法遮挡输入内容的问题解决办法设置activity的windowsoftinpu ... [详细]
  • 01mui框架使用概述
    1MUI概述1.1MUI诞生背景?性能和体验的差距,一直是手机APP开发者放弃HTML5的首要原因。浏览器默认控件样式又少又丑,制作一 ... [详细]
  • 唱唱反调:风口上的技术不要盲目追
      对于前端领域的开发者来说,“学不动了”虽然更多是一种调侃,但也真实地反映出了他们面对频繁出新的前端技术时又爱又恨的心情。在经历了移动互联网的大爆发后,前端领域的边界不 ... [详细]
  • Android Studio中的IBM MobileFirst Compile问题 - IBM MobileFirst Compile in Android Studio Issue
    IbuiltaMultipageapplicationbyusingIBMMobileFirst,accordingto据我所知,我使用IBMMobileFirst构建了一个 ... [详细]
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社区 版权所有