導讀：在這個系列文章的第一篇，我們主要關注火狐瀏覽器中開發工具的特點和我們現在的使用情況。這篇文章的主要目的是向你展示工具提供的各種可能特點、進度和我們的需求。
Firefox4見證了Web控制檯這個新的開發工具的誕生。自那時起，我們不斷地在這個開發工具中增加更多的功能，這使得web控制檯在廣泛地發揮著作用，同時在Firefox桌面、Firefox OS和Firefox for Android的除錯和分析起著不可替代的作用。
在這個系列文章的第一篇，我們將著眼於自Firefox 4瀏覽器以來便有的開發工具。每一個工具我們將用一個簡短的螢幕截圖來進行介紹，同時為了讓讀者能夠更多地瞭解相應的工具，我們將展示一些其他的截圖來配合講解特定的流程模式。這些圖片包括基於實際應用的手機開發、警告和CSS除錯等螢幕截圖。
在第一篇文章我們介紹的是Web Console 和 Javascript Debugger。
Web Console
Web Console主要用於展示與當前載入網頁相關的資訊。這些資訊包括HTML、CSS、JavaScript、安全警告(Security warnings)和錯誤資訊，另外網路請求(network requests)會被展示出來，Web Console 還會顯示這些請求成功與否。當Web Console 探測出網頁中的錯誤和警告時，它會給出指向引起錯誤的程式碼的連結。通常情況下，Web Console 是除錯Web應用程式的第一站。
Web Console 允許開發者在網頁中執行JavaScript程式碼。這意味著開發者可以在網頁範圍內定義類然後執行例項化後的類方法，並且可以通過CSS選擇器來訪問特定元素。
視訊簡介：https://www.youtube.com/watch?v=C6Cyrpkb25k
通過檢視 MDN Web Console 的文件可以獲得更多地資訊。
JavaScripter Debugger JS 偵錯程式
JavaScripter Debugger 用於除錯和精煉Web 應用程式中網頁部分的JavaScript 程式碼。這個除錯工具可以在Firefox OS 、Firefox for Android 和 Firefox Desktop 三種環境下使用來對程式碼進行除錯。它是個功能齊全的除錯工具，包含了如觀察表示式、區域性變數變化、設定斷點、條件表示式、跳過、返回和執行到結尾等功能。另外開發者可以在網頁載入過程中暫停應用程式，改變變數資料來觀察執行效果。
JS 偵錯程式介紹視訊：https://www.youtube.com/watch?v=sK8KU8oiF8s
想要了解更多有關JavaScript Debugger的資訊，可以通過檢視 MDN Debugger 的文件來獲取資訊。
瞭解更多
上面的這些內容讓我們快速的瞭解了一下這些工具的一些特點，如果想知道這些開發工具的全部特點，請點選檢視MDN工具文件。
盡請期待
在下一篇的系列文章中我們將深入講解樣式編輯器(Style Editor)和便籤(Scratchpad)。請在下面的評論中給出您的反饋，讓我們瞭解到哪方面的特點是您亟需瞭解的。