【譯】你不知道的 Chrome 除錯工具技巧第二十天：Workspace的黑魔法

本文是作者 Tomek Sułkowski 釋出在 medium 上的一個系列。據作者透露一共有 24 篇，一直更新到 12 月 24 日
版權歸原作者所有。

作者在 Twitter 上推薦我們的中文翻譯啦,截圖在最後

譯者在翻譯前已經和作者溝通得到了翻譯整個系列的授權。
為了不影響大家閱讀，授權的記錄在這裡

在馬上就要迎來假期的這 24 天裡，我將會發布一系列短篇的文章，關於如何更加有意思的使用開發工具，昨天我們談到了在DevTools Drawer裡面的幾個皮膚，今天看看 Workspace ：

程式碼執行的位置是最容易編輯程式碼的位置 - 也就是在瀏覽器中。如果你直接把專案的資料夾直接拖到 Source 皮膚，DevTools 會將你做出的修改同步到系統的檔案中。

對於快速修復程式碼這非常方便！（我真的認識一個喜歡以這種方式做大部分編碼的開發者）

等等，它可以變得更好...

正如我們剛才所說，一旦設定好了 DevTools workspace，就可以在 Sources 皮膚中編輯 HTML 和 JavaScript（或者甚至是 TypeScript ，如果你有 sourcemaps ）檔案，按 ctrl + s 後它將被儲存在檔案系統中。

但是在樣式方面它提供了更好的支援。即使你在 “元素” 皮膚的 “樣式” 部分中編輯樣式規則，它也會立即同步。立刻！

這是什麼黑魔法？

要向現有選擇器新增新樣式，很容易：只需在 “元素” 皮膚的 “樣式” 部分中找到該選擇器，然後開始編寫 CSS。但是如果還沒有這樣的選擇器，則需要按下New Style Rule 按鈕。

但是，當你使用工作區時，新樣式規則的預設定位為 - “inspector-stylesheet：1” 如果你不想要這個預設位置。只需按住 New Style Rule 按鈕，你將看到列出所有 CSS 檔案的選項。只需選擇目的地，新規則就會儲存在那裡！

設定工作區後，瀏覽器中所做的更改不僅會持久儲存到檔案系統中，而且你的 CSS 更改儲存在檔案系統後，立即被瀏覽器選中並顯示在你的頁面上。不需要重新整理。

敲黑板：我們沒有使用額外的工具-沒有 webpack 的熱更新模組或者其他東西 - 只有一個本地服務以及 DevTools' workspace 而已。

今天的分享就到這裡~

慣例：如果你從這裡學到了一些新東西

→ 你可以點個贊再走嘛~
→ 關注我：Twitter：Tomek Sułkowski

其他此係列的文章，馬上就會翻譯出來，到時會貼出對應的連結在此處。

如果你對我的翻譯表示肯定，也可以關注我一波哦~ 順便我的開源專案，求一波 star→ 看這裡, 美麗的部落格系統

【譯】你不知道的 Chrome 除錯工具技巧 第二十天：Workspace的黑魔法