很多时候，咱们在进行挪动端开发时，都是先在 PC 端应用手机模拟器进行调试，没有问题后，咱们才会在手机端的浏览器进行测试，这个时候，如果没有呈现问题，大快人心。然而一旦呈现问题，咱们就很难解决，因为不足可视化的界面。不似在 PC 端，咱们能直观的去扭转款式，或者是进行断点调试。这里次要介绍三种办法：1、Chrome DevTools（谷歌浏览器）的模拟手机调试 2、IOS Safari 真机调试 3、Chrome DevTools 近程调试 Android1、Chrome DevTools 模拟手机调试这种调试形式不仅能用于模拟手机调试还是次要的 PC 端页面调试的形式，这里次要说用于手机调试。a. 谷歌浏览器的开发者工具，能够参照下图右键抉择”查看“或者应用快捷键 F12，关上开发者工具。
b. 关上后看到相似如下界面的开发者调试界面，Elements 能够查看文档元素，Console 能够在线调试 js 和查看输入后果，Sources 能够调试 JS 和查看依赖资源，Network 查看所有的网络申请等等。
c. 如果没有须要模仿的机型怎么办？能够减少，点开机型设置面板，抉择 edit，而后能够在右方批改展现机型，如下：
d. 还能够模仿不同网络状况。
2、IOS Safari 真机调试 a. 应用数据线将 iPhone 与 Mac 相连 b.iPhone 开启 Web 查看器（设置 -> Safari -> 高级 -> 开启 Web 查看器）
c.iPhone 应用 Safari 浏览器关上要调试的页面（以兰亭单品页为例）d.Mac 关上 Safari 浏览器调试（菜单栏 —> 开发 -> iPhone 设施名 -> 抉择调试页面）如果你的菜单栏没有“开发”选项，能够到左上角 Safari -> 偏好设置 -> 高级 -> 在菜单栏中显示“开发”菜单。
e. 在弹出的 Safari Developer Tools 中调试。
通过如上步骤就可在 Mac 端调试 iPhone 上 Safari 运行的页面了。3、Chrome DevTools 近程调试 Androida. 在 Chrome 浏览器地址栏中输出 chrome://inspect/#devices 并回车，就能够关上 Inspect 调试界面，此时咱们勾选 Discover USB devices 选项便能够看到设施列表。b. 而后关上手机中开发者选项并关上 USB 调试开关（具体方法自行百度，不同手机有肯定区别），应用数据线将手机连贯到电脑上，咱们就能够在设施列表中看到本人的设施。c. 这时，关上手机上的 Chrome 浏览器，轻易关上一个网址（以兰亭单品页为例），设施列表中你的设施下便会呈现你关上的页面。d. 此时咱们点击 inspect 选项。
e. 接下来你便能够和调试 PC 界面一样通过 Chrome 进行你所须要的调试，你在左侧屏幕上做的所有操作和你的手机上的操作会始终保持同步，如果你嫌右边这块多余，也能够敞开 Toggle Screencast 只保留控制台自身。