Android WebView - 全面总结(概述、捕获url、js交互、小技巧、内存泄漏、缓存机制)

本文全面介绍了WebView的基本使用方法、配置选项及其与JavaScript的交互方式。同时探讨了WebView在Android开发中的高级应用,包括缓存机制、内存管理及常见问题的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

结合H5页面开发的App日渐多了起来,而WebView正是Html与Native的纽带,今天就借着一个新的项目需求顺便做一下WebView的知识总结,如有错漏,恳请大家指点指点。(项目需求:将适配好的网页打包成App,并能够调用系统摄像头进行二维码识别、拍照或是选择本地图片上传、获取用户位置等)


WebView 小科普

  • 官方文档
    Class Overview
    A View that displays web pages. This class is the basis upon which you can roll
    your own web browser or simply display some online content within your Activity.
    It uses the WebKit rendering engine to display web pages and includes methods
    to navigate forward and backward through a history, zoom in and out, perform text searches and more.
    理解:WebView是一个显示网页的一个View,基本应用于浏览器或是Activity中网页的简单显示。使用了WebKit渲染引擎实现一系列神奇的功能。

    Basic usage
    By default, a WebView provides no browser-like widgets, does not enable JavaScript and web page errors are ignored.
    理解:默认情况,WebView并没有开启对JavaScript的支持,仅起展示作用,因此,我们需要进一步配置WebView才能满足各种各样的需求。

WebView基本使用

  1. 在 AndroidManifest.xml 中添加联网权限(如果webView需要联网的话,仅加载本地html、js文件则不需要添加联网权限)
 <uses-permission android:name="android.permission.INTERNET" />
<!--另外附上一些可能会用到的权限:-->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<!--获取网络状态权限(情景:WebView联网前,应检查当前网络状态)-->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<!--通过WiFi或移动基站的方式获取用户错略的经纬度信息-->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<!--通过GPS芯片接收卫星的定位信息权限(情景:结合HTML5使用Geolocation API获取位置时)-->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!--读写存储权限(情景:拍照/选择图片,涉及图片读取、编辑、压缩等功能时)-->
  1. 一些 WebSettings 常用配置(其实还有许多没有列出来,大家可以利用IDE,点击进入方法,查看源码继续发掘)
 WebSettings  mWebSetting = mWebView.getSettings();  //获取WebSetting
 setJavaScriptEnabled(true);//让WebView支持JavaScript
 setDomStorageEnabled(true);//启用H5 DOM API (默认falsesetDatabaseEnabled(true);//启用数据库api(默认false)可结合 setDatabasePath 设置路径
 setCacheMode(WebSettings.LOAD_DEFAULT)//设置缓存模式
 setAppCacheEnabled(true);//启用应用缓存(默认false)可结合 setAppCachePath 设置缓存路径
 setAppCacheMaxSize()//已过时,高版本API上,系统会自行分配
 setPluginsEnabled(true);  //设置插件支持
 setRenderPriority(RenderPriority.HIGH);  //提高渲染的优先级
 setUseWideViewPort(true);  //将图片调整到适合webview的大小
 setLoadWithOverviewMode(true); // 缩放至屏幕的大小
 setSupportZoom(true);  //支持缩放,默认为true
 setBuiltInZoomControls(true); //设置内置的缩放控件(若SupportZoom为false,该设置项无效)
 setDisplayZoomControls(false); //隐藏原生的缩放控件
 setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); //支持内容重新布局
 supportMultipleWindows();  //支持多窗口
 setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);  //关闭webview中缓存
 setAllowFileAccess(true);  //设置可以访问文件
 setNeedInitialFocus(true); //当webview调用requestFocus时为webview设置节点
 setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口
 setLoadsImagesAutomatically(true);  //自动加载图片
 setDefaultTextEncodingName("utf-8");//设置编码格式
 //实际应用中,一般配置即可满足基本需求
 mWebSettings.setSupportZoom(true);
 mWebSettings.setJavaScriptEnabled(true);
 mWebSettings.setLoadWithOverviewMode(true);
 mWebSettings.setUseWideViewPort(true);
 mWebSettings.setDefaultTextEncodingName("utf-8");
 mWebSettings.setLoadsImagesAutomatically(true);
  1. 加载网页、本地、assets中的html页面基本方式
