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(){return st})})(window);
//@ sourceMappingURL=jquery.min.map



接下來我會用個簡單的範例來說明怎麼使用Source Maps來Debug JQuery

1. 首先下載(注意這3個檔案要放在同一個目錄底下)
http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js 
http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquer.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.map

2. 建立index.html

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" charset="utf-8" src="./jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$("h1").addClass("aa");
});
</script>
<body>
<h1> Source Maps</h1>
</html>


3. 用Chrome打開index.html,並且再進入開發者工具,然後在$("h1").addClass("aa");下Breakpoint



4.  按下step into funcaion call的快速鍵(Linux是F11),或是按下接著你就可以開始trace jquery的source code了



張貼留言

這個網誌中的熱門文章

解釋scope.$apply用來做什麼? -- AngularJS

Unions 在C語言的簡單介紹

JavaScript的Timer用法