返回列表Mobile Debug 介绍与使用

对网页调试控制界面及功能的简单介绍

调试列表页:

blob.png

调试列表页罗列了所有当前接入到Mobile Debug for Mac的正在运行的调试网页,单击对应行可进入调试界面:

blob.png


如上图所示,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等

blob.png



【Computed(All)】


Computed(All)区域为当前选中的Dom元素对应的已计算好的完整的css样式:

blob.png


【Styles】


Styles区域为当前选中的Dom元素的样式来源:

blob.pngblob.png


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:

blob.png


1、name值支持联想提示。

2、value值如果为数值支持通过↑↓减来快速修改数值,具体表现为:

    ↑:+1   ↓-1

    Command+↑:+100   Command+↓-100

    Alt+↑:+0.1    Alt+↓ -0.1

    Shift+↑:+10   Shift+↓:-10

blob.png




【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脚本调试移动端设备上运行的网页


正在提交您的问题或建议,请不要关闭页面.

您的问题或建议已提交成功,感谢您一如既往的支持与关注.
关闭弹窗

点击刷新验证码

确认并提交

QQ交流反馈群:323396003