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