<commit_before>---
layout: post
title: 2014-04-01-spy_js入门.md
---

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

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

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

我们来看看spy-js的官网怎么说的， 为什么会有这个东西。 [官网地址](http://spy-js.com/why.html)

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

### spy-js 能干嘛
    + 查看当前页面中有哪些事件正在被触发, 查看这些事件的调用堆栈以及相关联的源代码片段

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

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

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

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

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

### spy-js 如何使用 [github介绍页](https://github.com/spy-js/spy-js)

    讲如何使用之前，我们先来说一下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, 在项目根目录下放置一个 spy-config.js 文件， 里边的内容：
                ```javascript
                module.exports = function ($) {
                    $.root = 'http://localhost:80/';    // 把请求中转到这个地址
                    $.proxy = 3000;    // 中转端口
                }
                ```<commit_msg>调整格式！<commit_after>---
layout: post
title: 2014-04-01-spy_js入门.md
---

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

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

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

我们来看看spy-js的官网怎么说的， 为什么会有这个东西。 [官网地址](http://spy-js.com/why.html)

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

### spy-js 能干嘛

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

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

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

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

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

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


### spy-js 如何使用 [github介绍页](https://github.com/spy-js/spy-js)

    讲如何使用之前，我们先来说一下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, 在项目根目录下放置一个 spy-config.js 文件， 里边的内容：
                ```javascript
                module.exports = function ($) {
                    $.root = 'http://localhost:80/';    // 把请求中转到这个地址
                    $.proxy = 3000;    // 中转端口
                }
                ```
{'fraction_non_alphanumeric': 0.10738436570192048, 'fraction_numerical': 0.009196645929131728, 'mean_word_length': 3.4447115384615383, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2260081', 'n_tokens_mistral': 2631, 'n_tokens_neox': 2902, 'n_words': 212}