【譯】你不知道的 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