vue数据解析

Question

有没有好办法能让数据直接打开，要不就得一个个点开

我用jq可以正常显示

Answer 1

有这个神奇的操作！

1. 打开chrome devtool （假设有如图中数据）

1. 将其设置为浮动窗口

1. 在浮动的devtool中按快捷键ctrl + shift + I，出现devtool of devtool

1. 在新出来的devtool中输入脚本：

$$('.console-view-object-properties-section').forEach(e => e._section._objectTreeElement.expandRecursively())

1. 在第一个devtool中就能看到数据被展开

还有这种操作！是不是

--- 更新 ---

要想在vue devtools中展开也行，原理是一样的。devtool本身也是HTML页面，所以只要简单的分析一下vue devtool中data树那一块的结构，写个脚本跑一下就可以了。

DOM结构：

写个脚本：

function expand (recursive) {
  function _getNotExpandedArrows () {
    return Array.prototype.slice.call(document.querySelectorAll('.data-field .arrow.right')).filter(arrow => !arrow.classList.contains('rotated'))
  }
  _getNotExpandedArrows().forEach(arrow => arrow.click())

  if (recursive && _getNotExpandedArrows().length > 0) {
    setTimeout(expand, 10)
  } else {
    console.log('done')
  }
}

执行一下，就展开一层：

(妈蛋，图片上传又持续失败，算了不传了)

Answer 2

太神奇的操作，完全看不清大神的走位......
我安装的devtools

会出现一个vue
点击root

就完美了