使用safari對webview進行調試

在web開發的過程當中，抓包、調試頁面樣式、查看請求頭是很經常使用的技巧。其實在iOS開發中，這些技巧也能用（不管是模擬器仍是真機），不過咱們須要用到mac自帶的瀏覽器Safari。因此，本文將講解如何使用Safari對iOS程序中的webview進行調試。

環境信息：

Mac OS X 10.10.1

Xcode 6.1.1

iOS 8.1

 

正文：

1. 打開模擬器（真機）的開發者模式

【設置】->【Safari】->【高級】->【Web檢查器】打開

打開iphone設備中的web檢查器

2. 打開Mac上Safari的開發者模式

【Safari】->【偏好設置】->【高級】->【在菜單欄中顯示「開發」菜單】勾選

打開Safari中的開發者模式

3. 寫一個webview並加載一個網頁

#import "ViewController.h" @interfaceViewController () @property (strong, nonatomic) 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. 在模擬器（真機）中打開webview應用，並打開Safari查看網絡信息

【開發】->【iOS Simulator】->【正在調試的網站】

注意：必需要webview在加載網頁時，打開Safari才能夠看到調試模式。

打開Safari中的調試

在彈出的調試窗口中，能夠看到當前正在加載網頁的各類信息，包括源碼、請求頭、圖片、加載的資源與腳本、控制檯輸出等。而且它和web前端的調試方式相同，你能夠直接修改網頁的CSS樣式，對網頁佈局等進行修改，而不用從新運行整個App。

5. 修改web樣式

將光標選中到要修改的樣式，進行修改後，能夠直接在模擬器中看到修改後的效果。

直接修改webview中的樣式

固然，webview的調試技巧還有不少，好比Charles工具等