瀏覽器開發者控制檯使用入門基礎

開發者控制檯

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

但在瀏覽器中，默認狀況下用戶是看不到錯誤的。因此，若是腳本中有錯誤，咱們看不到是什麼錯誤，更不可以修復它。

爲了發現錯誤並得到一些與腳本相關且有用的信息，瀏覽器內置了「開發者工具」。

一般，開發者傾向於使用 Chrome 或 Firefox 進行開發，由於它們有最好的開發者工具。一些其餘的瀏覽器也提供開發者工具，有時還具備一些特殊的功能，一般它們都是在追趕 Chrome 或 Firefox。因此大多數人都有「最喜歡」的瀏覽器，當遇到某個瀏覽器獨有的問題的時候，人們就會切換到其餘的瀏覽器。

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

Google Chrome

打開網頁 bug.html。

在 JavaScript 代碼中有一個錯誤。通常的訪問者看不到這個錯誤，因此讓咱們打開開發者工具看看吧。

按下 key:F12 鍵，若是你使用 Mac，試試 key:Cmd+Opt+J。

開發者工具會被打開，Console 標籤頁是默認的標籤頁。

就像這樣：

具體什麼樣，要看你的 Chrome 版本。它隨着時間一直在變，可是都很相似。

• 在這咱們能看到紅色的錯誤提示信息。這個場景中，腳本里有一個未知的 「lalala」 命令。
• 在右邊，有個可點擊的連接 bug.html:12。這個連接會連接到錯誤發生的行號。

在錯誤信息的下方，有個 > 標誌。它表明「命令行」，在「命令行」中，咱們能夠輸入 JavaScript 命令，按下 key:Enter 來執行（key:Shift+Enter 用來輸入多行命令）。

如今，咱們能看到錯誤就夠了。稍後，在 <info:debugging-chrome> 章節中，咱們會從新更加深刻地討論開發者工具。

Firefox、Edge 和其餘瀏覽器

大多數其餘的瀏覽器都是經過 key:F12 來打開開發者工具。

他們的外觀和感受都很是類似，一旦你學會了他們中的一個（能夠先嚐試 Chrome），其餘的也就很快了。

Safari

Safari（Mac 系統中的瀏覽器，Windows 和 Linux 系統不支持）有一點點不一樣。咱們須要先開啓「開發菜單」。

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

如今，咱們經過 key:Cmd+Opt+C 就能打開或關閉控制檯了。另外注意，有一個名字爲「開發」的頂部菜單出現了。它有不少命令和選項。

一般，當咱們向控制檯輸入一行代碼後，按 key:Enter，這行代碼就會當即執行。

若是想要插入多行代碼，請按 key:Shift+Enter 來進行換行。這樣就能夠輸入長片斷的 JavaScript 代碼了。

總結

• 開發者工具容許咱們查看錯誤、執行命令、檢查變量等等。
• 在 Windows 系統中，能夠經過 key:F12 開啓開發者工具。Mac 系統下，Chrome 須要使用 key:Cmd+Opt+J，Safari 使用 key:Cmd+Opt+C（須要提早開啓）。

如今咱們的環境準備好了。下一章，咱們將正式開始學習 JavaScript。

---

現代 JavaScript 教程：開源的現代 JavaScript 從入門到進階的優質教程。

在線免費閱讀：https://zh.javascript.info/

---

掃描下方二維碼，關注微信公衆號「技術漫談」，訂閱更多精彩內容。