分類
好用軟體

Tamper Data-好用的Firefox Debug工具

在 Firefox 中, 之前已經介紹過許多好用的工具(對開發及除錯應用), 像是

Firebug – https://diary.tw/archives/245, https://diary.tw/archives/485

Web Developer – https://diary.tw/archives/227

LiveHTTPHeaders – https://diary.tw/archives/565

Fiddler – https://diary.tw/archives/287

User Agent Switcher – https://diary.tw/archives/926

這裡要介紹的是除了可以觀察每個 http 連線狀況外, 還能修改傳送資料的功能, 這個 AddOn 稱之為 Tamper Data, 光看字面上就很清楚是一個改資料的 AddOn, 但是是在執行網頁訪問的狀況下可以用插入式的方式操作, 這對於在沒有開發工具下, 要快速地進行傳送資料的調整(header, postdata), 如此一來, 可以容易地進行除錯及測試驗證.

先安裝 tamper data 這個 Firefox 的 AddOn – https://addons.mozilla.org/en-us/firefox/addon/tamper-data/

接下來可以在 Tools (工具) 選單下出來一個 Tamper Data 選項, 點選出來後, 就會出現 Tamper Data 視窗, 接下來, 就可以正常訪問一般的網站, 例如 yahoo, 會看到畫面上有一堆 request 及 response time 的 list, 如下:

這樣對於訪問 yahoo 的結果可以一目暸然, 對任一筆資料按下右鍵, 選 [Graph All] 會出現一個有時間序的清單並圖象化, 如下:

分類
好用軟體

切換瀏覽器標頭-User Agent Switcher

這個是一個 Firefox 的插件, 叫做 User Agent Switcher

現在開發手機上應用的網頁機會比以往多, 但是礙於測試時期, 一般這些網頁程式都會檢查使用者的瀏覽器(User Agent), 所以使用這個插件, 方便使用者在切換自己的瀏覽器的標頭.

安裝好之後, 會在[工具]功能表內, 多出一個切換 User Agent 的功能, 如下所示:

