【譯】你不知道的 Chrome 除錯工具技巧第十九天：深入 Drawer

特別宣告

本文是作者 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→ 看這裡, 美麗的部落格系統

【譯】你不知道的 Chrome 除錯工具技巧 第十九天：深入 Drawer