黑马程序员技术交流社区
标题: 【南京校区】Chrome 调试技巧-通用篇3- 使用 Command [打印本页]
作者: 大蓝鲸小蟀锅 时间: 2020-7-31 12:22
标题: 【南京校区】Chrome 调试技巧-通用篇3- 使用 Command
本帖最后由 大蓝鲸小蟀锅 于 2020-7-31 12:22 编辑
通用篇 - 使用 Command
我们直接可以直接看到的 DevTools 的功能，其实只是有限的一部分，怎么去探索更多的功能呢？
Command 菜单可以帮助我们快速找到那些被隐藏起来的功能，这也是它本身必不可少的原因。
如果你使用过 WebStorm 中的 Find Action (查找动作) 或者 Visual Studio Code 中的 Command Palette 的话，那么在 DevTools 中的 Command 菜单也与之类似：
- 在 Chrome 的调试打开的情况下 按下 [ Ctrl] + [Shift] + [P] (Mac： [⌘] + [Shift]+ [P] )
- 或者使用 DevTools 的 dropdown 按钮下的这个选项:
下图中，我整理了可供选择的命令列表，归为几个部分：
1.截屏的新姿势
当你只想对一个特别的 DOM 节点进行截图时，你可能需要使用其他工具弄半天，但现在你直接选中那个节点，打开 Command 菜单并且使用 节点截图 的就可以了。
不只是这样，你同样可以用这种方式 全屏截图 - 通过 Capture full size screenshot 命令。请注意，这里说的是全屏，并不是嵌入页面的一部分。
2.快速切换面板DevTools 使用双面板布局，形式一般是：元素面板 + 资源面板 ，它根据屏幕可用的部分，经常将不同面板横向或者纵向的排列，以适合阅读的方式展示出来。但有时候我们并不喜欢默认的布局。
你是否想过要重置 DevTools 呢？将 样式面板 从 html预览 的底部移动到右边或者周围其他的位置呢？是的，这就是下面要介绍的
3.快速切换主题经常在电脑前一坐就是一天，所以我不能忍受一直看着白闪闪的屏幕。而且突然出现的强光也让人讨厌：我们一直都在黑暗的空间中工作，突然太阳出来了，照在你的 DevTools 上，导致你什么都看不到！
这个时候 主题 就派上了用场了：在 Commands 菜单中寻找与 theme 相关的选项，实现 明亮 & 暗黑 两种主题之间的切换：
-
4.gif
(1.06 MB, 下载次数: 36)
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
