|
這段時間寫腳本的機會比較多，也就對這些工具有個比較。我們都知道，工欲善其事，必先利其器嘛。有的人覺得腳本嘛有什么好調試的，一眼就看過來了，當然過于依賴于調試器很多時候也會讓我們變得懶惰和不仔細，不過大多數(shù)的時候好的開發(fā)環(huán)境還是讓我們事半功倍的。 其實回想起接觸腳本的時間算起來還真的是有些念頭了，從第一次做個人網(wǎng)頁算起，00年吧，都要來5個年頭了。那個時候學C語言也沒多久，對TC2和TC++1.0那兩個IDE喜歡的不得了，結果在遇到了沒有集成開發(fā)環(huán)境的JavaScript后，真是郁悶的要命，當然也就沒有好好學習了。直到一年前我對JS的認識都是以拿來主義為主，一般不會自己從頭寫個什么功能的。 計劃不如變化，今年下半年的工作卻主要集中在了JS的開發(fā)上，于是開始惡補JavaScript知識，同時自己也搜尋好的IDE。不過以JavaScript作為一個解釋性語言的原理來看，其實因該可以有好的調試環(huán)境的，因為想當初學習機上的BASIC都可以單步執(zhí)行也  ?？墒菫槭裁碕avaScript確實又沒有一個象樣的調試環(huán)境呢？這個和JavaScript這個語言的使用環(huán)境有關，你看Visual JScript .NET不一樣是可編譯可調試的嗎？ 我們這里說這個JavaScript都是指在網(wǎng)頁中使用的，如果我們拋開了DHTML和DOM模型，JS存在還真是想不出有什么大的意義了。正是DHTML需要Browser這個支持環(huán)境，一下就讓 JavaScript的調試變得郁悶起來了  。 在我記憶里微軟那個腳本調試器，是和Visual Studio一起的一個東東，而且是挺早以前就有了的，可是只是偶爾網(wǎng)頁出錯會跑出來，但也不知道它到底什么時候出來，也沒有深究(后面會就究的:)。其它的一些JavaScript IDE大多都是用IE作為運行環(huán)境，當然可以也可以使用IE的COM組件接口來執(zhí)行一些JS語句和函數(shù)，但都不是真正意義上的IDE，因為我們需要的是Step Into & Step Over! 前者的代表是一個叫做Antechinus JavaScript Editor的東東，看看圖片，還不錯吧:)  (本文第11個回復里有下載地址) 這個程序看著挺專業(yè)自己還是只叫做Editor，還比較的謙虛。它的代碼著色和IntelliSence都做得都還可以了，不過它還有一個不錯的地方是提供了一個系列的示例代碼庫，就是上圖右下window里的Solutions，用TreeView組織起來的。這類工具還有Developer's JavaScript Editor、jsEditor、MyEclipse JavaScript Editor，而且他們無疑例外都叫做Editor了  。 當然除了一窮二白的Notepad可以寫腳本，還有DreamWeaver、FontPage什么的，都可以寫，而且后者也有highlighting和有限的IntelliSence。我們就不去多說這些了，接下來給大家推薦的真正的JavaScirpt開發(fā)的IDE就是... VS.NET 2003 + VS.NET 2005，是不是覺得既然都提到2005了，還要2003干什么啊?! 后面會說到為什么會這么郁悶。 居然殺雞用牛刀，可是這個牛刀就是有很好的殺雞能力哦。為什么不直接使用VS.NET 2005而還要使用2003，由于2005我手里在用的只是個beta1，有一個功能不知道是沒有improve好，還是什么別的原因，完全趕不上2003，而且還沒法完全替代:( 到底是什么功能呢？下面再具體的說，去吃個獼猴桃先。 不管我們是怎么調試JavaScript，他總是在browser里運行，下面我都說在IE里的情況。目前我使用IE6.0 sp1，要啟動腳本調試，需要在IE的Tools->Internet Options的Advanced里uncheck 'Disabled Script Debugging.'，否則腳本出錯時我只能在browser的status bar上看到一個錯誤提示圖標。這樣一來，當browser里出現(xiàn)腳本錯誤的時候，就會彈出一個這樣的warning dialog：  點擊Yes后，將出現(xiàn)如下窗口：  這個debugger dialog里列出的‘Possible Debuggers’就是我機器里已安裝的Script調試器。其中"Microsoft Script Editor"就是上次說的Visual Studio里帶的調試器了，... 2003、... 2005就不用說了，就是VS.NET了。這種情況的調試是最普通的調試，可以直接把斷點定位到腳本錯誤的行上，然后通過watch窗口看local變量的值來確定錯誤的所在。 那么腳本要是不明顯的出語法錯誤怎么設斷點呢？這里有兩個辦法，一個是使用IE View菜單里的Script Debugger子菜單(這個菜單是在IE的Tools->Internet Options->Advanced里設置過才會出來的)：  "Open"就和上面說到到的點"Yes"后出來的窗口一樣，點"Break at Next Statement"比較的有意思，它將會在你的Browser執(zhí)行下一條腳本的時候讓你選擇調試器來調試，這一點十分便于我們分析別人的擁有復雜JavaScript的頁面。比如gmail里面的管理頁面，如果我想看看點了star之后它是怎么處理的，就可以使用這個"Break at Next Statement"，讓它break在next statement上。不過使用這個feature有個技巧：有的頁面由于捕獲了onmousemove事件，如果你通過鼠標去點擊菜單里的"Break at Next Statement"條目，你的next statement總是被onmousemove給捕獲了  ，而得不到你想要的onclick的語句的中斷，怎么辦呢?! 那就是使用快捷鍵啦，比如你希望激活調試gmail里的mail list上的star(如下圖)被點擊時執(zhí)行的腳本，你就把鼠標放在star上面，先按快捷鍵"Alt+V"、"u"、"b"，再點擊就行了。  到這里就可以說一下為什么現(xiàn)在還要用VS.NET 2003，而不只用VS.NET 2005來調試腳本了。比如上面的case，如果我在"Possible Debuggers"里選"New Instance of Visual Studio Whidbey"，我們將會得到一個Msg Box：  用我test team一個哥們的話來說：真是傷感哦！ 這時我們使用VS.NET 2003就可以順利的跟蹤了  。 確實郁悶吧？不過，我相信whidbey正式release的時候，這個問題因該是能解決的了，那時2003就可以完全下崗了。 當然讓調試器whidbey跟蹤<script src="..."></script>這種情況不是完全沒有可能，這里有個小hack可以使用的。就是在調試前把會被引用到的script文件預先就打開在whidbey里，然后就能trace到該文件中去，這個辦法顯然只能解決本地調試，對于服務器端引用的意義不大，因為我們沒法預先把服務器上的腳本文件打開:(。 _fcksavedurl=""..."></script>這種情況不是完全沒有可能，這里有個小hack可以使用的。就是在調試前把會被引用到的script文件預先就打開在whidbey里，然后就能trace到該文件中去，這個辦法顯然只能解決本地調試，對于服務器端引用的意義不大，因為我們沒法預先把服務器上的腳本文件打開:(。 " 我們簡單的使用VS.NET打開一個包含腳本的html文件，我們發(fā)現(xiàn)我們是不能調試它的，雖然我們可以按F9來設置一個端點，但是這個斷點卻是形同虛設:(。這是因為我們的browser還沒有進入可調試狀態(tài)，使用上一篇文章中的在代碼出錯時選擇Debugger的方法可以讓browser進入調試狀態(tài)，更普通的辦法是把Browser的線程附加到調試器上去。下圖就是調試Test.html的示例： 附加線程到運行Test.html的Browser進程上，就是Processes List里的"IEXPLORE.EXE"。 這樣一來再在腳本代碼上按F9設置斷點，斷點的狀態(tài)就會從下圖的第一個unavailable狀態(tài)變?yōu)橄聢D的第二個available狀態(tài)。 這樣一來我們的代碼執(zhí)行到斷點處就會停止下來，這個好像廢話哈 。下面就是VS.NET 2005比VS.NET 2003強的地方登場了。我們如果用過VS.NET編譯型程序的調試，都知道把鼠標放在變量名上，會很快有個Tooltip顯示變量的值，或對象的類型和默認ToString()的值。這個功能在2003和2005里同樣擁有，只是對于對象Object，在2003里就顯示一個{...}，如果要看{...}是啥？需要使用Add Watch或QuickWatch來看；在whidbey里面，這個察看功能有了很大的提升，我們將會看到一個可展開的節(jié)點來顯示對象的值，我們可以在彈出窗口里瀏覽整個對象樹，如下圖： 這個東西看起來是不是對調試非常方便呢？當然要是我們覺得彈出窗口太大遮擋了代碼，而且這時我們又瀏覽了很多幾級對象樹了，屏幕上有一大堆展開的彈出窗口，我們不希望它們消失后，看清了代碼又再把它們重新弄出來，怎么辦呢？我們這時可以按Ctrl鍵或者鼠標中鍵(就是滾輪)讓這些彈出窗口透明化~~~ 很酷很貼心的功能吧 ？ 調試腳本中可能遇到的問題和對策(我們都默認IE的允許腳本調試的選項是開啟的)： 1、本來我們打開IE的腳本調試后，程序出現(xiàn)腳本錯誤時就會彈出一個MsgBox來提示是否調試，而不只是在IE左下角顯示一個warning icon。但是有的時候經(jīng)過長時間的調試，IE在腳本錯誤的時候，會不再彈出那個調試提示框，而是又變?yōu)樵谧笙陆秋@示錯誤圖標。解決這個問題很簡單，關掉browser重新打開來調試就好了。 2、在腳本正常運行時，我們使用IE的View->Script Debugger的Open和Break at Next Statement選項會強行調出腳本調試器選擇窗口。但是如果我們在腳本中開啟過popup窗口，這兩個調試選項會失效，就是點選后沒有任何反應，這個可能是IE的bug，解決辦法一：重新起動IE來調試；解決辦法二：在希望調試的腳本語句前寫一個錯誤的腳本調用，比如a.a;，這樣程序運行在a.a語句時就會被break并彈出錯誤調試提示MsgBox，我們可以在這時選擇調試器，進入調試狀態(tài)后使用鼠標改變腳本執(zhí)行順序，跳過錯誤的語句就行了。 關于腳本調試環(huán)境先寫到這里，以后有更好的調試方法我會更新進來，歡迎大家提出更好的腳本調試意見和建議。 |
|
|