//网页
private static final String URL_NET = "http://www.google.com"; // 记得加 "http://"
//assets 中的 html 资源
private static final String URL_LOCAL ="file:///android_asset/xxx.html路径"; 
//SD 卡中的 html 资源
private static final String URL_SD_CARD ="content://com.android.htmlfileprovider/mnt/sdcard/xxx.html"; 
mWebView.loadUrl(URL_NET);
mWebView.loadUrl(URL_LOCAL);
mWebView.loadUrl(URL_SD_CARD);

WebViewClient 与 WebChromeClient

WebViewClient与WebChromeClient的区别

  • WebViewClient 用于帮助WebView处理各种通知、请求事件
WebViewClient 常用方法说明
shouldOverrideUrlLoading加载时调用,可捕获url
onPageStart开始加载时调用(可以设置加载中提示)
onPageFinish加载完成时调用(无法打开也是完成的一种,在这里取消加载提示显示)
onReceiveError接收到错误信息时调用(通常在该方法中处理404之类的加载错误,但这里有点坑,API23中,在低于API23的设备上运行时,该方法失效,不调用我猜原因可能是: 新版的onReceiveError不再接收网页连接的错误,而是接收WebView自身运行出现的错误,另外有onReceivedHttpError方法来接收(然而在我的测试中,该方法还是未能接收到404错误)。可暂时用API23过时的方法“onReceivedError(WebView view, int errorCode, String description, String failingUrl)”替代新版本中的“onReceivedError(WebView view, WebResourceRequest request, WebResourceError error)”;)传送门:stackoverflow Q&A
  • WebChromeClient 用于辅助 WebView处理Javascript的对话框,网站图标、Title、位置、加载进度等信息
WebChromeClient 常用方法说明
onProgressChanged加载进度
onReceivedTitle、onReceivedIcon获取网页标题、图标
onGeolocationPermissionsShowPrompt页面发起GEO定位请求时调用
WebChromeClient源码中对各种方法都有详细解析,需要用到的时候查一下即可
  • 两者用法都是简单的set方法
mWebView.setWebViewClient(mWebViewClient);
mWebView.setChromeClient(mWebChromeClient);

WebView与Javascript交互

  • 前提条件:setJavaScriptEnabled(true)
  • 调用js方法
    mWebView.loadUrl("javascript: 方法名('"+参数+"')");
  • js调用android中方法
    4.2及之前版本该方法存在漏洞:Android WebView的Js对象注入漏洞解决方案JS与WebView交互存在的一些问题
    引用”漏洞描述”:
    1,WebView添加了JavaScript对象,并且当前应用具有读写SDCard的权限,也就是:android.permission.WRITE_EXTERNAL_STORAGE
    2,JS中可以遍历window对象,找到存在“getClass”方法的对象的对象,然后再通过反射的机制,得到Runtime对象,然后调用静态方法来执行一些命令,比如访问文件的命令.
    3,再从执行命令后返回的输入流中得到字符串,就可以得到文件名的信息了。然后想干什么就干什么,好危险。
