很多时候，h5可以直接在浏览器上直接进行开发、调试，但是真机上的表现并一定都会按你开发时的预想走。所以既能让页面在真机上运行，又能在浏览器上进行调试（log、断点等），那可真是一件极舒服的事。
要做到这样，并不难，只要跟着我的步骤走。
真机方面
- 确保你的机子处于开发者模式，并允许USB调试。关于如何打开开发者模式，每个机型都不一样，所以具体型号查百度就可以了。
- 用USB将你的机子和电脑连在一起，这时会弹出USB进行充电、文件传输等几个选项。请务必选择文件传输。
浏览器方面
- 只能选择chrome
- 输入网址：
chrome://inspect/#devices - 稍等片刻，就会显示出你此时在真机上打开的H5页面网址。点击inspect，就能打开调试页面了。你在手机上做的任何行为都会在chrome上同步，非常nice。
页面空白
按照了上面的步骤执行，但是出现的页面却是空白的。有几个解决方案可尝试：
- 翻墙
因为chrome inspect需要加载 https://chrome-devtools-frontend.appspot.com 上的资源，所以需要翻墙。 - 更新chrome版本
webview内置的内核版本若是高于PC端的chrome也会导致空白 - 清缓存
chrome://appcache-internals/#清除这里的缓存
