关键词：
这篇文章所讲到的方法已经过时，请移步《移动端真机调试终极利器-BrowserSync》，欢迎分享更多工具。
手机端页面，大多运行在webkit内核的浏览器上，但还是会因平台、厂商的不同而有种种兼容性问题。下面就介绍一下在iOS和Android两个平台上如何在真机上对页面进行调试。这里要说明的是，iOS平台只能用自带的Safari浏览器来调试，而Android平台也只能用google Chrome浏览器来调试。当然，我目前只发现这么两种手段，如果你还有其他方法可调试更多的浏览器，希望你能留言告诉我。
一、iOS + Safari
1、打开手机web检查器。
通过【设置】>【Safari】>【高级】>【Web检查器】打开。见下图（点击查看大图），并且你会看到该选项下面对电脑操作的相应描述，照做就好。
2.链接电脑（Mac）
2.1 先在手机Safari中打开你想调试的网页，并用数据线连接到电脑（我这里是Mac）
2.2 再在电脑上打开Safari点击【Develop】菜单，就会看到如下图所示（点击查看大图）：
3.3 点击2.2中的网站名就会在电脑上打开Safari的控制台，如下图（点击查看大图）：
3.调试网页
如上3.3图所示，此时你可以查看手机网页的DOM结构，并且和电脑端网页调试无异，当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来，如下图（点击查看大图）：
二、Android + Chrome
1.设置手机
1.1【设置】>【关于手机】>【版本号（Build number）】，对版本号这一项连点7下（这是官方文档里的说法）就会提示“你已成为开发者”。
1.2 再返回【设置】>【开发者选项】>【USB调试】打开手机USB调试。
2.设置电脑（Mac）
这块比较麻烦，因为要装一下Android的SDK。
2.1 下载Android SDK，并解压，我把整个adt目录放在了 /Users/David/adt/ 这里。
2.2 设置环境变量 。打开终端在David路径下（形如 DaviddeMacBook-Pro:~ David$）输入 open .bash_profile，如果文件存在则会打开，如果不存在则再输入touch .bash_profile创建并打开这个文件。在文件里输入export PATH=$PATH:/Users/David/adt/sdk/platform-tools:/Users/David/adt/sdk/tools ，关闭保存。最后在终端里输入 source .bash_profile 来更新环境变量使其生效。终端里输入adb 出现命令帮助信息就是成功了。
2.3 在终端里输入 adb forward tcp:9222 localabstract:chrome_devtools_remote 。
3.链接电脑
3.1 在手机上的Chrome里打开想要调试的网页，用数据线连接手机和电脑（我的是Mac。唉～我只是强调平台的不同，不要误会）。
3.2 打开电脑上的Chrome，在地址栏里输入 about:inspect 选中 【Discover USB Devices】前面的复选框。出现下图画面（点击查看大图）：
4.调试网页
4.1 你可以点击图3.2中检测到的设备上正在运行的网站下面那个【inspect】，或者在浏览器中输入 localhost:9222 打开手机正在浏览的网页列表，如下图：
4.2 点击上图中的网站缩略图，就会跳转到Google的一个代理链接（链接可能被墙……，挂代理）就会打开如下图所示的控制台（点击查看大图）：
4.3 这就和电脑上网页调试没什么差别了，鼠标经过DOM节点，手机上的布局同样也会高亮起来：
如何在真实移动设备上检查代码（移动调试）
】如何在真实移动设备上检查代码（移动调试）【英文标题】：Howtoinspectcodeonrealmobile(Mobiledebugging)【发布时间】：2021-01-2313:51:55【问题描述】：我想在移动设备上检查我的代码，但移动设备上没有检查代码的选项。【问题讨论】... 查看详情
html网页如何完美的适配到移动设备上
...实例时放大缩小一下浏览器窗口大小就知道自适应的效果如何了。本回答被提问者采纳 参考技术B完美适配是要一步一步调试的。首先，你的宽度不能写死。其次，使用栅 查看详情
如何通过网页获取移动设备上的当前纬度/经度？
】如何通过网页获取移动设备上的当前纬度/经度？【英文标题】：HowtogetcurrentLat/LngonMobileDeviceviaWebpage?【发布时间】：2012-01-0505:22:30【问题描述】：我需要在通过网页地图（而不是通过移动原生应用）找到当前移动位置。据我了... 查看详情
如何在屏幕锁定或最小化浏览器期间禁用移动设备上的网页音频？
】如何在屏幕锁定或最小化浏览器期间禁用移动设备上的网页音频？【英文标题】：Howtodisablewebpageaudioonmobiledivicesduringscreenlockingorminimizingbrowser?【发布时间】：2020-08-1209:37:27【问题描述】：如果您的网页上有声音播放，您可以锁... 查看详情
Javascript：在移动设备上调试
】Javascript：在移动设备上调试【英文标题】：Javascript:debuggingonmobile【发布时间】：2015-07-1122:39:36【问题描述】：我使用requirejs、angularjs和ui-grid创建了一个简单的应用程序。它所做的只是从excel文件中获取一些数据并将其显示在... 查看详情
在 Web 和移动设备上调试对比 Css 样式
】在Web和移动设备上调试对比Css样式【英文标题】：DebuggingContrastingCssStylingonWebandMobile[duplicate]【发布时间】：2018-03-0521:23:12【问题描述】：所以我有thiswebsite:当我点击PickupDate&Time时，会出现一个引导日期选择器。这在Windows/Ma... 查看详情
移动设备上的网页中断（哇，快！）
】移动设备上的网页中断（哇，快！）【英文标题】：Webpagebreaksonmobiledevices(aw,snap!)【发布时间】：2019-06-0609:38:15【问题描述】：https://konfiguratorszkolen.pl/网页有问题-它在台式机上运行良好，但在移动设备上中断。在移动设备上... 查看详情
谷歌地图应用无法在移动设备上打开网页链接
】谷歌地图应用无法在移动设备上打开网页链接【英文标题】：GoogleMapappfailstoopenweblinkonmobiledevices【发布时间】：2016-03-1512:08:35【问题描述】：我在网页中有这个链接：https://www.google.com/maps?saddr=Current+Location&daddr=-27.360198,153.01... 查看详情
如何使页面仅在移动设备上响应[关闭]
】如何使页面仅在移动设备上响应[关闭]【英文标题】：Howtomakepageresponsiveonlyonmobiledevice[closed]【发布时间】：2018-11-2421:33:16【问题描述】：我一直在研究一个网页，最后让它响应，但我怎样才能让它只对计算机响应，最小计算机... 查看详情
如何以编程方式在移动设备上调用本机日期选择器
】如何以编程方式在移动设备上调用本机日期选择器【英文标题】：Howtoprogrammaticallyinvokethenativedatepickeronamobiledevice【发布时间】：2014-07-2217:15:37【问题描述】：我想以编程方式在我的网页上启动本机日期选择器（在iOS和Android上... 查看详情
手机调试
...pectwebonrealdevice），是指用桌面电脑（PC或MAC）远程连接上移动设备，通过类似Chrome浏览器开发人员工具的界面，来调试移动设备上运行的网页当前：Oct27,2014“真机远程调试”的方法总是在发展，日新月异，有必要在每次更... 查看详情
如何在sapui5应用中集成第三方库：一个在移动设备上查看web应用打印调试信息的小技巧
这是Jerry2021年的第43篇文章，也是汪子熙公众号总共第320篇原创文章。做Web开发的程序员，无论使用SAPUI5，还是Angular，React，Vue，每天都离不开Chrome/Firefox开发者工具。Jerry2018年的时候，曾经写过一篇关于Chrome开发者工具的文章... 查看详情
阻止移动网页上的设备旋转
】阻止移动网页上的设备旋转【英文标题】：Blockingdevicerotationonmobilewebpages【发布时间】：2010-08-1710:37:49【问题描述】：当用户使用移动设备以纵向模式访问它时，是否可以在我的页面上检测到（例如使用Javascript），并在用户将... 查看详情
如何从移动设备上的移动设备获取 console.log 输出？
】如何从移动设备上的移动设备获取console.log输出？【英文标题】：HowcanIgetconsole.logoutputfrommymobileONthemobiledevice?【发布时间】：2018-04-1407:46:31【问题描述】：我的很多开发工作都是通过移动设备完成的。有没有办法让js从移动浏... 查看详情
网页在 Chrome 移动设备（Android）上无法正确显示
】网页在Chrome移动设备（Android）上无法正确显示【英文标题】：Webpagesdon\'tshowcorrectlyonchromemobile(Android)【发布时间】：2018-11-2617:33:22【问题描述】：我最近遇到一个奇怪的问题，当我用手机在chrome上查看我的网站时，我发现它没... 查看详情
基于响应式 Bootstrap 的网页在移动设备上显示效果不佳
】基于响应式Bootstrap的网页在移动设备上显示效果不佳【英文标题】：ResponsiveBootstrapbasedwebpagenotdisplayingwellonmobiledevices【发布时间】：2015-11-2210:19:27【问题描述】：我开发了一个响应式网页，并使用Chrome扩展程序“响应式网页设... 查看详情
按下网页上的按钮->在移动设备上获取通知[关闭]
】按下网页上的按钮->在移动设备上获取通知[关闭]【英文标题】：pressbuttononwebpage->getnotificationonmobile[closed]【发布时间】：2015-04-0309:36:01【问题描述】：我想创建一个带有按钮的网页。当我按下此按钮时，我的手机会收到推... 查看详情
如何在最小化或睡眠时让 JS 代码在移动设备上运行
】如何在最小化或睡眠时让JS代码在移动设备上运行【英文标题】：HowtogetJScoderunningonmobilewhileitminimizedorsleep【发布时间】：2016-02-2307:51:11【问题描述】：我在浏览器中运行JS代码时遇到了问题。我有一个小网页，它使用HTML5位置AP... 查看详情