/**
 * This method can be used to allow JavaScript to control the host
 * application. This is a powerful feature, but also presents a security
 * risk for apps targeting{@link android.os.Build.VERSION_CODES#JELLY_BEAN} 
 * or earlier.
 * /
 //理解:该方法可以让js控制app,很强势,但在API17(4.2)及之前的版本存在安全问题
 addJavascriptInterface(Object object, String name);

 //使用方法
 mWebView.addJavascriptInterface(MethodObject,"name");

 //还需要写一个方法类
 class MethodObject extends Object {
    //无参函数,js中通过:var str = window.name.HtmlcallJava(); 获取到
    @JavascriptInterface
    public String HtmlcallJava() {
        return "Html call Java";
    }

    //有参函数,js中通过:window.jsObj.HtmlcallJava2("IT-homer blog");
    @JavascriptInterface
    public String HtmlcallJava2(final String param) {
        return "Html call Java : " + param;
    }
}

WebView小技巧

/**
 * 捕获Url
 * 多页面在同一个WebView打开
 * /
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
            if(url.equal("需要捕获的url")){
                // 捕获后的操作
                // 前面提到的项目需求中,调用系统摄像头识别二维码、拍照、选择本地图片等功能
                // 均可该方式简单实现(当然addJavascriptInterface方式也能达到相同效果)
                return true;
            }
            view.loadUrl(url);//该方法可让多页面在同一个WebView中打开(不用新建Activity或是调用浏览器)
            return true;
        }
//我们再回头看看该方法的官方API,会发现上面的方法多少还是有点坑(重定向问题,出现原理)     
/**
     * Give the host application a chance to take over the control when a new
     * url is about to be loaded in the current WebView. If WebViewClient is not
     * provided, by default WebView will ask Activity Manager to choose the
     * proper handler for the url. If WebViewClient is provided, return true
     * means the host application handles the url, while return false means the
     * current WebView handles the url.
     * /

     //该方法为应用提供处理新url的机会,如果WebView没有设置WebViewClient,WebView会调用系统来找到合适应用来处理该url;而如果设置了WebViewClient,该方法返回true说明该url由应用自行处理,而false则交给WebView自动处理。

     //那么,问题来了:上面方法中,我们returne的是true,而处理代码是让WebView直接loadUrl(不管什么情况都是直接loadUrl,并把该url加入历史记录),如果该url会重定向到其他url,如果调用了goBack,返回到该url,而该url又重定向到另外一个url,造成goBack失败。

     //解决方式:将处理重定向的url交给webView本身,webView能自行判断url是否为重定向url,能够确保历史记录准确性,自身跳转则需要另想办法:
     //1. 与前端人员协商能够去掉重定向url? 
     //2. 建立自身的历史栈,舍弃goBack()方法,移除重定向url与重定向后的url,根据需求自行进行loadUrl(需要思考一个合理的跳转逻辑)
     //3. 建立自身的历史栈,与前端配合,提供js函数判断是否为重定向url,捕获url调用js函数,若为重定向url则作过滤处理,则不加入历史栈
public boolean shouldOverrideUrlLoading(WebView view, String url){
    return false;
}
/**
 * 返回上一浏览页面
 * /
public boolean onKeyDown(int keyCode, KeyEvent event) {       
    if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {       
        mWebView.goBack();       
        return true;       
    }       
    return super.onKeyDown(keyCode, event);       
}
// WebClient 中 onReceivedError 的旧方法(API23 已过时)
 @Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
      showErrorTips();// 显示错误页面/提示(大家可以将 WebView 错误页面替换掉、结合 mWebView.reload 实现点击重连)
}

WebView 进阶

WebView 内存泄漏问题

WebView解析网页时会申请Native堆内存用于保存页面元素,当页面较复杂时会有很大的内存占用。如果页面包含图片,内存占用会更严重。并且打开新页面时,为了能快速回退,之前页面占用的内存也不会释放。有时浏览十几个网页,都会占用几百兆的内存。这样加载网页较多时,会导致系统不堪重负,最终强制关闭应用,也就是出现应用闪退或重启。

由于占用的都是Native堆内存,所以实际占用的内存大小不会显示在常用的DDMS Heap工具中(这里看到的只是Java虚拟机分配的内存,一般即使Native堆内存已经占用了几百兆,这里显示的还只是几兆或十几兆)。只有使用adb shell中的一些命令比如dumpsys meminfo 包名,或者在程序中使用Debug.getNativeHeapSize()才能看到。

据说由于WebView的一个BUG,即使它所在的Activity(或者Service)结束也就是onDestroy()之后,或者直接调用WebView.destroy()之后,它所占用这些内存也不会被释放。

解决这个问题最直接的方法是:把使用了WebView的Activity(或者Service)放在单独的进程里。然后在检测到应用占用内存过大有可能被系统干掉或者它所在的Activity(或者Service)结束后,调用System.exit(0),主动Kill掉进程。由于系统的内存分配是以进程为准的,进程关闭后,系统会自动回收所有内存。

WebView 缓存机制

推荐文章Android WebView缓存机制详解深入探究webView的缓存机制

经过一番搜索得来的结果:
1. WebView缓存分为:页面缓存和数据缓存。页面缓存指加载网页时,对页面或资源数据的缓存。一般使用RE管理器进入目录: “/data/data/(packageName)/cache/org.chromium.android_webview“可看到;
数据缓存又分为 AppCache 与 DOM Storage 。AppCache可以有选择地缓存我们所想要缓存的东西;DOM Storage 则是HTML5的一个缓存机制,常用于存储简单的表单数据,关于DOM Storage,详情可学习参考下 “浅谈HTML5 的DOM Storage机制” 一文。
2. webView的缓存模式:
LOAD_CACHE_ONLY: 不使用网络,只读取本地缓存数据
LOAD_DEFAULT: 根据cache-control决定是否从网络上取数据。
LOAD_CACHE_NORMAL: API level 17中已经废弃, 从API level 11开始作用同LOAD_DEFAULT模式
LOAD_NO_CACHE: 不使用缓存,只从网络获取数据.
LOAD_CACHE_ELSE_NETWORK,只要本地有,无论是否过期,或者no-cache,都使用缓存中的数据。
3. 将缓存路径转移到外置sd卡
查看 Context 类API 发现这样一个方法,重写该方法即可(注意赋予相关权限,但Android 4.4 上权限限制,会使该方法失效)
另外趁机附上:Android 外部存储权限分析(译)Android存储访问及目录

/**
     * Returns the absolute path to the application specific cache directory
     * on the filesystem. These files will be ones that get deleted first when the
     * device runs low on storage.
     * There is no guarantee when these files will be deleted.
     *
     * <strong>Note: you should not <em>rely</em> on the system deleting these
     * files for you; you should always have a reasonable maximum, such as 1 MB,
     * for the amount of space you consume with cache files, and prune those
     * files when exceeding that space.</strong>
     *
     * @return The path of the directory holding application cache files.
     *
     * @see #openFileOutput
     * @see #getFileStreamPath
     * @see #getDir
     */
        public abstract File getCacheDir();
