如何查看小程序的真实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>

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