在工作區中編輯和儲存檔案

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

本教學課程讓您設定工作區，以便在自己的專案中使用。Workspace 可讓您將在 DevTools 中所做的變更儲存至儲存在電腦上的原始碼。

總覽

工作區可讓您將在 DevTools 中所做的變更，儲存至電腦上相同檔案的本機副本。舉例來說，假設：

  • 你在電腦上有網站的原始碼。
  • 您正從原始碼目錄執行本機網路伺服器，因此可透過 localhost:8080 存取該網站。
  • 你在 Google Chrome 中開啟 localhost:8080，目前使用開發人員工具變更網站的 CSS。

啟用工作區後，您在 DevTools 中所做的 CSS 變更就會儲存在電腦上的原始碼中。

限制

如果您使用的是現代架構，則可能會將原始碼轉換為容易維護的格式，以盡快執行。Workspace 通常能透過來源對應，將最佳化的程式碼對應回您的原始原始碼。

開發人員工具社群致力於支援來源對應在各種架構和工具中提供的功能。如果您在透過自選架構使用工作區時遇到問題，或是執行某些自訂設定後仍遇到問題，可以在郵寄清單中建立討論串，或是在 Stack Overflow 上提問，與開發人員工具社群的其他成員分享您的知識。

相關功能：本機覆寫

本機覆寫是另一項與工作區類似的開發人員工具功能，使用本機覆寫功能即可模擬網頁內容或要求標頭，而不需等待後端變更或想對網頁進行變更，而且您需要在網頁載入期間查看這些變更，但您不需要將變更對應至網頁原始碼。

步驟 1：設定

完成本教學課程，即可實際操作工作區。

設定示範模式

  1. 將這個示範存放區複製到電腦上的某個目錄。例如變更為 ~/Desktop。

  2. 在 ~/Desktop/devtools-workspace-demo 中啟動本機網路伺服器。以下是啟動 SimpleHTTPServer 的一些程式碼範例，但您可以使用自己偏好的伺服器。

    cd ~/Desktop/devtools-workspace-demo
# If your Python version is 3.X
# On Windows, try "python -m http.server" or "py -3 -m http.server"
python3 -m http.server
# If your Python version is 2.X
python -m SimpleHTTPServer

    在本教學課程的其餘部分，這個目錄會稱為 /devtools-workspace-demo。

  3. 在 Google Chrome 中開啟分頁，前往本機代管的網站。您應可透過 localhost:8000 的網址存取該網址。具體的通訊埠編號可能有所不同。

    本機代管的示範頁面是以 Chrome 開啟。

設定開發人員工具

  1. 在本機代管的示範頁面中開啟開發人員工具。

  2. 依序前往「來源」>「工作區」，然後在您複製的 devtools-workspace-demo 資料夾中設定工作區。您可以透過以下幾種方式執行此操作：

    • 將資料夾拖曳至「來源」中的「編輯器」。
    • 按一下「選取資料夾」連結，然後選取資料夾。
    • 按一下 加入訂單「新增資料夾」，然後選取資料夾。然後前往「工作區」分頁。

  3. 在頂端提示中，按一下「允許」，授予開發人員工具讀取及寫入目錄的權限。

    提示中的「允許」按鈕。

「工作區」分頁中的 index.html、script.js 和 styles.css 旁邊現在會顯示綠色圓點。這些綠點代表開發人員工具已建立網頁網路資源與 devtools-workspace-demo 中的檔案之間的對應關係。

Workspace 分頁現在會顯示本機檔案和網路檔案之間的對應關係。

步驟 2：將 CSS 變更儲存至磁碟

  1. 在文字編輯器中開啟 /devtools-workspace-demo/styles.css。請注意，h1 元素的 color 屬性已設為 fuchsia。

    在文字編輯器中查看 style.css。

  2. 關閉文字編輯器。

  3. 回到 DevTools，按一下「Elements」分頁標籤。

  4. 將 <h1> 元素的 color 屬性值變更為您偏好的顏色。方法如下：

    1. 按一下「DOM Tree」中的 <h1> 元素。
    2. 在「Styles」窗格中，找到 h1 { color: fuchsia } CSS 規則，然後將顏色變更為您常用的樣式。在本例中，顏色設為綠色。

    將 h1 元素的色彩屬性設為綠色。

    在「Styles」(樣式) 窗格中，styles.css:1 旁邊的綠點 綠點。 表示您所做的任何變更都對應到 /devtools-workspace-demo/styles.css。

  5. 再次在文字編輯器中開啟 /devtools-workspace-demo/styles.css。color 屬性現已設為您喜愛的顏色。

  6. 重新載入。請重新載入網頁。<h1> 元素的顏色仍會設為您最喜歡的顏色。這是因為當您進行變更後，開發人員工具已將變更儲存至磁碟。接著，當您重新載入網頁時，本機伺服器會提供磁碟中的已修改檔案副本。

