@ devtools-ds/ 对象检查器

复制 Chrome 和 Firefox 对象检查器, 允许您在控制台中查看 JavaScript 对象 .

安装

npm i @devtools-ds/object-inspector
# or with yarn
yarn add @devtools-ds/object-inspector

支持类型

JavaScript 有宽而有时复杂的 一组可用的类型。这个组件试图很好地显示大多数类型,我们有下列样式:

export type SupportedTypes =
  | boolean
  | null
  | number
  | string
  | Error
  | symbol
  | undefined
  | Date
  | RegExp
  | object
  | Map<any, any>
  | WeakMap<any, any>
  | Set<any>
  | WeakSet<any>
  | Promise<any>
  | any[]
  | Function;

对于它不知道的类型,组件应该尝试找到要显示的名称或字符串.

使用量

然后使用代码中的组件 只需导入它!

import { ObjectInspector } from "@devtools-ds/object-inspector";

const data = {
  string: "string",
  boolean: true,
  number: 100,
};

<ObjectInspector data={data} expandLevel={1} sortKeys={true} />;

回电

onSelect

此函数随选定的 AST 节点调用( 在解析 data 道具为 @devtools-ds/object-parser) (中文(简体) ). 通过所选节点,您可以向上/向下穿行树,并在目前所选节点上采取行动(如显示该属性的其他细节).

财务问题

为什么[插入类型]类型没有更好的支持?

有些类型像 WeakSet, (中文(简体) ), WeakMap等不能使用 JavaScript API 方便检查。 承诺是相似的,虽然有工作 Promise.race 迫使这个组件中的大多数东西是同步的。 他们之所以在浏览器中很好工作 是因为他们可以访问 JavaScript 引擎 API , 这让他们有更多的控制.

如果您看到一个缺失且易于支持的类型, 请随意打开一个问题或 PR 添加它 .

为什么[插入属性]属性并不总是匹配我的浏览器?

我有一个目标 来观察Chrome和Firefox的检查人员 以便最好地支持他们基于浏览器。 有时事情不能被简单地放在两者之间 并且妥协了 例如Chrome 混合双下划线语法 __proto__ 双括号语法 [[Entries]]。Firefox 更符合 <prototype> 财务报告和审定财务报表 <entries> 语法 所以我决定坚持下去 在一致性方面,双方有一些妥协.

我愿意接受关于如何改进的建议.

为什么[插入属性]颜色略有不同?

大部分情况下,颜色应与浏览器的应用几乎相同.

有时浏览器之间会有复杂的颜色,其中一种可能要用三种颜色才能完成另一种颜色的工作. 这些基本是逐一评估的,同时考虑到增加的复杂性。 有时浏览器的颜色很轻 反差很大 为了无障碍,我有时会留下更大胆的颜色.

有用参考资料

• MDN 对象类型
• MDN 已打入阵列

贡献者

感谢这些伟大的人emoji 密钥:

泰勒克鲁皮卡 💻 📖 🎨 🚇 💡 ⚠️

亚当·迪尔肯斯 💻 📖 💡 ⚠️

本项目遵循 全部贡献者 规格。 任何捐款都欢迎!