在瀏覽器中編輯 JavaScript

Muhammad Muzammil Hussain 2023年1月30日 2022年5月5日
  1. 在 Google Chrome 中編輯 JavaScript
  2. 在 Mozilla Firefox 中編輯 JavaScript
在瀏覽器中編輯 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快捷鍵。

相關文章 - JavaScript Browser