使用快速來源工具顯示或編輯來源檔案

使用 [快速來源 ] 工具，在顯示 [ 來源 ] 工具以外的工具的同時，也可顯示或編輯來源檔案。 [ 快速來源 ] 工具會永遠顯示在 [來源 ] 工具中開啟的相同檔案。

在開發工具中查看來源檔案的主要位置位於 [來源 ] 工具中。 但有時您需要在查看或編輯源文件時訪問其他工具，例如 Elements 或 控制台。 使用 快速來源 工具，預設會在 DevTools 底部的 [快速檢視 ] 面板中開啟。

搭配使用 [快速來源] 工具與 [來源] 工具

若要在開發工具底部的快速檢視中顯示快速來源工具，來源工具以外的工具必須在開發工具頂端的活動列中開啟。

快速來源工具可讓您替代顯示在 [來源] 工具中開啟的檔案。 快速來源工具具有功能子集。 如需完整功能，請使用 來源 工具。

如果您在一個工具中開啟或關閉檔案，則會在另一個工具中開啟或關閉檔案。 在這兩個工具中，每個開啟的檔案都有一個索引標籤。

透過選取 [工作區] 資料夾，在 DevTools 中編輯本機來源檔案

這是端對端教學課程，其中包含示範快速 來源 工具的所有步驟，方法是使用 MicrosoftEdge/示範 存放庫中的 ToDo Web 應用程式。

在 [來源] 工具中選取本機資料夾做為 [工作區]，您就可以在顯示不同工具的同時，從「快速來源」工具中編輯檔案，並將這些編輯儲存到您的本機磁碟機。 如此一來，您就可以在使用其他工具 （例如 Elements 或 Network） 時，在快速來源工具中編輯檔案，並將您的編輯儲存到本機磁碟機上對應的來源檔案。

若要在 快速來源 工具中編輯來源檔案，您必須執行下列動作：

1. 能夠在本機存取網頁來源檔案，例如複製的存放庫。

2. 在 [來源] () 工具的 [工作區] 索引標籤中，新增來源檔案的本機資料夾。

3. 在 [工作區 ] 索引標籤中，開啟檔案，例如 .js 檔案。

4. 在 [活動列] 中，選取 [來源] 工具以外的工具，例如 [元素] 工具。

5. 在 [開發工具] 底部的 [ 快速檢視 ] 面板中，開啟 快速來源 工具。 開啟的 .js 檔案會顯示在簡化的編輯器中，而且 [元素] 工具仍會顯示。

這些步驟會在下列教學課程中詳細說明。

有本機來源檔案，例如複製的存放庫

若要使用 [快速來源 ] 工具在本機儲存變更，您必須具有與網頁伺服器檔案相符的本機來源檔案。 請確定本機磁碟機上是否有與網頁伺服器傳回的暫時性檔案相符的來源檔案。

例如，如果尚未完成，請將 MicrosoftEdge/Demos 存放庫複製到本機磁碟機，如下所示：

1. 如果尚未完成， 請下載 git 並安裝它。

2. 如果尚未完成，請從 Node.js安裝最新版本的 Node.js 和 npm。

3. 在新的視窗或索引標籤中移至 MicrosoftEdge/Demos 存放庫。

4. 按一下 [代碼 ] 下拉式按鈕。

5. 按一下 [將 URL 複製到剪貼簿 ] 按鈕。

   

   URL 隨即會複製到剪貼簿： https://github.com/MicrosoftEdge/Demos.git

   或者，如果您已安裝 GitHub Desktop，請按一下 [ 使用 GitHub Desktop 開啟 ] 以複製存放庫，並略過下面的命令提示字元步驟。

   或者，您可以使用 Visual Studio Code 的 [原始檔控制] 窗格來複製存放庫，並略過下方的命令提示字元步驟。

6. 假設您已安裝 Git，請開啟命令提示字元。

