Chrome 瀏覽器中執(zhí)行 JavaScript

本章節(jié)為大家介紹如何在 Chrome 瀏覽器上進行 JavaScript 代碼的運行與調(diào)試。

Chrome 是由 Google 開發(fā)的免費網(wǎng)頁瀏覽器,對于前端開發(fā)來說(尤其是調(diào)試代碼)非常方便。

Chrome 官網(wǎng)地址:https://www.google.com/intl/zh-CN/chrome/。

我們在 Chrome 瀏覽器中可以通過按下 F12 按鈕或者右擊頁面,選擇"檢查"來開啟開發(fā)者工具。

也可以在右上角菜單欄選擇 "更多工具"=》"開發(fā)者工具" 來開啟:

1、Console 窗口調(diào)試 JavaScript 代碼

打開開發(fā)者工具后,我們可以在 Console 窗口調(diào)試 JavaScript代碼,如下圖:

上圖中我們在 > 符號后輸入我們要執(zhí)行的代碼 console.log("runoob"),按回車后執(zhí)行。

我們也可以在其他地方復制一段代碼過來執(zhí)行,比如復制以下代碼到 Console 窗口,按回車執(zhí)行:

console.log("runoob-1")
console.log("runoob-2")

清空 Console 窗口到內(nèi)容可以按以下按鈕:


2、Chrome snippets 小腳本

我們也可以在 Chrome 瀏覽器中創(chuàng)建一個腳本來執(zhí)行,在開發(fā)者工具中點擊 Sources 面板,選擇 Snippets 選項卡,在導航器中右擊鼠標,然后選擇 Creat new snippet 來新建一個腳本文件:

如果你沒看到 Snippets ,可以點下面板上到 >> 就能看到了。

點擊 Creat new snippet 后,會自動創(chuàng)建一個文件,你只需在右側窗口輸入以下代碼,然后按 Command+S(Mac)或 Ctrl+S(Windows 和 Linux)保存更改即可。

console.log("runoob-1")
console.log("runoob-2")

保存后,右擊文件名,選擇 "Run" 執(zhí)行代碼: