2009年1月18日

製作 javascript 測試器

大家在 debug javascript 時都怎麼作呢?
vs 2005以後支援的 debug?
vs 2008以後的小紅點?
還是邊改邊存邊 refresh 頁面?

這邊提供個簡單且通用的測試方式

首先在頁面上佈置個 textbox、asp button、literal、input button (如下圖)

可以看到 input button 已加入 onclick 的 javascript 事件 test()
另外在按鈕的事件上加入下圖的 code

這樣就完成簡單的測試器了
以後要測試頁面上的 javascript 就先把上述的控制項佈置到頁面上
或是利用 iframe 方式 將預先做好的測試頁放到頁面上

使用時直接在 TextBox 裡寫 javascript code
點選 "應用 javascript " 再選 "測試" 即可使用剛剛寫好的 javascript

下面是執行畫面

底下因為坎尼在頁面上加了 jQuery
所以可以看到 t2 是用 jQuery 的方式抓取物件


若打開頁面上的原始碼來看
可以看到 literal 控制項已經把輸入的 javascript 放到畫面上
並包在 test() 這個 function 裡
所以點選 "測試" button 時 就會去呼叫 test()

會做這個主要是坎尼最近在玩 iframe
結果一直抓不到 iframe 裡的物件 腦羞之下做了這個
後來發現 iframe 要用 contentWindow (IE) 去抓 囧興

上面有提到可以先將測試器做成一個測試頁
要用時再將頁面放到 iframe 裡去
坎尼比較建議這種方式
不過要注意的是 要抓取原本頁面上的物件時 記得先加上 parent

靈感來源 w3 schools

2 則留言:

Unknown 提到...

現在新的主流 browser 通常都有內建 developer tool (e.g. IE8, chrome, FF 的 FireBug),針對 JS 的部分應該都有 Console 的功能,作用跟 VS 的即時運算視窗差不多,也可以輸入一段 JS Code 然後丟給 browser 執行,此時應該也可以直接存取頁面上 render 出來的所有元素 ...

坎尼 提到...

你這不知民間疾苦的傢伙
很多人都還在用 ie6 ie7做 debug 啊XDDDD
(雖然不是我)

不過這篇題目的起因還真的是因為我同事 :p
看他用 夢的編織者 改完 js code 再儲存
然後再跑到 ie 按 f5 refresh 實在很累 :P

Google Spreadsheet 裡用規則運算式

最近因為工作關係,遇到要用 Google Form 及 Google Sheet 所以研究了 Google Sheet 裡的一些 function 怎麼用 首先,分享一下如何在 Google Sheet 裡用規則運算 :D