-
Notifications
You must be signed in to change notification settings - Fork 97
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Chrome Devtools 高级调试指南(新) #6
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
前言
本文暂未涉及
Performance
面板的内容。后续会单独出一篇,以下是目录:
Blackbox Script
WebView
1. Chrome Devtools 的用处
bug
跟踪、断点调试等API
数据是否正确、审查页面元素样式及布局、页面加载性能分析、自动化测试AdBlock、Gliffy、Axure
等2. 菜单面板拆解
Elements
- 页面dom元素Console
- 控制台Sources
- 页面静态资源Network
- 网络Performance
- 设备加载性能分析Application
- 应用信息,PWA/Storage/Cache/Frames
Security
- 安全分析Audits
- 审计,自动化测试工具3. 常用命令和调试
1. 呼出快捷指令面板:
cmd + shift + p
在
Devtools
打开的情况下,键入cmd + shift + p
将其激活,然后开始在栏中键入要查找的命令或输入"?"
号以查看所有可用命令。...
: 打开文件:
: 前往文件@
:前往标识符(函数,类名等)!
: 运行脚本文件>
: 打开某菜单功能1.性能监视器:
> performance monitor
将显示性能监视器以及相关信息,例如CPU,JS堆大小和DOM节点。
2.FPS实时监控性能:
> FPS
选择第一项3.截图单个元素:
> screen
选择Capture node screenhot
2.
DOM
断点调试当你要调试特定元素的DOM中的更改时,可以使用此选项。这些是DOM更改断点的类型:
Subtree modifications
: 子节点删除或添加时Attributes modifications
: 属性修改时Node Removal
: 节点删除时如上图:监听
form
标签,在input
框获得焦点时,触发断点调试3. 黑盒脚本:
Blackbox Script
剔除多余脚本断点。
例如第三方(
Javascript
框架和库,广告等的堆栈跟踪)。为避免这种情况并集中精力处理核心代码,在
Sources
或网络选项卡中打开文件,右键单击并选择Blackbox Script
。
4. 事件监听器:
Event Listener Breakpoints
Sources
面板Event Listener Breakpoints
如上图:监听了键盘输入事件,就会跳到断点处。
5. 本地覆盖:
local overrides
使用我们自己的本地资源覆盖网页所使用的资源。
类似的,使用
DevTools
的工作区设置持久化,将本地的文件夹映射到网络,在chrome
开发者功能里面对css 样式的修改,都会直接改动本地文件,页面重新加载,使用的资源也是本地资源,达到持久化的效果。Sources > Overrides > Enable local Overrides
,选择本地文件夹Elements
,编辑样式,自动生成本地文件。Sources
,检查文件,编辑更改。6. 扩展:
local overrides
模拟Mock
数据对于返回json 数据的接口,可以利用该功能,简单模拟返回数据。
比如:
api
为:https://www.xxx.com/api/v1/list
在根目录下,新建文件
www.xxx.com/api/v1/list
,list
文件中的内容,与正常接口返回格式相同。对象或者数组类型,从而覆盖掉原接口请求。
4. 控制台内置指令
可以执行常见任务的功能,例如选择
DOM
元素,触发事件,监视事件,在DOM
中添加和删除元素等。这像是
Chrome
自身实现的jquery
加强版。1.
$(selector, [startNode])
:单选择器document.querySelector
的简写语法:
控制台还会预先查询对应的标签,十分贴心。
还可以触发事件,如暂停播放:
此函数还支持第二个参数startNode,该参数指定从中搜索元素的“元素”或Node。此参数的默认值为document
2.
$$(选择器,[startNode])
:全选择器document.querySelectorAll
的简写,返回一个数组标签元素语法:
可以用过循环实现切换全选
或者打印属性
此函数还支持第二个参数startNode,该参数指定从中搜索元素的“元素”或Node。此参数的默认值为document
用法:
3.
$x(path, [startNode])
:xpath
选择器$x(path)
返回与给定xpath
表达式匹配的DOM元素数组。例如,以下代码返回
<p>
页面上的所有元素:以下代码返回
<p>
包含<a>
元素的所有元素:xpath
多用于爬虫抓取,前端的同学可能不熟悉。4.
getEventListeners(object)
:获取指定对象的绑定事件getEventListeners(object)
返回在指定对象上注册的事件侦听器。返回值是一个对象,其中包含每个已注册事件类型(例如,click
或keydown
)的数组。每个数组的成员是描述为每种类型注册的侦听器的对象。用法:
相对于到监听面板里查事件,这个
API
便捷多了。5. 花式
console
除了不同等级的
warn
和error
打印外还有其它非常实用的打印。
1. 变量打印:
%s
、%o
、%d
、和%c
除了标准的
ES6
语法,实际上还支持四种字符串输出。分别是:
%s
:字符串%o
:对象%d
:数字或小数还有比较特殊的
%c
,可用于改写输出样式。当然,你也可以结合其它一起用(注意占位的顺序)。
你还可以这么玩:
2. 打印对象的小技巧
当我们需要打印多个对象时,经常一个个输出。且看不到对象名称,不利于阅读:
以前我的做法是这么打印:
这显然有点笨拙繁琐。其实,输出也支持对象解构:
3. 布尔断言打印:
console.assert()
当你需要在特定条件判断时打印日志,这将非常有用。
语法
用法
4. 给
console
编组:console.group()
当你需要将详细信息分组或嵌套在一起以便能够轻松阅读日志时,可以使用此功能。
5. 测试执行效率:
console.time()
没有
Performance API
精准,但胜在使用简便。6. 输出表格:
console.table()
这个适用于打印数组对象。。。
7. 打印
DOM
对象节点:console.dir()
打印出该对象的所有属性和属性值.
console.dir()
和console.log()
的作用区别并不明显。若用于打印字符串,则输出一摸一样。在输出对象时也仅是显示不同(
log
识别为字符串输出,dir
直接打印对象。)。唯一显著区别在于打印
dom
对象上:一个打印出纯标签,另一个则是输出
DOM
树对象。6. 远程调试
WebView
使用
Chrome
开发者工具在原生Android
应用中调试WebView
。配置
WebViews
进行调试。在
WebView
类上调用静态方法setWebContentsDebuggingEnabled
。手机打开
usb
调试,插上电脑。在
Chrome
地址栏输入:Chrome:https://inspect
正常的话在
App
中打开WebView
时,chrome
中会监听到并显示你的页面。4. 点击页面下的
inspect
,就可以实时看到手机上WebView
页面的显示状态了。(第一次使用可能会白屏,这是因为需要去https://chrome-devtools-frontend.appspot.com
那边下载文件)除了
inspect
标签,还有Focus tab
:Android
设备上的相同操作其他应用里的
WebView
也可以,例如这是某个应用里的游戏,用的也是网页:参考资料
❤️ 看完三件事
如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:
The text was updated successfully, but these errors were encountered: