實現在 Chrome 中執行 JavaScript 程式碼

2022-03-03 19:01:39

要在瀏覽器中執行 JavaScript 指令碼，首先你的瀏覽器得支援。現在主流推薦 Chrome 瀏覽器，也可以使用基於 Chromium的 Edge 瀏覽器。下面來介紹如何在 Chrome 中開啟開發者工具，以及如何在開發者工具中執行偵錯 JavaScript 程式碼。

一、開啟開發者工具

Chrome 中的開發者工具介面如下圖所示：

要開啟 Chrome 開發者工具來執行偵錯前端程式碼，常見的有 3 種方式。

在 Chrome 中開啟一個頁面之後，我們可以在頁面中單擊滑鼠右鍵，然後在選單中中選擇**“檢查”**，這樣就可以開啟開發者工具了。

同樣的，一般在 Chrome 中，可以直接通過 F12 快捷鍵來開啟開發者工具。

依次從右上角選單欄中選擇更多工具 -> 開發者工具開啟。當然，這裡也可以看到，其實我們也可以通過另一組快捷鍵來開啟（Ctrl + Shift + I）。如果你對 Chrome 足夠熟悉，那麼這也是一種可選的方式。

要在開發者工具中執行 JavaScript 程式碼，也主要可以利用兩種方式，一種是在 Console 視窗對 JavaScript 程式碼進行偵錯，而另一種方式則是使用 Chrome 中的 snippets 小指令碼來執行。

下面我將對這兩種方式分別做一個介紹，以便大家能熟練掌握。

在上面開啟開發者工具之後，我們會發現一個 Console 視窗，此時只要在 Console 視窗中 > 符號後邊輸入我們需要執行的程式碼，然後回車即可執行。

以下是兩個範例，第一個範例將會在控制檯中列印公眾號：村雨遙，而第二個範例則會在瀏覽器中彈窗並顯示公眾號：村雨遙。

console.log("公眾號：村雨遙");

window.alert("公眾號：村雨遙");

除開在 Console 視窗中執行 JavaScript 指令碼之外，我們還可以在 Chrome 中建立一個指令碼，然後再執行，具體方式如下。

在開發者工具中切換到 Sources 選單，然後選擇其中的 Snippets 索引標籤，接著點選下方的 + New snippet 來新建一個指令碼檔案。

我們可以對新建的指令碼檔案進行重新命名，然後在右側的框中編寫我們的 JavaScript 程式碼，編寫完成之後點選 Ctrl + Enter 即可執行，效果同在 Console 中一樣。

以下是一個 Snippet 指令碼執行範例，新建的指令碼執行後，先是彈窗，同時在 Console 介面列印出了內容。

window.alert("公眾號：村雨遙");
console.log("公眾號：村雨遙");

在建立的 Snippet 指令碼上單擊滑鼠右鍵，我們可以進行如下操作：

注意;

我們會發現開啟的 Chrome 開發者工具都是英文形式的，但實際上現在的 Chrome 開發者工具早已經支援中文。如果您對英文介面使用起來有所困難，可以通過以下的方式將開發者工具切換為簡體中文。

點選開發者工具右上角的 ⚙，然後選擇 Language 為 Chinese，也就是我們的中文，接著重新載入開發者工具即可。

總結:
以上就是今天的所有內容了，主要介紹瞭如何開啟 Chrome 中的開發者工具，並且利用開發者工具如何來執行 JavaScript 指令碼。

到此這篇關於實現在 Chrome 中執行 JavaScript 程式碼的文章就介紹到這了,更多相關 Chrome 中執行 JavaScript 內容請搜尋村雨遙以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援村雨遙！