扫码快捷翻开调试形式
debugxweb.qq.com/?inspector=…
一 weinre真机调试Dom树的痛点：
笔者最早接触的真机调试东西是weinre，运用weinre在真机上调试H5页面，有一个杰出的缺点，便是由于无线网络数据传输不如USB数据传输快，页面dom在weinre的Elements面板不是显现缓慢，便是显现不出来。如下图所示，单页运用页面dom树,压根就显现不出来。不知咱们平时用不用weinre的Elements面板，用得爽不爽？除此之外，weinre的Elements面板，也没有挑选dom的操作菜单，没有PC端翻开的开发调试东西那么好用。要是调试真机上的H5页面能和在PC机上调试网页一样就太方便了，有没有这样的技术，答案是必定的。在Android上是Android +Chrome组合，在IOS上是IOS+Safari组合。借助remotedebug-ios-webkit-adapter这个东西，甚至能够在Windows渠道上调试IOS+Safari+H5页面，笔者运用的是Android手机，所以偏重介绍在Android手机上，怎么调试H5网页，包含微信环境中的H5页面。
二 Windows+ Chrome怎么真机调试 Android上的H5/微信页面？
工作原理是在你的移动设备上创立一个监听 TCP 端口，该端口映射到你的开发机器上的一个指定 TCP 端口，默许是8080。这些端口之间的流量经过 USB 来传输。
2.1调试准备
2.2 在PC端谷歌浏览器地址栏输入chrome://inspect/#devices 回车，勾选Discover USB devices选项
Chrome会自动检测手机设备，以及在手机设备上翻开的H5页面，列出能够调试的H5页面
2.3 让手机能够被PC端的Chrome浏览器检测到
许多人都卡在了这一步，前功尽弃。正确的姿势是：
2.3.1 翻开手机上的USB调试开关
笔者运用的手机USB调试开关设置方法是：翻开 设置==>开发人员选项==>USB调试，翻开即可。开发人员选项在Android4.2以下，能够直接看到。在Android 4.2及以上版别中默许是躲藏的。翻开开发人员选项的办法是：翻开 设置==>关于手机，连续点击版别号7次即可。
2.3.2 运用USB线衔接手机和电脑
这里有个躲藏的大坑。假如你运用的是仅有充电而没有数据传输功用的USB线，衔接电源的话，手机通知栏没有剩余的菜单选项。如下面所示的这种USB 三合一 充电线。那么你的手机是无法被PC端的Chrome浏览器检测到。数据线和充电线是有差异的：充电线用到的是电源的VCC和GND这两跟线，而数据线一起用到VCC，GND，+D,-D这四根线。所以数据线能够当电源线，而电源线不能用作数据线。
手机原配的USB充电线，都有数据传输功用。衔接电脑之后，在手机的通知栏，会弹出USB衔接方法的选项，默许USB衔接方法是仅充电。要进行真机调试的话，除了不能挑选仅充电和反向充电选项之外，另外几种形式都能够选。
首次调试，手机会弹出是否答应电脑调试手机的问询对话框，勾选答应运用这台核算机进行调试，在手机上做完这两步装备，PC端的Chrome浏览器才能检测到需求调试的设备。
注意：每次从头衔接时，都得从头挑选USB衔接形式为非充电形式。
一切正常的情况下，你将看到检测出的移动设备：
2.4在手机的Chrome浏览器上，翻开要调试的h5/webview页面
点击某个想要调试的页面下方的inspect之后，就能在PC端调试真机上的页面dom树了。如下图所示：
你会发现，有时候在PC端无法滑动要调试的页面，假如要调试页面底部的款式，该怎么办，其实很简单，便是在真机上把页面滑动到底部，PC端的调试页面也会跟着真机一块滑动到页面底部。然后在PC端调试页面修正页面底部元素款式，在真机会看到，修正的款式会同步生效。还有要是有搜索框，要在真机上操作，在PC端操作是无效的。
假如你想在 微信/企业微信 中调试H5页面，需求分别用微信/企业微信扫描下方的二维码，现在腾讯官方供给的微信页面调试东西debugxweb.qq.com/?inspector=…只支撑Android手机。
这个设置只需设置一次。然后在微信/企业微信中翻开你要调试的页面，就能调试微信/企业环境的H5页面款式了。
三 Windows+Chrome怎么真机调试 IOS上的 Safari H5页面？
3.1装置长途调试东西 remotedebug-ios-webkit-adapter
3.1.1 remotedebug-ios-webkit-adapter简介
RemoteDebug iOS WebKit Adapter供给了一个协议适配器，以处理Chrome调试协议和Webkit长途调试协议之间的API差异。此适配器可使根据Chrome调试协议（CDP）的东西在iOS上调试Safari / Webkit。该项目是现有ios-webkit-debug-proxy项目的连续。iOS版别检测依赖libimobiledevice的ideviceinfo。它能够使Windows、Mac上的VS Code、’Chrome DevTools、Firefox debugger.html之类的东西能够对iOS上的Safari和WebViews页面进行调试。DOM / CSS修改，控制台，网络东西，脚本调试功用现已完成，接触仿真还没有彻底完成。
3.1.2 装置scoop
scoop是一个 Windows 指令行装置东西，常用于装置没有GUI界面的开发东西。装置ios-webkit-debug-proxy需求用这个东西,翻开powershell,履行下面的指令
#设置履行安全策略，答应本地脚本的履行，履行策略挑选全是,输入A
Set-ExecutionPolicy RemoteSigned -scope CurrentUser
#装置 Scoop，该指令将 https://get.scoop.sh 加载到内存，并没有把该脚本下载到本地。
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
假如报这样的错:
需求暂时关闭电脑上的杀毒软件
3.1.3 装置 remotedebug-ios-webkit-adapter
# ios-webkit-debug-proxy收录在extras库房，scoop默许的库房只有main，需求先增加extras软件库房到scoop中
scoop bucket add extras
# remotedebug-ios-webkit-adapter依赖ios-webkit-debug-proxy
scoop install ios-webkit-debug-proxy
再大局装置 remotedebug-ios-webkit-adapter，装置成功后，你将能在指令行中运用remotedebug_ios_webkit_adapter指令。
# 检测手机的版别信息
cnpm install -g vs-libimobile
cnpm install remotedebug-ios-webkit-adapter -g
3.2 装置 iTunes
下载 iTunes，这个是为了在 windows上衔接 iPhone 时可正确辨认 iPhone 设备，不然无法辨认。装置完 iTunes 后，首次衔接 iPhone，手机会弹出是否信赖该电脑的弹窗，挑选信赖即可。这个弹窗只会弹一次，之后每次就不用翻开iTunes了。
3.3 衔接调试
3.3.1 敞开Web查看器
进入 iPhone 中的设置 ==> Safari 浏览器 ==> 高级 ==> Web 查看器，敞开该选项。
3.3.2 用iPhone手机衔接电脑
翻开 iTunes 并衔接 iPhone，在 iPhone 弹框中挑选信赖该电脑。
3.3.3 发动适配器
翻开指令行，履行以下指令，发动适配器：
remotedebug_ios_webkit_adapter --port=9000
3.3.4 在手机上翻开调试页面
在 iPhone 顶用Safari 浏览器翻开待调试页面
3.3.5进入浏览器调试页
在PC端Chrome 浏览器中输入chrome://inspect/#devices进入调试页，在 Discover network targets 选项增加 localhost:9000 装备。
3.3.6调试页面
改写页面，这时页面中会出现 ‘Remote Target’ 列表，该列表展现了 iPhoneSafari中翻开的能够调试的页面列表，点击某个列表下方的inspect按钮，就会进入到相应页面的调试窗口。
四微信小程序怎么调试？
Charles的证书是被微信小程序信赖的，所以能够用Charles抓取微信小程序网络恳求包
4.1下载装置Charles
运用 Charles 抓包东西，用户能够轻松地捕获和剖析网络流量，包含 HTTP、HTTPS、FTP、SMTP 等协议的网络通信。Charles 还能够将捕获的数据保存到本地文件中，或许将其发送到其他运用程序中进跋涉一步剖析。
4.2在核算机上装置Charles证书
4.3勾选https转发设置，并敞开PC端一切恳求走Charles署理
4.4用桌面微信翻开要调试的微信小程序，用Charles就能抓取到微信小程序的数据包
五在本地怎么调试线上功用？
先介绍一个根据 Node 完成的跨渠道 Web 调试署理东西whistle，涵盖了web恳求的方方面面，咱们能够经过它调试移动端，设置署理和host, 抓包，Mock 数据、修正恳求推迟时间、修正静态文件，推迟恳求呼应、限制恳求呼应速度等，且支撑经过Node模块进行扩展。借助whistle的署理功用，能够将拜访生产环境域名下的恳求映射到本地服务器，从而能够在本地调试生产环境的功用。咱们以IOS系统为例，讲讲怎么在PC端本地调试调试线上移动端页面。
5.1 手机和电脑衔接同一个网络
运用运用的是有线网络，电脑经过无线网卡同享有线网络，手机衔接电脑同享的WiFi，假如是无线网络，让手机和电脑衔接同一个无线网络。。
5.2 大局装置whistle
大局装置whistle并发动whistle，获取电脑上无线网络whistle署理的IP地址和端口
cnpm install -g whistle
5.3 下载证书
在手机衔接的WiFi网络上（发现WiFi假如是手机同享出来的WiFi，则设置署理不起作用），设置电脑上无线网络的whistle署理，然后在Safari中输入rootca.pro, 下载rootca证书，进行装置 (Safari真坑呀，不支撑扫码下载证书)
5.4 设置证书信赖
设置==>通用==>关于本机==>证书信赖设置==>找到whistle证书翻开信赖(一部设备能够装置多个whistle证书)
5.5设置转发规矩
翻开 http://127.0.0.1:8899/#rules 创立转发规矩，敞开调试weinre页面调试和站点日志输出功用
#修正某个恳求的回来数据
https://test.xxx.com/path/api/news/detail.do file://{newDetail.json}
# 将公网域名转发到本地端口 敞开weinre页面调试面板 敞开日志输出功用
test.xxx.com 127.0.0.1:50000 weinre://weinre页面调试面板名称 log://日志名称
5.6 抓包调试
翻开手机上的h5/webview/微信页面，在http://127.0.0.1:8899/#network面板 就能够看到抓包数据
本文正在参与「金石方案」
