极致优化，微信Webview(x5)调试全攻略

大家好，感谢邀请，今天来为大家分享一下极致优化，微信Webview(x5)调试全攻略的问题，以及和的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！

因为使用起来有点复杂，下面分模块介绍一下：的使用方法

使用chrome和android adb函数调试原理

Paste_Image.png

前期准备

1.下载我用的最新微信6.1

2、下载TbsSuiteNew.apk并安装到手机上，地址为（http://res.imtt.qq.com///tbs_inspect/TbsSuiteNew.zip）

打开微信，进入聊天界面（任意）。在输入框中输入//deletetbs，点击发送Paste_Image.png，输入//gettbs即可查看当前tbs的情况。

4.打开TbsSuiteNew，选择遵循本地tbs内核

5.下载tbs调试包

Paste_Image.png应用程序包名称微信：com.tencent.mm，qq：com.tencent.mobileqq，qq空间：com.qzone】

我们就选择微信

6.开始tbs静默安装

粘贴_图像.png7。登录微信，使用微信访问页面，停留约1分钟。目的是让微信静默安装刚刚导入的tbs_xxxx_inspector.apk包。

8、一分钟后，打开TbsSuiteNew，检查是否安装成功。

这里还需要检查Paste_Image.png。打开微信，进入webview页面。然后按住页面上的文字，看是否有水滴。如果是这样，那就成功了。

ADB安装

从官网下载android-sdk，在tools文件夹下执行android，然后选择android sdk platform tools进行安装

Paste_Image.png 然后配置android环境变量vim ~/.bash_profile

导出ANDROID_TOOLS=/Users/sherlock/dev/android-sdk-macosx/platform-tools

导出路径=$PATH:$ANDROID_TOOLS

最后执行source .bash_profile中的环境变量，在控制台输入adb看看是否已经配置ok了！

ps mac下可能找不到国产设备。您可以按照以下方法尝试：

1. 打开终端，运行system_profiler SPUSBDataType命令，查看已连接的USB设备信息。

2.我的是MX4 PRO，设备的供应商id:0x2a45 产品Id:0x0c02

vi ~/.android/adb_usb.ini 命令，在打开的adb_usb.ini文件中添加0x2a45，然后保存退出并重启adb

adb 终止服务器

adb 启动服务器

有时adb devices 无法显示连接的设备。需要拔掉数据线，插几次，退出终端，然后重新打开，然后输入命令才能找到连接的设备。如果无法再次连接，请重新启动计算机并等待系统初始化环境设置。

adb devices 查看连接的设备

安装python

去python（https://www.python.org/）下载安装安装包并添加环境变量以允许直接访问python

python启动调试服务

下载（http://res.imtt.qq.com///tbs_inspect/wx_sq_webview_debug.zip）

该软件包包含inspector_client20150401.zip

adb安装完成后，我们就可以启动调试服务了。将下载的wx_sq_webview_debug解压然后找到inspector_client20150401，解压后进入。 （记得打开USB调试）

执行以下python命令python ./inspector.py --abd 自己的adb路径

python ./inspector.py --adb /Users/sherlock/dev/android-sdk-macosx/platform-tools/adb

可能会遇到错误

设备未经授权。请检查您设备上的确认对话框。

请同意在您自己的设备上进行USB调试

终于启动成功了

Paste_Image.png

最后完美开始调试

当python正常启动后，我们就可以愉快地调试了。怎么做呢？

打开chrome浏览器，访问http://localhost:9222/

打开微信任意页面

您可以在chrome上看到该页面的选项卡

点击Paste_Image.png，你会看到熟悉的chrome调试界面。

断点调试没有问题。元素选择器的控制台打印没有问题。

Paste_Image.png 转载请注明出处sherlock221bhttp://www.jianshu.com/p/ccf124f1f74b

用户评论

该用户已上天

哇塞，这么牛的吗？这技术有点厉害！

    有15位网友表示赞同！

北朽暖栀

终于解决了微信webview的难题，太棒了！

    有7位网友表示赞同！

久爱不厌

我想看看具体怎么做，分享一下教程吗？

    有7位网友表示赞同！

一别经年

调试x5内核确实不容易，你真厉害！

    有16位网友表示赞同！

暮光薄凉

现在开发APP越来越方便了，Thanks!

    有16位网友表示赞同！

寻鱼水之欢

webview的优化一直是开发者头疼的问题，有解决办法真好！

    有16位网友表示赞同！

非想

这篇文章真是太赞了，学习一下这种高效调试方法！

    有8位网友表示赞同！

不忘初心

分享学习资料的时候要注意版权问题

    有17位网友表示赞同！

清原

完美调试 really cool!!!

    有5位网友表示赞同！

素衣青丝

期待看到更多关于x5内核优化的内容!

    有11位网友表示赞同！

迷路的男人

有没有想过把这篇文章投稿到一些技术博客上？

    有19位网友表示赞同！

柠栀

我想用这种方法调试一下我项目里的webview！

    有6位网友表示赞同！

哭着哭着就萌了°

感觉标题有点调侃，哈哈，但实际效果挺好的吧！

    有14位网友表示赞同！

酒笙倾凉

分享这种好东西太棒了，能帮助很多开发者!

    有20位网友表示赞同！

执笔画眉

我也遇到了微信webview调试的问题，这篇文章或许能给我一些启示!

    有5位网友表示赞同！

枫无痕

真是个厉害的兄弟！

    有6位网友表示赞同！

微信名字

你真是一款学习编程的好榜样！

    有5位网友表示赞同！

杰克

期待你的更多技术分享！

    有9位网友表示赞同！

予之欢颜

"屌爆了" 这句话有点过于随意，可以用更专业的说法代替!

    有6位网友表示赞同！

今非昔比'

希望这篇文章能被更多人看到，让大家获益匪浅!

    有6位网友表示赞同！

蹂躏少女

阅读文章后感觉很受益！

    有7位网友表示赞同！

【极致优化，微信Webview(x5)调试全攻略】相关文章：

1.蛤蟆讨媳妇【哈尼族民间故事】

2.米颠拜石

3.王羲之临池学书

4.清代敢于创新的“浓墨宰相”——刘墉

5.“巧取豪夺”的由来－－米芾逸事

6.荒唐洁癖　惜砚如身（米芾逸事）

7.拜石为兄－－米芾逸事

8.郑板桥轶事十则

9.王献之被公主抢亲后的悲惨人生

10.史上真实张三丰：在棺材中竟神奇复活