IOS Wkwebview Hybrid Application Development era-embedded JS debugging becomes catalyst

IOS Wkwebview Hybrid Application Development era-embedded JS debugging becomes catalyst

The beautiful Life of the Sun Vulcan (http://blog.csdn.net/opengl_es)

This article follows "Attribution-non-commercial use-consistent" authoring public agreement

Reprint Please keep this sentence: Sun Vulcan's Beautiful Life-this blog focuses on Agile development and mobile and IoT device research: IOS, Android, HTML5, Arduino, Pcduino , Otherwise, the article from this blog refused to reprint or re-reproduced, thank you for your cooperation.

As early as five years ago, in Harbin streets and alleys of the restaurant son, often hear shop boss complain waiter bad recruit, money to less no one do!

At that time also deliberately made an analysis, 2010 backward Push 30, is just 1980, a child, Gen Y has ten years of human resources available, one is arrogant accustomed to grow up, do waiter that part of the the other hand really

There are so many idlers. Whispered with a sentence, I have done before and after graduation one or two times run the hall, even wearing roller skates to spread vegetables, normal station day, it is too much, the next day not to the afternoon on the run, really did not have this ability and physical strength, had to steal a lazy, learn some technology, engage it

Today, in the IT industry for 15 years, from the Telecom trunk to IVR board development, and then to the Linux billing, SMS SMPP protocol application, all the time to the smartphone, from C + + to Java, C #, from Java EE to PHP to ASP, from Sybase, SQL Server to Oracle, DB2, and then to MySQL, Sqlite, from Android to Sybian, Qt to iOS, technology change has been carried out, from small to large, and then from large to small, smart devices from 2008 to date has gone through 7 years, the screen is more and more large, Big to the birth of the pad, and return to the 5-inch large screen mobile phone, the future may be a large screen of TV and will fire a, then the bottleneck, began to derivative, multi-screen interaction everywhere, slowly screen and the small, watches, buttons, rings, keys, brooches, perhaps one day the students will be asked to wear the emblem, No longer like we used to be just a sign, that school micro will be like identity card identity, record the figure, broadcast the campus news, understand the test results, at any time to answer the books do not understand the topic ... Who knows?

Imagination is always good, the future is always worth looking forward to, but now people have been shortage has appeared for many years, slowly spread to various industries, especially it this labor industry, with the change of social relations, perhaps it is no longer in the labor industry, need to make full use of wisdom and ideas to achieve productivity supplement, rather than the crowd strategy.

From this situation, it is not difficult to see, such as Android, iOS, the technical requirements of higher jobs, talent is very little, so how to use the existing resources to pass the supplement will be a new problem to explore.

Wkwebview with the release of iOS8 in front of people, a UIWebView routine initial 20M of memory consumption, suddenly dropped to 10M, people ecstatic, especially after the subsequent loading of the memory of the HTML page

The amount, basically in 0.2 m units, and not as uiwebview as in 2M units.

Apple released Wkwebview more to open its efficient JS engine, that is the real gold mine.

Early in the year, Old Joe is to use the Safari app to build this ecological chain, no resistance to all aspects of the restrictions, the original application is fire up, and now Wkwebview release, also marks a new era of the band, perhaps this may be called Web 8.0 it?!

Said so much, can only use one word to form: change rapidly!

How to deal with the new era of embedded application development, embedded JS application will become an effective way to make full use of the human property left by the Web 2.0 era, as we are now the largest consumer market in the country is the early years "people more power" thought left behind the same wealth. How to excavate will become a new subject.

JS as a dynamic language, in the desktop browser development, the early years have also been a headache, and later found the FireFox FireBug plug-in, can be real-time debugging, very exciting, with the browser manufacturers and plug-in developers continue to provide this support, so that JS development has become less maddening , and many of the integrated development environments have built-in browser debugging environments to address these issues more largely.

Then, embedded application embedded JS, and become a new problem, how can use the existing development environment and browser and plug-in environment to solve the problem of embedded JS?

The first thing to say is that the Sarari desktop browser is capable of debugging support for the WebView component in the XCode emulator.

For detailed usage see: Debugging WebView with Safari

For Android, you can use Chrome for remote debugging, because the Chrome and Android website my home environment access, only a few more links to see it, at least you know that there is such a thing

http://blog.csdn.net/t12x3456/article/details/14225235

There is also a way to use the open source JS Debug Library:

Https://github.com/lexandera/Aardwolf

For more details, go and see it from a glance.

Here is an article, than I summed up much better, the following direct reprint:

Summary of various real-machine remote debugging methods

Summary of various real-machine remote debugging methods

"Remote inspect web on real device" means using a desktop PC (PC or Mac) to remotely connect to a mobile device and debugging a Web page running on a mobile device via an interface like the Chrome developer tools.

Current: Oct 27,2014

The method of "remote debugging of real machine" is always developing and changing, it is necessary to mark the current time and the current relevant software version every time this document is updated.

• Current latest desktop version of Chrome: mac:38.0.2125.104,pc: Unknown
• Current chrome version on the latest Android: 38.0.2125.102
• Current UC developer version of latest Android: 9.8.9.457
• Current Latest ios:8.1

Overview table

Method	Key points	Difficult to achieve (comprehensive consideration of environment, software, hardware costs, small score is preferred)	Debugging effect (considering the simulation effect, the items can be debugged, etc., the score is very good)	Available Desktop Devices	available mobile devices and a debugger-ready browser	Brief steps
Chorme Simulator	Non-real machine, just analog	0	2 (The new version adds the function of the analog network link, therefore increases the score)	PC, MAC	No	GO
Weinre	More cumbersome installation	3	2	PC, MAC	All	GO
Debug Chrome on Android	Need to flip the wall	2	4	PC, MAC	Chrome on Android	GO
Debug WebView in Android app	Need to flip the wall	3	4	PC, MAC	WebView in the Android app	GO
Debug UC on Android	Requires the same network segment for desktop and mobile devices	1	3	PC, MAC	UC on Android	GO
To debug Safari on iOS	Requires a Mac (even without an iOS device)	2	4	Mac	Safari on iOS	GO

Brief step Chorme Simulator

1. Open the Chrome browser on your PC or Mac, open the page you want to debug, and then open the developer tools
2. Click the phone icon on the top bar of the developer tool to start debugging (), and you will need to refresh the page in general
3. At the top of the page you can see the device selection drop-down menu and the drop-down menu of the Device simulated network environment Network , and the Clear selection button on the left and the Turn off media queries button ()
4. Open the icon to the left of the settings >三 , switch to the Emulation tab, and fine-grained to customize your simulation ()

Weinre

The process is a little cumbersome, but this program can debug almost any browser on all platforms, as long as you can run JS on the line

1. Installing Nodejs
2. Install weinre to Global, which is run on the command line npm -g install weinre (Mac may need to be sudo preceded)
3. Get the native IP address (PC: Start → run →cmd, enter ipconfig , view "IPv4 address" field; MAC: Within network preferences), assuming that the IP address obtained is 4.4.4.4
4. At the command line run Weinre: weinre --boundHost 4.4.4.4 , where the IP address is the address obtained in the previous step, if the firewall is ejected, allow access ()
5. Open with a browser on a PC or Mac http://4.4.4.4:8080/client/#anonymous , where the IP address is the address obtained in step three ()
6. Connect your mobile device to the same LAN as your PC or Mac, open a browser on your mobile device that needs to be debugged, and then open a webpage at random. Save it as a bookmark
7. Modify the above bookmark to change the address to:

JavaScript: (function (e) {e.setattribute ("src", "http://4.4.4.4:8080/target/target-script-min.js#anonymous"); document.getElementsByTagName ("Body") [0].appendchild (e);}) (Document.createelement ("script")); void (0);

, where the IP address is the address obtained in step three (after copying, remove line breaks from the code to make it a line)
8. On the mobile device browser open the page you want to debug, and then click on the bookmark saved in the previous step, you can find the corresponding page in the target in the page on the PC or Mac, click to Start Debugging () ()

More:

1. Consider setting up a unified Weinre server on a machine that can be shared by team members, which I haven't tried
2. In the 7th step above, you can take the form of bookmarks, but consider introducing the debug JS file provided in the code, such as <script src="http://4.4.4.4:8080/target/target-script-min.js#anonymous"></script> (this applies to scenes that cannot use bookmarks, such as WebView in the app, medium, but remember to remove the JS reference before going online)

Other reference links

• Http://people.apache.org/~pmuellr/weinre-docs/latest/Installing.html

Debug Chrome on Android

1. Install the Chrome browser on your Android device (version >=32,https://play.google.com/store/apps/details?id=com.android.chrome&hl=en ) (Chrome is only available for Android 4.0 +)
2. Turn on USB debugging for your current Android device
3. Install the Chrome browser (version >=32) and the corresponding Android device driver on your PC or Mac (if you can't find it, try it in this list)
4. Connect your Android device with a USB cable, enter it in the Chrome address bar on your PC or Mac, chrome://inspect or go to the Debug screen with the menu icon → tools → check your device
5. Tick the screen Discover USB devices until you find your Android device ()
6. Whether to allow remote debugging on the mobile device, select "Allow"
7. In the following page list (which will show pages that have been opened in Chrome on Android), click on the corresponding inspect start debugging
8. A new tab will pop up on the desktop version of Chrome, which is the debug interface, and if it's not responding for a long time, please go through the wall and try again (a free wall-over service)

Other reference links

• Https://developer.chrome.com/devtools/docs/remote-debugging

Debug WebView in Android app

1. By modifying the code, set the Allow remote debugging within the app (requires Android version 4.4 and above): method, then install the app
2. Turn on USB debugging for your current Android device
3. Install the Chrome browser (version >=32) and the corresponding Android device driver on your PC or Mac (if you can't find it, try it in this list)
4. Connect your Android device with a USB cable, enter it in the Chrome address bar on your PC or Mac, chrome://inspect or go to the Debug screen with the menu icon → tools → check your device
5. Tick the screen Discover USB devices until you find your Android device ()
6. Whether to allow remote debugging on the mobile device, select "Allow"
7. In the following page list (which will show pages that have been opened in Chrome on Android), click on the corresponding inspect start debugging
8. A new tab will pop up on the desktop version of Chrome, which is the debug interface, and if it's not responding for a long time, please go through the wall and try again (a free wall-over service)

Other reference links

• Https://developers.google.com/chrome-developer-tools/docs/remote-debugging

Debug UC on Android

1. Install UC Browser developer on Android device, http://www.uc.cn/business/developer/, click "Install package Download" On the right side of the first line ()
2. Gets the IP of the Android device, typically within the WLAN settings, assuming4.4.4.4
3. Use a PC or Mac that is on the same network segment as your phone to access the IP that you acquired in step 2 :9998 , as in the example4.4.4.4:9998
4. Whether to allow remote debugging on the Android device, select "Allow" () to start debugging ()

Other reference links

• Http://www.uc.cn/business/download/developer.pdf

To debug Safari on iOS

1. Open allow debugging on iOS devices: Set →safari→ advanced → open Web Inspector
2. Open Safari's Development menu on Mac: Top menu bar "Safari" → preferences → advanced → open "show the development menu in the menu bar
3. Open the page you want to debug on your iOS device in Safari, then switch to Safari on your Mac, select "Develop" in the top menu bar → find your iOS device name → Right level two menu select the corresponding tab that needs debugging to start Remote debugging ()
4. If you do not have an iOS device, you can also simulate one in Xcode, click the top "Xcode" → "Open Developer Tool" → "ios Simulator" to open an iOS device Emulator, and the simulator inside the Safari open page, It is also possible to debug with Safari on the Mac in the previous step. （ ）

IOS Wkwebview Hybrid Application Development era-embedded JS debugging becomes catalyst