做网站开发的兄弟，是不是每次打开浏览器都头疼？
客户说：“我用的手机看怎么乱了？”
你心里骂娘，自己电脑上明明好好的。
这时候，你才想起那个被忽略的问题：网站开发都用什么浏览器？
别跟我扯什么“主流浏览器都支持”，那是忽悠外行的。
我是干了五年前端的老李，今天不整虚的，直接掏心窝子说说我手里的家伙事儿。
先说结论：Chrome是亲爹，没得跑。
但光靠Chrome，你会死得很惨。
为什么？因为Chrome太“完美”了，它把很多兼容性bug给藏起来了。
你写的代码在Chrome里跑得飞起，一到IE，或者某些老旧的Android Webview里，直接崩给你看。
所以，我的工作台通常是这样的：
左边开着Chrome，右边挂着Firefox，底下还备着Edge。
Chrome的DevTools（开发者工具）确实是业界标杆。
Elements面板看DOM结构，Network面板抓包分析加载速度，Console看报错信息。
这套组合拳打下来，90%的问题都能定位。
但是，Chrome有个毛病，就是它对CSS的某些边缘情况处理得太宽容。
比如那个著名的Flex布局塌陷问题，Chrome有时候能自动修复，让你误以为代码没问题。
这时候，Firefox的Inspector就派上用场了。
Firefox的开发者工具界面虽然丑了点，但它的响应式设计模式做得比Chrome好。
它能模拟各种真实的手机屏幕比例，而不是简单的缩放。
我有一次排查一个移动端适配问题，在Chrome上怎么看都正常，换到Firefox的真机模拟模式下，发现按钮重叠了。
那一刻，我真的想给Chrome的开发团队寄刀片。
当然，现在Edge也强大了。
毕竟基于Chromium内核，所以Chrome能用的插件，Edge基本都能用。
但Edge有个隐藏福利：它的IE模式。
虽然我们都讨厌IE，但很多政府网站、银行系统还在用。
如果你做的是To B的项目，或者要维护老系统，Edge的IE模式就是你的救命稻草。
不用装虚拟机，不用开旧电脑，直接在内核里切换，方便得感人。
这里插一句，很多新人问我，要不要装Safari？
如果你是做iOS端的项目，或者你的用户群体里苹果用户占比很高，那必须装。
Mac上的Safari是必须的。
Windows用户想测Safari？别折腾了，除非你有Mac电脑，否则模拟器测出来的结果跟真机差距太大，容易误导判断。
说到工具，除了浏览器本身，插件也很重要。
ColorZilla取色，Wappalyzer看技术栈，这些是标配。
但我强烈建议你装一个“User-Agent Switcher”。
为什么要换UA？
因为很多网站会根据UA显示不同的内容。
比如你用手机访问，可能看到的是简化版页面；用电脑访问，看到的是完整版。
开发的时候，如果你不切换UA，可能永远看不到那个“简化版”的bug。
我见过太多同事，因为没切换UA，导致上线后手机端显示错乱，被产品经理骂得狗血淋头。
还有，别忽视浏览器的缓存。
有时候代码改了，刷新了还是旧样式。
这时候别急着改代码，先试试强制刷新（Ctrl+F5），或者在开发者工具里勾选“Disable cache”。
这个细节，能省你半小时的排查时间。
最后，聊聊性能监控。
Chrome的Lighthouse插件很好用，一键生成性能报告。
但别全信它。
Lighthouse跑分高，不代表用户体验就好。
有时候，它测的是加载速度，但忽略了交互的流畅度。
这时候，你需要结合Performance面板，手动录制一段用户操作视频，看看FPS（帧率）掉没掉。
如果FPS低于50，用户就会感觉到卡顿。
这就是为什么我说，网站开发都用什么浏览器，其实是在问：你用什么工具去还原真实用户的体验？
Chrome负责效率，Firefox负责严谨，Edge负责兼容，Safari负责苹果生态。
少一个，你的网站都可能“瘸腿”。
别偷懒，别只依赖一个浏览器。
多测测，多踩坑，多总结。
这才是成长的捷径。
希望这篇干货，能帮你少加几次班。
毕竟，头发只有一根，得省着点用。
