【译】你不知道的 Chrome 调试工具技巧第十九天：深入 Drawer 本文是作者 Tomek Sułkowski

特别声明

本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列。据作者透露一共有 24 篇，一直更新到 12 月 24 日
版权归原作者所有。

作者在Twitter上推荐我们的中文翻译啦,截图在最后

译者在翻译前已经和作者沟通得到了翻译整个系列的授权。
为了不影响大家阅读，授权的记录在这里

正文

在马上就要迎来假期的这 24 天里，我将会发布一系列短篇的文章，关于如何更加有意思的使用开发工具，昨天我们开始了解了 Drawer ，今天看看隐藏在这里的一组有意思的工具。

52. Control the sensors（控制传感器）

如果你正在你的应用中使用一些获取位置信息的 API 而且想要测试一下它，你可能不想开车环绕世界只是为了做到这一点 (因为去旅行可以有更好理由😉)。

位于 Drawer 的 Sensors(传感器) 面板可以让你模拟特定的位置。可以从预定义的位置中进行选择，添加自己的位置，或者只需手动键入纬度/经度。选定的值将被 navigator.geolocation.watchPosition（或 .getCurrentPosition ）报告。

如果你的应用使用加速计，传感器面板也可以模拟设备在 3D 空间中的位置！

53.Simulate network conditions(模拟网络状态)

就像伪造你的位置一样，你可以使用 Drawer 的 Network conditions 面板模拟特定的网络行为：模拟互联网为典型的 3G 网络甚至离线！这有助于了解页面资源的大小。

或者测试应用的离线功能。

Network conditions 面板还可以模拟特定的用户代理。

54.Have the source by hand (把 source 拿到手)

类似于在打开不同面板的同时监视 Console 的方式类似，例如，当我主要专注于 Elements 面板时，有时我也想看到源代码。就像 drawer console 一样，你可以在 drawer 中显示 Source。

正如你所见，它没有 “主”Source 面板的花里胡哨的功能，例如没有 call stack 或者 control ( pause, step over, 等等)按钮。如果断点被触发，它将不会显示在 drawer 的 Quick sources 中，而是显示在主 Source 中。

但是对于快速查看代码，或者设置断点来说，它仍旧很有用。

今天的分享就到这里~

惯例：如果你从这里学到了一些新东西

→ 你可以点个赞再走嘛~
→ 关注我：Twitter：Tomek Sułkowski

其他系列

其他此系列的文章，马上就会翻译出来，到时会贴出对应的链接在此处。

写在最后

如果你对我的翻译表示肯定，也可以关注我一波哦~ 顺便我的开源项目，求一波 star→ 看这里, 美丽的博客系统

作者在Twitter上推荐我们的中文翻译啦

【译】你不知道的 Chrome 调试工具技巧 第十九天：深入 Drawer