Safari真機(jī)調(diào)試web應(yīng)用

參考 Cordova Safari Remote Debugging

在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)試。

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

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

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

  圖片 1.png

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

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

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

    圖片 1.png

• 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)試模式。使用真機(jī)需要連接數(shù)據(jù)線。

  圖片 1.png

  • 打開(kāi)Safari中的調(diào)試

  • 在彈出的調(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)行修改后，可以直接在模擬器中看到修改后的效果。

    圖片 1.png

  • 直接修改webview中的樣式