前言：

要在瀏覽器中執(zhí)行 JavaScript 腳本，首先你的瀏覽器得支持?，F(xiàn)在主流推薦 Chrome 瀏覽器，也可以使用基于 Chromium的 Edge 瀏覽器。下面來介紹如何在 Chrome 中打開開發(fā)者工具，以及如何在開發(fā)者工具中運行調(diào)試 JavaScript 代碼。

一、打開開發(fā)者工具

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

要打開 Chrome 開發(fā)者工具來運行調(diào)試前端代碼，常見的有 3 種方式。

1.右鍵“檢查”

在 Chrome 中打開一個頁面之后，我們可以在頁面中單擊鼠標(biāo)右鍵，然后在菜單中中選擇**“檢查”**，這樣就可以打開開發(fā)者工具了。

2.快捷鍵 F12

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

3.菜單進(jìn)入

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

二、開發(fā)者工具中執(zhí)行 JavaScript 代碼

要在開發(fā)者工具中執(zhí)行 JavaScript 代碼，也主要可以利用兩種方式，一種是在 Console 窗口對 JavaScript 代碼進(jìn)行調(diào)試，而另一種方式則是使用 Chrome 中的 snippets 小腳本來執(zhí)行。

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

1.Console 窗口執(zhí)行

在上面打開開發(fā)者工具之后，我們會發(fā)現(xiàn)一個 Console 窗口，此時只要在 Console 窗口中 > 符號后邊輸入我們需要執(zhí)行的代碼，然后回車即可執(zhí)行。

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

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

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

2.Snippet 腳本

除開在 Console 窗口中執(zhí)行 JavaScript 腳本之外，我們還可以在 Chrome 中創(chuàng)建一個腳本，然后再執(zhí)行，具體方式如下。

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

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

以下是一個 Snippet 腳本執(zhí)行實例，新建的腳本執(zhí)行后，先是彈窗，同時在 Console 界面打印出了內(nèi)容。

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

在創(chuàng)建的 Snippet 腳本上單擊鼠標(biāo)右鍵，我們可以進(jìn)行如下操作：

• Run：運行，執(zhí)行我們創(chuàng)建的腳本。
• Rename：重命名，對我們創(chuàng)建的腳本進(jìn)行重命名。
• Remove：刪除，移除我們創(chuàng)建的腳本。
• Save as：另存為，將我們創(chuàng)建的腳本導(dǎo)出。

注意;

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

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

總結(jié):
以上就是今天的所有內(nèi)容了，主要介紹了如何打開 Chrome 中的開發(fā)者工具，并且利用開發(fā)者工具如何來執(zhí)行 JavaScript 腳本。

到此這篇關(guān)于實現(xiàn)在 Chrome 中執(zhí)行 JavaScript 代碼的文章就介紹到這了,更多相關(guān) Chrome 中執(zhí)行 JavaScript 內(nèi)容請搜索村雨遙以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持村雨遙！

最新評論