iOS dev Safari Debug WebView page

App Hybrid development is now the norm, but as an app developer, the use of H5 pages can not be easily limited to use, some simple debugging methods are necessary to understand.

Here's a quick step on how to debug content within the Web using the WebView process.

A true machine or simulator opens the Web Inspector, "Settings", "Safari", "Advanced"

Second, open the computer Safari, "preferences", "Advanced", "Show development options in the menu bar"

I'll test it using the simulator below.

Third, at this time, we do not run the app, you can check the simulator first, found that there is no things.

Four, then we run the app and open a webview to load a H5 page. To see step three here, you will find the following:

Inside the red box is the WebView page we're running.

We open Safari, click on the red box above, will pop up a page checker, similar to:

Here is the content on the WebView, we can do some debugging, with Windows under F12 Debugging a truth.

In the pop-up page inspector, you can see the various information that is currently loading the Web page, including the source code, network, resources and scripts, console output, and so on. And it and the Web front-end debugging the same way, you can directly modify the CSS style of the Web page, the layout of the source code and other changes, using the debugger for script debugging, without the need to rerun the entire app.

Five, this side I use "Baidu" example

1, WebView load Baidu website "http://www.baidu.com"

2. Open Safari's Web checker

3, for example, I want to change these names

Follow steps 1, 2, 3:

The final results are as follows:

Of course this is the most basic and simplest operation, like other changes in the font size, label length, etc., you can try to see

If you know a bit of front-end Web development, then the more powerful, web debugging ...

Enjoy ~

iOS dev Safari Debug WebView page