自行编译的chrome-devtools-frontend Source面板FileSystem功能失效如何解决

关于是否为已知Bug #

该问题不属于Chrome DevTools官方的已知Bug，是自行编译打包chrome-devtools-frontend时的常见配置缺失问题。fileSystem功能依赖DevTools和宿主环境的权限通信逻辑，直接取用out/Default/gen/front_end下的静态资源部署时，默认没有开启文件系统访问的相关编译开关，也缺少对应的权限桥接配置，才会出现点击无响应的情况。

修复步骤 #

• 调整编译参数
  编译前执行gn args out/Default打开参数配置文件，新增配置项 devtools_enable_file_system_access = true，该参数默认关闭，会导致文件系统相关的逻辑在编译时被摇树优化剔除，开启后重新执行编译流程即可保留对应功能代码。
• 配置宿主权限
  如果你是将DevTools嵌入自定义浏览器内核使用，需要给DevTools的渲染进程开启allow-file-access-from-files权限；如果是通过本地HTTP服务部署使用，需要给对应的服务域名配置跨域放行和本地文件读取的相关权限。
• 校验路径配置
  打开编译后生成的front_end/core/host/HostConfig.js文件，确认fileSystemBasePath字段的路径和你实际部署的DevTools根路径一致，路径不匹配会导致内部路由跳转失败，触发无响应问题。

内容的提问来源于stack exchange，提问作者Longwind Lee