regularjs / regular-devtools Goto Github PK

because Regular may not be available in global

var sanitize = function(store) {
    var str = JSON.stringify(store, function(key, value) {
        if (value instanceof Regular) {
            return;
        }
        return value;
    });
    return JSON.parse(str);
};

located in README.zh-CN.md

使用webpack开发,工具提示找不到Regular实例
主要代码如下:

import App from "./App";
import router  from "./router";
import restate   from "regular-state";

new App({
    data: {username: "leeluolee"}
}).$inject('#app');
restate()
    .state(router.routes) //完成路由节点注册
    .start({ html5: true ,view: document.getElementById('app')}); // 启动路由
```

在组件数据很复杂的情况下，可以过滤数据来方便的查看自己关注的属性。

• uuid
• visited

修改uuid和visited会污染组件实例，不排除实例本身就存在这两个属性的可能，记录下，后面修复

有时候会很有用，什么事件被触发，触发时携带的参数，以及事件来源组件(点击跳转到对应组件)

跳转到Source面板中对应组件的定义位置，有时候需要打断点的话，可以快速定位到代码

可以在sidebar加一个Performance tab，可视化的展示显示选中组件整个组件树的watcher和stable watcher的数量情况。

展示当前组件绑定的所有事件处理函数

Consider using https://github.com/DrewML/chrome-webstore-upload-cli

refer to Travis auto-upload guide

@zxc0328

1. UI升级。包括inspect按钮图标，背景色，边框颜色，高亮效果。
2. 左侧element视图可以收起和打开组件树的各个层级
3. 左侧element视图中把内嵌组件特殊显示，比如打开视觉父节点之后加一个背景色，类似DOM里的UA shadowdom的显示。
   4.右侧state视图可以打开和收起属性显示（非primitive的Object和Array可以打开和收起）。

有时候多个组件实例data引用了同一份数据，目前只是update单个实例，无法准确同步数据到页面，需要更新所有根实例

getDomNode is located in frontend/inject.js

sometimes call node.group.get(i) on root component doesn't return an ast element node but a regular instance, see example/jsonTree.html for example, and hover on Anonymous Component, throws Inspect Error

用devtools观察这个页面时，不能正确地显示层级关系，可以checkout editable分支尝试一下，原因好像是因为有一种group的情形未处理，明天再确认一下

现在是悬浮时scrollIntoView，有时想要切换到console面板，鼠标移动过程中，其他组件进入视野中了，体验不太好

在可行的前提下增加以下features：

• 支持将组件的data或实例打印到控制台(参考vue-devtools + React-Devtools)

• 支持按组件名字进行过滤(参考React-Devtools + vue-devtools)

• 在右侧data处增加一栏events，用于记录event历史，并给每个event标记触发时间，支持清空

• 如果一个组件没有定义name属性，使用在父组件中定义的名字，Parent.component( 'foo', bar )，比如这个例子中，使用foo，如果有其他未考虑到的匿名组件情形使用anonymous

• 支持修改data并实时更新视图，支持undo(参考React-Devtools)

  可以用上面提到的第一个特性代替，将组件实例打印在控制台，用户手动修改data并调用$update，但这样交互会好些

@zxc0328 你的想法呢？

1. 前一个todo中未完成的
2. 提供刷新功能
3. (optional)从Elements tab切换到Regular tab时会自动选中DOM元素对应的组件
4. 文档和博客

https://github.com/yiminghe/dom-scroll-into-view

远程调试chrome外的页面（比如移动设备），调试bug，或者修改页面中的一些数据

an error shows up in console

Uncaught ReferenceError: CircularJSON is not defined

injectScript(chrome.extension.getURL('frontend/circular-json.js'), 'body');
injectScript(chrome.extension.getURL('frontend/inject.js'), 'body');

above code is from frontend/content.js

we should ensure circular-json.js is always executed before inject.js

src/devtools-ui

给extension和electron提供核心的界面，需要和chrome.* api和electron api解耦，打包到dist目录，和src/extension和src/electron组合后，在release目录生成chrome扩展和electron应用

src/extension

chrome扩展相关代码，如manifest.json, background.js, inject.js, regular.png...

src/electron

electron相关代码

@zxc0328 你觉得怎么样？

有些实例仅仅是利用Regular实现发布/订阅模式，并没有提供模板，也没有挂载到dom上

对于这一类实例，不在devtools中展示他们

• include显示优化 一行 赵
• 选中组件把实例输出到控制台 赵
• tab组件 冯
• data tab显示computed属性 冯
• data属性可以编辑，页面组件更新 冯
• others tab显示指令 filter 和动画 陈
• 搜索组件 高亮 赵
• 组件名 没有name属性则在parent上找 赵