重新介紹火狐開發(fā)工具:Web控制臺和Javascript調(diào)試器
Firefox4見證了Web控制臺這個新的開發(fā)工具的誕生。自那時起,我們不斷地在這個開發(fā)工具中增加更多的功能,這使得web控制臺在廣泛地發(fā) 揮著作用,同時在Firefox桌面、Firefox OS和Firefox for Android的調(diào)試和分析起著不可替代的作用。
在這個系列文章的***篇,我們將著眼于自Firefox 4瀏覽器以來便有的開發(fā)工具。每一個工具我們將用一個簡短的屏幕截圖來進(jìn)行介紹,同時為了讓讀者能夠更多地了解相應(yīng)的工具,我們將展示一些其他的截圖來配 合講解特定的流程模式。這些圖片包括基于實際應(yīng)用的手機開發(fā)、警告和CSS調(diào)試等屏幕截圖。
在***篇文章我們介紹的是Web Console 和 Javascript Debugger。
Web Console
Web Console主要用于展示與當(dāng)前加載網(wǎng)頁相關(guān)的信息。這些信息包括HTML、CSS、JavaScript、安全警告(Security warnings)和錯誤信息,另外網(wǎng)絡(luò)請求(network requests)會被展示出來,Web Console 還會顯示這些請求成功與否。當(dāng)Web Console 探測出網(wǎng)頁中的錯誤和警告時,它會給出指向引起錯誤的代碼的鏈接。通常情況下,Web Console 是調(diào)試Web應(yīng)用程序的***站。
Web Console 允許開發(fā)者在網(wǎng)頁中執(zhí)行JavaScript代碼。這意味著開發(fā)者可以在網(wǎng)頁范圍內(nèi)定義類然后執(zhí)行實例化后的類方法,并且可以通過CSS選擇器來訪問特定元素。
視頻簡介:https://www.youtube.com/watch?v=C6Cyrpkb25k
通過查看 MDN Web Console 的文檔可以獲得更多地信息。
JavaScripter Debugger JS 調(diào)試器
JavaScripter Debugger 用于調(diào)試和精煉Web 應(yīng)用程序中網(wǎng)頁部分的JavaScript 代碼。這個調(diào)試工具可以在Firefox OS 、Firefox for Android 和 Firefox Desktop 三種環(huán)境下使用來對代碼進(jìn)行調(diào)試。它是個功能齊全的調(diào)試工具,包含了如觀察表達(dá)式、局部變量變化、設(shè)置斷點、條件表達(dá)式、跳過、返回和執(zhí)行到結(jié)尾等功能。 另外開發(fā)者可以在網(wǎng)頁加載過程中暫停應(yīng)用程序,改變變量數(shù)據(jù)來觀察執(zhí)行效果。
JS 調(diào)試器介紹視頻:https://www.youtube.com/watch?v=sK8KU8oiF8s
想要了解更多有關(guān)JavaScript Debugger的信息,可以通過查看 MDN Debugger 的文檔來獲取信息
了解更多
上面的這些內(nèi)容讓我們快速的了解了一下這些工具的一些特點,如果想知道這些開發(fā)工具的全部特點,請點擊查看MDN工具文檔。
盡請期待
在下一篇的系列文章中我們將深入講解樣式編輯器(Style Editor)和便簽(Scratchpad)。請在下面的評論中給出您的反饋,讓我們了解到哪方面的特點是您亟需了解的。