遇到某些无法在浏览器中查看元素的bug应该如何排查（实例）

通常，我们遇到bug时，总是F12去看相关的位置，看dom，数据，CSS是否有问题。这是前端检查bug的常用手段。那么，不知道你有没有遇到那种特殊情况，就是我根本没法在浏览器中查看某一项操作具体情况，这种时候我们应该怎样排查问题呢？下面，我就用我实际遇到的情况来说一说解决的思路，主要学习思路哈。

一、问题情况

同事跑来找我帮忙，说有个bug解决不了，具体内容是：el-tree组件节点拖拽时，定位线位置不正确。如图

拖动工商管理，定位线却在mimi那一行上边

二、问题分析

这里的问题是出现在拖拽上边，元素检查就没用了，因为我们没办法在拖拽的同时进行元素检查，那么久只能从代码层面来解决了，其实这种一般都是样式问题，但是既然是思路说明，就按正常步骤来了。

三、解决问题

1、去除无关影响

这一步就是将跟这里不相关的东西全部注释掉，防止污染，万一是污染的问题，这里就再次操作你就会发现正常了，然后一步步放开注释部分，什么时候出问题了，就是哪里的错误。

2、html部分

<el-tree
        ref="tree"
        style="margin-top: 10px"
        :data="data"
        node-key="id"
        default-expand-all
        highlight-current
        draggable
        :filter-node-method="filterNode"
        :expand-on-click-node="false"
        :allow-drop="allowDrop"
        :allow-drag="allowDrag"
        @node-click="handleNodeClick"
        @node-drop="handleDrop"
      >
        <span slot-scope="{ data, node }" class="custom-tree-node">
          <span class="tree-node-name"
            ><i class="el-icon-folder" style="margin-right: 8px; margin-top: 2px"></i
            ><Tooltip :tips-text="data.name" :row-text-num="5" :row="1"></Tooltip
          ></span>
          <span>
            <template v-if="node.level < 4">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-circle-plus-outline"
                @click="() => handleAdd(data, 'add')"
              ></el-button>
            </template>
            <template v-if="node.level !== 1">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit-outline"
                @click="() => handleAdd(data, 'edit')"
              ></el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="() => remove(data)"
              ></el-button>
            </template>
          </span>
        </span>
      </el-tree>

可以发现这个树状组件有插槽什么的，排查这里将所有插槽部分注释掉，查看是否是插槽中代码问题。
注释后发现问题依然存在，所以非此处问题

3、js部分

既然不是html问题，那么接下来检查js，先将组件相关方法全部注释或删除只留基础无影响属性，如下

<el-tree
        ref="tree"
        style="margin-top: 10px"
        :data="data"
        node-key="id"
        default-expand-all
        highlight-current
        draggable
        :expand-on-click-node="false"
        :allow-drop="allowDrop"
        :allow-drag="allowDrag"
      >
      </el-tree>

操作后发现问题还是存在。那么进行第三步

3、css部分

将相关的css全部注释，只留官方默认样式，就下面这一坨全部注释

::v-deep .el-tree {
  max-height: 70vh;
  overflow-y: auto;
  ::-webkit-scrollbar {
    height: 8px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #cccccc;
    border-radius: 4px;
  }
}
::v-deep .is-current > .el-tree-node__content > .custom-tree-node > .tree-node-name {
  color: #4974f5;
}
::v-deep .el-card__header {
  font-weight: bold;
  padding: 12px 20px !important;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.tree-node-name {
  max-width: 145px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

测试后我发现，问题消失，定位正确了。

4、缩小范围

既然定位到问题所在了，接下来就是一层层的放开注释，查看什么时候问题再次存在，当再次出现的时候再一层层放，什么时候定位具体问题在哪，什么时候结束。

当我放开下面这一段时，发现问题再次出现，那么问题就出现在这里，这几个样式可能会影响位置的就只有max-height了，我试验注释，发现问题果然不见了，接下来就是问题分析了

::v-deep .el-tree {
  max-height: 70vh;
  overflow-y: auto;
  ::-webkit-scrollbar {
    height: 8px;
  }

5、问题分析

问题出现原因是，最大高度限制在了70vh,当不限制高度时问题消失，那么说明这个线的定位其实是跟整个el-tree高度有关，应该是根据高度来计算偏移距离，那么应该是节点越多偏移量越大，进行试验后发现猜想成立，那么最后就是解决问题了

6、解决问题

原因是高度不能给限制了，那么久很简单了，将el-tree再包一层，外边再放个盒子限制高度就好，el-tree就不给他限制高度了，实际操作后问题解决。

注：这里只是提了一个不算难的示例，重要的是这种排除法的解决思路，而不是这个例子