App Webview远程调试学习小记

来源：互联网发布：挣钱的软件编辑：程序博客网时间：2024/05/01 18:53

1. 使用chrome对Android应用中的webview进行远程调试：

1.1. 首先创建一个带有webview的应用，访问百度：

布局文件activity_main.xml添加如下代码：

 <WebView    android:id="@+id/webView"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:layout_marginTop="10dp" />

MainActivity.java文件添加如下代码，通过setWebContentsDebuggingEnabled(true)方法开启远程调试

 private WebView webView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        Log.i("HelloAndroid", "This is the log message");        webView =(WebView)findViewById(R.id.webView);        webView.loadUrl("http://www.baidu.com");        webView.setWebViewClient(new WebViewClient() {            @Override            public boolean shouldOverrideUrlLoading(WebView view, String url) {                view.loadUrl(url);                return true;            }        });        if(Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT){            webView.setWebContentsDebuggingEnabled(true);        }    }

AndroidManifest.xml文件添加访问网络权限：

 <uses-permission android:name="android.permission.INTERNET"/>

1.2 手机上安装chrome, 并启动；

1.3 在电脑上的chrome输入chrome://inspect/#devices，如图：

点击inspect按钮，会打开Developer Tools，即可对手机上的webview进行调试了，如图：

2. 使用Safari对iOS应用中的webview进行远程调试：

2.1 创建一个带有webview的iOS应用，访问百度：

ViewController.h文件添加如下代码：

#import <UIKit/UIKit.h>@interface ViewController : UIViewController{    UIWebView *webView;}@end

ViewController.m文件添加如下代码：

#import "ViewController.h"@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];    NSURLRequest *request =[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]];    [self.view addSubview: webView];    [webView loadRequest:request];    // Do any additional setup after loading the view, typically from a nib.}- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}@end

在AppDelegate.m文件中的didFinishLaunchingWithOptions方法内加入如下代码，开启远程调试：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    // Override point for customization after application launch.    [NSClassFromString(@"WebView") _enableRemoteInspector];    return YES;}

2.2 【设置】->【Safari】->【高级】->【Web检查器】,开启手机上Safari的web检查器选项，如图：

2.3 打开Mac上Safari的开发者模式，【Safari】->【偏好设置】->【高级】->【在菜单栏中显示“开发”菜单】勾选，如图：

2.4 打开Mac上的Safari，开发》Simulator 》选择要调试的网站，如图：

2.5 接下来就可以直接进行远程调试了，e.g.修改网页上面的某个元素：

总结：

上面只是简单的修改了某个页面的元素看看效果，其实可以做的还有很多，比如分析H5页面性能及分析webview内存泄漏的情况～

0 0