无法使用 chrome 开发人员工具识别地图上的 DOM 元素（mapbox api）答案

【问题标题】：Not able to identify elements of the DOM on the map (mapbox api) using chrome developer tools无法使用 chrome 开发人员工具识别地图上的 DOM 元素（mapbox api）
【发布时间】：2017-03-31 23:27:38
【问题描述】：

我创建了一个使用 mapbox api 呈现地图的 Web 界面。地图渲染得很好。它包含几个元素，单击时会出现一个弹出窗口。当我尝试使用 chrome 开发人员工具检查元素时，除了画布标签外，我无法在 DOM 中看到它！链接是https://plnkr.co/edit/wpIYHXATxhCMVIYeSqlD?p=preview

<canvas class="mapboxgl-canvas" tabindex="0" width="2880" height="742" style="position: absolute; width: 1440px; height: 371px;"></canvas>

如果有人知道这件事，请帮助我。

谢谢

【问题讨论】：

也许 mapbox 在画布中呈现其整个 UI，而不使用 DOM？
同意！但是，当测试人员试图识别这些元素时，他们是如何做到的。我的问题更多是从测试自动化的角度来看。作为开发人员，如果所有内容都呈现在我的地图上，我没问题，但我如何帮助测试人员识别这些元素。

标签： javascript html dom canvas mapbox-gl

【解决方案1】：

Popups 将被包裹在一个带有 mapboxgl-popup 类的 div 元素中，它们可以根据您的意愿设置样式，您也可以在其中添加一些 html 元素并对其进行测试。

【讨论】：

对于弹出窗口这不是问题，但当我想在地图上找到某些东西时说。没有任何弹出窗口或说版权内容，因为所有这些都很容易识别。