7. 輸入您從 GitHub 存放庫複製的 URL 字串，將存放庫複製到本機磁碟機。 如果您使用命令提示字元：

   # example location where the repo directory will be added:
   cd ~/GitHub
   git clone https://github.com/MicrosoftEdge/Demos.git
   

   如需複製存放庫的詳細資訊，請參閱：

   • 在開發工具的範例程式碼中，將「MicrosoftEdge / Demos」存放庫複製到磁碟機。
   • 在設定 WebView2 的開發環境中複製 WebView2Samples 存放庫。 顯示不同的範例存放庫，但顯示數個工具的步驟。
   • 複製存放庫 - GitHub 文件。

現在您擁有一個本機資料夾，裡面有來源檔案 (例如 /demo-to-do/) ，可與網頁伺服器上的檔案相符。

繼續下一節。

啟動 localhost 伺服器

1. 移至命令提示字元，例如 git bash 殼層或 Microsoft Visual Studio Code 中的終端機窗格。

2. 移至複製的 /demo-to-do/ 目錄，例如 C:\Users\localAccount\GitHub\Demos\demo-to-do\。

   如果您使用 git bash shell，則它是 UNIX shell，因此即使在 Windows 上，您也需要將帶有反斜線的目錄路徑括在引號中，或者使用正斜線而不是反斜線。

3. 建立名為 “test” 的工作分支並切換到該分支， (以避免變更 “main” 分支中的演示文件) ：

   git checkout -b test
   

   這相當於：

   git branch test
   git switch test
   

4. 執行下列其中一個命令，以啟動網頁伺服器：

   # Node.js option
   cd ~/GitHub/demos/demo-to-do
   npx http-server  # Node.js
   

   如需詳細資訊和選項，請參閱安裝適用於 Visual Studio Code 的開發工具延伸模組中的啟動伺服器 (npx http-server) 。

   # Python 2 option
   cd ~/GitHub/demos/demo-to-do
   python -m SimpleHTTPServer  # Python 2
   

   # Python 3 option
   cd ~/GitHub/demos/demo-to-do
   python -m http.server  # Python 3
   

5. 在 Microsoft Edge 中開啟索引標籤，然後移至網站的本機託管版本。 您應該能夠使用以下 localhost:8080方式存取它：

   

   另一個常見的對等 URL 是 http://0.0.0.0:8080。 Python 伺服器選項的預設連接埠號碼為 8000。 確切的 連接埠號碼 可能不同。

   DevTools 工作區示範網頁隨即開啟。

另請參閱:

• 執行簡單的本機 HTTP 伺服器如何設定本機測試伺服器？ at MDN - 顯示 Python。

繼續下一節。

選取來源檔案的本機資料夾作為工作區

1. 從上方繼續，以滑鼠右鍵按一下示範網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

