如何启用Mapbox GL JS的devtools模式？

我来帮你捋捋这个问题——你遇到的情况其实是因为这个debug UI有个关键前提：它只在Mapbox GL JS的开发构建版本里才会生效，生产构建版是把这个功能完全移除了的，所以你单纯加devtools: true当然没反应啦~

下面是具体的启用步骤和注意事项：

• 第一步：确认你用的是开发构建版的Mapbox GL JS

  • 如果你是通过CDN引入库，要把链接换成未压缩的开发版文件，也就是不带.min后缀的那个。比如用 https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js，而不是生产环境常用的mapbox-gl.min.js。
  • 如果你是通过npm/yarn本地安装的，要确保加载的是开发构建的代码。一般来说，打包工具（比如Webpack、Vite）在开发环境下会自动识别，但如果是手动引入，要指向node_modules/mapbox-gl/dist/mapbox-gl.js这个文件，而不是minified版本。

• 第二步：在地图初始化配置中添加devtools: true
  确认引入的是开发版后，在创建Map实例时加上这个选项就可以了，示例代码如下：

const map = new mapboxgl.Map({
  container: 'map-container', // 你的地图容器ID
  style: 'mapbox://styles/mapbox/streets-v12',
  center: [-74.5, 40],
  zoom: 9,
  devtools: true // 开启调试UI
});

• 最后要注意：这个debug UI是专门给开发调试用的，正式上线部署的时候，一定要换回生产构建版的库，并且把devtools选项移除或者设为false。一方面生产版的性能更好，另一方面也不会把调试界面暴露给普通用户。

内容来源于stack exchange