這篇基本上是自己踩到地雷了,寫來給自己看的…

 

IE8 和 Chrome 都有內建開發者工具,而 Firefox 3 可以透過安裝 firebug 或類似的附加元件來做類似的事。

首先在某個地方看到一段有問題的 html 。

因為是在 Chrome 看到的,所以很直覺的用 Chrome 的 developer tools 看。

接下來經過大約測了二三十分鐘測不出問題以後,改開 Firefox 用 firebug 看。咦,啊剛看到的問題怎麼不見了… Orz… 再回過頭來用 Chrome 的 developer tools 看。咦,我眼花了嗎…

為了更瞭解這個問題,寫了一個 sample 頁。


<html>
<body>
<p>>"'<&</p>
<p>&gt;&quot;&#039;&lt;&amp;</p>
</body>
</html>

 

寫完以後分別用 Firefox3, IE8 和 Chrome 4 瀏覽。

(1) 檢視原始碼

Firefox3 檢視原始碼長這樣:

fx3-原始碼.jpg 

IE8 長這樣:

IE8-原始碼.jpg 

Chrome 4 長這樣:

Chrome4-原始碼.jpg 

看起來沒問題。電梯下樓…

(2) 開發者工具

IE8 開發者工具長這樣:

IE8-開發者工具.jpg 

第二段已經被轉回沒有 escape 的模樣了。

firefox3 的 firebug 長這樣:

fx3-firebug.jpg 

第一段的 > < & 被 escape ,第二段的 " ' 被轉回沒有 escape 的模樣。

Chrome developer tools 長這樣:

Chrome4-開發者工具.jpg 

第二段一樣也被轉回沒有 escape 的模樣了。

 

結論:在 developer tools 裡面沒有一種瀏覽器是顯示「檢視原始碼」的樣子!如果不習慣用 developer tools 的人,會以為忘了做 escape 而回頭去檢查在那邊 debug de 不出來…

 

 


Tags: 開發者工具 檢視原始碼 firefox firebug IE8 Chrome escape htmlspecialchars


repeat<">< 發表在 痞客邦 PIXNET 留言(0) 人氣()