概覽#
Sources 面板的 Workspace 是用來瀏覽與修改當前頁面各種 Context 資源的地方，上方有五個頁籤：
- Page
- Filesystem
- Overrides
- Content scripts
- Snippets
本章會走過每個頁籤的功能與適用情境。閱讀本章前建議先理解 Source Map 的概念，可參考前一章「Sources - Source Map 與檔案編輯」。
Page#
當瀏覽器載入網頁時，所有取得的檔案（HTML、CSS、JavaScript、圖片等）都會出現在 Page 頁籤中。檔案以資料夾形式呈現，方便觀察結構，除了主 Domain 之外，還包括：
- 來自其他 Domain 的資源。
- 其他 Frame，例如頁面內嵌的
iframe。 - 其他 Context，例如 ServiceWorker。
也可以透過右上角的選項把所有檔案攤平，並依檔名 a~z 排序。如果還是不夠，按 Command+P 直接以檔名快速搜尋。
除了主動進入 Sources 面板，前面章節介紹過的 Elements、Console 面板裡的 CSS 與 JavaScript 連結，以及 Network 面板的請求，幾乎都能透過點擊或右鍵選單的 Reveal in Sources panel 直接跳轉到 Page 頁籤的對應檔案，反向也成立。
Filesystem#
還記得 File Editing 介紹過的「驚嘆號圖示」嗎？訊息是：
Changes to this file were not saved to file system
直接編輯資源僅在當次瀏覽生效，重整就消失。要把修改真正留下來，就需要一塊本機儲存空間來同步檔案。Filesystem 就是這個機制，它把 DevTools 升級成一個與本機檔案連動的 IDE。
要使用 Filesystem，會需要一份本機檔案與一個簡單的 Server。常見作法：
- 準備測試用頁面資料夾。
- 在資料夾內以 Node.js 執行
npx serve .啟動本機 Server。 - 瀏覽器開啟
localhost:5000，打開 DevTools > Sources > Filesystem。 - 把資料夾拖入 Filesystem，並點擊上方的「Allow」授權檔案系統存取（File System Access）。
- 修改檔名旁有綠點的
index.html、style.css、index.js並存檔，本機檔案會同步更新。
npx serve .檔名旁的小綠點代表已成功與本機檔案連結，存檔即時同步。
搭配 Source Map 後即使 CSS 經過處理仍能正確編輯。對於常需要在 IDE 與瀏覽器之間切換、確認樣式的工作流程很有幫助。
Overrides#
Filesystem 需要本機環境，但有時候你只是想覆寫一個沒有原始碼的線上網站，或是該專案太大不方便跑起來。這時 Overrides 就派上用場。
操作流程：
- 切到 Overrides 分頁，點擊
Select folder for overrides選擇任意資料夾，這份資料夾用來存放修改後的檔案。 - 同樣需要授權頁面允許存取。
- 直接修改
index.js並存檔，檔名旁會出現紫色小圓點。 - 重整頁面後，Page 頁籤裡的
index.js仍然是剛才修改過的版本。
此時 Network 面板的標籤上會出現警告圖示，提示有 Request 被 Local overrides 攔截。原本應該從伺服器取得的 index.js，已經被替換為本機資料夾裡的那份。
與 Filesystem 不同，Overrides 也支援修改
index.html，這對於除錯第三方網站、驗證假說（例如 JavaScript 載入順序問題）非常實用。
Content Scripts#
如果頁面上有 Chrome Extension 注入的 Content Scripts，Content scripts 分頁會列出來。這個頁籤無法做 Local overrides，若要修改其行為，可以在第一行下斷點，重整後再進行編輯。
Snippets#
Snippets 是用來儲存與執行任意 JavaScript 片段的工具：
- 透過
+ New snippet新增。 - 在 Snippet 上右鍵選擇
Run執行。
透過 Snippet 執行 JavaScript 享有 Console 的特性，例如 User activation、Console utilities。
Snippet 適合用來放小工具，例如列出頁面上所有圖片的 src、自動填表單。除了在 DevTools 裡執行，也可以把同樣的程式碼包成 javascript: 拖到瀏覽器書籤列：
javascript: alert(`Today is ${new Date().toDateString()}`);小結#
Workspace 提供四種不同層次的修改能力：Page 觀察、Filesystem 同步、Overrides 攔截覆寫、Snippets 執行片段。掌握之後，遇到「想改網頁行為卻不知道怎麼下手」的情境就有完整的工具箱。
下一章會延續這條線，深入介紹斷點的種類與實際應用。