2. 在開發工具頂端的 [活動列] 中，選取 [來源] ) 工具，選取與 [頁面] 索引標籤) 分組 ([工作區] 索引標籤，然後在 [工作區] 索引標籤中，按一下 [新增資料夾] 按鈕。

   [ 選取資料夾] 對話方塊隨即開啟。

3. 瀏覽至資料夾，例如 C:\Users\localAccount\GitHub\Demos\demo-to-do，然後按一下 [選取資料夾 ] 按鈕。

   在 DevTools 頂端，會有一則訊息顯示 DevTools 要求路徑的完整<>存取權。

4. 按一下 [允許 ] 按鈕。

   檔案樹demo-to-do狀目錄會出現在 [來源] 工具的 [工作區] 索引標籤中。 HTML、JS 和 CSS 檔案有一個綠色的「對應」點。

5. 在 [工作區 ] 索引標籤中，展開檔案樹狀目錄，然後按一下一或多個檔案，例如 to-do.js。

   檔案隨即會在 [來源] 工具中開啟：

   

開啟快速來源工具並編輯檔案

假設您想要繼續檢視 「元素」 工具，但想要同時檢視和編輯透過 「來源」 工具開啟的來源檔案。

1. 從上方繼續，在 DevTools 頂端的 [活動列 ] 中，選取 [ 來源 ] ([ ) 工具以外的工具，例如 [元素] ([ ) 工具。

2. 如果 [開發工具] 底部未顯示 [ 快速檢視 ] 工具列，請按 Esc。

3. 在開發工具底部的 [ 快速檢視 ] 工具列中，按一下 [ 其他工具 ] 按鈕，然後選取 [ 快速來源]。

   快速來源工具會在開發工具底部的快速檢視中開啟：

   

   todo.js 顯示，因為該檔案已在 [來源 ] 工具中開啟。

4. 在示範 [待辦事項] 網頁中，刪除任何工作。

5. 按一下 [快速來源 ] 面板，然後按 Ctrl+F。

   在 快速來源 工具中，隨即顯示 [尋找 UI]。

6. 未輸入 任何工作，然後按 Enter。

7. 在程式碼行中，變更 no tasks 為 0 tasks。

   [檔案名稱] 索引標籤上會出現星號。

8. 按 Ctrl+S。

   星號會從檔案名稱索引標籤中移除。

9. 重新整理示範網頁 (Ctrl+R) 。

10. 如果轉譯的網頁沒有從「否」變更為「0」，且 JS 檔案名稱索引標籤上不再有綠色「對應」點，請長按或以滑鼠右鍵按一下 Microsoft Edge 中的 「重新整理 」按鈕，然後選取 [ 硬重新整理] (Ctrl+Shift+R) 。

    轉譯的網頁會從「否」變更為「0」，且 JS 檔案名稱索引標籤上有一個綠色的「對應」點。

    

現在，當您在開發工具中編輯資料夾的檔案時，編輯不僅會對伺服器傳回的暫時檔案進行，也會儲存到本機磁碟機上的來源檔案。 您可以在顯示其他工具 (的同時，從 [快速來源 ] 工具中編輯檔案，或從 [來源 ] 工具) 中編輯檔案。

教學課程步驟到此結束。

另請參閱:

• 在 [來源工具概觀] 中，使用 DevTools 編輯檔案並儲存對磁碟的變更，請將本機資料夾新增至工作區。
• 編輯和儲存工作區中的檔案 (來源工具 工作區索引標籤)
  • 步驟 6：在工作區中將 JavaScript 變更儲存至磁碟教學課程 (來源工具 工作區索引標籤)

使用命令功能表開啟檔案

使用 [命令功能表 ] 開啟檔案，會在 [快速來源 ] 工具和 [來源 ] 工具中開啟該檔案。

若要開啟 命令功能表，請執行下列任一動作：

• 選取 自訂和控制開發工具>執行命令。

• Windows (按 Ctrl+Shift+P，Linux) 或 macOS) (按 Command+Shift+P。

• 在空白快速來源工具 (或來源工具) 中，按一下 [執行] 命令連結。

若要使用命令功能表的 [開啟檔案] 提示字元開啟檔案，請執行下列任一動作：

• 選取 [來源] 工具[其他選項] (> [頁面] 索引標籤) >[開啟檔案] 旁。

• 選取 自訂和控制開發工具>開啟檔案。

• Windows (按 Ctrl+P，Linux) 按 Ctrl+P，macOS) (按 Command+P。

• 當 [快速來源 工具] (或 [來源 工具]) 為空時，按一下工具中指示中的 [ 開啟檔案 ] 連結：

  

  顯示命令功能表的 [開啟檔案] 提示。

  若要在面板的指示中顯示 [ 開啟檔案 ] 連結，您可能需要向下捲動，或將 快速檢視 分隔線向上拖曳，以使 快速檢視 面板較高。

快速來源工具中的鍵盤快速鍵

快速來源工具具有簡化的 UI。 使用下列鍵盤快速鍵。

• Ctrl+F - 尋找。

• Ctrl+S - 儲存。 如果 HTML、JS 或 CSS 檔案名稱上不再有綠色「對應」點，請長按或以滑鼠右鍵按一下 Microsoft Edge 中的 [重新整理 ] 按鈕，然後選取 [ 硬重新整理] (Ctrl+Shift+R) 。

• Ctrl+P - 使用 命令功能表開啟檔案。 這與移至 [來源 ] 工具，然後按一下 [工作區 ] 索引標籤中的檔案相同。

關閉檔案

若要關閉檔案，請按一下檔案索引標籤中的 x 按鈕。

檔案會在 快速來源 工具和 來源 工具中關閉。

另請參閱

• 來源工具概觀
  • 快速來源工具，在使用其他工具時顯示來源檔案 [ 來源工具概觀]
  • 使用 [變更] 工具追蹤檔案變更