几个非常实用的 Chrome Devtools 技巧

原文链接:几个非常实用的 Chrome Devtools 技巧

关于 Chrome 浏览器,如果你是一名前端开发者,相信对此并不陌生,我们可以用它来查看 网络请求分析网页性能调试 JavaScript 功能 等。

除了这些,它还提供了很多强大但不常见的功能,可以大大提高我们的开发效率,这里分享几个实用的技巧(持续更新)。

正文

控制台导入器

有时候想用某些库的 API,但又懒得去官网查,可以直接在控制台尝试。

要先安装 Console Importer,否则会报如下错误:

安装插件后,重启浏览器即可体验效果。

添加条件断点

通过下面的代码,希望当食物的名字是 鸡太美 时 触发断点,该如何实现呢?

JavaScript 复制代码
const persons = [
  {
    name: '蔡徐坤',
    age: 25
  },
  {
    name: '菜虚鲲',
    age: 23
  },
  {
    name: '鸡太美',
    age: 24
  },
]
persons.forEach((v) => {
//   debugger
  console.log(v.name, v.age)
})

在数据量很大的情况下,使用 条件断点 对开发工作很有帮助,大大提高效率。

使用 "$" 引用上次执行的结果

类似下面的场景,如果你对字符串进行了各种操作后,又想知道每一步的结果,该怎么做呢?

JavaScript 复制代码
'ikun1997'.split('').reverse().join('') // 7991nuki

你可能会这样做:

JavaScript 复制代码
// step 1
'ikun1997'.split('') // ['i', 'k', 'u', 'n', '1', '9', '9', '7']
// step 2
['i', 'k', 'u', 'n', '1', '9', '9', '7'].reverse() //  ['7', '9', '9', '1', 'n', 'u', 'k', 'i']
// step 3
['7', '9', '9', '1', 'n', 'u', 'k', 'i'].join('') // 7991nuki

使用 "$" 获取上一次操作的结果,无需每次都复制。

JavaScript 复制代码
// step 1
'ikun1997'.split('') // ['i', 'k', 'u', 'n', '1', '9', '9', '7']
// step 2
$_.reverse() // ['7', '9', '9', '1', 'n', 'u', 'k', 'i']
// step 3
$_.join('') // 7991nuki

展开所有子节点

如何一次展开 DOM 元素的所有子节点,聪明的你会一个个的展开吗?

当然使用 Alt + 单击 一次展开所有子节点啦 ~

在 gif 中 显而易见,点击一次只展开了一个子节点,Alt + 单击 则展开所有子节点。

使用 "" 和 "$" 快速选择 DOM 元素

使用 document.querySelectordocument.querySelectorAll 在控制台中选择当前页面的元素是最常见的需求,单词太长,我们可以使用 ** 和 **$ 来代替。

在控制台中获取选中的 DOM 元素

当你通过 Elements 面板 选择一个元素时,如果想用 JavaScript 打印它的一些属性,比如宽度、高度、位置等,可以使用 $0 访问控制台中的元素。

在控制台重新发送请求

对于同一个请求,有时需要重新发送,这时可以这样做:

1.选择 Network 面板 中的 Fetch/XHR 2.选中要重新发送的请求,Replay XHR

在控制台发送修改参数后的请求

对于同一个请求,有时需要 修改某些参数 并重新发送,这时可以这样做:

1.选择 Network 面板 中的 Fetch/XHR 2.选中要重新发送的请求,**Copy as fetch ** 3.修改参数并发送

捕获屏幕截图

1.打开控制台,执行 Ctrl + Shift + P / Command+Shift +P 2.输入指令 capture,会有三个选项

这里有常用几种截取方式:Capture full size screenshot(截取全屏)Capture area screenshot(截取自选区域)Capture node screenshot(截取选中节点)Capture screenshot(截取当前范围)

这里只展示部分截取效果:

Capture full size screenshot :

Capture node screenshot :

结语

这是一篇将持续收集的 Chrome Devtools 的帖子,如果你有不错的点子,欢迎在评论区分享喔🌹!

相关推荐
全宝5 分钟前
🔢前端解决浮点数运算精度丢失的问题
前端·javascript
江城开朗的豌豆12 分钟前
JavaScript篇:偷懒也有理!事件代理让我少写一半代码
前端·javascript·面试
云浪27 分钟前
掌握 CSS 倾斜函数
前端·css
ai产品老杨33 分钟前
实现自动化管理、智能控制、运行服务的智慧能源开源了。
前端·javascript·vue.js·前端框架·ecmascript
唐诗35 分钟前
优化 Nextjs 开发的个人博客首页,秒开!
前端·next.js
飞川撸码37 分钟前
web vue 项目 Docker化部署
前端·vue.js·docker·运维开发
默默无闻的白夜39 分钟前
【Vue】初学Vue(setup函数,数据响应式, 脚手架 )
前端·javascript·vue.js
萌萌哒草头将军44 分钟前
⚡⚡⚡Rstack 家族即将迎来新成员 Rstest🚀🚀🚀
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Proxy:JavaScript中的'变形金刚',让你的对象为所欲为!
前端·javascript·面试
江城开朗的豌豆1 小时前
JavaScript中的instanceof:你的代码真的认识'自家孩子'吗?
前端·javascript·面试