微信网页 - 调试

第一部分：手机通过USB调试连接PC，PC 的 Chrome 远程调试手机上的微信web

流程就几步，网上都有
1、手机打开开发者模式，开启USB调试。
2、USB用途设置为【仅限充电】 （可以测试，打开调试工具后。只要一切换到别的USB用途，马上丢失连接）。
3、调试微信里打开 debugx5.qq.com，切换到信息tab，勾选【打开TBS内核Inspector调试功能】
顺便说的下打开vConsole的方法：扫码后切到【信息】页，向下找就会看到打开vConsole调试功能勾上即可。

扫码后可以打开配置页面，要什么功能，自己开关吧。

4、电脑chrome浏览器打开chrome://inspect/#devices 我的测试机是 Redmi Note 4X

要调试哪个页面，点下面的 inspect 就可以打开熟悉的调试工具了【这一步需要过墙梯加持，不然就一直loading，最后404】

问题：

1、在微信中打开了页面，这里只显示Remote Target 下面空白一片 【这可能是USB用途设置问题，切换下其它的试试 】
2、要么点 inspect 打开 HTTP/1.1 404 Not Found【悲剧，首次打开要翻墙。不知道是浏览去要去老家验证点啥】
3、（不知道是否个案）我的手机接USB后经常不弹出【USB调试授权】的确定框，然后就是第4步不显示我的手机。这种情况要手动清除授权重新授权一下。而且我的手机勾选了那个一直允许好像没用，非要每次清理再授权才行。
4、最最最要注意的，USB线是否接触正常。我这里就时灵时不灵的，多叉它几次，总会嗨起来的。
之前遇到上面的问题，调试不了。后来按解决方案测试过。100%可行

附上：TBS调试页面 debugtbs.qq.com

• 蒙奇奇上查的要确认的几个地方，仅供参考。
  确认 ADB Interface 安装成功
  
  添加环境变量：ANDROID_SDK_HOME ,值就是你androidSDK所在的目录。（我个人感觉和这个没啥关系）

第二部分：给内网映射外面IP

当然上面只是准备好调试工具，但是web服务器在本机上跑，微信里想直接访问是不可能的。
所以要用到这个 （其他的也试过几个，花生壳以前不错，现在玩不了了，微信里被封。所以目前natapp是可行的）

https://natapp.cn/

基本步骤：

1. 注册个号，填写下身份证，买个免费隧道。
2. 然后【修改隧道配置】其它都可以不管。只要改下你内容服务器的ip和端口就行了。
   
3. 下载客户端 https://natapp.cn/#download
   

~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 摘自官网 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

官方NATAPP1分钟快速新手图文教程

4. 本地解压后配置一下就行了。
   natapp支持两种运行方式
   4.1 config.ini方式 (推荐)
   根据操作系统下载不同的config.ini文件到刚才下载的natapp.exe同级目录
   将authtoken填进去 (其他地方都不填),然后保存
   取得authtoken 在网站后台,我的隧道处,可以看到刚才购买的隧道，获取authtoken
   4.2 cmd -authtoken= 参数方式运行.
   windows ,点击开始->运行->命令行提示符 后进入 natapp.exe的目录
   运行natapp -authtoken=9ab6b9040a624f40

5. 运行成功,都可以得到如下界面:
   
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 摘自官网 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

参考资料

HBuilder X 断点调试 MUI 项目 chrome://inspect 空白404 问题