chrome调试h5移动端(含android,ios)

素颜马尾好姑娘i 2022-12-20 02:55 295阅读 0赞

# chrome调试h5移动端 #

## chrome调试(window+android) ##

需要条件：1.安卓开发人员需要对你页面调试得webview添加setWebContentsDebuggingEnabled得静态方法。

2.windows电脑可以爬~梯子或者安装chrome-inspect离线开发者工具包

梯~子工具：[https://cp.greennode.info][https_cp.greennode.info]

chrome-inspect离线开发者工具包：[http://www.cnblogs.com/slmk/p/7591126.html][http_www.cnblogs.com_slmk_p_7591126.html]

3.手机连接电脑，开发者选项，打开usb调试，电脑正常安装手机驱动。

做好提前准备后，在手机chrome中访问网页或者打开开启setWebContentsDebuggingEnabledchrome方法得webview，chrome浏览器访问chrome://inspect/\#devices

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70][]

点击inspect，进入chrome调试界面出现空白(需要 ***梯~子***)

## chrome调试（window+iphone） ##

原文：[https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter][https_github.com_RemoteDebug_remotedebug-ios-webkit-adapter]

## ***安装依赖项*** ##

**1、 [.NET Framework 4.5][] 及以上版本**

**2、powershell 5.1及以上版本（ 注：可通过输入  *$PSVersionTable* 查看当前 *powershell* 版本 ）**

**3、可正常访问  *https://raw.githubusercontent.com/lukesampson/scoop/master/bin/install.ps1* 此网站（需要~梯子）**

**4、安装  *iTunes***

**5、安装 * ios-webkit-debug-proxy* ,安装前确保有  **

1）powershell5.1+，

2）.net Framework4.5+、

3）可访问 [https://raw.githubusercontent.com/lukesampson/scoop/master/bin/install.ps1][https_raw.githubusercontent.com_lukesampson_scoop_master_bin_install.ps1]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70 1][]

根据文档，在windows下，首先需要安装scoop，而安装scoop需要电脑里有powershell。win10一般自带。

**5.1 安装scoop（一个安装工具）**

set-executionpolicy unrestricted -s cu #修改执行策略，选择是
    iex (new-object net.webclient).downloadstring('https://get.scoop.sh')  #安装scoop

**5.2 通过scoop安装[ios\_webkit\_debug\_proxy][ios_webkit_debug_proxy]**

scoop bucket add extras // 安装 bucket
    scoop install ios-webkit-debug-proxy // 安装 ios-webkit-debug-proxy

**报错如下**

Couldn't find manifest for 'ios-webkit-debug-proxy'

注意：会有***Couldn't find manifest for 'ios-webkit-debug-proxy'***错误，主要原因还是***scoop bucket add extras***安装不太顺利

卸载 ***bucket* **后重新安装

PS C:\Windows\system32> scoop bucket rm extras
    PS C:\Windows\system32> scoop bucket add extras
    Checking repo... ok
    The extras bucket was added successfully.

再次执行：**scoop install ios-webkit-debug-proxy**

建议是否安装成功：**scoop list**

PS C:\Windows\system32> scoop install ios-webkit-debug-proxy
    Installing 'ios-webkit-debug-proxy' (1.8.8) [64bit]
    ios-webkit-debug-proxy-1.8.8-win64-bin.zip (3.5 MB) [=========================================================] 100%
    Checking hash of ios-webkit-debug-proxy-1.8.8-win64-bin.zip ... ok.
    Extracting ios-webkit-debug-proxy-1.8.8-win64-bin.zip ... done.
    Linking ~\scoop\apps\ios-webkit-debug-proxy\current => ~\scoop\apps\ios-webkit-debug-proxy\1.8.8
    Creating shim for 'ios_webkit_debug_proxy'.
    'ios-webkit-debug-proxy' (1.8.8) was installed successfully!
    PS C:\Windows\system32> scoop list
    Installed apps:
    
      ios-webkit-debug-proxy 1.8.8 [extras]

**6、连接测试~~连接方式(原理一样，启动代理端口)**

**\#安装最新版本的 *remotedebug-ios-webkit-adapter***

npm install -g vs-libimobile
    npm install remotedebug-ios-webkit-adapter -g

**\#在Safari中启用远程调试**  
为了显示您的iOS设备，您需要启用启用开发者模式进行调试。

*Iphone => 设置 => Safari 浏览器 => 高级 => web检查器 => 启用*

**\#手机连接电脑的itunes 或者 爱思助手（个人使用的是后者）**

**\#打开命令行工具 ，运行以下命令，在PC端本地9000端口开启对苹果手机webview的监听（个人理解，不对请指正）**

remotedebug_ios_webkit_adapter --port=9000

**\#打开chrome调试工具地址** ：  chrome://inspect/\#devices  ，点击Configure...  （打开网址的首页就能看到，我不截图了），在打开的弹窗中添加如下地址：

localhost:9000

然后点击Done，至此，你可以愉快的调试IOS端的webview了(亲测有效)。

**真实效果如下图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70 2][]

## iphone+mac调试 ##

需要条件：1.调试app内嵌webview必须是ios铜须使用xcode打的包，线上得不行

第一步：打开***苹果手机 设置 > Safari浏览器 > 高级 ，打开javascript和Web检查器***

安卓端chromd调试h5 [https://blog.csdn.net/weixin\_43307658/article/details/89341417][https_blog.csdn.net_weixin_43307658_article_details_89341417]

移动端调试工具 [https://blog.csdn.net/hahahhahahahha123456/article/details/109527902][https_blog.csdn.net_hahahhahahahha123456_article_details_109527902]

通过Debugx5在电脑端调试微信页面 [https://blog.csdn.net/fengda2870/article/details/88831210][https_blog.csdn.net_fengda2870_article_details_88831210]

[https_cp.greennode.info]: https://cp.greennode.info/users/clientarea.php
[http_www.cnblogs.com_slmk_p_7591126.html]: http://www.cnblogs.com/slmk/p/7591126.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70]: /images/20221120/00b98de1fe3640be9d519cc6772a9d25.png
[https_github.com_RemoteDebug_remotedebug-ios-webkit-adapter]: https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter
[.NET Framework 4.5]: https://www.microsoft.com/net/download
[https_raw.githubusercontent.com_lukesampson_scoop_master_bin_install.ps1]: http://xn--urlhttps-nj0pn76hun8e3sza//raw.githubusercontent.com/lukesampson/scoop/master/bin/install.ps1
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201109170245187.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2,size_16,color_FFFFFF,t_70
[ios_webkit_debug_proxy]: https://github.com/google/ios-webkit-debug-proxy
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201109175859430.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_weixin_43307658_article_details_89341417]: https://blog.csdn.net/weixin_43307658/article/details/89341417
[https_blog.csdn.net_hahahhahahahha123456_article_details_109527902]: https://blog.csdn.net/hahahhahahahha123456/article/details/109527902
[https_blog.csdn.net_fengda2870_article_details_88831210]: https://blog.csdn.net/fengda2870/article/details/88831210