作為 Web 開發人員,我們花費大量時間在編輯環境中創作代碼。然後我們跳轉到瀏覽器,使用內置的開發人員工具來調試和調整產品 UI。這樣做的問題是調整和調試的結果沒有反映在源代碼中。在 Microsoft Edge 中,我們目前正在研究幾個開放供討論的解決方案,我們很樂意您對他們的反饋
如果您喜歡看視頻而不是閱讀,這裡是三分鐘的介紹:
開發者工具中的調整和變化的當前問題
如今,瀏覽器 DevTools 提供了高度複雜的可視化工具,可以在您使用它們的同時教您-例如-CSS 語法。這些工具以視覺方式改變事物。例如,您可以單擊任何 CSS flexbox 屬性旁邊的“Flexbox”圖標,您會看到一個彈出窗口,讓您預覽該樣式更改的結果。
這是一種出色的調試體驗,讓您不必一直查找 CSS 語法. 但是,存在斷開連接,因為這些調試工作流中顯示的代碼不是您在代碼編輯器中編寫的。
樣式編輯器僅顯示當前代碼的部分視圖在瀏覽器中選擇的元素。您不知道該代碼在哪里以及如何適合您網頁上的其餘 CSS。雖然您可以滾動查看其餘代碼,但最好也查看原始代碼CSS 文件?
您可以通過單擊指向 CSS 文件本身的鏈接來訪問該文件,這會將您帶到源工具並遠離樣式編輯器。
這是一個編輯器嵌入到瀏覽器開發者工具中,當他們出來的時候很漂亮,但與我們現在對編輯器的期望相比,它並不出色。除非您取消停靠這些工具並在自己的窗口中使用它們,否則您也沒有足夠的屏幕空間來提供方便的編輯體驗。
無論你是使用可視化工具來調整你的 CSS,還是使用 Sources 編輯器,一個問題仍然存在:一旦你做了很多改變事情和你達到了預期的結果,你如何將這些更改恢復到你的源代碼中?
你知道有一個更改工具嗎?
瀏覽器開發工具有一個有助於解決此問題的功能稱為更改,它沒有得到太多使用並且在很大程度上是未知的。您可以從命令菜單或上下文菜單訪問它,它會顯示您在此會話中更改的所有文件的差異視圖。您可以使用此工具將更改複製並粘貼回源文件。
Firefox 使用一種稍微不同的更改工具方法,它會根據您所做的更改實時更新。它還會創建一個 CSS 文件供您複製和粘貼,其中包含說明將這些更改粘貼回哪些文件以及刪除或添加的內容的註釋。
雖然這是朝著正確方向邁出的一大步,但需要額外的步驟來複製和粘貼代碼回到您的編輯器。
改進的工作區流程,包括 Visual Studio Code工作區 在 Chromium 開發人員工具中已經存在了很長時間,但沒有看到太多用處。這就是為什麼我們想讓瀏覽器 DevTools 和代碼編輯器之間的更改實時同步變得更加明顯。我們還意識到,Sources 工具中的編輯器並不是人們想要使用的。
如果您可以擁有已經使用的編輯器的便利性以及實時更改工作區文件的好處,那會怎樣?
從 Microsoft Edge 96 版開始,您可以在 DevTools 中找到一個名為“在 Visual Studio Code 中打開源文件“。
打開此選項並重新啟動開發人員工具後,導航到硬盤驅動器上的文件或本地服務器地址,例如localhost 或 127.0.0.1 將提示您識別此文件的根文件夾。您也可以選擇退出會話或永遠不會看到此選項
一次當您選擇一個文件夾時,瀏覽器會詢問您訪問該文件夾的權限-就像您在 Sources 工具中使用 Workspaces 時必須做的那樣。
當您現在在“樣式”窗格中進行任何更改時,磁盤上的文件會發生變化。不同之處在於,當您將 Visual Studio Code 作為計算機上的編輯器時,單擊文件的鏈接將在此編輯器中打開它們,而不是在 Sources 工具中打開它們。您將留在您習慣的環境中,並添加了所有自定義和擴展。
這很好,因為您的 CSS 更改現在是永久性的。問題在於它們可能過於侵入性。樣式工具中的任何更改(例如將大小更改一個單位)都會導致硬盤驅動器上的文件發生更改。如果您使用任何實時重新加載服務器解決方案,甚至是監視文件夾並觸發構建過程的腳本,這可能會很快變得混亂。
CSS 鏡像編輯
在最新版本的Edge DevTools for Visual Studio Code extension 我們引入了一種不同的方法來關閉創作/調試循環,稱為“CSS 鏡像編輯”。如果您願意,可以觀看此40 秒視頻介紹。
如果啟用此功能,則在樣式工具中所做的更改也會影響源代碼,但文件保持不變,直到您將其保存在 Visual Studio Code 中。您可以獲得不丟失更改的好處,並且可以完全控制硬盤上的文件。
如果您使用版本控制,您可以看到您所做的所有更改保存文件後的差異視圖。這為您提供了 Workspaces 工作流程的所有便利,而對文件的更改更少。
我們應該做些什麼來改善這種體驗?
似乎我們在其中包含了所有正確的組件為開發人員提供端到端的創作和調試體驗的地方。我們很想知道您對這些方法的看法以及您更喜歡哪一種。
如果您有任何反饋,請在 Twitter 上聯繫 Edge DevTools 團隊,地址為 @EdgeDevTools,評論 GitHub 上關於 CSS 鏡像編輯的這個問題 或使用瀏覽器中 DevTools 中內置的反饋工具。
– Chris Heilmann,Microsoft Edge 首席項目經理