调手机端网页反复拿自己手机扫码调试，Chrome模拟功能十分钟搞定所有适配

刚做响应式网页那会，调手机端适配，我每次改完一个样式，就把网站地址生成个二维码，拿自己手机扫码，打开看效果，改一行代码扫一次码，一上午扫了几十次，眼睛都花了，还得反复在电脑和手机之间来回看，效率特别低。有次改个导航栏样式，在我自己手机上看是好的，结果在另一个尺寸的手机上就错位了，我当时还奇怪，后来才知道不同手机尺寸不一样，我拿自己一个手机测根本覆盖不了所有情况。 后来朋友告诉我，Chrome自带的开发者工具就能模拟各种手机尺寸，我打开F12，点一下那个手机图标，直接就进入模拟模式，能选iPhone、华为、小米各种主流机型的屏幕尺寸，调样式的时候左边直接看到手机端的效果，改完CSS立刻就能看到，不用再拿手机反复扫码。我当时打开之后直接傻了，原来有这么方便的功能，我之前浪费了那么多时间反复扫码。 在模拟模式里，还能看手机端的网络请求、加载速度，模拟弱网环境，看手机端网站打开要多久，和真实手机上的体验几乎一模一样。我之前拿自己手机测，因为是家里WiFi，加载快，根本不知道弱网下用户打开要等多久，在Chrome模拟里直接限速，就能看到真实用户的等待时间。 从那之后我调任何响应式页面，全在Chrome模拟模式里调，手机尺寸、横竖屏、分辨率随便切，改完立刻看效果，一上午能调十几个页面，比之前反复扫码快十倍。真的新手做前端，别再像我当初一样，改一行扫一次码，打开Chrome的手机模拟功能，十分钟就能搞定所有适配调试，省下来的时间多写两篇文章不好吗。 现在我调移动端页面，基本不用拿自己手机看，Chrome模拟里覆盖完所有主流尺寸，最后拿手机过一遍就行，效率高太多。