如何查看小程序的真实DOM？ [你这个问题好奇怪。]

比如我有一个小程序的checkbox group如下：

<checkbox-group bindchange="facilitiesChange">
  <checkbox wx:for="{{facility_list}}" wx:key="*this" value="{{item}}" class="list-checkbox iconfont .icon-{{item}}">
    <text>{{facility_name[index]}}</text>
  </checkbox>
</checkbox-group>
同时我有一段对应的样式文件是：
.wx-checkbox-input {
  display: none;
}
.list-checkbox {
  width: 100rpx;
  height: 100rpx;
  font-size: 60rpx;
  line-height: 100rpx;
  color: #eee;
  text-align: center;
}
.list-checkbox text {
  font-size: 24rpx;
  font-weight: 600;
  white-space: nowrap;
}
.list-checkbox[checked] {
  color: #9e9e9e;
}

但是实际显示效果不是预想的：


可以发现这里的空白是很特别的。但是如果查看DOM结构会发现只有这两个：


这是母元素checkbox。


这是子元素text。

很明显的，这不是真实的DOM结构。在这种情况下要对元素进行样式就很困难，因为不知道真实的结构。有没有办法强行查看真实DOM结构呢？


P.S. 顺便说明一下，如果用view而不是checkoubox：


<view wx:for="{{facility_list}}" wx:key="*this" value="{{item}}" class="list-checkbox iconfont .icon-{{item}}" style="display:inline-block">
  <text>{{facility_name[index]}}</text>
</view>


这时候显示的效果应该是这样的：



  • 审查元素？, 我猜不到你想表达的意思。
    • 审查元素只可以看到小程序自身的virtual DOM，而不是编译后的真实DOM, 你这是怎么了？
    • 那是看不到了，除非你去反编译才可以，微信自己在这一层又封装了一遍, 安装微信软件需要费用吗？
    • 可以看到的，微信只是关闭了chromium的原生的审查元素，去掉flag并且找到开启的入口就可以了。去掉flag比较简单，开启的入口还没有找到。目前暂时先用反编译的方式解决这个问题。, 说话的方式简单点。
上一篇[微信小程序]输入框不为空的表示方法，求解。。。。。。 [解不出来啊，你确定这个有答案？]
[微信小程序]canvasToTempFilePath生成的文件临时路径突然访问不了 [你这样说，我理解不了。]下一篇
下一篇[微信小程序]canvasToTempFilePath生成的文件临时路径突然访问不了 [你这样说，我理解不了。]