Javascript 開發(fā)者控制臺

代碼是很容易出現錯誤的。你也很可能犯錯誤……哦，我在說什么？只要你是人，你 一定 會犯錯誤（在寫代碼的時候），除非你是 機器人。

但在瀏覽器中，默認情況下用戶是看不到錯誤的。所以，如果腳本中有錯誤，我們看不到是什么錯誤，更不能夠修復它。

為了發(fā)現錯誤并獲得一些與腳本相關且有用的信息，瀏覽器內置了“開發(fā)者工具”。

通常，開發(fā)者傾向于使用 Chrome 或 Firefox 進行開發(fā)，因為它們有最好的開發(fā)者工具。一些其它的瀏覽器也提供開發(fā)者工具，有時還具有一些特殊的功能，通常它們都是在“追趕” Chrome 或 Firefox。所以大多數人都有“最喜歡”的瀏覽器，當遇到某個瀏覽器獨有的問題的時候，人們就會切換到其它的瀏覽器。

開發(fā)者工具很強大，功能豐富。首先，我們將學習如何打開它們，查找錯誤和運行 JavaScript 命令。

Google Chrome

打開網頁 bug.html。

在這個頁面的 JavaScript 代碼中有一個錯誤。一般的訪問者看不到這個錯誤，所以讓我們打開開發(fā)者工具看看吧。

按下 ?F12? 鍵，如果你使用 Mac，試試 ?Cmd+Opt+J?。

默認情況下，開發(fā)者工具會被在 Console 標簽頁中打開。

就像這樣：

具體什么樣，要看你的 Chrome 版本。它隨著時間一直在變，但是都很類似。

• 在這我們能看到紅色的錯誤提示信息。這個場景中，腳本里有一個未知的 “l(fā)alala” 命令。
• 在右邊，有個可點擊的鏈接 ?bug.html:12?。這個鏈接會鏈接到錯誤發(fā)生的行號。

在錯誤信息的下方，有個 ?>? 標志。它代表“命令行”，在“命令行”中，我們可以輸入 JavaScript 命令，按下 ?Enter ?來執(zhí)行。

現在，我們能看到錯誤就夠了。稍后，在 在瀏覽器中調試 一節(jié)中，我們會重新更加深入地學習開發(fā)者工具。

通常，當我們向控制臺輸入一行代碼后，按 ?Enter?，這行代碼就會立即執(zhí)行。
如果想要插入多行代碼，請按 ?Shift+Enter? 來進行換行。這樣就可以輸入長片段的 JavaScript 代碼了。

Firefox、Edge 和其它瀏覽器

大多數其它的瀏覽器都是通過 ?F12 ?來打開開發(fā)者工具。

它們的外觀和感覺都非常相似，一旦你學會了它們中的一個（可以先嘗試 Chrome），其它的也就很快就可以熟悉了。

Safari

Safari（Mac 系統(tǒng)中的瀏覽器，Windows 和 Linux 系統(tǒng)不支持）有一點點不同。我們需要先開啟“開發(fā)菜單”。

打開“偏好設置”，選擇“高級”選項。選中最下方的那個選擇框：

現在，我們通過 ?Cmd+Opt+C? 就能打開或關閉控制臺了。另外注意，有一個名字為“開發(fā)”的頂部菜單出現了。它有很多命令和選項。

總結

• 開發(fā)者工具允許我們查看錯誤、執(zhí)行命令、檢查變量等。
• 在 Windows 系統(tǒng)中，可以通過 ?F12 ?開啟開發(fā)者工具。Mac 系統(tǒng)下，Chrome 需要使用 ?Cmd+Opt+J?，Safari 使用 ?Cmd+Opt+C?（需要提前開啟）。

現在我們的環(huán)境準備好了。下一章，我們將正式開始學習 JavaScript。