javascript

mobile web debug tool(jsconsole)

如果要在android的browser debug，最早期的方式，是使用adb logcat然後過濾掉其他訊息，只顯示browser的log，而ios上的Safari，則是可在設定，直接在mobile上觀看log(在mac上，可以使用類似chrome同樣的除錯介面)。但是這種除錯方式不易，只能單方面看到browser訊息，並沒辦法直接從pc上對瀏覽器下指令，而jsconsole剛好可以解決這個問題。

jsconsole提供了一個console page(jsconsole.com)，會產出一個listen key，同時test page(開發者寫得測試頁面)也會include一隻script，在透過server讓test page和console page溝通。

step 1 在console page輸入以下code：

:listen

server會回傳

Creating connection...
Connected to "2A049E81-520B-4074-BB06-45BE8ADBE9E1"
<script src="http://jsconsole.com/remote.js?2A049E81-520B-4074-BB06-45BE8ADBE9E1"></script>

step 2 將回傳的script貼到test page:

<html>
  <head>
     <script src="http://jsconsole.com/remote.js?2A049E81-520B-4074-BB06-45BE8ADBE9E1"></script>
  </head>
<body>

</body>
</html>

這樣就配置完成，可以直接在console page，輸入javascript，也能同時接收test page裡的console.log。

step 3 在console page輸入:

alert("test");

就會看到在mobile上，跑出訊息視窗。技術猜測應該是使用long polling或server push之類技術。

 

mobile chrome debug：

那如果使用chrome browser，可以直接在mobile選項，點選設定→開發人員工具→啟用usb網頁偵錯。

接著只要在終端機鍵入以下指令：

adb forward tcp:9222 localabstract:chrome_devtools_remote

然後在到pc上，打開chrome，在網址上輸入localhost:9222，就可以直接使用pc上的除錯工具了，比起jsconsle，對於開發者相對於友善多了。可以參考remote debugging