Loser, perfect debugging WeChat webview (x5)

Paste_Image.png

Previous words

Since the Tencent family mobile webview portal has been replaced by x5, the industry has received mixed reviews. Generally speaking, it has brought many surprises to developers, the most important of which is the debugging ability of WeChat x5, In the past, code farmers forced code to complete the local browser. Once the browser ran, a bunch of compatibility problems appeared on WeChat Q, which was horrible. In the past, WeChat Q had no debugging ability and could only use Weinre debugrap and other half baked tools to make do with it

In the twinkling of an eye, 2015 WeChat has opened the webview debugging capability. Debugging with chrome is no longer a dream (skinning breakpoint debugging performance test console, etc.)

Because it is a little complicated to use, the following methods are introduced in module mode:

Debugging principle with the help of Chrome and Android adb functions

Paste_Image.png

preparation in advance

1. Download the latest WeChat for my use is 6.1
2. Download TbsSuiteNew.apk and install it to the mobile phone address（ http://res.imtt.qq.com///tbs_inspect/TbsSuiteNew.zip )

3. Open WeChat, enter the chat interface (any) input box, enter//deletetbs, and click Send

Paste_Image.png

Enter//gettbs to view the current tbs

4. Open TbsSuiteNew and select local tbs kernel
5. Download tbs debugging package

Paste_Image.png

Application package name WeChat: com. tencent. mm, qq: com. tencent. mobileqq, qq space: com. qzone]
We can choose WeChat

6. Start the silent installation of tbs

Paste_Image.png

7. Log in to WeChat, use WeChat to visit a page, stay for about 1 minute, so that WeChat can silently install the tbs_xxxx_inspector.apk package just imported

8. One minute later, open TbsSuiteNew to check whether the installation is successful

Paste_Image.png

Here, you also need to open WeChat under check, enter a webview page at random, and then long press the page text to see if there are water drops. If there are, it will be successful

ADB installation

Download on official website android-sdk , execute android under the tools folder, and then select android sdk platform tools to install

Paste_Image.png

Then configure the android environment variable vim~/. bash_profile

export ANDROID_TOOLS=/Users/sherlock/dev/android-sdk-macosx/platform-tools
export PATH=$PATH:$ANDROID_TOOLS

Finally, under the execution of source. bash_profile, the environment variable displays the adb on the console to see whether it has been configured!

If you can't find domestic equipment under the ps mac, you can try the following methods:
1. Open the terminal, and the system_profiler SPUSBDataType command can view the information of the connected USB device
2. My name is MX4 PRO. Vendor id of the device: 0x2a45 Product Id: 0x0c02

3. Vi~/. android/adb_usb.ini command, add 0x2a45 to the open adb_usb.ini file, and then save to exit

Then restart adb

adb kill-server
adb start-server

Sometimes adb devices cannot display the connected device. You need to unplug the data cable, plug it in several times, exit the terminal, reopen it, and then enter the command to find the connected device. If you cannot connect again, restart the computer and wait for the system to initialize the environment setting.

Adb devices can view the connected devices

Install python

Go to python（ https://www.python.org/ ）Download the installation package to install and add environment variables so that you can directly access python

Python Start Debugging Service

Download（ http://res.imtt.qq.com///tbs_inspect/wx_sq_webview_debug.zip )
The package contains inspector_client20150401.zip

<p>
After the adb installation is completed, we can start the debugging service. Unzip the downloaded wx_sq_webview_debug, find the inspector_client20150401, unzip it, and enter. (Remember to open USB debugging)

Execute the following python command python/ Inspector. py -- abd your own adb path
python ./ inspector.py --adb /Users/sherlock/dev/android-sdk-macosx/platform-tools/adb

Errors may be encountered
device unauthorized. Please check the confirmation dialog on your device.
Please agree to USB debugging on your own device

Last start succeeded

Paste_Image.png

Finally, perfect start debugging

After python starts OK, we can debug happily. What should we do?

Open Chrome browser to access http://localhost:9222/
Open any page on WeChat
You can see the tab of this page on chrome

Paste_Image.png

Click in to see the familiar chrome debugging interface
Breakpoint debugging is OK. The console prints the element selector

Paste_Image.png

For reprint, please indicate the source sherlock221b http://www.jianshu.com/p/ccf124f1f74b

Closing words

So far, the debugging desire of WeChat webview for a hundred years has finally been fulfilled. From then on, we can bid farewell to unstable tools such as weinre debug and usher in a new dawn. Thanks to TX, WeChat will certainly become the battlefield of html5 in the future as x5's capabilities continue.

According to the description of x5, WeChat Messenger q and qq browser have independently inherited x5. We only need to install any one of them to experience the features brought by x5. The x5 sdk also provides the ability to replace local webviews for third-party apps. You can learn more about the x5 browsing service（ http://x5.tencent.com/ ). If the third-party app can also integrate x5, we can use this debugging method to debug the webview of our own app

• Human face monkey

  Preface: In the late 1970s, a skinning case shocked the whole city of Binhe, and several subsequent cases caused great panic in Binhe. Liu Yan, an old criminal policeman, will take you to solve it

  Shen Nian sama read 158,117 comment four fabulous three hundred and sixty
• Death mantra

  Preface: There were three consecutive deaths in Binhe. The death scene was strange and strange, and all of them were accidental deaths. The police found that the dead were all

  Shen Nian sama read 66,963 comment one fabulous two hundred and ninety
