在瀏覽器中編輯 JavaScript
你可以使用瀏覽器編輯和儲存 JavaScript 原始碼檔案中的更改。通常，開發人員需要在執行時實時除錯程式碼。藉助瀏覽器的開發者工具，我們可以輕鬆地編輯我們本地儲存的檔案並除錯我們的程式碼。
本文將討論 Google Chrome 和 Mozilla Firefox 等流行瀏覽器中開發人員工具的功能，以及如何使用該功能來編輯我們的 JavaScript 檔案。
在 Google Chrome 中編輯 JavaScript
谷歌瀏覽器提供了最有效和最優秀的方式來更改 JavaScript 程式碼。我們還可以將資料夾與 Google Chrome 開發人員工具的工作區相關聯。
我們執行幾個步驟來使用此功能。按照以下步驟更好地瞭解開發人員工具。
-
啟動開發者工具
在 Google Chrome 上載入 JavaScript 本地/伺服器檔案。轉到
選單>>更多工具，你將看到開發者工具選項或按快捷鍵 (F12) 開啟開發者工具。 -
源標籤頁
瀏覽原始碼標籤，檢查檔案資源管理器以確定我們正在尋找哪個檔案進行更改。我們可以編輯和更改我們的檔案，但是如果我們重新整理或重新載入頁面，我們會丟失所有更改。
如果你擔心，沒有問題，因為我們可以在接下來的步驟中儲存我們的更改。
-
與工作區的資料夾關聯
通過單擊檔案系統標籤頁將資料夾新增到工作區，谷歌瀏覽器將要求確認，我們需要允許訪問許可權。通過單擊，我們可以從資源管理器中開啟我們系統的檔案。
-
編輯和儲存
最後，我們現在可以編輯程式碼並按下 CTRL + S 鍵儲存更改，然後重新整理瀏覽器。
在 Mozilla Firefox 中編輯 JavaScript
Mozilla Firefox 為我們提供了其他外掛來編輯瀏覽器內的 JavaScript 以實現相同的功能。
我們將通過幾個步驟來研究 Firebug 等功能如何除錯 JavaScript 程式碼。我們還可以檢視突出顯示的語法錯誤。
-
安裝 Firebug 外掛
首先，我們需要從選單中的附加主題安裝 Firebug 外掛。從選單中，導航到外掛並按名稱
Firebug搜尋並安裝。 -
建立並開啟要編輯的頁面
我們可以在寫字板、記事本等中編寫我們的 JavaScript 程式碼。
我們需要載入我們建立的 HTML 頁面並開啟 Firebug 控制檯來建立一個 HTML 檔案。然後導航到指令碼標籤頁以檢視該頁面源的 JavaScript 程式碼。
-
斷點除錯
要終止程式碼執行，我們可以使用斷點；我們還可以指定程式碼範圍以視覺化錯誤。這對於除錯非常有用。
-
更新更改的變數
我們可以點選 Step over 按鈕； Firebug 會更新所有變數，直到我們終止斷點的執行。檢視 Firebug 控制檯在 Watch Window 上顯示的值。
-
檢視/載入更改
最後，重新載入頁面檢視檔案更改並按CTRL + R快捷鍵。