日韩欧美国产精品免费一二-日韩欧美国产精品亚洲二区-日韩欧美国产精品专区-日韩欧美国产另-日韩欧美国产免费看-日韩欧美国产免费看清风阁

還是老規(guī)矩，工欲善其事，必先利其器。來看看 JavaScript 開發(fā)環(huán)境的準備。

客戶端的 JavaScript 的學習，只要有編輯器和瀏覽器就足夠了，不需要安裝其它。

代碼編輯器 VSCode

依然沿用學習 HTML 和 CSS 時的編輯器 VSCode，如果還沒有準備，參考 HTML 入門準備和 CSS 入門準備做相應準備。

在確保安裝了 VSCode 之后，安裝以下三個插件。

1. 安裝必要的擴展：

   打開 VSCode，點擊左側(cè)的擴展圖標。

   在搜索框中輸入“JavaScript”，確保安裝了以下推薦的擴展：

ESLint：用于代碼檢查和格式化。



Prettier - Code formatter：用于代碼美化。



Live Server：前面已經(jīng)用過，它用于實時預覽網(wǎng)頁文件。



2. 配置 VSCode，自動格式化代碼：

打開 VSCode，點擊左下角的齒輪圖標，然后選擇“Settings”。



在搜索框中輸入“format on save”，勾選“Editor: Format On Save”選項，這樣每次保存文件時，代碼都會自動格式化。

瀏覽器開發(fā)者工具

JavaScript 的學習，搭配瀏覽器的開發(fā)工具，可以更好地調(diào)試和分析 JavaScript 代碼。

1. 打開開發(fā)者工具：

• 在 Chrome 瀏覽器中，按下 F12 或 Ctrl+Shift+I（Windows）/Cmd+Option+I（Mac）打開開發(fā)者工具。

• 你會看到一個分為多個標簽頁的面板，常用的標簽頁包括“Elements”、“Console”、“Sources”、“Network”等。

2. 使用 Console 標簽頁：

• 在“Console”標簽頁中，你可以輸入和執(zhí)行 JavaScript 代碼，查看輸出結果。

• 例如，輸入 console.log('Hello, world!'); 然后按下回車鍵，你會在控制臺中看到輸出的“Hello, world!”。

3. 調(diào)試 JavaScript 代碼：

• 在“Sources”標簽頁中，你可以查看和調(diào)試頁面中的 JavaScript 代碼。

• 你可以在代碼行號處點擊，設置斷點（breakpoint），然后刷新頁面，當代碼執(zhí)行到斷點處時，程序會暫停，你可以逐步執(zhí)行代碼，查看變量的值和執(zhí)行流程。

目前只要熟悉以上這三個基本功能即可。

總結

• ?? 客戶端的 JavaScript 的學習，只要有編輯器和瀏覽器就足夠了。

• ?? 使用 VS Code 作為編輯器，并安裝 ESLint、Prettier 和 Live Server 擴展。

• ?? 使用 F12 打開瀏覽器的開發(fā)者工具，在 Console 里可以執(zhí)行 JavaScript 代碼。