Said in front
For dry goods, skip the “say before” section
This kind of article, Baidu “a dig a sack”, but it is not nice to say, “one can not play”, summarized as follows:
- Scoop: Win7 下, scoop install ios-webkit-debug-proxy, “scoop install ios-webkit-debug-proxy”, “scoop install ios-webkit-debug-proxy”, “Scoop install ios-webkit-debug-proxy”
- A bunch of NPM plugins, but it still doesn’t work.
- At the last step, NMP said to me, “I can see, but I can’t debug.” I hit the keyboard, okay?
- .
Scared me quickly put a wife town building
Now that we’ve written this article, we’ve solved all of these problems, so let’s get back to what we’re trying to achieve.
Chrome-devtools debugs the H5 page on IOS mobile devices
In a nutshell, it is
I bound “console.log (1)” to “submit” BTN, so when I click “submit” on the H5 page on mobile, Chrome on PC will output 1
Someone asked the
Q: THE H5 page of my mobile terminal can also be put into chrome of PC terminal for debugging. Why do I need to debug the real machine? Such as:
A: It depends on the demand. If your business doesn’t need it, it doesn’t need it. For example:
- When your App is embedded in H5, how do you debug some native interactions and know if the native methods are defined?
- How does the PC simulate and respond to debugging when multi-touch H5 pages?
- Use some third-party plug-in libraries or apis, containing strict judgment, non – real machine is not easy to debug, how to do?
- .
Next is dry goods, let you debug H5 page, WebView page, check whether the APP exists WebView and find its online address!
I. Environment (successful test cases)
- PC Chrome (versions 45, 46)
- IOS Safari (11.2.6)
- Win system (Win7, Win10)
- One USB cable
2. Prepare software tools
I put it all on Github, please star, fork
Making: chrome_ios_safari_ios – its – debug – proxy
Here is the best “Download ZIP”, do not know how many years to pull down
Of course, in order to prevent “Download ZIP” is also very slow, so I put the source address of the file listed here, can be downloaded separately, are necessary
- iTunes
- Ios – its – debug – proxy – 1.8 – win64 – bin. Zip
- Chrome45.0.2454.85 _64_installer
TIPS: There is a reason why Google is using version 45, of course the latest version can also be used, as I will explain later, it is always a bit troublesome
Of course, if it doesn’t work, come to github and slowly down, (^▽ ^)
Set up the iPhone Safart browser
Settings > Safart Browser > Advanced > Open the Web Inspector
The diagram below:
4. Open iTunes and connect the data cable
After the iPhone is connected to the PC, there will be a prompt “Whether to trust this computer”, press confirm, and iTunes will also retrieve the iPhone device. If the following figure is displayed, the connection is successful.
5. Open the ios-webkit-debug-proxy-1.8-win64-bin directory
For example, I decompressed it on disk F, put a picture to look at it
Open CMD, go to the disk, and run the following command
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html
If the following message is displayed, the connection is successful!
Core tutorial
If the port listening is 9221, open chorme45 and enter http://127.0.0.1:9221/
If you click on “Teteo” (that is, your device), it’s blank, which means you haven’t opened the H5 page yet. Open an H5 page in Safari, refresh Chrome, and you’ll find a few more pieces of data
Underline, you need to debug the page, review elements, I here for example debug “Baidu”
Copy the address to the address bar, then enter the debugging interface!
Ning elder brother! Ning elder brother! Oh, wrong set. Console input
alert(‘Hello World! ‘)
The mobile end is displayed
The console can’t be pressed. I’m talking about you. Advanced Chrome
Let’s do a DIY bind to the BTN to see if the console really works
Click “Baidu” on ios, and true pops up, OK
Next, let’s try breakpoints, click on the method we just bound, go into chrome cache, and debug breakpoints
Click “Baidu once”, found not to go! Then there’s the black tech
Double-click the arrow button in the upper right corner
Click again “Baidu once” found in! Type this to return the current BTN DOM element
Clap your hands (^▽ ^)
How do you know it works here? . An old blood, a bitter tears
7. Undebugable alternative problem sets
1, Chrome high version console can not input problems
Solution: Press F12, the console has a heap of errors, each console enter, the right side will add an error message
If (error){console.error(error)…… “If (! The error) {the console. The error (error)…” That is, cancel it and CTRL + S to solve the problem. TIPS: If you refresh, you have to start all over again, which is not very convenient.
Is there a way to permanently map Inspector. Js to workspace
2. Chrome is disconnected
Description: “Detached from the target” appears in Chrome, and debugging is suspended
Solution: CMD open service “iOS_webkit_debug_proxy” restart, clear chrome cache, restart Chrome solution, and do not do some black operations, the debug page is extremely unstable.
3. When CMD starts the debug_proxy service, the mobile phone cannot be connected and there is no response
Problem description: implement “ios_webkit_debug_proxy -f chrome – devtools: / / devtools bundled/inspector. The HTML” this statement, the following display
Solution: Check whether iTunes is connected to your device, plug and unplug the USB interface again, restart the service or restart the computer to try, if still not, please download other versions to try
Making: Google/ios – its – debug – proxy
TIPS: Note that if this step is already done, the chrome port for typing 9221 will also be blank.
4, Chrome can not debug the lower version of the problem
The inspector. HTML debug page cannot be called up in version 30
Solution: version 30+, already deprecated devtools. HTML page, 30 below Chrome should be entered in the URL
chrome-devtools://devtools/devtools.html? ws=localhost:9222/devtools/page/1
The debug page is displayed.
Page /1 and 9222 are pass-through values in the DOM element examined on port 9221 and should be consistent.
about
Make: o sof f OVE▅▅▅▆ tune Tune Sky
blog：http://blog.csdn.net/mcky_love
The Denver nuggets: https://juejin.cn/user/1996368846268334
lofter：http://zcxy-gs.lofter.com/
github：https://github.com/gs3170981?tab=repositories
sf：https://segmentfault.com/u/mybestangel/articles
conclusion
God knows how many solutions I tried, how many chrome versions I downloaded, those useless articles were written out, plus a bunch of sharing parties took up the screen on baidu’s home page
No wonder Google is the best search engine, sad.