Chrome DevTools 中你或许不知道的 9 个调试技巧

vwin娱乐场

关于前端开发者来说,ChromeDevTools 肯定是不可或缺的调试东西,咱们常用的调试办法包括一些console等,而ChromeDevTools 其实很强壮,下面来聊聊一些你或许不知道的debug 办法。

Scroll Into View 翻滚如视图内

Elements 标签中,检查页面元素的时分,假如当时这个元素不在视图内,能够经过这个办法让这个元素快速滚入视图中。

操作:

  • Elements 标签页中挑选一个不在视图内的元素
  • 右击,挑选Scrollintoview

Copy As Fetch 复制为 Fetch

Network 标签下的全部的恳求,都能够复制为一个完好的Fetch 恳求的代码。

操作:

  • Network 标签页中,选中一个恳求
  • 右击,挑选Copy –>Copyasfetch

堵塞恳求

Network 标签页下,选中一个恳求,右击该恳求,挑选Blockrequest domain 或Blockrequest URL,能够别离堵塞该恳求地点domain 下的全部恳求 和 该恳求。

手动给元素增加一个点击事情监听

debug 的时分,有时分需求在元素的点击事情监听函数中,将该点击事情目标打印出来。有个更便利的方法,是能够直接在Elements 标签页为页面元素增加事情监听事情。

操作:

  • Elements 标签页中选中一个页面元素(选中之后,默许能够经过$0 变量获取到该元素 )
  • Console 标签页中,调用函数monitorEvents,输入两个参数,第一个是当时元素($0),第二个是事情名(click
  • Enter后,当被选中的元素触发了点击事情之后,Console 标签页会将该点击事情目标打印出来

拖动页面元素

Elements 标签页,你能够拖动任何HTML 元素,改动它在页面中的方位。

操作:如下图。

DOM 断点调试

基本上我们都会用JavaScript 的断点调试,可是应该许多人不知道DOM 节点也能够进行断点调试。ChromeDevTools供给了三种针对DOM 元素的断点调试:子元素改动时特点改动时 和元素被移除时

操作:

  • Elements 标签页,选中一个元素
  • 右击,挑选 Breakon –> subtree modifications  (或attribute modifications 或node removal )

截屏

在新版别的Chrome 中,供给了一个截图的API,你能够将整个页面截图或许截取部分页面元素,且截取的图片尺度跟阅读器当时视图中要截取的内容所占尺度共同。截图输出的是png 格局的图片,会主动经过阅读器下载到默许的目录下。现在有三种截取的方法:截取整个页面部分元素 或当时视图

截取页面部分元素的操作:

  • CMD + SHIFT + P ( windows 顶用 CTRL + SHIFT + P ) 翻开指令菜单
  • Elements 标签页,选中要截取的页面元素
  • 挑选 Capture node screenshot

截取完好页面的操作

  • CMD + SHIFT + P (windows 顶用 CTRL + SHIFT + P ) 翻开指令菜单
  • 挑选 Capture full size screenshot (不需求挑选页面元素)

截取当时视图内的页面

  • CMD + SHIFT + P (windows 顶用CTRL + SHIFT + P) 翻开指令菜单
  • 挑选 Capture screenshot (不需求挑选页面元素)

缓存上一步操作的成果

ChromeDevTools 上运转JavaScript 表达式的时分,能够运用$_ 来获取到上一步操作的返回值。

Overrides 重写

ChromeDevTools上调试css 或JavaScript时,修正的特点值在从头改写页面时,全部的修正都会被重置。假如你想把修正的值保存下来,改写页面的时分不会被重置,那就看看下面这个特性(Overrides)吧。Overrides 默许是封闭的,需求手动敞开,敞开的过程如下。

敞开的操作:

  • 翻开ChromeDevTools 的Sources 标签页
  • 挑选Overrides 子标签
  • 挑选+Selectfolderforoverrides,来为Overrides 设置一个保存重写特点的目录

小结

ChromeDevTools 中有许多调试的小技巧,假如细数的话,至少有几十种。本文限于篇幅,仅仅列出了一些不容易被发现,且还比较好用的技巧,期望能对你有协助。

宣布我的谈论

撤销谈论
表情 插代码

Hi,您需求填写昵称和邮箱!

  • 必填项
  • 必填项
m88 188bet uedbet 威廉希尔 明升 bwin 明升88 bodog bwin 明升m88.com 18luck 188bet unibet unibet Ladbrokes Ladbrokes casino m88明升 明升 明升 m88.com 188bet m88 明陞 uedbet赫塔菲官网 365bet官网 m88 help