电脑预览没问题，手机打开样式乱了
不知道你有没有遇到过这种“灵异事件”：
就在前两天，我用 WeDown 排版工具写了一篇公众号文章，在电脑端预览时，一切正常。然而，当我发布之后，在手机微信里打开就傻眼了——引用块中的字体被放大了 1 倍多，原本优雅的排版瞬间变成了“老年人大字报”。
我反复检查了 CSS 主题源码，blockquote 标签明明写的是 font-size: inherit;，10 年前端都看不出任何问题。
凭着敏锐的经验判断，问题大概率出在 微信 X5/XWeb 内核 的兼容性上。
最后，通过真机调试，果然是 font-size: inherit; 导致的问题，将其改为具体的 14px 后，完美解决。
废话不多说，下面就把微信网页真机调试方法分享给大家。
第一步：开启 Android USB 调试模式
- PC 端：安装 Chrome 浏览器。
- 手机端：进入“设置 -> 关于手机”，连续点击 7 次“版本号”开启 开发者选项。
- 启用 USB 调试：在“开发者选项”中找到“USB 调试”并打开。
- 物理连接：用数据线将手机连接电脑，模式选择“传输文件”。
第二步：开启微信的“隐藏开关”
这一步是关键。默认情况下，微信是不允许外部调试其内部页面的。我们需要通过一个链接来开启 XWeb 内核的调试模式。
- 在手机微信的聊天框输入并发送：
http://debugxweb.qq.com/?inspector=true - 点击这个链接，会有一个弹窗提示，点击“确定”即可。
- 不用管页面报错，直接关掉就行。
第三步：在电脑上调试微信网页
- 手机上打开你那个出问题的网页。
- 电脑端打开 Chrome，在地址栏输入：
chrome://inspect/#devices - 稍等片刻，在 Remote Target 下方，你会看到你的手机型号以及当前微信打开的所有页面标题。
- 找到你要调试的页面，点击下方的 inspect（如果第一次打不开，可以尝试 inspect fallback）。
这时，熟悉的 Chrome DevTools 窗口就会弹出！你可以像平时一样，修改 CSS 样式、查看 Console 报错、监控 Network 请求。
进阶玩法：Android 11+ 无线调试
如果你嫌数据线碍事，Android 11 及以上系统还支持无线调试：
- 手机和电脑保持在同一个 Wi-Fi 下。
- 在开发者选项中开启“无线调试”。
- 使用
adb pair命令配对，再用adb connect连接手机 IP。 - 连接成功后，依然可以通过
chrome://inspect/#devices进行调试。
避坑指南：为什么我的 Inspect 窗口是白的？
很多同学在点击 inspect 后，弹出的窗口是一片空白。
这是因为 DevTools 的远程资源 访问受限了。需要上点手段，或者搜索“Chrome Inspect 离线包”，安装对应的浏览器扩展。
最后吐槽一下
都 2062 年了，居然还会被 Web 兼容性问题困扰，某些大厂是不是该好好反思一下了？