代碼是很容易出現錯誤的。妳也很可能犯錯誤……哦,我在說什麽?只要妳是人,妳 壹定 會犯錯誤(在寫代碼的時候),除非妳是 機器人。
但在浏覽器中,默認情況下用戶是看不到錯誤的。所以,如果腳本中有錯誤,我們看不到是什麽錯誤,更不能夠修複它。
爲了發現錯誤並獲得壹些與腳本相關且有用的信息,浏覽器內置了“開發者工具”。
通常,開發者傾向于使用 Chrome 或 Firefox 進行開發,因爲它們有最好的開發者工具。壹些其它的浏覽器也提供開發者工具,有時還具有壹些特殊的功能,通常它們都是在“追趕” Chrome 或 Firefox。所以大多數人都有“最喜歡”的浏覽器,當遇到某個浏覽器獨有的問題的時候,人們就會切換到其它的浏覽器。
開發者工具很強大,功能豐富。首先,我們將學習如何打開它們,查找錯誤和運行 JavaScript 命令。
打開網頁 bug.html。
在這個頁面的 JavaScript 代碼中有壹個錯誤。壹般的訪問者看不到這個錯誤,所以讓我們打開開發者工具看看吧。
按下F12鍵,如果妳使用 Mac,試試Cmd+Opt+J。
默認情況下,開發者工具會被在 Console 標簽頁中打開。
就像這樣:
具體什麽樣,要看妳的 Chrome 版本。它隨著時間壹直在變,但是都很類似。
在這我們能看到紅色的錯誤提示信息。這個場景中,腳本裏有壹個未知的 “lalala” 命令。
在右邊,有個可點擊的鏈接 bug.html:12
。這個鏈接會鏈接到錯誤發生的行號。
在錯誤信息的下方,有個 >
標志。它代表“命令行”,在“命令行”中,我們可以輸入 JavaScript 命令,按下Enter來執行。
現在,我們能看到錯誤就夠了。稍後,在 在浏覽器中調試 壹節中,我們會重新更加深入地學習開發者工具。
多行輸入
通常,當我們向控制台輸入壹行代碼後,按Enter,這行代碼就會立即執行。
如果想要插入多行代碼,請按Shift+Enter來進行換行。這樣就可以輸入長片段的 JavaScript 代碼了。
大多數其它的浏覽器都是通過F12來打開開發者工具。
它們的外觀和感覺都非常相似,壹旦妳學會了它們中的壹個(可以先嘗試 Chrome),其它的也就很快就可以熟悉了。
Safari(Mac 系統中的浏覽器,Windows 和 Linux 系統不支持)有壹點點不同。我們需要先開啓“開發菜單”。
打開“偏好設置”,選擇“高級”選項。選中最下方的那個選擇框:
現在,我們通過Cmd+Opt+C就能打開或關閉控制台了。另外注意,有壹個名字爲“開發”的頂部菜單出現了。它有很多命令和選項。
開發者工具允許我們查看錯誤、執行命令、檢查變量等。
在 Windows 系統中,可以通過F12開啓開發者工具。Mac 系統下,Chrome 需要使用Cmd+Opt+J,Safari 使用Cmd+Opt+C(需要提前開啓)。
現在我們的環境准備好了。下壹章,我們將正式開始學習 JavaScript。