(圖片引用自: https://addons.mozilla.org/zh-TW/firefox/addon/59)

如此一來, 便能方便測試網頁程式, 對於不同的 User Agent 的判定, 及行為驗證, 將會有很大的幫助, 而不需要準備太多環境. 當然, 若是要做所謂的 HTML, CSS, JAVASCRIPT 相容性測試, 則這個就比較幫不上忙了, 但對於判定 User Agent 而要重導使用者, 或產生一些不同的功能時, 可以很快速的驗證.

像是 naver.jp 這個網站, 有個 for iphone 的版本 (http://ipn.naver.jp) , 會檢查User Agent來重導使用者到 http://www.naver.jp, 就沒辦法預覽到 iphone 的頁面了. 使用這個 User Agent Switcher 時, 就能”假裝” Firefox 是 iphone 的 browser , 來訪問該網頁囉!

[2010/6/15 0:05]
補充一下相關的 user agent 資料, 可以利用匯入的方式達成, 請如以下操作:
1. Default User Agent, Edit User Agents:

2. 在畫面上選擇下方的 Import:

3. 到這裡下載已整理好的 user agent xml 檔: http://techpatterns.com/forums/about304.html
(或直接對這個連結按右鍵另存新檔: http://techpatterns.com/downloads/firefox/useragentswitcher.xml)
4. 於 import 選擇剛下載的檔案即可, 在 User Agent Switcher 就會有很多的 user agent 出來了, 還包含 iPad 耶!

PS. 請注意只是切換 User Agent 來讓 web server 吐出對應的 html, 並非是將 firefox 模擬出該 user agent 的呈現效果!!

瀏覽器的戰火延燒到顯示卡了

最後, 很多服務都需要瀏覽器, 但是在這之前, FLASH10 的 Adobe 宣佈支援顯示卡處理器 (GPU) (link), IE9 的微軟也宣佈要利用 Direct2D, DocumentWrite 來加速及強化顯示效能 (link), 而 Firefox 更是快速地發表了 Firefox 3.7 Alpha版本支援 Direct2D GPU 技術的版本 (link), 預計明年春天正式版發表, 看來, 瀏覽器的戰火延燒到了顯示效率這裡來了.

其實這也是很正常的事, 因為瀏覽器的確需要跑的內容愈來愈華麗, 也愈來愈多層, 耗掉的系統資源也就愈來愈重了, 之前像是一些影音壓縮/解壓縮的程式, 也有支援 GPU 的版本, 讓效率更好, 佔用較少的系統資料, 而改用顯示卡的計算能力來加強影音壓縮和解壓縮的功能.

而現在, 針對瀏覽器強化顯示而使用的 Direct2D 也讓瀏覽器在顯示時, 發揮顯示卡的 GPU 功能, 把效率更提升, 這樣的設計很棒, 把應該發揮的功能發揮出來. 看一下效率測試資料囉:

(圖片引用自: http://www.techbang.com.tw/?p=28019 )

這樣看起來, 應該是原本比較文字的內容有強化到, 而原本不是文字的網頁則沒有差異太多, 無論如何, 對於實際應用應該都會有幫助, 期待 IE9, FX3.7 的正式版本來臨.

分類
程式技術

IE6還這麼多人用耶

剛在看這篇文章: IE 6在臺市占率仍超過5成 (http://www.ithome.com.tw/itadm/article.php?c=56054), 發現其實我的想法比較偏向所謂的用戶原始的瀏覽器用什麼, 就會持續用下去的這個狀況, 也就是說, 用戶應該在 XP 就會用 IE6, 在 Vista 就會用 IE7, 在 Windows 7自然用 IE8, 而其中的許多數據也都相當耐人尋味.

用戶自己會選擇使用什麼瀏覽器的, 自然是比較了解電腦, 或是會自己安裝軟體的用家, 而且通常應該要原來固定使用的瀏覽器發生什麼大問題, 或效能不好, 或速度慢等原因, 才會面臨升級或是換瀏覽器的狀況.

不過這也讓我想看一下這個網站的比例狀況(2009/07), 我列出來給大家參考:
狀況如下:

IE6 29.1%
IE7 17.9%
IE8 9.6%
FX3.5 6.8%
FX3.0 10%
SAFARI 3.5%
OTHER 23.1%

其中果然 IE6 佔了大多數, 到 29.1% (相對於上文的報導是沒有那麼高), 而整個 IE 也有 56.6%, 另外 Firefox 則是有 16.8%, Safari 則是 3.5%, 其他的部分包含較小量版本的 IE, FX, 及一些有的沒的, 共有 23.1% (這個也還蠻多的, 真有趣), 整理或圖形如下:

基本上, 網站其實就是要照顧到所有用戶使用的環境來設計功能及呈現, 才不會影響用戶的來訪, 不過, 最重要的是大家都要依照標準來做就對了, 才不會顧此失彼, 這樣也就沒什麼太大的相容性問題!

順便附上 OS 比例也供參考:

分類
好用軟體

sparky更新1.3.1

看起來是個小更新而已, 原來的 1.3.0 還在 https://addons.mozilla.org/en-US/firefox/addon/5362 是去年 11月的, 可以參考這篇: https://diary.tw/archives/709 , 不過我是因為 Firefox 的 sparky toolbar 通知才知道的, 應該不是主要更新.

連結在此: https://addons.mozilla.org/en-US/firefox/addons/policy/0/5362/54890?confirmed

有在使用 sparky (alexa toolbar for Firefox ) 的用戶可以更新一下囉!

用Firefox體驗IE8

這句乍看下很有趣, 怎麼用 Firefox 體驗 IE8 呢?

原來是個愚人節的活動, 不過現在來報好像有一點 lag 了.. 從這裡看來的, 來體驗 IE8 的全新功能吧 http://blog.timc.idv.tw/posts/come-and-experience-ie8/ 還有有趣的連結呢:

http://ww12.stickeraction.com/

原來這個 link 是到這裡的: http://www.moztw.org/events/ie8/, 很有趣吧, 快連去看看, 怎麼用 Firefox 來體驗 IE8. 其實這個活動有點揶揄, 有點諷刺, 對於 IE8的上線, 給了一個很有趣的愚人節禮物. 不過下面也寫得十分有趣, 有關於 IE8 的長處:

  1. IE8 終於跟上其他先進瀏覽器的腳步,較為完整地支援了 CSS 2.1。這麼一來網頁設計師可以設計更為美觀的網頁,不必擔心僅有 IE 看不到效果的問題。
  2. 「視覺化搜尋」是其他瀏覽器目前沒有的功能
  3. 下一代的 Firefox (3.5 版,預計 2009 六月推出) 才會有類似 IE8 InPrivate 隱私瀏覽的功能。(如果您使用 Firefox,目前可以先使用「清除隱私資訊」以達成類似效果。)
  4. 目前 IE 是唯一可以跑微軟自家 ActiveX 技術的瀏覽器,也就是說絕大多數的網路 ATM 轉帳只能在 IE 上使用。

不過, 其實 IE8 還有很多有利用程式開發上的應用: 像最近的這篇: 好用到掉渣的IE8 Developer Tools–JS效能調校經驗 http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/06/08/ie8-devtool-profiler.aspx , 看起來, 其實無論是程式設計人員, 美術人員, 甚至是使用者, 都應該都多方多種瀏覽器, 不過, 程式及美術, 主要都還是為了使用者, 而倒底這麼多種瀏覽器, 哪種好用, 哪種方便, 其實也是見人見智啦…

以本站右下的長期統計資訊 Histats, 的結果來看, 各瀏覽器佔比狀況如下:

看起來還是 IE6 為主耶(43.6%), 再來是 IE7(28.6%), 再來是 Fx3 (10.9%), Fx2(6.5%), 不過資料是由 2008年2月起的, 若抓近一點的話, 說不定也有一些不同. 但無論如何, 自己覺得好用, 自己覺得順手的瀏覽器, 才是好的瀏覽器啦…

分類
好用軟體

Fiddler支援Firefox了

今天同事和我說 Fiddler 已經支援 Firefox 了. 真的是太開心了!

其實 Firefox 下的 Firebug 已經能做到許多 javascript除錯(很好用的javascript除錯工具FireBug (firefox) 很好用的javascript除錯工具FireBug (firefox) ) 及 network monitoring網路 (FireBug更新功能-Network Monitoring FireBug更新功能-Network Monitoring ) 的功能了, 不過其中的 network monitoring 的部分, 若是要看 response 時, 並非是實際該次 request 的結果, 而是展開時, 再一次去 request 的結果, 如此一來, 有時要觀察的 request 對應的 response 總沒有那麼客觀(甚至不是當時的 response), 這個時候 Fiddler (Fiddler-HTTP Debugger Fiddler-HTTP Debugger )就好用多了, 因為它是截取當時的 request 及 response 的結果.

於是就進行下載 fiddler 的最新版本, 並且進行安裝, 記得要重新開啟 Firefox, 在右下角就會出現一個該 fiddler extension 的功能操作狀況, 如下:

這個代表安裝完成了 Fiddler for Firefox 的 extension 了, 其中 Fiddler: OFF 指的是 Fiddler Application 沒有開起來, 由於該 extension 不能直接發起 Fiddler Application , 所以手動從程式集裡來啟用這個 application, 該狀態就會變成 Fiddler: ON 的狀態了, 並能順利收集到 Firefox 的 request 及 response 資料囉.

其他功能其實就和原來的 fiddler 一樣囉, 不過真的很棒, 因為從網路層去 monitoring 資料會比 Firebug 來得更精準及更真實, 這個真的值得給他拍拍手, 而且 fiddler 頁面 (http://www.fiddler2.com/fiddler2/ )上也說明了, 可以支援 Internet Explorer, Mozilla Firefox, Opera, and thousands more. 真的很不錯哦, 前進了很多呢!!

接下來就可以交替使用 Firebug 及 Fiddler 囉, 而且也以看實際狀況來應用了, 看起來 Firebug 用在 web design debug (CSS), javascript 很棒, 而 Fiddler 用在 network monitoring 是很好的工具, 如何搭配使用, 看各位應用囉.

[2009/10/31 1:38補充畫面]

分類
好用軟體

sparky更新1.3.0

這兩天開啟 firefox 時, 發現 sparky 有了新的更新, 由原來的1.2.1版本更新至1.3.0, 若不知什麼是 sparky 的朋友先看看這篇: https://diary.tw/archives/533

這次的更新將幾項功能加入搜尋結果:

Enhanced Search: Shows Alexa Rank Indicator next to search results on Google, Ask, Yahoo, Live and MSN.

也就是說, 若安裝這個版本, 在你的 Google, Ask, Yahoo, Live, MSN 搜尋結果會多出一個 alexa 的排行資訊, 如下圖的搜尋結果中的藍色條狀圖所示:

不過也有被嫌棄的留言: https://addons.mozilla.org/zh-TW/firefox/addon/5362#reviews

基本上新增這個功能有好有壞啦, 其實也是見人見智, 基本上我裝這個的主要目的也就是在網上衝浪時, 可以多一個網站分析的資訊, 方便我在一面看資料時, 一面多了解這些網站的到訪及全球排名狀況, 雖然不是百分百客觀的資料(因為他是利用有安裝 alexa toolbar for ie 及 sparky for firefox的用戶資料來做統計), 不過也蠻俱參考價值的就是了.

繼續閱讀:
http://www.zuosha.net/archives/15.html

分類
好用軟體

Firefox實用的佈景主題(縮小工具列)

在現在大螢幕的顯示器上似乎不是問題. 不過在小小NOTEBOOK上, Firefox 上面落落長的工具列(Toolbar)可就是很佔用可視空間的殺手咧.

這個Add-On名稱為Classic Compact, 其實直接看了就明白了, 很單純的目的, 就是把你的上面工具列(還包含了menu選單及分頁的頁籤, 就是FIRE上面整個能縮的都縮了)縮小, 節省的空間還蠻驚人的, 我們來比較看看, 使用前共高190px, 使用後共142px, 如下:

看起來真的節省不少高度上的空間, 尤其對於NOTEBOOK來說, 桌面大小是很侷限的狀況下, 能有效利用桌面的空間, 相對是很重要的, 這個Add-on相當值得使用!

官方網址: https://addons.mozilla.org/en-US/firefox/addon/3699

給大家參考看看囉!

PS. 不過對於使用Firebug的用家們提醒一下, 在下方的Firebug console是不會有任何變化的, 也不會變小!!

分類
好用軟體

gmail和firebug有衝突哦!?

今天使用 gmail 時, 才剛登入, 就出現斗大的字:

是哦!? 怎麼會這樣咧, 看起來應該是 ajax 的使用量較大的關係, 是不一定會有影響, 我們來看看他的說明如何改善:
http://mail.google.com/support/bin/answer.py?hl=zh_TW&ctx=mail&answer=77355

居然要停用掉 firebug 的 net monitor 功能, 看起來的確和大量的 xmlwebrequest 有密切的關係, 不過除非真的慢到不能用, 否則不會想停掉這麼好用的 firebug 工具咧.

若有使用 firebug 的朋友們在使用 gmail 有這個效能問題的話, 可以參考看看囉!