步驟 3：將 HTML 變更儲存至磁碟

嘗試透過「元素」面板變更 HTML

  1. 開啟「元素」分頁。

  2. 按兩下 h1 元素的文字內容 (也就是 Workspaces Demo)，然後替換為 I ❤️ Cake。

    嘗試從「元素」面板的 DOM 樹狀結構變更 HTML。

  3. 在文字編輯器中開啟 /devtools-workspace-demo/index.html。您剛才所做的變更並未生效。

  4. 重新載入。請重新載入網頁。網頁會還原為原始標題。

選用：為何無法運作

  • 您在「Elements」面板中看到的節點樹狀結構代表網頁的 DOM。
  • 為了顯示網頁，瀏覽器會在網路上擷取 HTML、剖析 HTML，然後將 HTML 轉換為 DOM 節點的樹狀結構。
  • 如果網頁有任何 JavaScript，該 JavaScript 可能會新增、刪除或變更 DOM 節點。CSS 也能透過 content 屬性變更 DOM。
  • 瀏覽器最終會使用 DOM 來判斷應向瀏覽器使用者顯示什麼內容。
  • 因此，使用者看到的頁面最終狀態可能與瀏覽器所擷取的 HTML 有極大差異。
  • 由於 DOM 會受到 HTML、JavaScript 和 CSS 影響，因此開發人員工具中的變更儲存「Elements」面板中所做的變更應該更加困難。

簡單來說，DOM 樹狀結構 !== HTML。

從「來源」面板變更 HTML

如要儲存網頁 HTML 的變更，請在「Sources」面板中進行。

  1. 依序前往「來源」>「頁面」。
  2. 按一下「(索引)」。網頁的 HTML 程式碼會隨即開啟。
  3. 將 <h1>Workspaces Demo</h1> 替換為 <h1>I ❤️ Cake</h1>。
  4. 按下 Command + S 鍵 (Mac) 或 Control + S 鍵 (Windows、Linux、ChromeOS) 來儲存變更。

  5. 重新載入。請重新載入網頁。<h1> 元素仍會顯示新文字。

    在「來源」面板中變更 HTML

  6. 開啟 /devtools-workspace-demo/index.html。<h1> 元素包含新文字。

步驟 4：將 JavaScript 變更儲存至磁碟

您也可以在「Sources」面板中變更 JavaScript。但有時候，您需要存取其他面板 (例如「元素」面板或「控制台」面板)，才能對網站進行變更。您可以透過以下方法，讓「來源」面板與其他面板一併開啟。

  1. 開啟「元素」分頁。
  2. 按下 Command + Shift + P 鍵 (Mac) 或 Control + Shift + P 鍵 (Windows、Linux、ChromeOS)。指令選單隨即開啟。

  3. 輸入 QS，然後選取「顯示快速來源」。開發人員工具視窗底部現在會顯示「快速來源」分頁。

    正在透過指令選單開啟「快速來源」分頁。

    這個分頁會顯示 index.html 的內容，這是您在「Sources」面板中上次編輯的檔案。「Quick Source」分頁可讓您透過「Sources」面板的編輯器，在開啟其他面板時編輯檔案。

  4. 按下 Command + P 鍵 (Mac) 或 Control + P 鍵 (Windows、Linux、ChromeOS)，開啟「開啟檔案」對話方塊。

  5. 輸入 script，然後選取 devtools-workspace-demo/script.js。

    透過「開啟檔案」對話方塊開啟指令碼。

  6. 請注意示範影片中的 Edit and save files in a workspace 連結。保持時尚風格。

  7. 在「快速原始碼」分頁中，將以下程式碼新增至 script.js 的底部。

    document.querySelector('a').style = 'font-style:italic';

  8. 按下 Command + S 鍵 (Mac) 或 Control + S 鍵 (Windows、Linux、ChromeOS) 即可儲存變更。

  9. 重新載入。 重新載入頁面。網頁上的連結現在是斜體。

頁面上的連結現在已改為斜體。

後續步驟

您可以在工作區中設定多個資料夾。所有這類資料夾都會列在 的「Settings」>「Workspace」中。

接下來，我們將說明如何使用開發人員工具變更 CSS 和偵錯 JavaScript。