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

特别声明

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

做者在Twitter上推荐咱们的中文翻译啦,截图在最后
git

译者在翻译前已经和做者沟通获得了翻译整个系列的受权。
为了避免影响你们阅读，受权的记录在这里
github

正文

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

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

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

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

若是你的应用使用加速计，传感器面板也能够模拟设备在 3D 空间中的位置！工具

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

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

或者测试应用的离线功能。开发工具

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→ 看这里, 美丽的博客系统

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