實現在 Chrome 中執行 JavaScript 代碼

Posted on by

前言：

要在瀏覽器中執行 JavaScript 腳本，首先你的瀏覽器得支持。現在主流推薦 Chrome 瀏覽器，也可以使用基於 Chromium的 Edge 瀏覽器。下面來介紹如何在 Chrome 中打開開發者工具，以及如何在開發者工具中運行調試 JavaScript 代碼。

一、打開開發者工具

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

要打開 Chrome 開發者工具來運行調試前端代碼，常見的有 3 種方式。

1.右鍵“檢查”

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

2.快捷鍵 F12

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

3.菜單進入

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

二、開發者工具中執行 JavaScript 代碼

要在開發者工具中執行 JavaScript 代碼，也主要可以利用兩種方式，一種是在 Console 窗口對 JavaScript 代碼進行調試，而另一種方式則是使用 Chrome 中的 snippets 小腳本來執行。

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

1.Console 窗口執行

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

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

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



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

2.Snippet 腳本

除開在 Console 窗口中執行 JavaScript 腳本之外，我們還可以在 Chrome 中創建一個腳本，然後再執行，具體方式如下。

在開發者工具中切換到 Sources 菜單，然後選擇其中的 Snippets 選項卡，接著點擊下方的 + New snippet 來新建一個腳本文件。

我們可以對新建的腳本文件進行重命名，然後在右側的框中編寫我們的 JavaScript 代碼，編寫完成之後點擊 Ctrl + Enter 即可執行，效果同在 Console 中一樣。

以下是一個 Snippet 腳本執行實例，新建的腳本執行後，先是彈窗，同時在 Console 界面打印出瞭內容。

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

在創建的 Snippet 腳本上單擊鼠標右鍵，我們可以進行如下操作：

  • Run：運行，執行我們創建的腳本。
  • Rename：重命名，對我們創建的腳本進行重命名。
  • Remove：刪除，移除我們創建的腳本。
  • Save as：另存為，將我們創建的腳本導出。

註意;

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

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

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

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

推薦閱讀：