問題

編碼完成、正在測(cè)試的應(yīng)用很少會(huì)為了測(cè)試人員的方便而進(jìn)行修改。如果你可以在瀏覽器中實(shí)時(shí)地修改頁(yè)面，那么你就無需向應(yīng)用本身添加測(cè)試代碼。

另外，開發(fā)人員通常信任網(wǎng)頁(yè)的內(nèi)容保持不變。違反這一假定可以揭示出安全設(shè)計(jì)缺陷。

解決方案

按照2.3節(jié)，安裝Firebug。Firebug是如此復(fù)雜的一個(gè)附加組件，它居然有自己的附加組件用來增強(qiáng)和擴(kuò)展其功能。我們只需要Firebug的基本安裝。

瀏覽到你要編輯的頁(yè)面，單擊瀏覽器窗口右下角的綠色復(fù)選框。在某些情況下，網(wǎng)頁(yè)上可能確實(shí)有JavaScript錯(cuò)誤，因此這時(shí)顯示的圖標(biāo)可能是在紅色圓圈中帶個(gè)白色的X。

在Firebug中找出特定元素是很容易的。你的也可以在HTML選項(xiàng)卡中瀏覽，直到找到該元素，或者按Inspect按鈕并在瀏覽器和Firebug的HTML顯示中高亮顯示這個(gè)元素。這個(gè)方法也適用于CSS和DOM屬性，不過你必須手動(dòng)選擇要修改的屬性。圖3-14顯示了這種高亮顯示，請(qǐng)親自試驗(yàn)一下，確實(shí)相當(dāng)直觀。

元素屬性實(shí)時(shí)顯示在Firebug右下區(qū)域中，分為3個(gè)面板：央視、布局和DOM信息各占一個(gè)。在每個(gè)面板中，你可以單擊任意值，這樣會(huì)在原地打開一個(gè)小的文本框。如果你更改了這個(gè)值，顯示的頁(yè)面將立即被更新。圖3-15向我們演示了在HTML窗格中編輯，將Yahoo!標(biāo)識(shí)更改為Google的標(biāo)識(shí)。注意，這并不會(huì)修改源代碼，也不會(huì)對(duì)服務(wù)器做任何調(diào)整；這些更改只出現(xiàn)在你的瀏覽器上下文中，而別人完全看不到。

在這種情況下，F(xiàn)irebug與DOM Inspector有相似的功能，但它還包含了一個(gè)JavaScript控制臺(tái)。它使你能夠從頁(yè)面本身的上下文出發(fā)執(zhí)行JavaScript。3.10節(jié)將深入利用利用這一點(diǎn)，但是對(duì)于初學(xué)者而言，通過使用常見的JavaScript方法（比如document. getElementById）來獲取基本的JavaScript和CSS信息已經(jīng)是非常簡(jiǎn)單的了。

討論

實(shí)時(shí)地編輯頁(yè)面有優(yōu)勢(shì)也有劣勢(shì)。就是說，如果你刷新或?yàn)g覽到其他頁(yè)面，更改將丟失。它的好處在于，你的測(cè)試不需要更改基本代碼，而且不會(huì)干擾后續(xù)測(cè)試。對(duì)于再次運(yùn)行同一測(cè)試而言，這一點(diǎn)又令人喪氣，因?yàn)槟壳盁o法再Firebug中保存這些編輯。

本秘訣證明了這一格言：你不能信任瀏覽器。這些工具可以用來觀察傳送到客戶端的每一段代碼，然后更改代碼的任意部分。雖然更改發(fā)送到其他用戶的內(nèi)容是非常困難的，但更改顯示給你的內(nèi)容是相當(dāng)簡(jiǎn)單的。