检查Pyodide中的Python对象

是非常新的，但我想知道是否有一种方法可以让用户像对待Js对象那样检查Python对象。例如，现在如果您

在pyodide中打印一个dict，则输出是一个字符串：


但是如果你
console.log
一个JavaScript对象，它会输出一些浏览器能理解的东西，你可以点击展开并查看它的属性


对于调试，我认为这种实用程序是必要的，几乎所有IDE都有它。使用pyodide创建完整的Python环境，我不认为这太难。
您可以将Python对象发送到控制台。在python方面，您可以执行以下操作

pyodide.runPython(`
   myvar = {"msg": "Hello from python"}
   from js import console
   console.log(myvar)
`);

在javascript方面，您可以

console.log(pyodide.globals.myvar);

基本python类型被转换为javascript等效类型，可以直接检查。其他类型被包装在代理对象中。ChromeDevTools控制台窗口中显示的信息对这些类型没有多大帮助

然而，ChromeDevTools可以通过如下自定义格式化程序进行扩展

(function() {
  var formatter = {
    header: function(x, config) {
      if (config && config.PyProxyFormatter) {
        return ["div", {"width": "100px"}, config.key + ": " + String(x)];
      }
      if (typeof x === 'function' &&
            pyodide._module.PyProxy.isPyProxy(x)) {
        return ["div", {}, String(x)];
      }
      return null;
    },
    hasBody: function(x) {
      return true;
    },
    body: function(x, config) {
      var level = config !== undefined ? config.level : 0;
      if (typeof x === 'function' &&
            pyodide._module.PyProxy.isPyProxy(x)) {
        var keys = pyodide.globals.dir(x);
        var elements = keys.map(function(key) {
          var childObj = x[key];
          var child;
          if (typeof childObj === 'object' ||
              (typeof childObj === 'function' &&
               pyodide._module.PyProxy.isPyProxy(childObj))) {
            child = ["object", { 
               object: childObj, 
               config: {PyProxyFormatter: true, key: key, level: level + 1}}];
          } else {
            child = key + ": " + String(childObj);
          }
          return ["div", {style: "margin-left: " + level*20 + "px"}, child];
        });
        return ["div", {}].concat(elements);
      } else {
        return ["div", {}, ["object", { object: x}]];
      }
    }
  };
  window.devtoolsFormatters = [formatter];
}
)();

您可以将python对象发送到控制台。在python方面，您可以执行以下操作

pyodide.runPython(`
   myvar = {"msg": "Hello from python"}
   from js import console
   console.log(myvar)
`);

在javascript方面，您可以

console.log(pyodide.globals.myvar);

基本python类型被转换为javascript等效类型，可以直接检查。其他类型被包装在代理对象中。ChromeDevTools控制台窗口中显示的信息对这些类型没有多大帮助

然而，ChromeDevTools可以通过如下自定义格式化程序进行扩展

(function() {
  var formatter = {
    header: function(x, config) {
      if (config && config.PyProxyFormatter) {
        return ["div", {"width": "100px"}, config.key + ": " + String(x)];
      }
      if (typeof x === 'function' &&
            pyodide._module.PyProxy.isPyProxy(x)) {
        return ["div", {}, String(x)];
      }
      return null;
    },
    hasBody: function(x) {
      return true;
    },
    body: function(x, config) {
      var level = config !== undefined ? config.level : 0;
      if (typeof x === 'function' &&
            pyodide._module.PyProxy.isPyProxy(x)) {
        var keys = pyodide.globals.dir(x);
        var elements = keys.map(function(key) {
          var childObj = x[key];
          var child;
          if (typeof childObj === 'object' ||
              (typeof childObj === 'function' &&
               pyodide._module.PyProxy.isPyProxy(childObj))) {
            child = ["object", { 
               object: childObj, 
               config: {PyProxyFormatter: true, key: key, level: level + 1}}];
          } else {
            child = key + ": " + String(childObj);
          }
          return ["div", {style: "margin-left: " + level*20 + "px"}, child];
        });
        return ["div", {}].concat(elements);
      } else {
        return ["div", {}, ["object", { object: x}]];
      }
    }
  };
  window.devtoolsFormatters = [formatter];
}
)();