微信X5内核webview调试

title: 微信X5内核webview调试
date: 2015-12-15 03:51
comments: true
tags: [debug, webview, 微信]

---

题记

记得在中很早就发现并收藏这篇文章了，但是点进去一看，又是tbs又是java和android，被吓傻了，果断关了网页。而后的契机（主要有大神带啦）让我重新来学习这篇文章，原因有几个：

• 由于基于微信开发公众号，微信调试肯定是家常便饭，之前一直都是alert，alert，alert。呵呵，想想之前的自己都很好笑。
• 研究微信的调试方法，发现微信不久前开发了微信调试工具。还有就是jsconsole等等等
• 然后就学习微信的调试方法，可是噩梦呀。必须下载qq浏览器，然后就各种恶心人呀。
  1.qq上打开的网页都是qq浏览器打开的。我可是深度chrome控呀，除非要调试页面的兼容性，不然我不会用别的浏览器的。
  2.强制成为默认浏览器，我每次进chrome都要重新设置它是默认浏览器。
  3.竟然可以同步chrome的书签，额的亲娘呀，果断不同步呀。说不定密码什么的也记住了。

当然，qq浏览器还是有优点的，三内核浏览器，666！打开网页还是挺快的。

好了，废话over！！！

配置过程

需要安装python和java
主要是参考以下两篇文章：

• 屌爆了,完美调试 微信webview(x5)
• 微信浏览器webview调试

No.1 tbs安装

1. 下载TbsSuiteNew.apk,然后传到手机上，安装。
2. 在微信上的任意输入框内输入：//deletetbs,目的是为了删除手机中之前或许安装过的tbs。

3. 如下图：安装步骤完成即可。（亲测可用）

   
   
   

   tbs
   
   

   上面的下拉框三个选项分别对应着：微信、qq和qq空间。

4. 之间可能有问题的是安装tbs是要在某个微信网页停留一分钟，重点是一分钟后是切换到TbsSuiteNew，而不是重新打开那个软件。
5. 然后基本就ok了。

如果上面的方法试了几次也不成功的话，还有另外的方法：
我在配置qq浏览器的微信调试工具的时候上面有安装的方法

No.2 adb安装

1. 下载android-sdk
2. 点击安装之后，安装tools/Android SDK Platform-tools。图见此图
3. 此时安装android-sdk的时候需要安装java的，按提示要求下载java后安装即可。
4. 配置环境变量，参见以下：

• Android SDK环境变量配置(windows和Linux)
• androidSDK配置环境变量
• Android SDK的安装与环境变量配置

注意事项:(亲自踩过)

每次设定环境变量之后，需要先将界面中打开的cmd关掉后重新打开。

ok，可以开始调试了。

No.3 调试前奏

• 连接设备
  将文件打开到android-sdk中的platform-tools文件夹下，可以使用cmd打开命令行后cd，cd，cd...,当然我不是这样的，我使用Git bash也可以的。
  然后运行adb.exe devices

D:\android-sdk\platform-tools>adb.exe devices
List of devices attached
adb server is out-of-date. killing
* daemon started successfully
95CANR4H6T9S7HPJ        device

• 启动/停止adb
  在各连接设备中的同一路径下，分别运行adb.exe start和adb.exe kill来控制是开启调试或者是关闭adb。

No.4 正式调试啦

• 下载wx_sq_webview_debug
• 将上面下载的文件解压后，放在任意你想防止的地方。然后进到...\wx_sq_webview_debug\inspector_client20150401的路径后，执行如下：

python ./inspector.py --adb "D:\android-sdk\platform-tools\adb.exe"

然后就ok了，在温馨上打开要调试的页面，然后打开chrome，输入http://localhost:9222/。就可以开始调试了，爽歪歪！

No.5 一键自动化

之前研究compress的时候看到别人写了一个bat文件，可以一键压缩css/js，觉得666，得之大神在写bat的时候，觉得好牛呀。然后学习过来。研究了下，好像我还是大致可以学习基础自己去写的，因为后面好多需要这种一键式的，在这里附上我通过skywatcher的文件修改成我自己目录后的文件。

@echo off
cd "D:android-sdk\platform-tools\"
start adb start-server
start python "E:\frontEnd-work\debug\wx_sq_webview_debug\inspector_client20150401\inspector.py" --adb "D:\android-sdk\platform-tools\adb.exe"
echo begin server at:http://localhost:9222/
:begin
set /p INPUT= Stop server(Y/N)?:
if /i "%INPUT%"=="y" (goto stop
) else (
    goto begin
)
:stop
echo stop server
start adb kill-server
exit

尾声

本来今天晚上实验室有事，利用空余时间完成python的falsk框架来搭建一个博客教程的，可是数据库实在是太难了，几个小时都没有搞定，就果断先暂停了，找大神求带去。想到之前学习的这个调试方法还没有整理。故整理之。。。

最后附一张调试ing的图。

调试爽歪歪

原文链接