重新介紹火狐開發工具:Web控制臺和Javascript調試器
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)。請在下面的評論中給出您的反饋,讓我們了解到哪方面的特點是您亟需了解的。