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