桌面端的前端开发调试非常简单,因为有 Firebug、Chrome DevTools 等工具,直接右击打开就可以看到元素的 CSS,并且可以查看各种资源、修改运行调错 JS 等。而移动端浏览器显然没法带有这些功能,于是可以用数据线连接设备,然后用电脑上的 Chrome DevTools 来调试移动设备上的页面。
首先,你的 Chrome 版本必须高于 32。其次你的测试机 Android 系统高于 4.0,测试机安装 Chrome for Android 才可以使用 Chrome 远程调试这项功能。
先用数据线将 Android 测试机连接到电脑上。需要打开测试机上面“开发者选项”中的 “USB 调试”功能。在 Android 4.2+ 系统上“开发者选项”默认是隐藏的,所以你需要先开启“开发者选项”(开启方法:设置 -》 关于本机 -》 猛击版本号(Build number)多次 即可开启开发者选项)。之后如果没有开启,或者没有反应,可能是你的版本问题或者点击错了,你可以尝试把 关于本机 上所有的选项都猛击几次,就会开启。
然后在桌面版 Chrome 打开 chrome://inspect 即可查找你的设备,在设备上的 Chrome 打开网页,即可看到,然后就可以在桌面版 Chrome DevTools 调试移动设备上的页面了。
此外,还可以直接在桌面版 Chrome 输入 URL 在移动设备上打开;在本地用 Nodejs 或者其他功能开启一个本地服务器,用端口转接让移动设备直接访问本机 localhost 上的页面,再配合 LiveReload、BrowserSync 之类的工具,自动刷新,测试简直爽歪歪。
出现404的报错,电脑端CHROME版本要低于手机的版本,点INSPECT FALLBACK