快捷導(dǎo)航

實(shí)現(xiàn)在?Chrome?中執(zhí)行?JavaScript?代碼

更新時(shí)間：2022年03月03日 17:21:39 作者：村雨遙

這篇文章主要介紹了實(shí)現(xiàn)在?Chrome?中執(zhí)行?JavaScript?代碼，下面來(lái)介紹如何在?Chrome?中打開開發(fā)者工具，以及如何在開發(fā)者工具中運(yùn)行調(diào)試?JavaScript?代碼，具有一的的參考價(jià)值,需要的朋友可以參考一下

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

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

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

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

1.右鍵“檢查”

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

2.快捷鍵 F12

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

3.菜單進(jìn)入

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

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

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

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

1.Console 窗口執(zhí)行

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

以下是兩個(gè)實(shí)例，第一個(gè)實(shí)例將會(huì)在控制臺(tái)中打印公眾號(hào)：村雨遙，而第二個(gè)實(shí)例則會(huì)在瀏覽器中彈窗并顯示公眾號(hào)：村雨遙。

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

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

2.Snippet 腳本

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

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

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

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

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

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

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

注意;

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

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

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

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

您可能感興趣的文章: