移动端调试利器 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，这样以前生成的就没用了，调试也就失效了。