调试由webpack构建的捆绑的javascript文件时，chrome不显示原始变量名

调试由webpack构建的捆绑的javascript文件时，Chrome不显示原始变量名是因为webpack在构建过程中会对代码进行压缩和混淆，将变量名替换为较短的名称以减小文件大小并提高加载速度。这导致在Chrome开发者工具中调试时，无法直接看到原始的变量名。

为了解决这个问题，可以通过以下方法进行调试：

1. 使用Source Maps：在webpack的配置中启用Source Maps功能，它会生成一个映射文件，将压缩后的代码与原始代码进行映射，从而在Chrome开发者工具中显示原始的变量名。具体配置可以参考webpack的官方文档。
2. 使用开发环境模式：在webpack的配置中选择开发环境模式，这样webpack会生成未压缩的代码，变量名不会被替换，可以直接在Chrome开发者工具中查看原始的变量名。但需要注意，开发环境模式生成的文件较大，加载速度可能会受到影响。
3. 使用console.log()进行调试：在代码中使用console.log()输出变量的值，通过查看控制台输出可以获取变量的值，从而进行调试。这种方法不依赖于Chrome开发者工具，适用于简单的调试场景。

总结起来，调试由webpack构建的捆绑的javascript文件时，可以通过启用Source Maps、选择开发环境模式或使用console.log()进行调试。具体选择哪种方法取决于具体的调试需求和场景。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云Webpack：https://cloud.tencent.com/product/webpack