devtool: ‘source-map‘在谷歌浏览器控制台不起作用的问题处理

最新推荐文章于 2024-04-01 11:11:33 发布
最新推荐文章于 2024-04-01 11:11:33 发布
阅读量1.4k 收藏 3
点赞数 5
分类专栏： JavaScript 文章标签： vue.js 前端 javascript websocket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42068913/article/details/136299135
版权
本文介绍了如何在已配置`source-map`的环境下，谷歌浏览器控制台仍无法查看Vue源码的问题，解决方法是进入开发者工具设置，取消忽略列表的勾选，重试调试即可正常显示Vue源代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

devtool: 'source-map’已经配置过了，但是在谷歌浏览器控制台调试的时候依旧只能查看webpack编译后的js文件，无法查看vue源码，这是后可能是谷歌浏览器将源码给忽略了。
F12进入工作台，打开设置，打开忽略列表，将勾选取消，然后重新调试vue项目，可正常显示vue源码。
在这里插入图片描述

webpack:开发环境下调试代码-source-map
Celester_best的博客
12-20 2401
现在我们将代码故意写错一个地方，运行webpack命令，看浏览器报错情况 不设置source-map 可以看到报错的地方并没有为我们提供具体的位置。 设置不同的source-map sourse-map：一种提供源代码到构建后代码映射技术，如果构建后代码出错了，通过映射可以追踪源代码错误。 设置source-map只需要在webpack.config.js中设置devtool即可 设置devtool:'source-map' 设置devtool:'source-map'，执行webpa
webpack开发环境性能优化之优化代码调试-source-map
mus-z的博客
07-30 1186
source-map是一种提供源代码到构建后代码的映射技术 如果构建后代码出错，会通过映射关系追踪源代码错误 在webpack.config.js中加入 devtool:'source-map', 重要的是source-map的构建参数 [inlie-|hidden-|eval-][nosources-][cheap-[module-]]source-map 前面有三个可选的参数位置 source-map：会生成built.js.map的一个映射文件 inline-source-map：内联，映射文件
webpack：devtool配置中的source map
weixin_45017439的博客
09-07 2264
devtool控制是否生成，以及如何生成 source map。
devtool: ‘source-map‘ 和 devtool: ‘#source-map‘的区别
最新发布
weixin_43833540的博客
04-01 880
devtool: ‘source-map’ 和 devtool: ‘#source-map’ 之间的区别主要在于前面的#字符。但是，从Webpack 4开始，就废弃了在devtool选项前加#的用法。devtool: ‘source-map’ 选项意味着Webpack在构建过程中会生成独立的完整的source map文件。这对于生产环境很有用，因为它可以为你提供最准确的信息来进行调试，不过它会增加构建过程的时间和输出文件的大小。如果你是在最新的Webpack版本中工作，只需要使用没有#的格式即可。
vue项目，导致sourcemap失效的一个问题
qq_36647210的博客
04-30 4109
在开发组件的时候，发现sourcemap失效了，在chrome的devtool里，不管是debugger跳转，还是点击抛出错误后面的文件路径跳转都直接跳到一个不相关的文件。 经过反复试验，发现是因为不同组件目录下的vue文件名字都是index.vue,配置的sourmap将不同目录的index.vue文件混淆了，导致所有目录下的index.vue文件的sourmap都映射到同一个index.vue文件上了。 ...
浅谈webpack devtool里的Source Map
weixin_57677300的博客
05-02 1627
💅 想寻找共同学习交流、共同成长的伙伴，文章最后有作者l联系方式（备注进群）
Chrome 谷歌浏览器升级到120版本后VUE项目F12无法正常输出日志和调试Debugger ，无法使用Sourcemap的解决办法
⑧o年崋日常记录
12-22 1058
F12无法正常 console.log 输出日志，统一在vue.js 下输出定位不到源代码，在代码中写debugger也无法进入断点。导致无法使用Sourcemap。2、设置-忽略列表-启用忽略清单（升级120版本后，默认启用的）3、关闭启用忽略清单，再次尝试就可以了。1、F12开发者工具点击右上角设置。
前端开源库-source-map-dummy
08-29
例如，如果你正在使用Webpack，可以在配置文件中设置`devtool`属性为`source-map`或`cheap-module-source-map`，然后在特定的构建阶段插入 source-map-dummy 的处理，以确保在调试时能够正确显示源代码。 总的来说...
一文学会Webpack实用功能|source-map
xuzhijia1991的博客
01-05 3314
Source Map 通过构建编译之类的操作我们可以将开发阶段的源代码转换为能够在生产环境当中运行的代码。这是一种进步，但是这种进步的同时也就意味着我们在实际生产环境当中运行的代码与我们开发阶段所编写的代码之间会有很大的差异。 那在这种情况下如果我们需要去调试我们的应用，又或是我们运行应用的过程中出现了意料之外的错误，那我们将无从下手。 这是因为我们无论是调试还是报错，那他都是基于转换过后的代码来运行的。那Source Map就是解决这一类问题最好的一个办法。 他的名字就已经表述了他的作用叫做源代码地图，那
webpack之SourceMap
Luckyzhoufangbing的博客
06-07 981
（一）什么是sourceMap sourceMap其实是一个映射关系，比如打包后的js文件（如dist目录下main.js第78行报错了），sourceMap能够找到（dist目录下main.js第78行）对应的打包前的源文件（是哪个文件夹下的哪一行） （二）用法 在 webpack.config.js 中 module.exports 里面加一行 devtool: 'source-map' devtool有很多source-map形式，详情见webpack手册devtool部分 配置好.
浅谈webpack devtool里的7种SourceMap模式
10-17
主要介绍了浅谈webpack devtool里的7种SourceMap模式，主要介绍了这7种模式的使用和打包编译后的结果的不同，非常具有实用价值，有兴趣的可以了解一下
source-mapped:Next.JS中内置的Ghost Blog Frontend
04-09
这通常可以通过在构建或编译步骤中添加合适的配置来实现，比如在 Webpack 配置中启用 `devtool: 'source-map'`。 集成 Ghost 到 Next.js 的步骤可能包括： 1. **安装依赖**：首先，你需要安装 Ghost 的客户端库，...
webpack打包之sourcemap
我的博客简介
08-01 7407
希望看到每个loader，每个plugin消耗的打包时间，可以借助一个插件：speed-measure-webpack-plugin，该插件有webpack版本兼容问题。source-map 比 eval信息更加的全，不仅仅展示出错误的源文件，而且把源文件的目录都给展示出来，这样方便用户查看项目结构。默认情况下，打包完成展示，打包的总时间，并没有告诉我，每个插件使用所消耗的时间。影响 npm run build 打包时间：node版本，电脑性能。有部分插件不支持，可能不支持，需要给注释一下。........
webpack4.0核心概念（七）———— “devtool:source-map“
qq_37899792的博客
09-23 1649
1.为了开发时，快速的定位问题 2.线上代码，我们有时候也会开启 前端错误监控，快速的定位问题 可以建立源代码与打包后的代码的映射关系，通过sourceMap定位到源代码。 在dev模式中，默认开启，关闭的话 可以在配置⽂件⾥ webpack.config.js devtool:"none" devtool的介绍：https://webpack.js.org/configuration/devtool#devtool eval:速度最快,使⽤eval包裹模块代码, sour.
【前端遇错】DevTools 无法加载 SourceMap 错误：状态代码 404，net::ERR_HTTP_RESPONSE_CODE_FAILURE
斯基的朦胧
03-24 4985
DevTools 无法加载 SourceMap： 无法加载 http://****/static/rooted/js/jquery.min.map: 的内容HTTP 错误：状态代码 404，net::ERR_HTTP_RESPONSE_CODE_FAILURE
webpack编译不产生soucemap
风烟
07-08 1539
问题解决过程 将devtool已经改成了'#source-map'，结果map文件死活不出。经调查原来是因为 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_debugger: true, drop_console: true }, sourceMap: true }), 这里的souceMap一开始为false，所以导致不出，改为true
sourceMap: devtool 模式以及SourceMapDevToolPlugin的使用
u014105739的博客
11-02 3284
sourceMap: devtool 模式以及SourceMapDevToolPlugin的使用
通过两个实例来理解 devtool: 'source-map' 是什么意思
热门推荐
qq_40126542的博客
07-18 1万+
小编推荐：Fundebug专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。 正如标题所说，有时候，你在看别人的 webpack.config.js 文件的配置的时候，你会发现他们可能加了这么一行： devtool: 'source-map' 从字面上来想象，devtool 好像跟开发有关...
webpack的sourceMap
05-13
webpack的sourceMap是一种映射文件，它可以将打包后的代码映射回原始的源代码，方便我们进行调试和定位问题。在webpack的配置中，我们可以通过设置devtool选项来开启sourceMap。 常用的devtool选项包括： - source-map：生成完整的sourceMap文件，包含行列信息和源代码内容（会影响打包速度） - cheap-source-map：只生成行列信息和源代码文件名（不包含源代码内容，可以加快打包速度） - eval-source-map：将sourceMap作为Data URI嵌入到打包后的文件中，可以加快打包速度（不过会使打包后的文件变大） 我们可以根据实际情况选择合适的devtool选项来开启sourceMap，并在浏览器的控制台中查看映射后的源代码，方便进行调试和定位问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值