• The immortal who saved him twice let him die today at the third watch

  Wen/Pan Xiaolu As soon as I entered the store, Wang Yugui, the shopkeeper of Xixi Building, came up to me with a worried face

  Kaifeng First Lecturer read 107,897 comment zero fabulous two hundred and forty
• Taoist Record: Missing Ginger Seller

  Wen/Not bad Uncle Tu, my name is Zhang Ling, and I am the Taoist Priest of Tianyi Taoist Temple. A pilgrim often asks me, Taoist Priest, what is the most difficult demon in the world? I laugh instead of

  Kaifeng First Lecturer read 43,805 comment zero fabulous two hundred and three
• Hong Kong Island Love (Regretful Wedding)

  In order to forget my predecessor, I held the wedding at once. As a result, my husband's sister dressed more like a bride than I did. I have always comforted myself that they just have a good relationship, but when I

  Tea Story read 52,208 comment three fabulous two hundred and eighty-six
• The case of vicious concubines getting married: this layout is not common people's idea

  I will uncover the white cloth. She just lay there quietly, as if asleep. The red wedding dress sets off the skin like snow. The combed lines on the untidy hair, one

  Kaifeng First Lecturer read 40,535 comment one fabulous two hundred and sixteen
• Legend of Urban Division

  That day, I went to the river to look for ghosts with my camera and recording. Smile to death, a fat man bragged in front of me, but I did all the bragging. I am a ghost spotting anchor, and I will

  Shen Nian sama read 31,797 comment two fabulous three hundred and eleven
• Double mandarin duck set: you can't imagine how dark the heart is

  Wen/Canglan Xiangmo suddenly opened my eyes and sighed: "It was a nightmare..."

  Kaifeng First Lecturer read 30,493 comment zero fabulous one hundred and ninety-seven
• Record of Wan Rong's Murder

  Preface: A couple in Vang Vieng, Laos disappeared. The missing person was Zhang Zhixin (not his real name) and his girlfriend Liu Ying. Unexpectedly, half a month later, a local people found a corpse in the forest

  Shen Nian sama read 34,215 comment one fabulous two hundred and forty-one
• Death of forest ranger

  Text Living Alone in the Wilderness Mountains, the forest keeper died strangely, and there were 42 bloody pustules on the body... Initial Seal · Zhang Xun The following content is from the perspective of Zhang Xun on September 15

  Tea Story read 30,477 comment two fabulous two hundred and forty-four
• Revelation of White Moonlight

  Song Qinglang and I have been in love for three years. When we tried our wedding dress, we found that we were green. My college friend sent me a photo of my fiance having dinner with Bai Yueguang

  Tea Story read 31,988 comment one fabulous two hundred and fifty-eight
• Living dead

  Preface: A man who was originally alive and kicking died in a strange and horrible way. The body in the mourning hall suddenly broke out of the coffin. Whether it was a fake body or something else, I am Ning Ze, a criminal policeman, with

  Shen Nian sama read 28,325 comment two fabulous two hundred and fifty-two
• Inside Story of Japan Nuclear Power Plant Explosion

  In the text year, the government announced that the nuclear power plant located on F Island was affected by a magnitude 9 earthquake and radioactive substances leaked. R himself ate the bad consequences, but gave the world environment

  Tea Story read 32,971 comment three fabulous two hundred and thirty-five
• Men's Poison: I came to ask for my life on the ninth day after death

  Text/On the first and ninth days of Mengmeng, I lay on a hidden roof in the doghouse and looked around. The courtyard is really bustling, with spring flowers like brocade and voices like boiling. The master of the Chuang Tzu today did "Spring Day..."

  Kaifeng First Lecturer read 26,055 comment zero fabulous eight
• There is such a plot behind a case of father killing

  Wen/Canglan Fragrant Ink I looked up at the sun in the sky. At the end of March, it was as warm as spring. The moment I stepped out of the prison with a layer of jacketed jacket, I was already sweating. A sound of footsteps

  Kaifeng First Lecturer read 26,807 comment zero fabulous one hundred and ninety-four
• Lust Beauty Skin

  I was cheated by a black hearted intermediary to work in Thailand, but I was almost squeezed dry by the siren princess just after getting off the plane... 1 My name is Wang Buliu, a native of Northeast China. A month ago, I also

  Shen Nian sama read 35,544 comment two fabulous two hundred and seventy-one
• In place of the princess

  I was born in a brothel, but I just looked like the princess, so I was forced to go to the enemy country and make friends instead of her. It is said that my marriage partner is a disabled prince, but the wedding night

  Tea Story read 35,455 comment two fabulous two hundred and sixty-six

Recommended reading More highlights

• Android - Collections

  Various postures of Android customized view 1 Display of activity ViewRootImpl Details Activity

  passiontim read 170,563 comment twenty-five fabulous seven hundred and seven
• WeChat X5 kernel webview debugging

  Title: WeChat X5 kernel webview debugging date: 2015-12-15 03:51 comments: tru

  Small and strong read 27,102 comment two fabulous five
• WeChat browser webview debugging

  Life goes on and on! QQ Browser provides WeChat debugging plug-ins, which should have been a very happy thing, but TX can not change its consistent style, the product

  SkyWatcher read 7,994 comment one fabulous three
• Be an expert rather than an expert

  I am not professional. I have experience. I can become more proficient through learning, but it is difficult to become an expert

  Kuang Jianping read three hundred and eighty-four comment zero fabulous three
• 130: How can we learn to write at BLUE S?

  I seriously agree that writing is not the whole of our group, and we will certainly gain more and more from writing together. But this is a writing group after all

  Infinite Dad read three hundred and seventy-seven comment five fabulous five