Loading [MathJax]/jax/output/CommonHTML/jax.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >几个非常实用的 Chrome Devtools 技巧

几个非常实用的 Chrome Devtools 技巧

作者头像
唐志远
发布于 2023-10-23 08:00:17
发布于 2023-10-23 08:00:17
69000
代码可运行
举报
文章被收录于专栏:FE32 CodeFE32 Code
运行总次数:0
代码可运行

前言

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

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

正文

控制台导入器

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

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

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

jqeury demo

dayjs demo

添加条件断点

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const persons = [
  {
    name: '蔡徐坤',
    age: 25
  },
  {
    name: '菜虚鲲',
    age: 23
  },
  {
    name: '鸡太美',
    age: 24
  },
]
persons.forEach((v) => {
//   debugger
  console.log(v.name, v.age)
})

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

使用 “$” 引用上次执行的结果

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
'ikun1997'.split('').reverse().join('') // 7991nuki

你可能会这样做:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 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
代码运行次数:0
运行
AI代码解释
复制
// 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.querySelector 和 document.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 的帖子,如果你有不错的点子,欢迎在评论区分享喔🌹!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-10-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
11 个很酷的 Chrome Devtools 技巧
英文 | https://javascript.plainenglish.io/11-cool-chrome-devtools-tips-and-tricks-i-wish-i-knew-already-a9e2e078f78
winty
2022/11/07
1K0
11 个很酷的 Chrome Devtools 技巧
11+ chrome高级调试技巧,学会效率直接提升666%
chrome浏览器作为前端童鞋的老婆,相信你一定不陌生。调页面、写BUG、画样式、看php片少了它整个世界都不香了。
前端胖头鱼
2022/07/25
1K0
11+ chrome高级调试技巧,学会效率直接提升666%
Chrome开发者工具的11个高级使用技巧
本文作者从开发者角度出发,介绍了几个关于 Chrome 开发者工具的高级用法。熟练使用这些高级用法可以大大地提高你的生产力。
深度学习与Python
2020/08/28
2.4K0
分享一些实用的Chrome DevTools技巧
提示:如果您使用jQuery,则可以输入$($0)以访问此元素上的jQuery API。
德顺
2019/11/13
1.5K0
Chrome DevTools中的这些骚操作,你都知道吗?
作为开发人员,平时用的最多的就是Chrome devtools了,但是可能很多同学都像我一样平时用的最多也就只是Console和Elements面板了。
前端森林
2020/05/26
1.6K0
Chrome DevTools中的这些骚操作,你都知道吗?
在 Chrome DevTools 中调试 JavaScript
由浅入深说一说怎么样在 Chrome DevTools 中调试 JavaScript。
从入门到进错门
2020/03/17
5.5K0
Chrome浏览器调试技巧大全!
注:本文测试、截图均为Edge浏览器(内核是Chromium),浏览器内核可了解《有哪些浏览器/内核?[1]》
zz_jesse
2024/07/04
4080
Chrome浏览器调试技巧大全!
Chrome Devtools
(1)document.designMode = ‘on’ (2)打开任何网站,在网址栏输入:可手机端 javascdy.setAttribute(‘contentEditable’,’true’);
jinghong
2020/05/09
1.2K0
Chrome Devtools
Chrome DevTools 全攻略!助力高效开发
组合快捷键按键: Windows: Control + Shift + J Mac: Command + Option + J
winty
2020/09/04
1.6K0
Chrome DevTools 全攻略!助力高效开发
Chrome DevTools 一些隐藏技巧
如果你是一名 Web 开发人员,那么你肯定会花不少时间在浏览器开发工具或 Web 控制台中,审查元素、修改 CSS 或在控制台中运行命令,这些是每个 Web 开发都知道如何使用的一些基本操作,但其实上我们还可以在浏览器内完成很多其他事情,让你的调试、开发和网页设计更加高效。以下是 Chrome DevTools 的一些隐藏的或鲜为人知的功能......
我是阳明
2020/09/29
2.1K0
Chrome DevTools 一些隐藏技巧
Chrome 调试技巧
想必大家都在用console.log在控制台输出点东西,其实console还有其它的方法:
前端教程
2018/10/25
2.4K0
Chrome 调试技巧
Chrome 上开发调试的九个真香技巧
如果你是一个前端开发者,你接触浏览器的时间会占用你工作时间的一半,甚至更多。那么我们推荐你使用谷歌浏览器,它是前端开发利器之一🚀开题前,请你更新谷歌浏览器的版本到最新。截止本文发布,鄙人window上谷歌浏览器为最新版本 - 版本 85.0.4183.121(正式版本)(64 位),mac上谷歌浏览器为最新版本 - Version 85.0.4183.121 (Official Build) (64-bit) 问:为啥要更新?答:一是为了统一操作讲解;二是产品升级总会解决些遗留的问题吧,技术向前看
王小婷
2020/10/28
5420
0202年了, Chrome DevTools 你还只会console.log吗 ?
在元素面板选择一个元素,然后在控制台输入 $0,就会在控制台中得到刚才选中的元素。如果页面中已经包含了 jQuery,你也可以使用 $($0)来进行选择。
madneal
2020/02/17
1.3K0
你可能不知道的 10 个 Chrome DevTools 技巧
打开控制台,在 Elements 界面下,对着某个 dom 标签点击右键,选择 Store as global variable。
savokiss
2019/11/06
5800
你可能不知道的 10 个 Chrome DevTools 技巧
分享 10 个你可能不知道的 Devtools 技巧!
在 Web 开发中,我们可能要频繁调试网页上的请求,可能我们需要改动一个很小的参数,然后被迫重启一遍项目或者等待热更新,其实使用 Devtools 的重新发送请求的功能会很方便。
ConardLi
2023/08/23
6420
分享 10 个你可能不知道的 Devtools 技巧!
JavaScript 开发者需要了解的15个 DevTools 技巧
隐身模式或私有模式会使用单独的用户配置文件,在浏览器重新启动之后不会保留 Cookie,localStorage或缓存文件之类的数据。每个会话都会以干净的状态开始,所以非常适合测试登录功能、首次渲染性能和PWA程序。
ConardLi
2021/05/11
5.2K0
JavaScript 开发者需要了解的15个 DevTools 技巧
前端开发必备之Chrome开发者工具(上篇)
本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介 Chrome 开发者工具是一套内置于 Google Chrome 中的Web开发和调试工具,可用来对网站进行迭代、调试和分析 打开 Chrome 开发者工具的方式有: 在Chrome菜单中选择 更多工具 > 开发者工具 在页面元素上右键点击,选择 “检查” 使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac
laixiangran
2018/04/24
8.9K0
前端开发必备之Chrome开发者工具(上篇)
掌握这些浏览器开发者技巧,绝对能提升你的level
不管是前后端开发、还是测试工程师,平时都会用到浏览器开发者工具,比如调试一些web应用,定位前后端请求问题,爬虫的页面分析等。
吾非同
2021/03/12
6780
待补充 | ​Chrome调试工具常用功能整理
windows: ctrl + shift + i mac: cmd + opt + i
咸鱼学Python
2019/08/13
1K0
急速 debug 实战一(浏览器-基础篇)
工欲善其事,必先利其器。最近在写代码的时候越发觉得不是代码有多难,而是当代码出了问题该如何调试,如何追溯本源,这才是最难的。
秋风的笔记
2020/10/27
3.5K0
急速 debug 实战一(浏览器-基础篇)
相关推荐
11 个很酷的 Chrome Devtools 技巧
更多 >
LV.2
这个人很懒,什么都没有留下~
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验