js调试学习总结2
js調試系列 斷點與動態調試[基礎篇]
http://www.jb51.net/article/51233.htm上幾篇文章已經為大家介紹了js調試系列的一些基礎知識，支持亂碼兄弟為大家帶來了js斷點與動態調
試方法，需要的朋友可以參考下
上幾篇文章已經為大家介紹了js調試系列的一些基礎知識，這次亂碼兄弟為大家帶來了js斷點與動態調
試方法，需要的朋友可以參考下
昨天留的課后練習 1. 分析 votePost 函數是如何實現 推薦 的。
其實我們已經看到了源碼，只要讀下源碼即可知道他是怎么實現的了。
function votePost(n, t, i) {?
?i || (i = !1);?
?var r = {?
? blogApp: currentBlogApp,?
? postId: n,?
? voteType: t,?
? isAbandoned: i?
?};?
?$("#digg_tips").css("color", "red").html("提交中...");?
?$.ajax({?
? url: "/mvc/vote/VoteBlogPost.aspx",?
? type: "post",?
? dataType: "json",?
? contentType: "application/json; charset=utf-8",?
? data: JSON.stringify(r),?
? success: function(n) {?
? ?if (n.IsSuccess) {?
? ? var i = $("#" + t.toLowerCase() + "_count");?
? ? r.isAbandoned ? $(i).html(parseInt($(i).html()) - 1) : $(i).html(parseInt($(i).html())?
+ 1)?
? ?}?
? ?$("#digg_tips").html(n.Message)?
? },?
? error: function(n) {?
? ?n.status > 0 && (n.status == 500 ? $("#digg_tips").html("抱歉！發生了錯誤！麻煩反饋至
contact@cnblogs.com") : $("#digg_tips").html(n.responseText))?
? }?
?});?
}
ps: 我用的是 sublime text 格式化的代碼，和chrome控制臺格式化后的結果有點不同。
也可以試試這個在線格式化工具，效果差不多：Online JavaScript beautifier?
簡單讀過代碼后，可以大致知道，這個函數有 3 個參數，第一個是 postId，就是文章ID，第二個是 推
薦(digg) 或者 反對(bury)，
但是第三個一直沒用到，而且默認值是 false
往下看，他在 #digg_tips 處顯示 "提交中..." 字符串，接著通過 ajax 提交數據給后臺。
返回數據后，如果 n.IsSuccess 是 真 就在對應的 喜歡(#digg_count)或反對(#bury_count)的計數id
上 +1，
不過這里看到如果 isAbandoned 的值是 真 的話，就計數 -1。
那我們可以猜測第三個參數是撤銷推薦或者反對用的，簡單說就是我點了推薦，但是我現在不想推薦了
，可以傳遞第三個參數 true 實現取消推薦的作用。
我們稍后測試下。
接著是在 #digg_tips 處顯示服務器返回的 n.Message 信息。
如果 ajax 發生錯誤，是 500 錯誤就提示 "抱歉！發生了錯誤！麻煩反饋至contact@cnblogs.com" 其
他狀態直接提示服務器返回的錯誤信息。
這就是大致的流程，因為這個函數簡單，所以基本上一眼就看出來了。
可能有的新人朋友問了，你怎么知道 currentBlogApp, n, t ,i 是什么值呢?
那我們來進行下一步，動態調試好了。對于編譯過的項目，動態調試是非常有用的手段。
先定位到 votePost 源碼處，(這個昨天說過了，不太懂的話，再回去看看先。)
so easy，我們就定位到了源碼。
接下來我們點下92那個數字，進行下斷點操作。
為什么不是在91行下斷點呢？
因為91行是函數聲明部分，沒法下斷點，我們在函數要執行的代碼處下斷點才行。
看到 91 行的行號變成藍色了，表示這個地方已經下了斷點了。同時，我們可以在右側 Breakpoints 一
欄里看到已下的斷點。
Breakpoints 這個一欄是管理所有斷點的，可以方便的跳轉到對應斷點的位置出，以后常常會用到哦。
現在下完斷點了，我們回頭點下 推薦。。(雖然感覺我在騙推薦，不過我真心沒這么想，當初是隨便找
了個按鈕當練習的。)
當你點 推薦 按鈕的時候，神奇的事情發生了，并沒有運行推薦功能，而是跳到了控制臺 Sources 面板
里我們剛剛下的那個斷點處。
現在，你不僅能在右側 Scope Variables(變量作用域) 一欄處看到當前變量，而且還能把鼠標直接移到
任意變量上，就可以查看該變量的值。
Scope Variables欄目會顯示當前作用域以及他的父級作用域，以及閉包。
是不是超方便。。(我初學閉包的時候，Scope Variables幫了我不少呢。)
我們進行下一步，按3次 F10 就可以看到這樣的東西。
我們每按一次 F10 會執行一條語句，剛才按了3次，就是執行到了 ?$("#digg_tips").css("color",?
"red").html("提交中...");?
所以我們可以在頁面上看到 #digg_tips 顯示提交中的字樣。
可是當我們再次按 F10 的時候，發現他一路執行下去，而沒有進入 ajax 內部的回調函數。
這是個糾結的問題，也是我要重點說的。
像這種回調函數，特別是異步的，我們要在回調函數內部再次下一個斷點。
所以我們在 96 行再下個斷點即可，現在我們再點一下 推薦 依然停在了 92 行，我們直接按 F8 就可
以在 ajax 的回調函數處斷下了。
現在，我們就可以調試回調數據了，同時可以發現右側 Scope Variables 多了一個 Closure 的東西，
這個就是閉包。
如果現在理解不了，那就過，這東西要大篇幅介紹，不是三言兩句就能講明白的，反正控制臺很強大就
對了。
在看到閉包的同時，我們也看到 ajax 的返回數據 n，很明顯，我的 IsSuccess 屬性為 false 沒有成
功，因為他返回了一個信息 "不能推薦自己的內容"。
是不是很有意思，動態調試，讓尋找BUG變得 so easy。
接下來，我們來實驗第三個參數。
我們在控制臺輸入 ?votePost(cb_entryId, 'Digg', true); ?然后回車。
同樣停在了92行的斷點處，這個里就不調試了，直接F8進入 ajax 的回調函數出。
在這里我們非常清楚的看到，當第三個參數為 true 的時候，確實是取消推薦了，同時你可以看到推薦
數確實 -1 了，哪怕刷新也一樣。
本次我們用到了兩個快捷鍵 F10 和 F8，明天詳細介紹，今天先學會基礎調試先。
課后練習：(提高下難度)
1. 查看下面評論的 提交評論 按鈕，并找到他的事件。(jQuery 綁定的)
2. 動態調試這個 提交評論 事件的執行過程。
如果不會這個練習，推薦看下 《淺談 jQuery 事件源碼定位問題》，有詳細分析哦。
本文來自：博客園博主 亂碼 的文章。http://www.cnblogs.com/52cik/
========
一探前端開發中的JS調試技巧
http://www.cnblogs.com/miragele/p/5394396.html前言：調試技巧，在任何一項技術研發中都可謂是必不可少的技能。掌握各種調試技巧，必定能在工作
中起到事半功倍的效果。譬如，快速定位問題、降低故障概率、幫助分析邏輯錯誤等等。而在互聯網前
端開發越來越重要的今天，如何在前端開發中降低開發成本，提升工作效率，掌握前端開發調試技巧尤
為重要。
本文將一一講解各種前端JS調試技巧，也許你已經熟練掌握，那讓我們一起來溫習，也許有你沒見過的
方法，不妨一起來學習，也許你尚不知如何調試，趕緊趁此機會填補空白。
骨灰級調試大師Alert
那還是互聯網剛剛起步的時代，網頁前端還主要以內容展示為主，瀏覽器腳本還只能為頁面提供非常簡
單的輔助功能的時候。那個時候，網頁主要運行在以IE6為主的瀏覽器中，JS的調試功能還非常弱，只能
通過內置于Window對象中的alert方法來調試，那時候看起來應該是這個樣子：
Alert調試效果
需要說明一點，這里看到的效果，并非當年的IE瀏覽器中看到的效果，而是在高版本IE中的效果。此外
，當年貌似還沒有這么高級的控制臺，而alert的使用也是在真實的頁面JS代碼中。雖然，alert的調試
方式很原始，但當時確實有它不可磨滅的價值，甚至到今天，已然有其用武之地。
新一代調試王者Console
隨著JS在Web前端中能做的事情越來越多，責任越來越大，而地位也越來越重要。傳統的alert調試方式
已經漸漸不能滿足前端開發的種種場景。而且alert調試方式彈出的調試信息，那個窗口著實不太美觀，
而且會遮擋部分頁面內容，著實有些不太友好。
另一方面，alert的調試信息，必須在程序邏輯中添加類似”alert(xxxxx)”這樣的語句，才能正常工作
，并且alert會阻礙頁面的繼續渲染。這就意味著開發人員調試完成后，必須手動清除這些調試代碼，實
在有些麻煩。
所以，新一代的瀏覽器Firefox、Chrome，包括IE，都相繼推出了JS調試控制臺，支持使用類
似”console.log(xxxx)”的形式，在控制臺打印調試信息，而不直接影響頁面顯示。以IE為例，它看起
來像這樣：
Console調試效果
好吧，再見丑陋的alert彈出框。而以Chrome瀏覽器為首的后起之秀，為Console擴展了更豐富的功能：
更豐富的Console
你以為這樣就滿足了？Chrome開發團隊的想象力實在不得不讓人佩服：
花式Console.log
好了，稍微多說了一點點題外話。總之，控制臺以及瀏覽器內置Console對象的出現，給前端開發調試帶
來了極大的便利。
有人會問，這樣的調試代碼不一樣需要在調試完成后進行清理嗎？
關于這個問題，如果在使用console對象之前先進性存在性驗證，其實不刪除也不會對業務邏輯造成破壞
。當然，為了代碼整潔，在調試完成后，還是應盡可能刪除這些與業務邏輯無關的調試代碼。
JS斷點調試
斷點，調試器的功能之一，可以讓程序中斷在需要的地方，從而方便其分析。也可以在一次調試中設置
斷點，下一次只需讓程序自動運行到設置斷點位置，便可在上次設置斷點的位置中斷下來，極大的方便
了操作，同時節省了時間。——百度百科
JS斷點調試，即是在瀏覽器開發者工具中為JS代碼添加斷點，讓JS執行到某一特定位置停住，方便開發
者對該處代碼段的分析與邏輯處理。為了能夠觀察到斷點調試的效果，我們預先隨意準備一段JS代碼：
斷點調試測試代碼
代碼很簡單，就是定義一個函數，傳入兩個數，分別加上一個亂七八糟的隨機整數后，再返回兩個數的
總和。以Chrome開發者工具為例，我們來看一下JS斷點調試的基本方法。
Sources斷點
首先，測試代碼中我們通過上圖console的輸出結果可以看出代碼應該是正常運行了，但是為什么是應該
呢？因為函數中加了一個隨機數，而最終結果是否真的是正確的呢？這是毫無意義的猜想，但是假設我
現在就是要驗證一下：函數傳入的兩個數、被加的隨機數，以及最終的總和。那么該怎么操作呢？
方法一，前面講過最普通的，無論使用alert還是console，我們可以這么來驗證：
通過console進行上述驗證
從上圖發現，我們在代碼中新增了三行console代碼，用以打印我們關心的數據變量，而最終我們從控制
臺（Console面板）中的輸出結果，可以很清楚的驗證整個計算過程是否正常，進而達到我們題設的驗證
要求。
方法二，方法一的驗證過程存在很明顯的弊端就是，添加了很多冗余代碼，接下來我們看一下使用斷點
進行驗證，是否更加方便，先看一個如何加斷點，以及斷點后是什么效果：
斷點調試效果一
如圖，給一段代碼添加斷點的流程是“F12（Ctrl + Shift + I）打開開發工具”——“點擊Sources菜
單”——“左側樹中找到相應文件”——“點擊行號列”即完成在當前行添加/刪除斷點操作。當斷點添
加完畢后，刷新頁面JS執行到斷點位置停住，在Sources界面會看到當前作用域中所有變量和值，只需對
每個值進行驗證即可完成我們題設驗證要求。
那問題來了，仔細的朋友會發現當我的代碼執行到斷點的時候，顯示的變量a和b的值是已經進行過加法
運算后的，我們看不到調用sum函數時初始傳入的10和20。那么該怎么辦呢？這就要回過頭來先學習一下
斷點調試的一些基礎知識了。我們打開Sources面板后其實會在界面中看到如下內容，我們跟著鼠標軌跡
逐一看看都是什么意思：
斷點調試功能選項介紹
從左到右，各個圖標表示的功能分別為：
Pause/Resume script execution：暫停/恢復腳本執行（程序執行到下一斷點停止）。
Step over next function call：執行到下一步的函數調用（跳到下一行）。
Step into next function call：進入當前函數。
Step out of current function：跳出當前執行函數。
Deactive/Active all breakpoints：關閉/開啟所有斷點（不會取消）。
Pause on exceptions：異常情況自動斷點設置。
到此，斷點調試的功能鍵介紹得差不多了，接下來我們就可以一行一行去看我們的程序代碼，查看每一
行執行完畢之后，我們各個變量的變化情況了，如下圖所示：
斷點調試，逐行驗證
如上，我們可以看到a、b變量從最初值，到中間加上隨機值，再到最后計算總和并輸出最終結果的整個
過程，完成題設驗證要求不在話下。
其余幾個功能鍵，我們稍微改動一下我們的測試代碼，用一張gif圖來演示他們的使用方法：
斷點進入、跳出函數演示
這里需要注意一點，直接在代碼區打印變量值的功能是在較新版本的Chrome瀏覽器中才新增的功能，如
果你還在使用較老版本的Chrome瀏覽器，可能無法直接在斷點的情況下查看變量信息，此時你可以將鼠
標移動到變量名上短暫停頓則會出現變量值。也可以用鼠標選中變量名稱，然后右鍵“Add to watch”
在Watch面板查看，此方法同樣適用于表達式。此外，你還可以在斷點情況下，切換到Console面板，直
接在控制臺輸入變量名稱，回車查看變量信息。該部分比較簡單，考慮篇幅問題，不在做圖演示。
Debugger斷點
所謂的Debugger斷點，其實是我自己給它命名的，專業術語我也不知道怎么說。具體的說就是通過在代
碼中添加”debugger;”語句，當代碼執行到該語句的時候就會自動斷點。接下去的操作就跟在Sources
面板添加斷點調試幾乎一模一樣，唯一的區別在于調試完后需要刪除該語句。
既然除了設置斷點的方式不一樣，功能和Sources面板添加斷點效果一樣，那么為什么還會存在這種方式
呢？我想原因應該是這樣的：我們在開發中偶爾會遇到異步加載html片段（包含內嵌JS代碼）的情況，
而這部分JS代碼在Sources樹種無法找到，因此無法直接在開發工具中直接添加斷點，那么如果想給異步
加載的腳本添加斷點，此時”debugger;”就發揮作用了。我們直接通過gif圖看看他的效果：
Debugger斷點使用演示
DOM斷點調試
DOM斷點，顧名思義就是在DOM元素上添加斷點，進而達到調試的目的。而在實際使用中斷點的效果最終
還是落地到JS邏輯之內。我們依次來看一下每一種DOM斷點的具體效果。
當節點內部子節點變化時斷點（Break on subtree modifications）
在前端開發越來越復雜的今天，前端JS代碼越來越多，邏輯越來越復雜，一個看似簡單的Web頁面，通常
伴隨著大段大段的JS代碼，涉及諸多DOM節點增、刪、改的操作。難免遇到直接通過JS代碼很難定位代碼
段的情況，而我們卻可以通過開發者工具的Elements面板，快速定位到相關DOM節點，這時候通過DOM斷
點定位腳本就顯得尤其重要了。具體我們還是通過gif演示來看一下吧：
子節點發生變化時斷點
上圖演示了對ul子節點（li）的增加、刪除以及交換順序操作觸發斷點的效果。但需要注意的是，對子
節點進行屬性修改和內容修改并不會觸發斷點。
當節點屬性發生變化時斷點（Break on attributes modifications）
另一方面，由于前端處理的業務邏輯越來越復雜，對一些數據的存儲依賴越來越強烈，而將臨時數據存
儲于DOM節點的（自定義）屬性中，是很多情況下開發者優先選擇的方式。特別是在HTML5標準增強自定
義屬性支持（例：dataset、data-*之類）之后，屬性設置應用越來越多，因此Chrome開發者工具也提供
了屬性變化斷點支持，其效果大致如下：
節點屬性變化時斷點演示
此方式同樣需要注意，對子節點的屬性進行任何操作也不會觸發節點本身的斷點。
當節點被移除時斷點（Break on node removal）
這個DOM斷點設置很簡單，觸發方式很明確——當節點被刪除時。所以通常情況應該是在執
行”parentNode.removeChild(childNode)”語句的時候使用此方式。此方式使用不多。
前面介紹到的基本上是我們在日常開發中經常用到的調試手段，運用得當它們也幾乎能應對我們日常開
發中的幾乎所有問題。但是，開發者工具還考慮到了更多的情況，提供更多的斷點方式，如圖：
XHR和事件監聽斷點
XHR Breakpoints
這幾年前端開發發生了翻天覆地的變化，從當初的名不見經傳到如今的盛極一時，Ajax驅動Web富應用，
移動WebApp單頁應用風生水起。這一切都離不開XMLHttpRequest對象，而“XHR Breakpoints”正是專為
異步而生的斷點調試功能。
XHR Breakpoints演示
我們可以通過“XHR Breakpoints”右側的“+”號為異步斷點添加斷點條件，當異步請求觸發時的URL滿
足此條件，JS邏輯則會自動產生斷點。演示動畫中并沒有演示到斷點位置，這是因為，演示使用的是
jQuery封裝好的ajax方法，代碼已經過壓縮，看不到什么效果，而事實上XHR斷點的產生位置
是”xhr.send()”語句。
XHR斷點的強大之處是可以自定義斷點規則，這就意味著我們可以針對某一批、某一個，乃至所有異步請
求進行斷點設置，非常強大。但是，似乎這個功能在日常開發中用得并不多，至少我用得不多。想想原
因大概有兩點：其一，這類型的斷點調試需求在日常業務中本身涉及不多；其二，現階段的前端開發大
多基于JS框架進行，最基本的jQuery也已經對Ajax進行了良好封裝，極少有人自己封裝Ajax方法，而項
目為了減少代碼體積，通常選擇壓縮后的代碼庫，使得XHR斷點跟蹤相對不那么容易了。
Event Listener Breakpoints
事件監聽器斷點，即根據事件名稱進行斷點設置。當事件被觸發時，斷點到事件綁定的位置。事件監聽
器斷點，列出了所有頁面及腳本事件，包括：鼠標、鍵盤、動畫、定時器、XHR等等。極大的降低了事件
方面業務邏輯的調試難度。
事件監聽器斷點演示
演示實例演示了當click事件被觸發時和當setTimeout被設置時的斷點效果。實例顯示，當選中click事
件斷點之后，兩個按鈕的被點擊時都觸發了斷點，而當setTimeout被設置時，“Set Timer”斷點被觸發
。
調試，是在項目開發中非常重要的環節，不僅可以幫助我們快速定位問題，還能節省我們的開發時間。
熟練掌握各種調試手段，定當為你的職業發展帶來諸多利益，但是，在如此多的調試手段中，如何選擇
一個適合自己當前應用場景的，這需要經驗，需要不斷嘗試積累。
========
淺談 jQuery 事件源碼定位問題
http://www.jb51.net/article/51212.htm在一個不是自己寫的頁面上，如何快速定位到他綁定的事件代碼在哪,下面為大家簡單的介紹下,需要的
朋友可以參考下
昨天群里有人問了個事件源碼定位的問題，簡單描述下是這樣的。
在一個不是自己寫的頁面上，如何快速定位到他綁定的事件代碼在哪？(頁面用的是jQuery)
這個問題，說難不難，說簡單也沒那么簡單，萬一用的是委托之類也會麻煩點。
在 chrome 的控制臺里有個 Event Listeners，這里會顯示你所選擇元素的事件，如果是原生事件，他
會直接顯示，
你點擊一下事件就會跳到對應代碼里了，可是 jQuery 綁定的事件卻不是這樣的，你點擊后只會跳到?
jQuery 源碼里，
min后的jQuery源碼密密麻麻的，看著都眼花。
關于jQuery對于事件的管理，大牛們也分析的非常透徹了，我就不啰嗦了，因為不是我們今天要說的重
點。
我們要說的重點是怎么定位到事件源碼處。因為jQuery版本眾多，而且重構過多次，所以要分情況來說
了。
基本上 1.2.6-1.8 和 1.9 兩種情況，經過測試，大體上定為下面2個版本
1.2.6-1.8 用 ?$.data( elem, "events", undefined, true );?
1.9+ 用 ?$._data( elem, "events" );?
PS: 你現在也可以按 F12 打開控制臺看看結果，當然也可以復制下面的源碼自己測試。
由于谷歌被墻的厲害，所以把cdn換成百度的了。2014-06-07
?
<!doctype html>
<html lang="en">
<head>
? <meta charset="UTF-8">
? <title>test</title>
? <script src="http://libs.baidu.com/jquery/1.4.0/jquery.js"></script>
</head>
?
<body>
? <input type="button" id="testbtn" value="testbtn" />
? <script>
? ? var version = ["1.2.6", "1.3.0", "1.4.0", "1.5.0", "1.6.0", "1.7.0", "1.8.0", "1.9.0",?
"1.10.0"],
? ? ? elem = $("#testbtn")[0], // 待操作的元素
? ? ? url, // jquery 地址
? ? ? jq = null, // 保存新的jquery句柄
? ? ? jqver, // jqury 版本
? ? ? fn; // 函數句柄
?
? ? for (var i = 0; i < version.length; i++) {
? ? ? url = "http://libs.baidu.com/jquery/" + version[i] + "/jquery.min.js";
?
? ? ? $.getScript(url, function() {
? ? ? ? jq = $.noConflict(true); // 釋放控制權
? ? ? ? jqver = jq.fn.jquery; // 當前 jquery 版本
? ? ? ? fn = new Function('ver_' + jqver.replace(/\./g, "_"), ''); // 生成類似 function?
(ver_1_9_0) {} 這樣的函數
? ? ? ? jq(elem).click(fn).click(fn).bind("test", fn); // 普通事件和自定義事件
?
? ? ? ? console.log(
? ? ? ? ? jqver,
? ? ? ? ? jq.data && jq.data(elem, "events", undefined, true),
? ? ? ? ? jq._data && jq._data(elem, "events")
? ? ? ? );
? ? ? });
? ? }
? </script>
</body>
</html>
如果不出意外，你可以在控制臺看到這樣的顯示結果
展開后可以看到綁定的函數參數里的版本和當前版本是對應的。
?
可以看到
1.2.6-1.4 只支持 ?$.data( elem, "events", undefined, true );?
1.5-1.8 兩者都支持
1.9-1.11 只支持 ?$._data( elem, "events" );?
那么我們可以寫個函數簡單的兼容下，然他全兼容即可
?
function lookEvents (elem) {
? return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}
現在調用 lookEvents 就可以得到對應的 events 對象了。
雖然可以看到了我們綁定的自定義事件，但還是不知道他在哪個文件哪一行啊。
下面我們就來定位他的具體位置，我們就拿 1.7 的試試。
PS: 下面操作都是在控制臺完成，我的環境是 chrome 34
?
function lookEvents (elem) {
? return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}
var event = lookEvents($("#testbtn")[0]); // 獲取綁定的事件
event.click[0].handler // 獲取click事件的第一個事件源碼地址
復制到控制臺，按回車運行后，不出意外可以看到下面這個結果。
有沒有看到右下角的 1.html:36 這個就是源碼所在的文件和對應的行號了。
你可以直接點擊 1.html:36 跳到對應的代碼處，是不是覺得很給力啊。
上面方法適用于 1.5+ 版本的 jQuery，對于 1.2.6-1.4 的版本，稍微有點不同，不過也非常簡單。
function lookEvents (elem) { return $.data ? $.data( elem, "events", undefined, true ) :?
$._data( elem, "events" );}var event = lookEvents($("#testbtn")[0]); // 獲取綁定的事件
event.click; // 查看有幾個click事件，如果要查看其他事件直接輸入 event 然后回車即可
上面看到的編碼就是對應事件句柄了，比如我這的 1，2 事件(如下圖顯示), 這個編號不是按順序的，
這個要注意。
?event.click[1] // 獲取click事件的 id是1 的事件源碼地址?
不出意外可以看到下面這個結果。
從操作來說，不管是 1.2.6-1.4 還是 1.5+ 版本 都差不多，只是 1.5+ 利用數組模式管理函數句柄了
，比較方便。
好了，該說的都說完了，小伙伴們各種測試起來吧。
========
JSFiddle:在線JS代碼調試工具
http://www.egouz.com/topics/7865.html英文網址：http://jsfiddle.net/英文網址
JSFiddle:在線JS代碼調試工具是一個老牌的支持javascript、css、html代碼可視化在線調試工具，支
持多種應用多種主流框架，用起來非常方便，而且還可以將調試好的結果以非常簡潔的頁面直接嵌入在
其他網頁里。
JSFiddle:在線JS代碼調試工具
對于網頁設計師來說需要寫演示用的JavaScript實例代碼的時候，就完全可以在jsFiddle里面直接完成
編寫后調試，再將結果直接嵌入Blog正文里即可了，真的是很方便的選擇。
除了可以調試代碼外，還可以方便的發布到社區，論壇或者社交媒體上與朋友們分享或者提問。整合了
很多的不同的類庫供大家選擇。 類似的工具還有jsbin.com，也非常不錯。
========
http://runjs.cn/
RunJS - 在線編輯、展示、分享、交流你的 JavaScript 代碼========
總結
- 上一篇： js调试学习总结
- 下一篇： 数据结构学习工具总结