3.1 工具介紹

JS是一種腳本語言，它是直接按源代碼解釋執(zhí)行的，并不需要編譯，所以編寫JS腳本使用簡單的文本編輯工具就可以了。例如，Windows自帶的記事本、Notepad++、Sublime Text、EditPlus、UltraEdit等，當(dāng)然也可以使用Dreamweaver或者Eclipse、IDEA、Visual Studio等集成開發(fā)工具，只要自己用著順手就好。

除了編輯代碼的工具之外，對學(xué)習(xí)JS來說，非常重要的還有調(diào)試工具。JS是一種腳本語言，它自己并不能運(yùn)行，需要借助瀏覽器才可以運(yùn)行。最新版本的瀏覽器都可以調(diào)試JS腳本，有的是自帶此項(xiàng)功能，有的需要安裝相應(yīng)的插件，下面分別進(jìn)行介紹。

1. Firefox

對于Firefox來說，調(diào)試JS要首推大名鼎鼎的FireBug擴(kuò)展。在使用FireBug擴(kuò)展之前必須先安裝。在安裝好Firefox之后，需要在“添加組件”的“擴(kuò)展”選項(xiàng)卡中搜索“Firebug”，找到后進(jìn)行安裝即可，如圖3-1所示。

安裝完成后會在工具欄多出一個(gè)“蟲子”按鈕，那就是FireBug。在需要調(diào)試的頁面單擊此按鈕或者按F12快捷鍵，就可以調(diào)出FireBug的調(diào)試窗口，其界面如圖3-2所示。

2. Chrome

在安裝完Chrome后，直接按F12或者Ctrl+Shift+I快捷鍵就可以調(diào)出調(diào)試界面，如圖3-3所示。

3. Internet Explorer

Internet Explorer 8之后的瀏覽器中也增加了自帶的調(diào)試工具。例如在Interenet Explorer 11中按F12快捷鍵可以調(diào)出調(diào)試界面，如圖3-4所示。

4. Safari

Safari也提供了默認(rèn)的調(diào)試工具，不過需要先將開發(fā)菜單顯示出來才可以使用。顯示的方法是，在“偏好設(shè)置”的“高級”選項(xiàng)卡中勾選“在菜單欄中顯示‘開發(fā)’菜單”復(fù)選框，如圖3-5所示。

開啟“開發(fā)”菜單之后，就可以在“開發(fā)”菜單中調(diào)出調(diào)試窗口。如果瀏覽器沒有顯示此菜單，也可以在設(shè)置的下拉菜單中選擇“開發(fā)”→“開始調(diào)試JavaScript”選項(xiàng)，如圖3-6所示。

Safari的調(diào)試窗口如圖3-7所示。

5. Opera

Opera瀏覽器也提供了自帶的調(diào)試工具，默認(rèn)可以按Ctrl+Shift+I快捷鍵調(diào)出。Opera的調(diào)試界面默認(rèn)是在右邊，可以通過調(diào)試界面的切換按鈕（關(guān)閉按鈕左邊）切換到下面顯示，調(diào)試界面如圖3-8所示。

前面介紹了目前主流的5種瀏覽器的調(diào)試工具，因?yàn)椴煌瑸g覽器的實(shí)現(xiàn)會有所區(qū)別，所以在實(shí)際開發(fā)中可能需要在多個(gè)瀏覽器中進(jìn)行調(diào)試。本書主要以Firefox的FireBug擴(kuò)展進(jìn)行講解，不同瀏覽器的調(diào)試方法大同小異。

另外，在調(diào)試的過程中經(jīng)常需要輸出一些內(nèi)容，常見的輸出方法有三種。

? 調(diào)用alert(msg)方法彈出提示框。

? 調(diào)用console.log(msg)方法輸出到控制臺。

? 將內(nèi)容寫入頁面標(biāo)簽（例如寫入指定的div標(biāo)簽）中。