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

特別聲明

本文是做者 Tomek Sułkowski 發佈在 medium 上的一個系列。據做者透露一共有 24 篇，一直更新到 12 月 24 日
版權歸原做者全部。
css

做者在 Twitter 上推薦咱們的中文翻譯啦,截圖在最後
vue

譯者在翻譯前已經和做者溝通獲得了翻譯整個系列的受權。
爲了避免影響你們閱讀，受權的記錄在這裏
webpack

正文

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

55. Edit your source files from Chrome（在 Chrome 中修改你的文件）

代碼執行的位置是最容易編輯代碼的位置 - 也就是在瀏覽器中。若是你直接把項目的文件夾直接拖到 Source 面板，DevTools 會將你作出的修改同步到系統的文件中。github

對於快速修復代碼這很是方便！（我真的認識一個喜歡以這種方式作大部分編碼的開發者） web

等等，它能夠變得更好...瀏覽器

56.Workspace allows an instant styles sync(工做區支持即時同步樣式)

正如咱們剛纔所說，一旦設置好了 DevTools workspace，就能夠在 Sources 面板中編輯 HTML 和 JavaScript（或者甚至是 TypeScript ，若是你有 sourcemaps ）文件，按 ctrl + s 後它將被保存在文件系統中。異步

可是在樣式方面它提供了更好的支持。即便你在 「元素」 面板的 「樣式」 部分中編輯樣式規則，它也會當即同步。馬上！編輯器

這是什麼黑魔法？工具

57.Select a target location for new selector (爲新選擇器選擇目標位置)

要向現有選擇器添加新樣式，很容易：只需在 「元素」 面板的 「樣式」 部分中找到該選擇器，而後開始編寫 CSS。可是若是尚未這樣的選擇器，則須要按下New Style Rule 按鈕。

可是，當你使用工做區時，新樣式規則的默認定位爲 - 「inspector-stylesheet：1」 若是你不想要這個默認位置。只需按住 New Style Rule 按鈕，你將看到列出全部 CSS 文件的選項。只需選擇目的地，新規則就會保存在那裏！

58. Workspace allows css injection!（ Workspace 容許 CSS 注入！）

設置工做區後，瀏覽器中所作的更改不只會持久保存到文件系統中，並且你的 CSS 更改保存在文件系統後，當即被瀏覽器選中並顯示在你的頁面上。不須要刷新。

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

今天的分享就到這裏~

慣例：若是你從這裏學到了一些新東西

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

其餘系列

其餘此係列的文章，立刻就會翻譯出來，到時會貼出對應的連接在此處。

寫在最後

若是你對個人翻譯表示確定，也能夠關注我一波哦~ 順便個人開源項目，求一波 star→ 看這裏, 美麗的博客系統

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