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