Mac 端企业微信调试工具开启指南:解决页面兼容性问题必备

前言:

本文主要分享以下两点:

  1. 如何打开 Mac 版企业微信中的调试控制台:由于 Mac 版企微调试工具的开启方式和 Windows 不一样,网上教程零散,所以整理了详细步骤,帮前端同学快速上手~

  2. 我遇到个坑:页面在 Windows 端企微正常,Mac 端打开时字体却闪一下变大,需要用企微调试工具定位问题,附解决方法。

一、背景介绍

随着公司企业微信的全员推广,内部业务页面逐步迁移至企微环境运行,既提升了协作效率,也对页面兼容性提出了更高要求。近期开发的页面在 Windows 端企微中表现正常,但 Mac 端企微打开时出现字体闪烁变大的异常,需通过 企微内置调试工具 定位问题。由于 Mac 版企微调试工具的开启路径与 Windows 端存在差异,特此整理详细操作流程,为同类场景提供参考。

二、打开步骤

  1. 首先 打开 debug模式:

    方法 :同时按下快捷键 command + shift + control + D,会有debug模式开启的提示。

再按一次就是关闭提示:

  1. 然后点击左上方的"调试"菜单,即【调试】------>【浏览器、webView相关】------>【开启webView元素审查】。具体见下面截图:

结束这个步骤之后,再次打开调试查看时,【开启webView元素审查】会变成【关闭webView元素审查】,这样就说明开启成功,即:

  1. 最后 关闭 应用 重新打开 即可。这一步非常重要!如果不重新打开的话,右键时,也不会出来"检查因素",即下面第四步就不会生效。

  2. 右键,出现 "检查因素",打开就是调试控制台了:

三、Mac的企业微信的网页,会默认给body加一个zoom属性

这一隐形的设置可能会成为你项目中bug的原因。就比如我项目中的问题,在 Windows 中,页面的字体没有问题,在 Mac 的企微中打开,页面中的字体会缩放一下,就是由于这个默认属性导致的。我需要对此单独处理一下,就能完美解决问题,解决方案如下图:


另,附一张我的企微版本(版本5.0.2),供参考:

四、总结

这就是 Mac 端企业微信调试工具的完整开启步骤啦~ 按照流程操作后,就能像在浏览器控制台一样,调试企微内的页面样式、接口请求等,轻松定位字体异常、布局错乱、交互失效等问题。

如果你的工作中也需要在企微生态开发页面,本文的调试控制台开启方法能直接参考。若有其他企微调试的小技巧,也欢迎在评论区留言交流,一起避坑提效!

以上,希望对你有帮助!

相关推荐
xbzb2 天前
IP、掩码、网关、DNS 到底谁管什么?网络基础与七种设备一次讲清
网络·网关·mac·ip·dns·掩码
sbjdhjd8 天前
从 VLAN 到 MSTP 的交换网络入门
网络·计算机网络·mac·ip·stp·vlan·交换机
Web3&Basketball10 天前
Meta Muse 816B 实测:两台 Mac 本地跑通
macos·大模型·mac·本地部署·moe·显存优化·meta muse
Keith Guo13 天前
Understanding the Layers of Wireless Chips: RF, Baseband, and MAC in ESP32-S31
mac·rf·baseband
CocoaKier16 天前
如何安装旧版的MacOS系统?
macos·ios·mac
Hello_Pyhx18 天前
WinDirStat 2.9.3:从目录扫描到可复查的占用报表
windows·mac·垃圾清理
OliverQiu19 天前
开源一个 macOS 小工具:集中管理 ChatGPT 的网络启动配置
macos·chatgpt·swiftui·mac·proxy·codex·dmg
bug和崩溃我都要20 天前
QT 开发的专业截图录屏工具 - macOS版 / Windows版
windows·qt·mac·录屏·截屏
Fcy64820 天前
Linux下 数据链路层详解(从以太网到ARP协议)
linux·mac·以太网·数据链路层·arp
我命由我123451 个月前
Mac 操作系统 - 一些使用记录
运维·windows·学习·系统安全·运维开发·mac·学习方法