移动端前端开发调试

tech2023-02-08  128

Android 真机调试

桌面端的前端开发调试非常简单,因为有 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

最新回复(0)