Javascript 開發(fā)者控制臺(tái)

代碼是很容易出現(xiàn)錯(cuò)誤的。你也很可能犯錯(cuò)誤……哦，我在說什么？只要你是人，你 一定 會(huì)犯錯(cuò)誤（在寫代碼的時(shí)候），除非你是 機(jī)器人。

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

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

通常，開發(fā)者傾向于使用 Chrome 或 Firefox 進(jìn)行開發(fā)，因?yàn)樗鼈冇凶詈玫拈_發(fā)者工具。一些其它的瀏覽器也提供開發(fā)者工具，有時(shí)還具有一些特殊的功能，通常它們都是在“追趕” Chrome 或 Firefox。所以大多數(shù)人都有“最喜歡”的瀏覽器，當(dāng)遇到某個(gè)瀏覽器獨(dú)有的問題的時(shí)候，人們就會(huì)切換到其它的瀏覽器。

開發(fā)者工具很強(qiáng)大，功能豐富。首先，我們將學(xué)習(xí)如何打開它們，查找錯(cuò)誤和運(yùn)行 JavaScript 命令。

Google Chrome

打開網(wǎng)頁 bug.html。

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

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

默認(rèn)情況下，開發(fā)者工具會(huì)被在 Console 標(biāo)簽頁中打開。

就像這樣：

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

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

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

現(xiàn)在，我們能看到錯(cuò)誤就夠了。稍后，在 在瀏覽器中調(diào)試 一節(jié)中，我們會(huì)重新更加深入地學(xué)習(xí)開發(fā)者工具。

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

Firefox、Edge 和其它瀏覽器

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

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

Safari

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

打開“偏好設(shè)置”，選擇“高級(jí)”選項(xiàng)。選中最下方的那個(gè)選擇框：

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

總結(jié)

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

現(xiàn)在我們的環(huán)境準(zhǔn)備好了。下一章，我們將正式開始學(xué)習(xí) JavaScript。