说到 Drawer 大部分的朋友可能都很陌生,那 Drawer 是个什么东西?

# 什么是 Drawer

Chrome DevTools 有很多部分,被分为9个 tab (俗称选项卡) ( ElementsConsoleSourcesNetwork , 等等...) 但是,那仅仅是它的一部分而已!有一组平行的选项卡,被隐藏在主窗口之下。这个组合被称为 Drawer

# 1. 如何打开 Drawer ?

当你在 DevTools (任何选项卡)中时,按 [esc] 来显示它,再次按 [esc] 隐藏它:

默认情况下,您会看到一个 console 选项卡。 与主面板的 console 完全相同。 这就是为什么主面板会显示除了 console 之外的每个主要标签( ElementsSourcesNetwork ...)- 因为在主面板中显示 console 没有意义。

这样的 console 很方便,例如在 Elements 选项卡打开时,我们同时可以看到 console 面板。但是在 Drawer 中其实还隐藏了更多细节。

# 2. Drawer 里面到底有什么?

Drawer 里隐藏着许多其他功能,大多数时候你可能不需要用到它们,这也是它们为什么被隐藏起来的原因,然鹅,你可以直接选择你想展示在这里的功能。

点击主页面在 Drawerconsole 面板前面的 图标来打开完整选项列表。另外,你也可以打开之前我们提到的 command Menu ,然后输入 Drawer 来打开

所有的选项:

  • Animations
  • Changes
  • Console
  • Coverage
  • Network conditions
  • Performance monitor
  • Quick source
  • Remote devices
  • Rendering
  • Request blocking
  • Search
  • Sensors
  • What’s new 后面我们会介绍一些经常用到的:

# 3. Sensors 控制传感器

如果你正在你的应用中使用一些获取位置信息的 API 而且想要测试一下它,总不能开着车环绕世界吧,(其实也不是不行😉)。

Sensors 面板可以让你模拟特定的位置: 支持从预定义的位置中进行选择,添加自己的位置,或者手动键入纬度/经度。

可以通过 navigator.geolocation.getCurrentPosition(console.table) 打印你当前的位置信息:

敲黑板

如果你还不知道为什么可以直接传入 console.table 建议你看看这一节

如果你的 App 使用加速计, Sensors 面板也可以模拟设备在 3D 空间中的位置!

微信扫码或搜索: 前端恶霸

在公众号对话框,发送

关注期间 无限制 浏览本站全部内容

内容包括 「Chrome 调试技巧」(持续更新),以及「React 学习指北」(即将上线)

为什么我需要关注?
加入读者交流群 扫描二维码回复 Chrome
Last Updated: 6/30/2020, 12:36:00 PM