May 15 2013

weinre

weinre是一個用於瀏覽器的遠端除錯工具，運作方式與jsconsole相同，都是透過include一隻外部js script，來與server溝通傳遞資料。但是jsconsole只提供一些很基本功能，如果要能像chrome一樣，查看dom element、network等功能，可以使用weinre。

使用時機：

使用android、ios等手持裝置的browser，或者對IE除錯的時候，都很適合。

weinre原理：

weinre基本原理是，建立一個console page，然後經由weinre server，與development page（你要除錯的page）互相傳遞資料溝通。（溝通方式採用long polling）

時序圖如下：

透過node.js安裝：

sudo npm install -g weinre

操作流程：

開啟weinre server：

weinre --httpPort 8081 --boundHost localhost

打開瀏覽器輸入http://localhost:8081/：

然後在你想要除錯的頁面加上以下script：

<script src="http://localhost:8081/target/target-script-min.js#anonymous"></script>

例如：

<!DOCTYPE HTML>                                                                                  
<html lang="en">                                                                                 
<head>                                                                                           
    <meta charset="UTF-8">                                                                       
    <title></title>                                                                              
    <script src="http://localhost:8081/target/target-script-min.js#anonymous"></script>       
</head>                        
<body>                                                                                           
    <div>weinre test</div>                                                                       
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
</body>                                                                                          
</html>

開啟http://localhost:8081/client/#anonymous，就可以開始除錯了。