调试由webpack构建的捆绑的javascript文件时，chrome不显示原始变量名
调试由webpack构建的捆绑的javascript文件时，Chrome不显示原始变量名是因为webpack在构建过程中会对代码进行压缩和混淆，将变量名替换为较短的名称以减小文件大小并提高加载速度。这导致在Chrome开发者工具中调试时，无法直接看到原始的变量名。
为了解决这个问题，可以通过以下方法进行调试：
- 使用Source Maps：在webpack的配置中启用Source Maps功能，它会生成一个映射文件，将压缩后的代码与原始代码进行映射，从而在Chrome开发者工具中显示原始的变量名。具体配置可以参考webpack的官方文档。
- 使用开发环境模式：在webpack的配置中选择开发环境模式，这样webpack会生成未压缩的代码，变量名不会被替换，可以直接在Chrome开发者工具中查看原始的变量名。但需要注意，开发环境模式生成的文件较大，加载速度可能会受到影响。
- 使用console.log()进行调试：在代码中使用console.log()输出变量的值，通过查看控制台输出可以获取变量的值，从而进行调试。这种方法不依赖于Chrome开发者工具，适用于简单的调试场景。
总结起来，调试由webpack构建的捆绑的javascript文件时，可以通过启用Source Maps、选择开发环境模式或使用console.log()进行调试。具体选择哪种方法取决于具体的调试需求和场景。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云Webpack：https://cloud.tencent.com/product/webpack
相关·内容
我使用下面的代码来配置webpack 5： const path = require('path'); entry: '.path: path.resolve(__dirname, 'dist'), },}; 这是我的index.js/bar.js');console.log(a)
b
浏览 27提问于2021-04-07得票数 1
回答已采纳
0回答
Angular2 + TypeScript + Webpack科尔多瓦app -我希望在使用Chrome调试应用时，能够在我的安卓手机上调试原始的TypeScript文件。为了让源地图也能在运行由Webpack捆绑的cordova应用程序的远程移动设备上工作，还需要额外配置什么？
将按需添加当前配置。
浏览 11提问于2016-07-08得票数 3
回答已采纳
1回答
当我构建时，我会像我所期望的那样创建一个bundle.js.map文件。但是当我打开Chrome页面时，我没有得到任何源地图信息：如您所见，通常用于获取源地图信息的webpack://文件夹丢失了。
但是铬说“探测到了源地图”。(单击该按钮没有帮助。)显然它知道我有原始地图..。(按ctrl+p只显示捆绑的下载文件
浏览 3提问于2017-03-31得票数 2
当我在Chrome调试器中检查我的应用程序时，我只看到webpack的原始输出源js捆绑文件。我希望看到我在IDE中出现的类型记录文件，或者更漂亮的javascript文件，但这些都不起作用。当我构建时，类型记录编译是将*.js和*.js.map文件放在~/Script/App/目
浏览 2提问于2017-05-10得票数 1
回答已采纳
3回答
工具: Chrome开发者工具、ReactJs和Webpack使用webpack，我如何
浏览 1提问于2015-09-28得票数 23
回答已采纳
1回答
我真的不明白WebPack的意思，我读了一本介绍和其他一些的文章，但是我似乎不得不问一些个别的问题.通过创建一个基本站点的2个文件，我遵循了一个示例：document.write('welcome/app.js bundle.js来创建包文件，这是会发生的。
So...how现在使用包文件了吗？那是什么？我认为它本质上是将“所有东西”编译成一个文件，然后将其丑化，但情况似乎并非如此，有些输出看起来
浏览 1提问于2017-01-03得票数 1
回答已采纳
我正在尝试弄清楚如何设置一个JavaScript开发项目，以便将我的代码分解到几个文件中。我计划最终在客户端web浏览器上运行它，但首先我需要设置一个高效的开发环境。在此之前，我使用过其他编程语言，让您在一个子目录中保存大量文件，然后将所有内容编译到最终的可部署文件中(或者让解释器执行类似的操作)。Javascript似乎不允许这样做-我必须手动为每个js文件添加一个<script>标签到我的网页
浏览 0提问于2018-05-27得票数 1
2回答
我正在为一个现有的项目建立一个Webpack构建过程，并且遇到了一些与源地图有关的问题。at child.initialize ( ()，45:10)
单击文件名&#
浏览 4提问于2017-06-12得票数 6
我正在使用webpack在一个.Net项目中捆绑我的javascript文件。最近我遇到了一个bug，我想使用chrome工具进行调试。运行npx webpack后，在我的dist文件夹中生成以下文件。
所以我确信这些文件</e
浏览 13提问于2020-02-14得票数 10
回答已采纳
1回答
我已经完成了我的ReactJS应用程序，我想把它投入生产。我运行next命令：webpack --progress -p，但在chrome F12中，我得到了下一个错误：index.js:1 Warning: It looks like you're using这是我的webpack.config.js：const P
浏览 1提问于2017-05-15得票数 0
回答已采纳
我有一个Vue应用程序，我正试着在Chrome DevTools中调试它。问题是，当我试图找到我想要调试的文件时，我得到了一个具有相同名称的文件列表，并在末尾附加了一些奇怪的散列： ? 当我打开任何一个文件时，我得到一些乱码： ? ? 有时我可以找到我想要的文件(带有原始源代码)，但有时找不到。 这些奇怪的
浏览 101提问于2019-12-27得票数 13
我已经尝试了很多解决方案(nuxt.config &更改开发工具的源映射)，但都不起作用。我需要在生产中获得真正的源代码，这样我就可以获得真正的错误行，例如，请任何人能帮助我…
浏览 350提问于2021-09-16得票数 2
回答已采纳
这个库的API是两个命名的导出:组件和一个帮助函数，用于创建一个对象，该对象可以作为一个属性传递到组件中。很简单。现在，该组件还将从internal.ts导入以下函数我不希望生成此文件的类型这不是用户将使用或需要的东西。这只是内部的。
我只
浏览 0提问于2020-08-14得票数 0
我使用了webpack v4.16.2作为我的捆绑包工具，并将devtool设置为'source-map'。我正在尝试通过Chrome sources选项卡来调试源文件。但是，当我点击位于webpack://目录下的源文件时，出现了一个错误：我没有使用webpack-dev-server，只是将源文件构建到dis
浏览 23提问于2020-02-24得票数 15
2回答
我有使用脉轮ui样式的next.js应用程序。它的电影应用程序和从电影数据库中获取图像。当我打开我的网站之前，图像加载，我只能看到这个img的ulr文本，然后在1s图像laodes之后。我从firefox那里得到了这个错误：
源映射错误:错误:无效URL: webpack://名称_chunkhash/webpack/引导资源URL：源映射URL: dll_01ec57fc9b90d43b98a8
浏览 1提问于2020-04-03得票数 1
2回答
我知道有一些任务经理/班德勒，比如webpack或npm脚本，它们执行任务，比如在js文件上运行babel，这些文件需要转换、捆绑在一起、丑化最终产品等等。然而，使用开发工具进行调试是非常容易的，因为我可以简单地转到源代码，选择我需要的文件并指定断点。问题1:
如果所有的东西都要打包到一个index.js文件中，难道这不意味着调试要繁琐得多，因为我需要浏览一个巨大的index.js单个<e
浏览 6提问于2017-11-08得票数 3
回答已采纳
3回答
如何在铬调试器中检查ES6模块
、、、、
在使用Webpack捆绑我的应用程序之前，我使用IIFE创建模块，然后将它们附加到window对象上，以便能够访问它们。这使得在chrome浏览器中的调试非常简单，因为所有模块都是全局可用的，我可以用断点检查它们。
最近，我已经过渡到使用Webpack来捆绑我的应用程序，这是很棒的。下面是一个特定文件中导入语句的示例(顺便说一句，每个导入的模块都
浏览 5提问于2016-10-28得票数 13
我刚接触JS开发，并且在Visual Studio 2013中调试JS代码时遇到过一些问题。我们的web应用程序的JS部分被WebPack捆绑到一个单独的app.bundle.js文件中，这个文件会在任何js文件发生变化时自动更新(我们使用特殊的监视脚本，使用npm)。我可以使用Chrome和debugger; derecitve来调试JS代码。它显示</
浏览 0提问于2015-03-17得票数 2
2回答
我是angular2的新手。我用angular-cli搭建了它。所以我使用npm build -dev或npm build -prod构建它。即使在使用npm build -dev时也是如此。我怎样才能添加ts文件，这样我也可以通过chrome浏览器在prod上调试它？
我需要手动添加它们吗？
浏览 9提问于2016-08-29得票数 1
1回答
我正在使用带有ts-loader的webpack来转换和捆绑各种TypeScript文件。/src在src文件夹中，我有我的.ts文件，以及typescript编译器(通过ts-loader)创建的js和.map文件。在dist文件夹中，我得到了带有内联源代码映射的webpacked js。我的html页面引用了webpacked js。当我在VS
浏览 23提问于2017-08-03得票数 6
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
