微信开发者工具调试中不同文件夹下的同名文件source中只有一份

[moseszhou]

相关平台

微信小程序

小程序基础库: 2.16.1
使用框架: React

复现步骤

可用通过以下项目复现：https://github.com/moseszhou/taro3_demo

本demo为了调试weapp，在调试编译时同样的文件名，source map只会对于一个，可以看看 compnentA 和compnentB对应的source是否能同时在微信开发者工具的调试器中看到

1、在src下建两个目录（pageA 和pageB），然后在这两个目录中分别新建一个index.js (两个文件夹下文件同名)。
2、npm run dev:weapp
3、打开微信开发者工具，打开taro编译后的目录
4、可以看到在调试里面只能看到一个index.js文件

调试器会把所有的文件平铺到127.0.0.1:{port}/appservice 下，同名的文件只会有一份。
这样我就无法调试我需要调试的某些代码， 即使在代码中加入debugger，调试器会停住，但是看不到代码。

期望结果

调试的时候能够看到不同目录下的同名文件。

实际结果

同名文件只会看到一个，没有目录路径。

环境信息

👽 Taro v3.2.9


  Taro CLI 3.2.9 environment info:
    System:
      OS: macOS 11.3
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.17.0 - /usr/local/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.13 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 3.2.9 => 3.2.9 
      @tarojs/mini-runner: 3.2.9 => 3.2.9 
      @tarojs/react: 3.2.9 => 3.2.9 
      @tarojs/runtime: 3.2.9 => 3.2.9 
      @tarojs/taro: 3.2.9 => 3.2.9 
      @tarojs/webpack-runner: 3.2.9 => 3.2.9 
      babel-preset-taro: 3.2.9 => 3.2.9 
      eslint-config-taro: 3.2.9 => 3.2.9 
      react: ^17.0.0 => 17.0.2 
      react-native: 0.62.3 => 0.62.3 

[Chen-jj]

@moseszhou

1. 你的 demo 只有一个页面，没有 componentA/B，和你提供的复现步骤 1 也不吻合。
2. 并没有复现微信把目录拓扑扁平化的问题：

[moseszhou]

@moseszhou

1. 你的 demo 只有一个页面，没有 componentA/B，和你提供的复现步骤 1 也不吻合。
2. 并没有复现微信把目录拓扑扁平化的问题：

不好意思，demo的commit忘记提交了，请使用我的Demo再试试

[moseszhou]

page 确实会根据目录结构进行解析

但是一些公共部分会编译到同一个类似common.js文件中，而这些打入这个文件的源文件会出现我说的扁平化

[moseszhou]

@Chen-jj



你可以看看上面的两张图，在扁平的结构中我只能找到index.jsx，里面的代码是ComponentB，无法找到ComponentA对应的代码，及时我在ComponentA中 打印log，点击log输出后的log，也只会定位到ComponentB的源码中，图3中就是点击A，我在A的点击事件中加入了debugger，结果会发现调试会停住ComponentB的源码对应的行数第六行对应的应该是A中的debugger

。

[Chen-jj]

@moseszhou 微信小程序解析 sourcemap 文件 sources 字段的问题。

配置 webpack.output. devtoolModuleFilenameTemplate，把路径里的 / \ 全部替换掉就可以了。

类似这样：

webpackChain (chain) {
  chain.output.devtoolModuleFilenameTemplate((info) => {
    const resourcePath = info.resourcePath.replace(/[/\\]/g, '_')
    return `webpack://${info.namespace}/${resourcePath}`
  })
}

[moseszhou]

@Chen-jj 支付宝小程序上似乎sourceMap 完全没用。不知Taro3 是否支持支付宝开发者工具中查看source。

[aoarashi1988]

@Chen-jj 支付宝小程序上似乎sourceMap 完全没用。不知Taro3 是否支持支付宝开发者工具中查看source。

同问，目前在支付宝开发者工具中，能看到从index.worker.js => vendors.js这样的映射关系，但是vendors.js文件中声明的//# sourceMappingURL=vendors.js.map就不再继续映射了