简要介绍几种在实践过程中发现的Chrome Developer Tools技巧

在初始化过程加Breakpoint

在development环境下, 为了防止浏览器Cache js文件, 影响"修改/看结果"的调试过程. ExtJs的micro loader 在请求js的url后, 会增加形如?_[timestamp]的参数. 这本身是方便调试的功能, 但如果你想用Developer Tools 把断点加在初始化过程, 问题就来了, 因为timestamp这个参数, Chrome会认为你增加的断点, 与刷新后加载的js不是同一个文件, 解决办法分两部:

# STEP1. 关掉Sencha Touch的timestamp

在app.js 首部增加:

Ext.Loader.setConfig({
    disableCaching: false
});
STEP2. 关掉Chrome的Cache功能

首先打开Developer Tools的Settings (通过右下角的菊花打开, markdown怎么加截图啊...)

Settings -> General -> Diable cache , check it.

然后就一切正常了.

用Console 刺探 对象

可以利用AppName的对象, 假设你的Sencha App起名为DemoApp

    DemoApp.what = this

然后, 你就可以在 Console里, 通过DemoApp.what.这个名字肆意亵玩这个this了~

这个技巧在某个Sencha视频中也有提到, 实践中是非常有效的技巧. 属于熟悉Sencha的第三大手段~ (前两大是文档和源代码)

DOM Breakpoint

有时界面上有些元素, 不知在什么时候, 被什么事件和代码所修改.

通过在Element 的 tab里, 在想添加DOM Breakpoint的地方点右键, 可以设置各种各样的触发条件, 很方便.

警惕 Chrome Extension.

很多Chrome Extension 会在 DOM里添加元素, 在Sencha Touch管辖的寸土寸金的地盘上, 有些元素可能对界面具有破坏效果.

已知黑名单: 1. StayFocused 2. Xunlei 3. smooth scroll