分類
好用軟體

Live HTTP headers for firefox

之前介紹過 firebug 新的 network monitoring 功能(http://diary.tw/archives/485), 最近發現有時在追蹤 cache data 時, 不是很方便, 因為要在前方的 + 號展開, 而且比較麻煩的是要 check http status code 比較不方便, 他並沒有直接秀出狀態, 而是以顏色的方式區分, 於是再找找有沒有更單純的 headers 檢視功能, 找到了一個 Live HTTP Headers for firefox 的方便 Add-ons.

於是下載安裝了 (link), 發現該功能雖然單純, 不過十分方便, 就只有 headers 的部分會顯示出來, 而且也可以以 sider bar的方式 dock 在 firefox 的左側, 對於要常常在查 http 效能及 cache 狀態的我, 感到十分方便.

真的是一個還蠻實用的 http headers 的觀察器.

PS. HTTPS 也都可以正常觀察 headers 的部分哦(因為 headers 本來就沒有加密啦!! 當然原來的 firebug 的 network monitoring也都可以啦, 只是操作上麻煩一點)

下面是他的呈現結果:

分類
WebTrend

最近alexa提供了FireFox的toolbar-Sparky

Alexa 一個全球網站統計的排行網站, 其統計的基礎是利用使用者安裝在 browser 上的 toolbar 進行統計的, 由於很久一來一直僅有 Internet Explorer 的版本, 對於日益增加的 FireFox 用戶無法統計的窘境也日益明顯.

我也是長期使用 FireFox 的用戶, 幾天前在拜訪 alexa 網站時, 發現已經提供了 Alexa Toolbar for FireFox 的版本 – Sparky, 相信對於 Alexa 的統計將會有更準確的效益, 由於 FireFox 的用戶在歐洲的用戶比例已相當高, 相信此舉對於 Alexa 的全球統計會有幫助的.

安裝的網址如下:
http://www.alexa.com/site/download

安裝好後, 和 IE 的版本不同, 它不是出現在上方的 toolbar 而是在右下角有個 alexa status bar:

http://client.alexa.com/download/images/ff_screenshot.jpg

有在使用 FireFox 而且又常在關心網站趨勢的使用者, 可以參考看看囉!

相關文章:
http://www.osxcn.com/firefox/alexa-toolbar-for-firefox.html
http://vbb.twftp.org/showthread.php?p=53958
http://syafrizal.com/zt/alexa-toolbar-for-firefox/
http://www.geteway.game.tw/phpbb/weblog_entry.php?e=26

分類
好用軟體

FireBug更新功能-Network Monitoring

之前介紹過了一個在 FireFox 下非常好用的除錯及觀察工具, FireBug (http://diary.tw/tim/7), 前一次更新後, 發現它多了不少功能, 其中有一項特別值得提出來給大家參考的就是 Net 標籤下的 Network Monitoring 功能.

這個功能十分強大, 用看得就覺得不得了了, 之前也有介紹一個超好用的 Fiddler (http://diary.tw/archives/287), 這個強大的功能和 fiddler 不相上下, 它可以觀察整個 http request 的過程及網頁的 download 狀態, 而 fiddler 僅能用在 ie, firebug 新增的這個功能, 讓在 firefox 的用戶也有對應的工具可以做 network 傳輸上的除錯, 真的十分有用.

分類
Javascript

再探AJAX – 簡單小範例

利用原來的文章: https://diary.tw/archives/274 撰寫了一個更容易測試的 html 範例, 一則以測試同步及非同步, 另一則了解在IE及FF的 AJAX Callback 的差異.

幾件事情要特別小心:

1. browser cache:
在做 AJAX Callback 時, 若是 server side 程式不強迫 client side browser 不 cache 時, IE 會發生 callback response cache 的行為, 這個會讓 AJAX 取得的回應發生問題, 當然有多重方法可以解決, 在 FF 就沒有這種現象. 比較單純而又通用解決方法就是在 callback url 上動手腳, 和一般解決 cache 的方法相同, 這裡利用了 javascript 的時間戳記來將 url 變成每次都不同. 一般的實作方法有兩個, 一個是用 Date.parse(new Date()) 方法, 但時間比較不精確(每次取回的值最後三位皆為 000, IE, FF皆同), 另一則是 (new Date()).getTime() 似乎比較精確, 這兩個方法都是傳回從 January 1, 1970, 00:00:00, local time 開始的 milliseconds. 當然, server side 加不加上 cache control 的 header 就比較不影響了, 因為每次 browser 就會乖乖地來 request.

分類
好用軟體

很好用的javascript除錯工具FireBug (firefox)

firefox extesion tools好用的不少, 在一個偶然的機會, 發現有個對 javascript除錯相當好用的工具, FireBug.

原來在firefox內建的javascript console就已經能提供相當多的資訊應用於javascript有錯誤時的除錯, 然而, firebug更強捍的地方有

分類
好用軟體

超強的Web Developer extension功能(firefox)

先下載 firefox:
http://www.mozilla.com/firefox/

之後再安裝
https://addons.mozilla.org/firefox/60/

接下來就是很強的功能介紹了, 一般我們在寫 client side 的 html, javascript這些tag或script, 最麻煩的就是debug的部分, 然而, 用 firefox 加上一個 web developer extesion 後, 你會發現一切都改觀了, 無論是 form 的變數, input text 密碼顯示, 長度取消, readonly 改為可寫入, 隨時修改html source改變顯示結果, cookie 變數, 變數值, div, iframe 等區域顯示, javascript 除錯, validation css 及html的功能, 都可以很容易的在一個瀏覽器內實現, 果然名如其功能, 就是好用的 [web developer]. 無論是程式設計人員或是網頁美工人員, 都是不可或缺的一個好工具. 不過 firefox 就是 layout 和 ie 不太一樣, 為了滿足廣大 ie 的用戶, 建議是搭配 firefox 寫 html及script配合 ie preview, 應該是最理想的方式囉….

 

另外像是 ie 常常會有 view source 時的問題(開不起來)的這種狀況, 在 firefox 是不會發生的, 而且source還會有美觀的字型顏色來呈現, 方便寫 code 的人看哦.