移動端調試利器 JSConsole 介紹

先看這篇文章 Web應用調試：如今是Weinre和JSConsole，最終會是WebKit的遠程調試協議。

咱們先不看將來，今後文可見，當下的移動端調試仍是 Weinre 和 JSConsole 的天下。Weinre 咱們在前面已經有所瞭解（詳見 移動端頁面(css)調試之「weinre大法」），它主要是爲了移動端 css 的調試，能兼容各類瀏覽器，支持 css 修改，且不用刷新就能在移動端看到效果。今天咱們來了解下另外一種利器 —— JSConsole。

移動端的調試最蛋疼的恐怕就是想打印些東西了，alert 太簡單粗暴，爲此，有人寫了 debug.js 插件，可是對於 JSConsole 來講，徹底是雞肋！

JSConsole 是一個風格和 Weinre 相似的工具，它更多地關注於控制檯輸出和代碼求值。在訪問JSConsole 的網站的時候，用戶輸入 「:listen」 來得到帶有 GUID 的一段 JavaScript 代碼。這段代碼須要被加入到待調試的網頁中。因而，在加載網頁的時候，代碼將會鏈接到 JSConsole 服務器，而且根據 GUID 將此會話和用戶的會話關聯起來，因而用戶瀏覽器中的控制檯如今便已經處於待調試網頁的 JavaScript 運行時環境中了。

JSConsole 使用方法真的很簡單。

首先打開 JSConsole。

接着在打開的網頁輸入 :listen，將會獲得一串 GUID 以及一對帶有 src 屬性的 Javascript 標籤，以下圖：

將這個 Javascript 腳本插入到須要調試的 html 頁面中，好比這樣：

複製代碼<script src="http://jsconsole.com/remote.js?BDA15940-A201-4EAB-9482-941CD41742EC"></script>
<script>
    var a = 1
      , b = 2;

    console.log(a + b);
</script>

而後刷新你本地須要調試的頁面（PC端或者移動端），若是是第一次打開的話，會彈出下圖內容，大概意思就是告訴你如今引入了 JSConsole 的一段 js 進行調試，記得在上線時將它移除。

在打開 JSConsole 的頁面便會輸出 console 的內容；若是頁面 JS 報錯，通常狀況下也能在 JSConsole 中進行定位。

這裏須要提醒的是，刷新的是本地頁面，而並非 JSConsole 的頁面，一旦刷新 JSConsole 的頁面，便會生成一個新的 GUID，這樣以前生成的就沒用了，調試也就失效了。