Using Safari to debug a WebView

In the process of web development, it is very common to grab the package, debug the page style, and view the request header. In fact, in iOS development, these skills can also be used (whether the simulator or the real machine), but we need to use the Mac's own browser Safari. So, this article explains how to use Safari to debug WebView in an iOS program.

Environmental information:

Mac OS X 10.10.1

Xcode 6.1.1

IOS 8.1

Body:

1. Open the developer mode of the simulator (real machine)

"Settings", "Safari", "Advanced", "Web Inspector" open

Open the Web inspector in your iphone device

2. Open the Safari developer mode on your Mac

"Safari", "preferences", "Advanced", "show the development menu in the menu bar" tick

Open the developer mode in Safari

3. Write a webview and load a Web page

#import"ViewController.h" @interfaceViewController () @property (strong, nonatomic) Span class= "hljs-built_in" >uiwebview *webview;  @end  @implementation viewcontroller-(void) viewdidload {[superviewdidload]; //do any additional setup after loading the view, typically from a nib. _webview = [[uiwebviewalloc] initwithframe: Self.view.bounds]; [_webview loadrequest:[nsurlrequest requestwithurl:[ Nsurl urlwithstring:@ "http://www.baidu.com"]]; [self.view Addsubview:_webview];}  @end             

4. Open the WebView app in the simulator (real machine) and open Safari to view network information

"Developing", "IOS Simulator", "Web site being debugged"

Note: You must webview when you load the Web page to open Safari to see Debug mode.

Turn on debugging in Safari

In the Debug window that pops up, you can see the various information that is currently loading the Web page, including the source code, the request header, the picture, the loaded resources and scripts, the console output, and so on. And it is the same as the Web front-end debugging, you can directly modify the CSS style of the Web page, the layout of the page and other changes, without re-running the entire app.

5. Modifying Web Styles

With the cursor selected for the style you want to modify, you can see the modified effect directly in the emulator.

Modify the styles in WebView directly

Of course, there are many debugging techniques for WebView, such as Charles Tools.

Using Safari to debug a WebView