這篇基本上是自己踩到地雷了，寫來給自己看的…
IE8 和 Chrome 都有內建開發者工具，而 Firefox 3 可以透過安裝 firebug 或類似的附加元件來做類似的事。
首先在某個地方看到一段有問題的 html 。
因為是在 Chrome 看到的，所以很直覺的用 Chrome 的 developer tools 看。
接下來經過大約測了二三十分鐘測不出問題以後，改開 Firefox 用 firebug 看。咦，啊剛看到的問題怎麼不見了… Orz… 再回過頭來用 Chrome 的 developer tools 看。咦，我眼花了嗎…
為了更瞭解這個問題，寫了一個 sample 頁。
<html>
<body>
<p>>"'<&</p>
<p>>"'<&</p>
</body>
</html>
寫完以後分別用 Firefox3, IE8 和 Chrome 4 瀏覽。
(1) 檢視原始碼
Firefox3 檢視原始碼長這樣：
IE8 長這樣：
Chrome 4 長這樣：
看起來沒問題。電梯下樓…
(2) 開發者工具
IE8 開發者工具長這樣：
第二段已經被轉回沒有 escape 的模樣了。
firefox3 的 firebug 長這樣：
第一段的 > < & 被 escape ，第二段的 " ' 被轉回沒有 escape 的模樣。
Chrome developer tools 長這樣：
第二段一樣也被轉回沒有 escape 的模樣了。
結論：在 developer tools 裡面沒有一種瀏覽器是顯示「檢視原始碼」的樣子！如果不習慣用 developer tools 的人，會以為忘了做 escape 而回頭去檢查在那邊 debug de 不出來…
全站熱搜
留言列表
日常 (10)
