Android webview加载的页面怎样调试JS

JavaScript016

Android webview加载的页面怎样调试JS,第1张

通过本地的webview打开脚本页面。

调用步骤

1、设置webview支持脚本

1

webSettings.setJavaScriptEnabled(true)

2、打开脚本页面

1

mWebView.loadUrl("file:///android_asset/demo.html")//这里打开该app的asset目录下的demo.html,里面含有wave函数脚本

3、调用脚本

1

mWebView.loadUrl("javascript:wave()")//调用打开页面中的wave函数

首先确保你的电脑和手机设备在同一个Wi-Fi环境下。

其次你需要开启USB调试才能在你的设备上安装你的APP。一定要确定你已经打开设备的USB调试开关!

确保你的设备已经被成功连接,可以输入adb devices核实:

在右边那列看到device说明你的设备已经被正确连接了。注意,你只应当连接仅仅一个设备。

因为如果你连接了多个设备(包含模拟器在内),你后续的一些操作可能会失败。拔掉不需要的设备,或者关掉模拟器,确保adb devices的输出只有一个是连接状态。

现在我们可以运行 react-native run-android 来在设备上安装并启动我们的应用了

句命令执行后,实际上就是在本地起一个node server,并且将你的android

project编译打包,再上传到你的手机上。然后当js文件有改动或debug模式下手动选择reload

js时候会自动更新bundle文件,达到改动js文件后即时显示的调试效果。

这“红屏”又是什么鬼?别着急,是正常的,我们需要连接上开发服务器,下面的步骤会解决这个问题。

摇晃手机,或者运行adb shell input keyevent 82,可以调出开发者菜单。

点击进入Dev Settings

点击Debug server host for device

输入你电脑的IP地址和端口号(譬如我的是192.168.3.15:8081)

注意:如果你的设备是android5.0以上版本(API 21+),就不用折腾这步了

而是:运行adb reverse tcp:8081 tcp:8081 (建立一个从设备向电脑转发的端口,前提是设备和电脑通过USB相连)

不需要更多配置,你就可以使用Reload JS和其它的开发选项了

Chrome开发者工具

在Chrome上调试js代码,需要在开发菜单中选择Debug JS,这会打开一个新的http://localhost:8081/debugger-uitab页。

Chrome中,按下⌘ + option + i或者选择视图(View) ->开发者(Developer) ->

开发工具(Developer Tools)来打开开发工具控制台。打开有异常时暂停(Pause On Caught

Exceptions)选项,能够获得更好的开发体验。

Chrome中并不能直接看到App的用户界面,而只能提供console的输出,以及在sources项中断点调试js脚本。

要查看APP日志?

在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志。

实时刷新

这个选项可以在你的js代码变更了之后,自动触发所连设备或者模拟器自动刷新。

开启方法:先打开开发菜单,选择Dev Settings,然后选择Auto reload on JS change选项。

到此才能完整的调试Android RN, 繁琐到累绝不爱。。

等等,能否想办法简化一下过程?

既然我们的RN项目里包含了完整的android工程,何不把android工程导入到android studio 去运行?不但可以同时查看js的日志和native的日志,而且开发android的同学最熟悉AS,利用AS的快捷键和各类插件提升调试效率。

have a try , 答案是肯定的!

执行react-native start 也可以起一个node server,只是它不帮你安装APP到device 。

以上就是我踩坑后整理的方法,按这套组合拳就可以愉快地调试了。水平有限,抛砖引玉,如果你有更好的方法!欢迎拍砖!

此处插播一个广告:拍砖请拍到我们的杏树林开放空间(246078103),期待感兴趣的同学加入。

之后要解决的一些issue

1,关于设备MinSdkVerison

RN 只支持Android4.1.2(API16)以上设备,4.0根据网络数据大概占比0.7比例,随着大部分app已经不支持4.0以下设备了,这块倒还可以接受 , 目前我们的病历夹是3.0(API-11) , 口袋是4.0(API-14)

2,我们的androidRN现在只能通过Debug JS才能渲染出界面,而不能正常的用Reload JS

3,在界面跳转时卡的令人发指