webstorm8的新特性里边多了一条， 支持spy-js ！

首先必须坦诚，在这之前我并没有听说过spy-js，还是对前沿技术关注度不够啊，稍一放松就落伍了。

这不看到 webstorm8 的新特性中多了一条对spy-js的支持， 赶紧来看看spy-js是个什么东东。 要知道， webstorm对新特性的支持，很多时候是紧贴前沿的！

我们来看看spy-js的官网怎么说的， 为什么会有这个东西。 官网地址

首先了解到这作者是个老毛子，请允许我这样称呼，我们那边都这么叫，恩，就是老毛子。 瓜子我们叫毛嗑, 因为老毛子爱嗑。这哥们洋洋洒洒一大篇， 一眼扫过， 大概估计猜想是这样的： 这哥们写了一个spy-js， 然后就被intellij看上了， intellij 你知道的， 最牛逼的IDE厂商之一，对，就是那个让谷歌抛弃eclipse改投他的idea的intellij。 intellij就把这哥们给招了，现在webstorm对spy-js提供了非常好的支持，下边我们就絮叨絮叨。 (八卦贴)

spy-js 能干嘛

  • 查看当前页面中有哪些事件正在被触发, 查看这些事件的调用堆栈以及相关联的源代码片段

  • 事件可过滤， 只需要关心需要监测的事件

  • 查看事件调用的场景， 相关函数的传参， 返回值

  • 完美兼容IE6， mobile 等执行环境

  • 查看事件函数的耗时， 找到性能瓶颈

  • 通过这种方式， 了解你并不熟悉的代码是如何执行的 (回头准备通过这种方式过一下requirejs的源码， 到时候放出相关资料)

spy-js 如何使用 github介绍页

讲如何使用之前，我们先来说一下spy-js的工作原理： spy-js启动之后，会在你的本地起一个服务器，然后把系统代理设置到这台服务器上， 所有从你机器上出去的请求都是通过这个服务器的， 当然从网络上回来的时候，也是通过这个服务器返回的。 在这个过程中， spy-js会向你的js中插入一些相关的打桩代码， 这时候你浏览器访问到的起始是已经被打桩修改过的js文件， 不过你不用担心， 这些打桩并不会影响js的逻辑执行。 你可以认为它是完全透明的。

下边进入正题， 讲如何使用。

  • 在webstorm中打开相关项目， 菜单栏的run中选择Edit Configurations -> 添加 -> 选择 spy-js

  • name, 不用多说了吧， 就是这项配置的名字， 给他起名如花吧。记住， 这里我们给这个run项起名如花。

  • node路径， server port 一般无需修改， 除非你的server port已经被其他程序占用

  • use / Default Configuration Configuration File
    • 默认配置 是对url进行拦截， 比如说拦截url填写 find.qq.com/index.html ，那么你在浏览器里边访问find.qq.com/index.html 这时候，spy-js就会对这个页面的加载，js执行情况进行分析

    • 如果你是在调试，检测本地代码的话可以选择 Configuration File, 现在一般都用grunt集成了本地服务器，可以在项目根目录下放置一个 spy-config.js 文件， 里边的内容：

        module.exports = function ($) {
      $.root = 'http://localhost:80/';    // 把请求中转到这个地址
      $.proxy = 3000;    // 中转端口
  }

      或者直接用默认配置， 对url进行拦截， 利用 grunt-localhost 和 grunt-connect-proxy 配合把 项目上线地址(比如说是 qun.qq.com) 配置到127.0.0.1, spy-js 配置直接拦截qun.qq.com/index.html 即可 。

      使用全局配置的时候， 你在chrome里边访问，或者开着fiddler的情况下可能会发现捕获无效， 这是因为chrome没有走系统代理，检查chrome是否使用了proxy-switchysharp插件， 开着fiddler， 系统代理改变， fiddler不一定能立马捕获， ctrl+f12 取消fiddler代理，再ctrl+f12捕获一次即可。

  • Configuration 选择这个配置文件

  • Automatically configure system proxy 勾选上这个配置项

  • Show this page 勾选上的话，每次run 如花， 都会弹出这个配置窗口， 这就叫show this page 。

  • Before lanuch 在run 如花之前，是否需要执行其他的任务

  • 启动本地服务器, 我在项目中集成了grunt, 直接在webstorm的grunt面板,启动grunt server

  • 启动配置好的如花, 这时候直接在浏览器中访问 localhost:3000 就打开了本地webserver中的站点内容， webstorm中的run面板可以看到spy-js捕获的所有js事件。