Magix项目的调试分析工具，直观的展示区块间的层级关系、事件绑定、数据共享、mixins等。实时以不同颜色显示渲染情况，正确渲染的区块以绿色表示，其它颜色则表示需要改进，鼠标移到相应的区块上会有关联提示

npm install magix-inspector

然后在html页面中通过script引入，如

<script src="node_modules/magix-inspector/src/index.js"></script>

或引入线上的js

<script src="https://thx.github.io/magix-inspector/index.js"></script>

或通过书签的方式添加一段js代码：

javascript:void((function(d,s){s=d.createElement('script');s.src='https://thx.github.io/magix-inspector/index.js';s.charset='utf-8';d.body.appendChild(s)}(document)))

在运行Magix项目的页面上点击添加的书签，既可使用线上的Magix Inspector来查看区块间关系

感谢邱德清同学提供的代码，详情请访问这里：https://github.com/qiu-deqing/magix-helper