如何在 Chrome 中執(zhí)行 JavaScript 代碼
本文已同步至：https://cunyu1943.github.io，歡迎關(guān)注后續(xù)更新
前言
要在瀏覽器中執(zhí)行 JavaScript 腳本，首先你的瀏覽器得支持。現(xiàn)在主流推薦 Chrome 瀏覽器，也可以使用基于 Chromium 的 Edge 瀏覽器。下面來介紹如何在 Chrome 中打開開發(fā)者工具，以及如何在開發(fā)者工具中運(yùn)行調(diào)試 JavaScript 代碼。
打開開發(fā)者工具
Chrome 中的開發(fā)者工具界面如下圖所示。
要打開 Chrome 開發(fā)者工具來運(yùn)行調(diào)試前端代碼，常見的有 3 種方式。
右鍵“檢查”
在 Chrome 中打開一個頁面之后，我們可以在頁面中單擊鼠標(biāo)右鍵，然后在菜單中中選擇“檢查”，這樣就可以打開開發(fā)者工具了。
快捷鍵 F12
同樣的，一般在 Chrome 中，可以直接通過?F12?快捷鍵來打開開發(fā)者工具。
菜單進(jìn)入
依次從右上角菜單欄中選擇?更多工具 -> 開發(fā)者工具?開啟。當(dāng)然，這里也可以看到，其實(shí)我們也可以通過另一組快捷鍵來開啟（Ctrl + Shift + I）。如果你對 Chrome 足夠熟悉，那么這也是一種可選的方式。
開發(fā)者工具中執(zhí)行 JavaScript 代碼
要在開發(fā)者工具中執(zhí)行 JavaScript 代碼，也主要可以利用兩種方式，一種是在?Console?窗口對 JavaScript 代碼進(jìn)行調(diào)試，而另一種方式則是使用 Chrome 中的 snippets 小腳本來執(zhí)行。
下面我將對這兩種方式分別做一個介紹，以便大家能熟練掌握。
Console 窗口執(zhí)行
在上面打開開發(fā)者工具之后，我們會發(fā)現(xiàn)一個 Console 窗口，此時只要在 Console 窗口中?>?符號后邊輸入我們需要執(zhí)行的代碼，然后回車即可執(zhí)行。
以下是兩個實(shí)例，第一個實(shí)例將會在控制臺中打印公眾號：村雨遙，而第二個實(shí)例則會在瀏覽器中彈窗并顯示公眾號：村雨遙。
console.log("公眾號：村雨遙");
window.alert("公眾號：村雨遙");
Snippet 腳本
除開在 Console 窗口中執(zhí)行 JavaScript 腳本之外，我們還可以在 Chrome 中創(chuàng)建一個腳本，然后再執(zhí)行，具體方式如下。
在開發(fā)者工具中切換到 Sources 菜單，然后選擇其中的?Snippets?選項卡，接著點(diǎn)擊下方的?+ New snippet?來新建一個腳本文件。
我們可以對新建的腳本文件進(jìn)行重命名，然后在右側(cè)的框中編寫我們的 JavaScript 代碼，編寫完成之后點(diǎn)擊?Ctrl + Enter?即可執(zhí)行，效果同在 Console 中一樣。
以下是一個 Snippet 腳本執(zhí)行實(shí)例，新建的腳本執(zhí)行后，先是彈窗，同時在 Console 界面打印出了內(nèi)容。
window.alert("公眾號：村雨遙");
console.log("公眾號：村雨遙");
在創(chuàng)建的 Snippet 腳本上單擊鼠標(biāo)右鍵，我們可以進(jìn)行如下操作：
Run：運(yùn)行，執(zhí)行我們創(chuàng)建的腳本。 Rename：重命名，對我們創(chuàng)建的腳本進(jìn)行重命名。 Remove：刪除，移除我們創(chuàng)建的腳本。 Save as：另存為，將我們創(chuàng)建的腳本導(dǎo)出。
注意
我們會發(fā)現(xiàn)打開的 Chrome 開發(fā)者工具都是英文形式的，但實(shí)際上現(xiàn)在的 Chrome 開發(fā)者工具早已經(jīng)支持中文。如果您對英文界面使用起來有所困難，可以通過以下的方式將開發(fā)者工具切換為簡體中文。
點(diǎn)擊開發(fā)者工具右上角的 ?，然后選擇?Language?為?Chinese，也就是我們的中文，接著重新載入開發(fā)者工具即可。
總結(jié)
以上就是今天的所有內(nèi)容了，主要介紹了如何打開 Chrome 中的開發(fā)者工具，并且利用開發(fā)者工具如何來執(zhí)行 JavaScript 腳本。
如果您覺得本文還不錯，歡迎點(diǎn)贊、收藏、轉(zhuǎn)發(fā)，您的關(guān)注是我堅持的最大動力！