调试列表页:
调试列表页罗列了所有当前接入到Mobile Debug for Mac的正在运行的调试网页,单击对应行可进入调试界面：
如上图所示，Mobile Debug for Mac的调试界面参考了Chrome的F12开发者工具的界面布局，左上侧为Dom展示界面，右上侧为选中的Dom的css展示界面，下方为Console区域。
Dom展示界面
1、界面实时反应最新的html布局（暂不支持查看before和after伪类）
2、如果您启用了【悬停高亮】，当您鼠标滑过dom元素时，客户端将会实时展示该dom的相关坐标信息：
Css展示界面
【Computed】
Computed区域为当前选中的Dom元素对应的已计算好的部分css样式，如display、width和height等
【Computed（All）】
Computed（All）区域为当前选中的Dom元素对应的已计算好的完整的css样式：
【Styles】
Styles区域为当前选中的Dom元素的样式来源：
Styles区域同存在以下几个小问题：
1、同一段css中重复申明了同1css属性，styles区域只会展示生效的最后值，如：
a, a:active, a:hover {
height:1px;
height:12px;
}
Styles只会展示为
a, a:active, a:hover {
height:12px;
}
2、不同块的css不受上述问题影响。
3、被调试的浏览器内核版本号如果低于版本号(chrome/43.0.2357.92)时,由于版本过低,将无法在控制台右侧查看到来自跨域的.css文件的样式,这将影响到你的调试体验.
Styles区域还支持反向修改css属性和value：
1、name值支持联想提示。
2、value值如果为数值支持通过↑↓减来快速修改数值，具体表现为：
↑：+1 ↓-1
Command+↑：+100 Command+↓-100
Alt+↑：+0.1 Alt+↓ -0.1
Shift+↑：+10 Shift+↓：-10
【Console】区域
console区域包含一些常规操作，如刷新客户端网页，返回客户端列表等按钮。
console区域又可细分为【Console】、【Network】和【Application】三个模块：
【Console】
1.此处为网页在运行过程中输出的console数据，支持： console.clear() console.log() console.error() console.info() console.warn()；
2.Console输入联想/enter运行/shift+enter换行/tab(→)选择/↑↓键读取历史运行记录；
3.console.time() console.timeEnd() 此处的精度值为毫秒,其他特性同chrome
4.网页加载运行错误展示
请注意:若被调试的浏览器内核版本号低于版本号(chrome/37.0.2062.117),此时由于版本过低,控制台无法捕获到window.onerror中的错误,如果一定要在此浏览器调试定位,请使用try+catch排查输出.
【Network】
network可以查看调试页面资源加载情况
Network中展示的是当前被调试页面所有加载的Xhr/Fetch/JS/Css/Img资源请求，其中由于开发周期有限，IMG暂时只包含<img \>和Image对象,不支持Style样式引入的资源图.后期会优化。
【Application】
Application可以查看当前被调试页面的一些基本信息。
相关连接：
通过手动插入Mobile Debug for Mac提供的js脚本调试移动端设备上运行的网页