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

Sofia Emelianova
Sofia Emelianova

本教學課程將透過建立工作區的方式練習 就能在自己的專案中使用Workspace 可讓您儲存在 利用開發人員工具找出儲存於電腦上的原始碼。

總覽

Workspace 可讓您將在開發人員工具中所做的變更儲存至相同檔案的本機副本: 您也能選擇重設 VM 這類似於按下電腦的重設按鈕舉例來說,假設:

  • 您在電腦上有網站原始碼,
  • 你是從原始碼目錄執行本機網路伺服器,因此網站可供存取 通知時間:localhost:8080
  • 你在 Google Chrome 中開啟 localhost:8080,代表你使用開發人員工具變更網站的 例如 CSS、CSS、CSS 和 JS。

啟用工作區後,您在開發人員工具中所做的 CSS 變更會儲存至原始碼 。

限制

如果您使用現代架構,則可能會轉換原始碼, 您可以輕鬆維護這個格式,並盡可能加快執行速度。工作區為 通常都能運用原始碼 地圖

開發人員工具社群致力於支援各種架構和工具的來源對應功能。 如果您透過自選架構使用工作區時遇到問題,或是啟動了工作區 完成自訂設定後,在郵寄清單中建立討論串提出問題 ,與開發人員工具社群的其他成員分享知識。

相關功能:本機覆寫

本機覆寫是另一項與工作區類似的開發人員工具功能, 使用本機覆寫功能模擬網頁內容或要求標頭,不必等待後端變更。 想對網頁進行實驗 而且需要在不同頁面上查看變更 但是您並不在意將變更對應至網頁的原始碼。

步驟 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 資料夾中設定工作區。上傳方式分為以下幾種:

    • 將資料夾拖曳至「來源」中的「編輯器」
    • 按一下「選取資料夾」連結,然後選取資料夾。
    • 按一下 加入訂單「Add folder」(新增資料夾),然後選取所需資料夾。「來源」和「工作區」分頁。
  3. 在頂端的提示中,按一下「Allow」,授權開發人員工具讀取及寫入目錄。

    提示中的「Allow」按鈕。

在「工作區」分頁中,index.htmlscript.jsstyles.css 旁邊現在有一個綠點。這些綠點代表開發人員工具已建立網頁網路資源與 devtools-workspace-demo 中的檔案之間的對應關係。

「工作區」分頁現在會顯示本機檔案與網路檔案之間的對應關係。

步驟 2:將 CSS 相關變更儲存至磁碟

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

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

  2. 關閉文字編輯器。

  3. 返回開發人員工具,然後按一下「Elements」Elements分頁標籤。

  4. <h1> 元素的 color 屬性值變更為您最愛的顏色。方法如下:

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

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

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

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

  6. 重新載入。請重新載入網頁。<h1> 元素的顏色仍會設為您最喜歡的顏色。這項功能可以正常運作 因為當您進行變更後,開發人員工具就儲存了磁碟的變更當您重新載入 Chrome 瀏覽器時 本機伺服器提供磁碟中的已修改檔案副本。

步驟 3:將 HTML 變更儲存到磁碟

嘗試在「元素」面板中變更 HTML

  1. 開啟「Elements」(元素)Elements 分頁。
  2. 按兩下 h1 元素的文字內容 (也就是 Workspaces Demo 的文字內容),然後將其取代 搭配 I ❤️ Cake

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

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

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

選用:為什麼無法運作

  • 「元素」Elements面板中顯示的節點樹狀結構代表網頁的 DOM
  • 為了顯示網頁,瀏覽器會在網路上擷取 HTML 並剖析 HTML,然後轉換成網頁 轉換為 DOM 節點樹狀結構
  • 如果網頁有任何 JavaScript,該 JavaScript 可能會新增、刪除或變更 DOM 節點。CSS 可以 透過 content 屬性變更 DOM。
  • 瀏覽器最終會使用 DOM 來判斷應向瀏覽器使用者顯示什麼內容。
  • 因此,使用者看到的網頁最終狀態可能與 瀏覽器擷取。
  • 導致開發人員工具難以解決「Elements」Elements面板中變更的位置 必須儲存,因為 DOM 會受到 HTML、JavaScript 和 CSS 影響。

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

從「來源」面板變更 HTML

如果您要儲存對網頁 HTML 所做的變更,請在「來源」面板中執行變更。

  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 變更儲存至磁碟

「來源」面板也是變更 JavaScript 的地方。不過有時候您需要 在進行變更時存取其他面板 (例如「元素」Elements面板或「控制台」Elements面板) 到你的網站你可以將「來源」面板與其他面板一起開啟。

  1. 開啟「Elements」(元素)Elements 分頁。
  2. 按下 Command + Shift + P 鍵 (Mac) 或 Control + Shift + P 鍵 (Windows、Linux、ChromeOS)。「Command」選單 開啟後,
  3. 輸入 QS,然後選取「Show Quick Source」。開發人員工具視窗底部現在 「快速來源」分頁。

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

    這個分頁顯示 index.html 的內容,也就是最後的內容 您在「來源」面板中編輯的檔案。「快速原始碼」分頁提供 「來源」面板:讓您在開啟其他面板時也能編輯檔案。

  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. 重新載入。請重新載入網頁。網頁上的連結現在是斜體。

網頁上的連結現在是斜體。

後續步驟

您可以在工作區中設定多個資料夾。如要查看所有這類資料夾,請依序點選 [設定] >Workspace

接下來,瞭解如何使用開發人員工具變更 CSS對 JavaScript 進行偵錯