我希望我已经知道的 11 个很酷的 Chrome Devtools 提示和技巧

我希望我已经知道的 11 个很酷的 Chrome Devtools 提示和技巧

选择 Chrome 作为开发工具时必须知道的 11 个技巧

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

除了这些，它还提供了很多强大但不常见的功能，可以大大提高我们的开发效率。

我们来看一下。

1.添加条件断点

使用以下代码，我们希望食物的名称是 当断点被触发时，我该怎么做？

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

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

有时我想使用 API 如 天 或者 罗达什 ，但我不想去官网查看。如果您可以直接在控制台上尝试它会很好。

1. 安装 控制台导入器 插入
2. $i('name') 安装 npm 包

3. 重新发送 XHR 请求

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

您只需要执行以下步骤：

1. 选择 网络 控制板
2. 点击 获取/XHR
3. 选择您要重新发送的请求
4. 右键单击并选择 重播 XHR

4.快速切换主题颜色

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

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

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

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

您只需要执行以下步骤：

1. 选择 网络 控制板。
2. 点击 获取/XHR .
3. 选择要重新发送的请求。
4. 选择 复制为获取 控制板。
5. 修改输入参数并重新发送。

6. 复制 JavaScript 变量

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

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

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

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

1. 通过 元素面板 .
2. 利用 $0 访问控制台中的元素。

8.捕获全尺寸屏幕截图

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

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

1. 准备您要捕获的页面的内容
2. CMD + Shift + P 执行 命令
3. 进入 捕获全尺寸屏幕截图 然后按回车

哇，太酷了！！！

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

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

9.展开所有子节点

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

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

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

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

你可能会做这样的事情

更简单的方法

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

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

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

最后

谢谢阅读。 我在看 **** 转发您的关注和阅读更多优质文章。

[

“我因为 Promise.all 而失去了工作机会”

一次面试经历让我很伤心。

javascript.plainenglish.io

](/i-lost-a-job-opportunity-just-because-of-promise-all-be396f6efe87)

[

采访者：“npm run xxx”发生了什么？

一个大多数人都不知道的秘密。

javascript.plainenglish.io

](/interviewer-what-happened-to-npm-run-xxx-cdcb37dbaf44)

[

面试官：“x !== x”在 JavaScript 中可以返回 True 吗？

你可能不知道的五个神奇的 JavaScript 知识点！

javascript.plainenglish.io

](/interviewer-can-x-x-return-true-in-javascript-7e1d1fa7b5cd)

[

现在是 2022 年，不要再滥用箭头功能了

不应该使用箭头函数的 4 种情况。

javascript.plainenglish.io

](/its-2022-don-t-abuse-the-arrow-function-anymore-905862a9c668)

更多内容在 ** 纯英语.io** .注册我们的 ** 免费每周通讯** .跟着我们 ** 推特** , ** 领英** , ** YouTube** ， 和 ** 不和谐** .对增长黑客感兴趣？查看 ** 电路** .

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/36818/46561609