- Published on
03-快捷键和通用技巧
- Authors
- Name
- Dendoink
- @Magiciaaaaaaaan
问题 如果有人问你最有效提升开发效率的方式？你首先想到的肯定是快捷键！那在 Chrome 中有哪些值得我们去了解的快捷键呢？
1. 切换 DevTools 窗口的展示布局
一般我在使用 DevTools 时， dock 的展示窗口都在底部 ，但是有时候我想把 dock 的窗口 切换到右边。
怎么做呢？
这时就可以通过 DevTools 的下拉菜单，或者命令菜单... 或者使用一个快捷键 ctrl + shift + D ( ⌘ + shift + D Mac) 来实现位置的切换（通常是从 开始的位置 到 右边位置 ，但如果一开始就是 右边的位置 那么会切换到 左边的位置 ）:
2. 切换 DevTools 的面板
如果可以的话，我想成为一个不需要鼠标的开发者，日常开发中，我们常需要从 元素面板 跳转到 资源面板 并返回，这样往返的来调试我们的代码，怎么来节省鼠标点击的时间呢：
- 按下
ctrl + [和ctrl + ]可以从当前面板向左/向右切换面板。
- 按下
ctrl + 1到ctrl + 9可以直接转到编号1...9的面板(ctrl + 1转到元素面板，ctrl + 4转到 网络信息面板等等)
请注意 第二组快捷键默认是禁用状态。你需要手动打开:
3. 递增/递减
接下来这个技巧，对调整样式是最有用的：通过使用 带有 或者 不带有修饰键 的 上 / 下 箭头按键， 你可以实现递增和递减 0.1 ， 1 或者 10 这样数值类型的值。
敲黑板 这些操作对颜色同样生效！（虽然没什么用~）
4. elements， logs， sources & network 中的查找
DevTools 中的前 4 个主要的面板，每一个都支持 [ctrl] + [f] 快捷查询，不同的面板查询条件有所区别：
Elements面板: 支持string/选择器/XPathConsole,Network,Source面板: 字符串（区分大小写）
关于查询这个操作，其实不光是 Chrome 的调试工具中有, 几乎所有软件都有，快捷键也多是 cmd ( ctrl ) + F ，这里 F 就是 find 的意思，同理 R 是 refresh，所以刷新就是 cmd + R ，依次类推，理解以后你能够记住更多的操作，比如 O 代表 open。学习的过程中，尝试去理解设计者的出发点，往往能够收获更多。
5. 所有快捷键
授人以鱼不如授人以渔，Chrome 里面所有的快捷键都可以在设置里找到：
