快捷键和通用技巧

作者: littleyu | 来源:发表于2019-03-13 10:51 被阅读13次

    1. 切换 DevTools 窗口的展示布局

    一般我在使用 DevTools 时, dock 的展示窗口都在底部 ,但是有时候我想把 dock 的窗口 切换到右边。

    怎么做呢?

    这时就可以通过 DevTools 的下拉菜单,或者命令菜单...或者使用一个快捷键 ctrl + shift + D (⌘ + shift + D Mac) 来实现位置的切换(通常是从 开始的位置右边位置, 但是如果一开始就是 右边的位置 那么会切换到 左边的位置):

    2. 切换 DevTools 的面板

    如果可以的话,我想成为一个不需要鼠标的开发者,日常开发中,我们常需要从 元素面板 跳转到 资源面板 并返回,这样往返的来调试我们的代码,怎么来节省鼠标点击的时间呢:

    • 按下 ctrl + [ctrl + ] 可以从当前面板的分别向左和向右切换面板。

    • 按下 ctrl + 1ctrl + 9 可以直接转到编号 1...9 的面板(ctrl + 1 转到元素面板,ctrl + 4 转到网络信息面板等等)

    请注意! 我们在上面介绍的第二组快捷键默认被禁用了。你可以通过 DevTools>>Settings>>Preferences>>Appearance 打开这个选项:

    3. 递增/递减

    接下来这个技巧,对调整样式是最有用的:通过使用 带有 或者 不带有修饰键上 / 下 箭头按键 你可以实现 递增递减 0.11 或者 10 这样数值类型的值。

    windows:0.1是alt+上下键,1是直接上下键,10是shift+上下键,100是Ctrl+上下键

    4. elements, logs, sources & network 中的查找

    DevTools 中的前4个主要的面板,每一个都支持 [ctrl] + [f] 快捷方式,你可以使用对应的查询方式来查找信息:

    • Elements 面板中 - 通过 string ,选择器 或者 XPath 来查找
    • 而在 ConsoleNetwork 以及 Source 面板 - 通过区分大小写,或者可以被视为表达式的 strings, 来查找

    相关文章

      网友评论

        本文标题:快捷键和通用技巧

        本文链接:https://www.haomeiwen.com/subject/bxjbpqtx.html