Categories
程式開發

Chrome开发者工具的11个高级使用技巧


本文作者从开发者角度出发,介绍了几个关于 Chrome 开发者工具的高级用法。熟练使用这些高级用法可以大大地提高你的生产力。如果你选择 Chrome 作为开发环境,那么你应该知道下面关于它的 11 个使用技巧。

Chrome开发者工具的11个高级使用技巧 1

图片来源 Morning Brewon,Unsplash

好了,现在由于某种原因,你最终选择了 Chrome 浏览器作为开发及调试的环境。接下来,打开开发者工具并开始调试代码。

Chrome开发者工具的11个高级使用技巧 2

很多时候你可以打开“控制台”面板来检查程序的输出,或者打开“元素”面板来检查 DOM 元素的 CSS 代码。

Chrome开发者工具的11个高级使用技巧 3

但是你真的了解 Chrome 开发者工具吗?实际上,它提供了许多强大但很多人未知的功能,可以极大地提高我们的开发效率。

在这里,我将介绍几个最有用的功能,希望能对你有所帮助。

在开始之前,我想介绍一下 Chrome 的命令菜单。命令菜单之于 Chrome,就像 Shell 之于 Linux 一样。你可以在键盘敲入相应命令来操作 Chrome。

首先,我们打开 Chrome 开发者工具,然后使用以下快捷键打开命令菜单:

  • windows:Ctrl + Shift + P
  • macOS:Cmd + Shift + P

或者我们可以按照下图所示的步骤将其打开:

Chrome开发者工具的11个高级使用技巧 4

然后,我们可以转到“命令”面板,在这里我们可以输入一些命令来执行很多强大的功能。

原文链接:【https://www.infoq.cn/article/wRIy35uYH7jDQ49DuGhx】。未经作者许可,禁止转载。