August 2007 Archives

幾種偵錯 javascript 的方式

| No Comments | No TrackBacks
Firebug
這大概是在 Firefox 上的首選。主要的特點有:
  1. 以瀏灠器外掛方式的存在,可以對「任何」網站進行偵錯。
  2. 顯示的方式可以是同一視窗,也可以在不同視窗。同時用兩個螢幕寫程式時更加方便。
  3. 定義了 "console.log", "console.info" 等方法,用來印出訊息
  4. 有可設中斷點﹑步進的偵錯器
  5. 有命令列可以立刻執行任意的 javascript 運算
  6. 也可以顯示 DOM 與 CSS 的資訊
另外還有一個 Firebug Lite,是要開發人員自行在 HTML head 裡面加入 <script> 的。在 Firefox﹑IE﹑Safari 上都可以用。但不如外掛版來得方便。而且,顯示方面偶爾會有問題。
Javascript Shell
是在 Firefox 上的 Bookmarklet,要拖到工具列上使用,會彈出新的視窗。新的視窗可執行任意的javascript運算。
Javascript Shell on IE
前述 Javascript Shell 的 IE 版本。有一陣子這是我唯一能夠使用的 javascript 偵錯工具 。
IE Developer Toolbar
微軟官方出的 IE 工具列。這個其實沒有辨法拿來偵錯 Javascript,只能拿來觀察目前的 DOM 而已。就算是這樣也算是不錯的用處。
Safari Debug Menu
把 Safari 的 Debug Menu 打開之後,可以看到裡面有個 Javascript Console。上面會顯示出在 javascript 程式碼中呼叫 console.log﹑console.info 所印出來的訊息,印訊息的函式與 Firebug 相容。但只有訊息。簡單的說就是只能用 print 來 debug 的方式。(其實這也是一種不錯的方式啦)。
Jash
最近才發現的另一套 Javascript Shell。功能跟 Firefug 一般完整。並且是以 Bookmarklet 形式使用。最棒的是,可同時在 Firefox 與 IE 上使用,還可以在 Safari 3 上面使用。這一套的 javascript console 做得也很完整,可以執行 javascript 運算式。而且跳出來的視窗可以隨意拖放。比起 Firebug lite 來說,我會選用這個。
ExtJS
ExtJS 是一套非常完整的 UI 函式庫。其中有附一套精美的 Javascript Console,與 Firebug 相容。在 IE 上也可以使用。如果說有專案會用到 ExtJS 的話,就可以用它進行偵錯。

基本上,如果沒有 Jash 的出現,最難進行偵錯的環境是 IE 瀏灠器。有一陣子我甚至是使用 alert() 來找出錯誤發生的點。此外,在 IE 上要進行偵錯的話,把所有用到的 javascript 全部包成一個檔案會比較方便。為何?因為 IE 本身所提供的錯誤訊息,雖然帶有行號,但是沒有告訴你是哪一個 javascript 檔案。而且,那行號跟實際發生錯誤的行號差一。把全部的 javascript 都包成一個檔案的話,這個資訊才有用。當然,使用如 Jash 這般好工具的話,便可以輕鬆多了。

你問我為什麼要在 IE 上進行偵錯?因為有一堆問題只在 IE 上發生,這世間就是這麼殘忍阿(笑)。

Labels: , , , ,

jsmin

| No Comments | No TrackBacks

My ~/bin/jsmin:

#!/usr/bin/env perl
use JavaScript::Minifier qw(minify);
undef $/;
print minify(input => <>);

JavaScript::Minifier works pretty well. This is used when I'm making opcafe website, I minimized the js lib like this:

opcafe-lib.js: jemplates.js
cat Jemplate.js JSAN.js DOM/Utils.js jemplates.js jquery.js interface.js jquery.rotate.js | jsmin > $@

Labels: , ,

簡單設定了 OpenID Server Delegate

| No Comments | No TrackBacks

OpenID 的概念不錯,不過,真的要自已當 OpenID Provider 的話,其實還是有點麻煩。為了省事,我用了 Server Delegate。把 "gugod.org" 變成了 OpenID。寫法便是在 gugod.org 的頁面裡,於 <head;> 標籤中加上:

  <link rel="openid.server" href="http://idproxy.net/openid/server/">
  <link rel="openid.delegate" href="http://gugod.idproxy.net/">

(請先不要在意 gugod.org 這頁面本身什麼都沒有,只有一個連結的這件事吧)

這樣一來,在我需要使用 openid 去登入其他網站時,便可以直接使用 gugod.org 做為我的 OpenID,而實際上我的登入動作,是在 idproxy.net 完成的。

Labels: , , ,

Do I got this Southern Twang...?

| No Comments | No TrackBacks
Here's the test result from the web site that test your English accent. I speak like Southern American, am I ?
What American accent do you have?
Created by Xavier on Memegen.net

Southern. Love it or hate it, your accent says you're probably from somewhere south of the Ohio River.

Take this quiz now - it's easy!
We're going to start with "cot" and "caught." When you say those words do they sound the same or different?



Labels: