發表文章

目前顯示的是 一月, 2013的文章

jQuery 1.9 支援 Source Maps

圖片
References : 
    1. http://www.elijahmanor.com/2013/01/the-magic-of-jquery-source-map.html
    2. http://net.tutsplus.com/tutorials/tools-and-tips/source-maps-101/


    JQuery最新的版本是1.9(寫這篇文章的時候),他已經支援了Source Maps。

    什麼是Source Maps呢?有興趣的可以參考這篇文章 INTRODUCTION TO JAVASCRIPT SOURCE MAPS,簡單來說就是將minified後(壓縮過後)的javascript code可以map到原來的code來幫助你更方便來除錯。

   看上面文字應該沒有哪個感覺。你首先下載http://code.jquery.com/jquery-1.9.0.min.js,用編輯器打開你應該會看到已經壓縮過後的code ( 這邊只呈現片段的code )


看到這些壓縮過後的code如果要除錯的話,那是很困難的。所以就用Source Maps的出現,我這邊只會用到Chrome來示範如何使用Source Maps,因為其他的瀏覽器我還沒去試過。

在Chrome(我目前的版本是Version 25.0.1364.36 beta)要使用的話:

1. 打開Chrome Developer Tools:  View(檢視)->Developer(開發人員選項)->Developer Tools(開發人員工具)  (Linux 快速鍵F12 )

2. 在右下角點擊Settings





































3. 選擇General ,然後打開Enable source maps






   JQuery 1.9 minified在code的最下面sourceMappingURL的指令來告訴Chome,當在Debugging的時候會去找jquery.min.map這個Source Maps。 12...&&define.amd.jQuery&&define("jquery",[],function(){returnst})})(window); //@ sourceMappingURL=jquery.min.map