当前位置：首页 > 杂谈 > 正文内容

谷歌浏览器（Chrome）有哪些鲜为人知的使用技巧？

2023-06-17 15:43:42TONY杂谈97

Chrome浏览器，作为前端开发者最亲密的伙伴，相信你一定不陌生。我们可以用它来查看网络请求、分析网页性能、调试最新的 JavaScript 功能……

除了这些，它还提供了很多强大但不常见的功能，可以大大提高我们的开发效率。下面，分享11个超实用的Chrome Devtools技巧，前端程序员必知！一起来看一下吧。

1.添加条件断点

通过下面的代码，我们希望食物的名字是当断点被触发时，我该怎么做呢？

const foods = [ { name: , price: 10 }, { name: , price: 15 }, { name: , price: 20 }, ] foods.forEach((v) => { // debugger console.log(v.name, v.price) })

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

2.在控制台使用$I安装npm包

有时候想用day.js或者lodash之类的API，又不想去官网查。如果你可以直接在控制台上尝试它会很好。

安装控制台导入器插件$i(name) 安装 npm 包

3.重新发送 XHR 请求

我们在工作中经常需要和后端开发人员一起调试接口。使用这个功能可以提高我们的对接效率。

只需要执行以下步骤：选择Network面板点击Fetch/XHR选择你要重新发送的请求右键单击并选择重播XHR

4.快速切换主题颜色

有人喜欢chrome的白色主题，也有人喜欢黑色，我们可以通过快捷键在两个主题之间快速切换。

cmd + shift + p 执行命令命令输入“切换到深色主题”或“切换到浅色主题”来切换主题

5.在控制台快速发送请求

对于同一个请求，有时需要修改输入参数并重新发送，什么是捷径？

只需要执行以下步骤：选择Network面板。单击Fetch/XHR。选择要重新发送的请求。选择 Copy as fetch 面板。修改输入参数并重新发送。

6.复制 JavaScript 变量

我们如何将复杂的数据复制到剪贴板？

太奇妙了，您可以使用 Chrome 浏览器提供的复制功能来完成。

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

当我们通过“元素”面板选择一个元素时，如果我们想通过 JavaScript 打印它的一些属性，比如宽度、高度、位置等，我们应该怎么做？

通过 Elements 面板选择 DOM 元素。

使用 $0 访问控制台中的元素。

8.捕获全尺寸屏幕截图

如果我们要对一个多屏的页面进行截图，有什么好的办法吗？

功能强大的 Chrome 浏览器可以轻松做到这一点。

准备你要捕获的页面的内容CMD + Shift + P 执行命令Enter 捕获全尺寸屏幕截图并按 Enter

哇，这太酷了！！！

现在，有一个新问题，如果我们只想截取部分截图页面，我们应该做什么？

也很简单，在第三步输入“捕获节点截图”即可。

9.展开所有子节点

如何一次展开 DOM 元素的所有子节点？不是一个一个吗？

你可以使用“元素”面板中的组合键“Alt + 单击”一次展开所有子节点。

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

我们看一下这个场景，我们对字符串进行了各种操作，然后我们想知道每一步的结果，我们应该怎么做呢？

fatfish.split().reverse().join() // hsiftaf

你可能会做这样的事情

// step 1 fatfish.split() // [f, a, t, f, i, s, h] // step 2 [f, a, t, f, i, s, h].reverse() // [h, s, i, f, t, a, f] // step 3 [h, s, i, f, t, a, f].join() // hsiftaf

更简单的方法

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

// step 1 fatfish.split() // [f, a, t, f, i, s, h] // step 2 $_.reverse() // [h, s, i, f, t, a, f] // step 3 $_.join() // hsiftaf

11.使用“和$”快速选择DOM元素

使用 document.querySelector 和 document.querySelectorAll 在控制台中选择当前页面的元素是最常见的需求，但是有点太长了，我们可以使用和$ 来代替。

以上就是11个超实用的Chrome Devtools技巧分享，你都学会了吗？欢迎持续关注陆神，一起学Web前端，一起成长！

返回列表

上一篇：谷歌chrome浏览器最新版国内下载方法！

下一篇：Chrome 浏览器的优点和缺点分别有哪些？

“谷歌浏览器（Chrome）有哪些鲜为人知的使用技巧？” 的相关文章

他用红包二维码覆盖车站场所码被行拘

“场所码”是疫情精准防控的必要手段。没想到有人竟然大开脑洞，用红包码覆盖“场所码”牟利，最终被轨交警方以扰乱公共秩序依法行拘。图说：地铁站内的场所码（资料图）。陈炅玮摄 9月25日下午，9号线台儿庄路站民警接到车站站长反映，该站1号口进口处和通道内的2张“场所...

抖店平台商户如何实现流量变现，掌握这些很重要

原标题：抖店平台商户如何实现流量变现，掌握这些很重要随着互联网技术的发展,网络用户日益增长,短视频这种创作门槛低、可竞争性强、进入退出灵活、潜在受众面极其宽广且包容性极高的新型媒...

微软IE浏览器将退役Edge浏览器接棒网友：考试报名咋整？

封面新闻记者欧阳宏宇微软IE浏览器即将正式退役。5月16日，微软Edge浏览器微博发文称，称IE浏览器将于6月16日正式退役，此后其功能将由Edge浏览器接棒。至此，这个诞生于1995年的浏览器“霸主”终归走到了尽头。作为Windows 95的默认浏览器，IE的成功离不开微软在1995年8月发布的...

知云安装后无法打开，我系统是win7

有些win7用户安装知云文献翻译后打不开，可能会提示下面“zhiyuntranslator已停止工作”或“.net framework初始化错误”等错误画面。当然，并非所有win7用户都会出现无法打开的情况，只是少数。原因分析知云文献翻译软件是基于.net编程的，并且其中使用到部分VC运行库，由于w...