DevTools的使用技巧

1.控制台中直接访问页面元素
在元素面板选择一个元素,然后在控制台输入$0,就会在控制台中得到刚才选中的元素
反过来,在控制台输出的 DOM 元素上右键选择 Reveal in Elements Panel 来直接在 DOM 树种查看


2.访问最近的控制台结果
$_

3.选择元素
$() - 返回满足指定 CSS 规则的第一个元素,此方法为 document.querySelector()的简化。


4.使用 console.table
打印复杂信息时尝试使用 console.table 来替代 console.log 会更加清晰。
打印json对象用这个挺好的

5.使用 console.dir,可简写为 dir
console.dir(object)/dir(object) 命令可以列出参数 object 的所有对象属性

6.复制 copy
比如先输入location
Location {href: "https://juejin.im/post/5e0cb3ba5188253ab46da675#heading-6", ancestorOrigins: DOMStringList, origin: "https://juejin.im", protocol: "https:", replace: ƒ, …}
copy($_) 就是复制上一次访问的控制台结果,直接在剪切板里面了

7.获取对象键值 keys(object)/values(object)

8.清空控制台历史记录
console.clear(); 或者手动, esc键:调出和关闭控制台

9. debugger 断点
有时候我们需要打断点进行单步调试,一般会选择在浏览器控制台直接打断点,但这样还需要先去 Sources 里面找到源码,然后再找到需要打断点的那行代码,比较麻烦。
使用 debugger 关键词,我们可以直接在源码中定义断点,方便很多。

10:截图/切换主题色
F12之后,快捷键 ctrl+shift+p, 输入命令screenshot/theme

11.复制 Fetch
在 Network 标签下的所有的请求,都可以复制为一个完整的 Fetch 请求的代码。

12.重写 Overrides
在 Chrome DevTools 上调试 css 或 JavaScript 时,修改的属性值在重新刷新页面时,所有的修改都会被重置。
如果你想把修改的值保存下来,刷新页面的时候不会被重置,那就看看下面这个特性(Overrides)吧。Overrides 默认是关闭的,需要手动开启,开启的步骤如下。

开启的操作:
打开 Chrome DevTools 的 Sources 标签页选择 Overrides 子标签选择 + Select folder for overrides,来为 Overrides 设置一个保存重写属性的目录,这时在浏览器的页面上会弹一个东西,你允许就行了,之后修改完,ctrl+s就会保存在本地

注:修改css样式后,确实刷新后不会重置!!!
注:小技巧,在console下输入document.body.contentEditable='true' , 整个页面随便你编辑,还有一个document.designMode='on'; 也是可以做到的(只能改文本),可以随意的拖拽,删除
重写 Overrides对这个好像是没有效果的,但你应该可以保存整个html下下来,

13.滚动到视图区域 Scroll into view
查看Element时,有时不知道对应页面的哪里,这时Scroll into view,就可以找到页面对应的位置

14.Source--> snippets(片段)
在这里可以写js代码片段,相对于一个编辑器一样
注: console下面也可以写js片段,但是不太方便

15.事件监听断点(比如点击事件)
选中一个元素,然后Source --> Event Listener Breakpoints --> 鼠标断点

fiddler功能

开发环境host配置
前后端接口调试: Composer(把左边的请求拖过来再修改即可)
线上bugfix: AutoResponder(也可以把左边的请求拖过来,再在下拉框选择find a file替代)
性能分析和优化:

r: 回放
go: 放开断点,配合底部web Browsers右边空白处点击, 请求发送之前打断点(向上箭头),响应回来之前打断点(向下箭头)
Stream: fiddler代理模式,流模式和缓冲模式
any process: 可以只捕获指定的进程发送的请求
find:查看
save: 保存面板中的会话, 导入进来也可以看到
textWizard: 编码解码功能

参考:
https://juejin.im/post/5e0cb3ba5188253ab46da675#heading-6
https://www.jb51.net/article/147438.htm

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值