如何读取并理解事件参数控制台日志？DevExpress GridView示例

我太懂这种面对控制台里几百个属性，不知道从哪找自己需要的信息的感觉了！你在ASP.NET MVC的DevExpress GridView里用OnContext(s, e)事件打印参数，最后找到了e.htmlEvent.target.value，其实掌握几个控制台的使用技巧，以后就能自主解决这类问题，下面分享几个实用方法：

1. 用控制台搜索快速定位属性 #

打开浏览器控制台后，找到你打印出来的s或e对象并展开，然后按Ctrl+F调出搜索框，输入你要找的关键词（比如accessKey），控制台会自动高亮所有匹配的属性和路径。比如你要找accessKey，搜索后直接就能看到它在e.htmlEvent.target下面，不用一层层瞎找。

2. 先找组件封装的原生事件入口 #

像DevExpress这类UI组件，会把原生浏览器事件（比如鼠标点击、键盘事件）封装在事件参数的特定属性里，常见的命名是htmlEvent或者originalEvent。所以你拿到e对象后，先找带Event字样的属性，展开它就能拿到原生事件对象，再从里面找target（触发事件的DOM元素），target里就包含所有DOM元素的属性，比如accessKey、value、className这些。

3. 用console.dir()替代console.log()查看对象 #

有时候console.log()打印DOM元素或复杂对象时，显示的是简化后的快照，而console.dir()会以结构化的层级展示对象的所有属性，尤其是DOM元素，用dir()查看会清晰很多。你可以把代码改成这样：

function OnContext(s, e) {
    console.dir(s);
    console.dir(e);
}

展开的时候层级关系一目了然，更容易找到嵌套的属性。

4. 用断点调试交互式探索对象 #

比打印日志更高效的是用断点调试，在事件函数里加一行debugger;：

function OnContext(s, e) {
    debugger;
}

当事件触发时，浏览器会自动暂停在断点处，你可以在调试面板的「Scope」区域查看s和e的所有属性，还能在控制台实时输入表达式（比如e.htmlEvent.target.accessKey）验证值，甚至可以修改属性看效果，这种交互式探索比看静态日志灵活多了。

5. 记住组件事件参数的常见结构 #

DevExpress这类组件的事件参数通常有固定的结构：

• s是组件的实例对象，包含组件的配置、数据、方法等；
• e是事件专属参数，里面除了组件自定义的属性（比如GridView里的visibleIndex、column），还会封装原生事件（htmlEvent）。
  下次遇到类似组件事件，先从e里找原生事件入口，再去DOM元素里找需要的属性就快多了。

比如你要找e.htmlEvent.target.accessKey，用搜索功能直接搜accessKey，或者先展开e→htmlEvent→target，就能快速定位到这个属性。

内容的提问来源于stack exchange，提问作者Telefisch