在web開(kāi)發(fā)的過(guò)程中，抓包、調(diào)試頁(yè)面樣式、查看請(qǐng)求頭是很常用的技巧。其實(shí)在iOS開(kāi)發(fā)中，這些技巧也能用（無(wú)論是模擬器還是真機(jī)），不過(guò)我們需要用到mac自帶的瀏覽器Safari。所以，本文將講解如何使用Safari對(duì)iOS程序中的webview進(jìn)行調(diào)試。

環(huán)境信息：

Mac OS X 10.10.1

Xcode 6.1.1

iOS 8.1

正文：

1. 打開(kāi)模擬器（真機(jī)）的開(kāi)發(fā)者模式

【設(shè)置】->【Safari】->【高級(jí)】->【W(wǎng)eb檢查器】打開(kāi)

打開(kāi)iphone設(shè)備中的web檢查器

2. 打開(kāi)Mac上Safari的開(kāi)發(fā)者模式

【Safari】->【偏好設(shè)置】->【高級(jí)】->【在菜單欄中顯示“開(kāi)發(fā)”菜單】勾選

打開(kāi)Safari中的開(kāi)發(fā)者模式

3. 寫(xiě)一個(gè)webview并加載一個(gè)網(wǎng)頁(yè)

#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. 在模擬器（真機(jī)）中打開(kāi)webview應(yīng)用，并打開(kāi)Safari查看網(wǎng)絡(luò)信息

【開(kāi)發(fā)】->【iOS Simulator】->【正在調(diào)試的網(wǎng)站】

注意：必須要webview在加載網(wǎng)頁(yè)時(shí)，打開(kāi)Safari才可以看到調(diào)試模式。

image.png

在彈出的調(diào)試窗口中，可以看到當(dāng)前正在加載網(wǎng)頁(yè)的各種信息，包括源碼、請(qǐng)求頭、圖片、加載的資源與腳本、控制臺(tái)輸出等。并且它和web前端的調(diào)試方式相同，你可以直接修改網(wǎng)頁(yè)的CSS樣式，對(duì)網(wǎng)頁(yè)布局等進(jìn)行修改，而不用重新運(yùn)行整個(gè)App。

5. 修改web樣式

將光標(biāo)選中到要修改的樣式，進(jìn)行修改后，可以直接在模擬器中看到修改后的效果。

直接修改webview中的樣式

當(dāng)然，webview的調(diào)試技巧還有很多，比如Charles工具等。感興趣的小伙伴可以多研究下。

轉(zhuǎn)自:http://www.saitjr.com/ios/ios-user-safari-debug-webview.html