File extStorageAppCachePath = null;
    public File getCacheDir() {
        //读写权限判断
        if (Environment.MEDIA_MOUNTED.equals(Environment.getExternalStorageState())) {
            //获取外置存储路径,生成相应缓存路径
            File externalStorageDir = Environment.getExternalStorageDirectory();
            if (externalStorageDir != null) {
                extStorageAppCachePath = new File(externalStorageDir.getAbsolutePath() +
                        File.separator + "Android" + File.separator + "data" + File.separator + getPackageName() + File.separator + "webViewCache");
                //路径不存在,创建
                if (!extStorageAppCachePath.exists()) {
                    if (!extStorageAppCachePath.mkdirs()) {
                        //创建路径失败
                        extStorageAppCachePath = null;
                        return super.getCacheDir();
                    } else {
                        //成功创建,返回路径
                        if (extStorageAppCachePath != null) {
                            return extStorageAppCachePath;
                        }
                    }
                } else {
                    //路径已存在,直接返回
                    if (extStorageAppCachePath != null) {
                        return extStorageAppCachePath;
                    }
                }
            }
        }
        return super.getCacheDir();
    }

结束语

本文主要是对自己学习WebView的过程、应用WebView遇到的一些问题,结合强大的网络资源总结而来,如果错漏,恳请指教,希望能给大家提供小小的帮助,在分享技术过程中,提升、成长!(有很长一段时间没有发布过博客,贵在坚持,贵在坚持!

<think>我们正在讨论如何用Chrome调试WebView中的内容。根据引用内容,主要涉及Android和iOS平台。下面将分平台说明调试步骤。 ### Android平台调试步骤 1. **在Android应用中启用WebView调试** 在包含WebView的Activity中,添加以下代码(通常在`onCreate`方法中): ```java if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true); } ``` 这段代码会为应用中的所有WebView启用调试(无论是否WebView上设置`setWebContentsDebuggingEnabled`)[^3][^4]。 2. **连接设备并运行应用** - 通过USB将Android设备连接到开发机,并确保设备已开启USB调试模式(在开发者选项中)。 - 运行包含WebView的应用,并加载需要调试的H5页面。 3. **在Chrome中调试** - 在电脑上打开Chrome浏览器,访问:`chrome://inspect/#devices`。 - 在“Devices”下找到你的设备,并看到已启用调试的WebView列表(包括应用包名和WebViewURL)。 - 点击对应WebView下方的**inspect**按钮,即可打开Chrome DevTools进行调试(与普通网页调试相同)[^1][^3]。 ### iOS平台调试步骤(使用Safari或Chrome) #### 方法1:使用Safari(官方原生支持) 1. **启用设备调试功能** - 在iOS设备的“设置”>“Safari”>“高级”中,开启**Web检查器**。 - 在Mac的Safari浏览器中,启用“开发”菜单:Safari > 偏好设置 > 高级 > 勾选“在菜单栏中显示开发菜单”。 2. **调试步骤** - 在App中打开需要调试的WebView- 连接设备到Mac,在Mac的Safari菜单中:选择“开发” > [设备名称] > [WebView对应的网页]。 - 使用Safari的Web检查器进行调试[^2]。 #### 方法2:使用Chrome(通过适配器) 1. **安装调试工具** 在终端执行以下命令安装必要工具: ```bash # 安装ios-webkit-debug-proxy brew install ios-webkit-debug-proxy # 安装remotedebug-ios-webkit-adapter npm install remotedebug-ios-webkit-adapter -g ``` 2. **启动适配器** 运行适配器服务(默认端口9000): ```bash remotedebug_ios_webkit_adapter --port=9000 ``` 3. **配置Chrome** - 打开Chrome,访问:`chrome://inspect/#devices`。 - 点击**Configure...**,添加地址:`localhost:9000`。 - 确保iOS设备已连接并信任电脑,在App中打开WebView。 4. **开始调试** 在`chrome://inspect`页面会显示设备上的WebView,点击**inspect**即可调试[^2]。 ### 通用调试技巧 - **实时修改**:在DevTools中修改HTML/CSS/JS并实时查看效果。 - **断点调试**:在Sources面板设置JavaScript断点。 - **网络分析**:使用Network面板监控请求。 - **控制台交互**:在Console中执行JavaScript命令(例如:`window.innerWidth`验证视图尺寸)。 > ⚠️ 注意:Android要求API 19+(KitKat)以上;iOS需使用iOS 6+和Safari 6+。 §§相关问题§§ 1. 如何在Android WebView捕获JavaScript错误? 2. WebView调试时如何模拟不同设备尺寸? 3. 调试WebView时遇到`inspect`按钮灰色不可用怎么办? 4. WebView与原生代码交互时如何调试双向通信? [^1]: Chrome远程调试webview。TL;DR 1、在您的原生 Android 应用中启用 WebView 调试;在 Chrome DevTools 中调试 WebView。 2、通过 chrome://inspect 访问已启用调试的 WebView 列表。 3、调试 WebView 与通过远程调试调试网页相同。 [^2]: Safari/Chrome调试WebView。前言 最近在写《iOS代码调试》系列的博客,估计会有十篇以上的内容,等到都写完了会在Github以一个仓库的形式开源出来,欢迎关注我的Github: LeoMobileDeveloper WebView 大多数App会选择H5去实现某些弱交互但是却需要热更新界面,这时候WebView就派上用场了,那么如何对WebView进行调试呢? Safari 开启开发菜单 Safari -> 偏好设置 勾选“在菜单栏显示开发菜单” 设备的Safari调试 设置 -> Safari -> 高级 - > 开启Web检查器 选择要调试的网页 在App内打开对应的Webview 状态栏点击开发 -> 选择设备 -> 选择网页 然后,就可以通过safari调试这个网页了 对于iOS原生开发来说,用的做多的还是终端,比如你要测试一个WKWebViewJSBridge window.webkit.messageHandlers.bridgeName.postMessage({//data..}) 或者测试一个scheme window.location.herf="xxxxx" 建议iOS开发者学习一些JS的基本知识,这会对调试WebView大有帮助。 Chrome调试 Chrome调试比较适合写H5的同学,因为在这里可以使用类似React/Redux等插件来提高效率。 准备工作: 开启iOS设备中Safari设置的WebContent检查器确保手机被系统信任 安装:ios-webkit-debug-proxy brew install ios-webkit-debug-proxy 安装:remotedebug-ios-webkit-adapter npm install remotedebug-ios-webkit-adapter -g 运行adapter: remotedebug_ios_webkit_adapter --port=9000 接着,在App中打开包含WebView的应用,然后chrome打开如下地址 chrome://inspect/#devices 点击config 添加localhost:9000 然后,就能够看到刚刚应用中的WebView了 点击inspect,就可以用Chrome进行调试了: [^3]: Android使用Chrome调试webview中的H5界面。 2、代码中为WebView开启可调式:把如下代码加到webview所在的activity的onCreate方法中 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true); } [^4]: Chrome调试WebView加载的网页。首先在要调试的项目里加入以下代码,才可开启调试 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true) }</think>### Chrome调试WebView的完整指南 在Chrome中调试WebView内容需要**启用调试模式**并**连接Chrome DevTools**。以下是具体操作步骤: #### 一、Android平台调试(推荐方法) 1. **开启WebView调试模式** 在WebView所在的Activity中添加代码(API 19+): ```java // 在Activity的onCreate()方法中添加 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true); // 关键代码[^3][^4] } ``` 2. **连接设备调试** - 通过USB连接Android设备到电脑 - 打开设备的**USB调试模式**(设置 > 开发者选项) - 在Chrome地址栏输入:`chrome://inspect/#devices` - 在**Devices**区域会显示已连接的设备 - 在**WebView**区域列出所有可调试的WebView实例 3. **开始调试** 点击目标WebView右侧的**inspect**按钮,即可打开Chrome DevTools进行调试(与网页调试体验相同)[^1]。 --- #### 二、iOS平台调试方法 1. **基础准备** - 在iOS设备上:设置 > Safari > 高级 > 开启**Web检查器** - 在Mac的Safari:Safari > 偏好设置 > 高级 > 勾选"在菜单栏显示开发菜单" 2. **方法1:使用Safari调试(原生支持)** - 连接iOS设备到Mac - 在App中打开WebView - 在Mac的Safari菜单:开发 > [设备名称] > 选择WebView页面 - 使用Safari的Web检查器调试[^2] 3. **方法2:使用Chrome调试(需适配器)** ```bash # 安装调试工具 brew install ios-webkit-debug-proxy npm install -g remotedebug-ios-webkit-adapter # 启动适配器 remotedebug_ios_webkit_adapter --port=9000 ``` - 打开Chrome访问:`chrome://inspect/#devices` - 点击**Configure**,添加地址:`localhost:9000` - 选择出现的WebView实例进行调试[^2] --- ### 调试功能说明 在Chrome DevTools中可执行: 1. **元素检查**:实时修改HTML/CSS 2. **控制台调试**:执行JS命令,查看`console.log()`输出 3. **网络分析**:监控所有网络请求 4. **性能分析**:检测内存泄漏和CPU使用 5. **设备模拟**:在**Device Toolbar**(Ctrl+Shift+M)测试响应式布局 > ⚠️ 注意: > - Android要求API 19+(KitKat) > - iOS需使用iOS 6+和Safari 6+ > - 遇到空白页面时,检查设备是否授权USB调试 --- ### 调试技巧 1. **自动刷新**:启用DevTools的**Auto-open DevTools**功能 2. **远程调试**:对于真机问题,使用`adb forward tcp:9222 localabstract:chrome_devtools_remote`建立隧道 3. **元素断点**:右键元素选择**Break on**监听DOM变化 4. **移动端同步**:在DevTools点击**设置** > **Devices**添加网络设备 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值