解决 WebStorm 调试 Vue 定位不到源代码

原创已于 2023-04-15 21:01:20 修改 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #webstorm #javascript

于 2023-03-24 20:26:46 首次发布

WebStorm 专栏收录该内容

19 篇文章

订阅专栏

在Vue项目的vue.config.js中，通过configureWebpack配置，在开发环境启用source-map，以便在WebStorm中进行源代码调试。当process.env.NODE_ENV等于development时，设置config.devtool为source-map，这样可以定位到Vue组件的原始源码。

解决 WebStorm 调试 Vue 定位不到源代码

vue.config.js 中配置

  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "development") {
      config.devtool = "source-map";
    }
  },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

MAIMIHO

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

利用webstrom调试Vue.js单页面程序的方法教程

10-19

为了通过WebStorm调试Vue.js应用，还需要在Chrome浏览器中安装一个特定的扩展程序，这个扩展程序能够与WebStorm配合，提供一个调试接口。当设置了断点并运行程序时，扩展程序将允许WebStorm控制Chrome，并在达到断点...

用webstorm开发的element-ui+vue.js的一个前端管理系统，mock模拟数据

04-30

项目的主要源代码目录，包含Vue组件、样式、脚本等，一般包括`main.js`（项目入口文件）、`App.vue`（根Vue组件）、以及其他的组件、路由、服务等文件。 12. **.idea**：这是WebStorm的项目配置文件夹，包含了...

参与评论您还未登录，请先登录后发表或查看评论

chrome浏览器debug vue项目，跳过vue源码

weixin_42190844的博客

12-31

2914

在就发vue-cli的项目，也会用到webpack，npm等工具。在debug的时候，只是想看当前代码的执行情况。但是调试就会经常进入到vue.esm.js等一些源码文件。一进去就很跳出来了，十分麻烦。 Chrome调试也是才知道，谷歌浏览器其实有一个黑盒功能，可以设置忽略的文件。设置后，debug就不会进入到这些文件。 F12 点击设置按钮在 Ignor List 里添加要忽略的文件名称即可。 Debugger for Chrome 调试 1.安装插件 2.添加launch.json配置文件 .

解决Vue项目F12查看源代码问题

weixin_67644104的博客

03-13

6309

在Vue项目中，Vue-cli默认可以通过F12查看前端代码，这可能会造成前端代码泄露。为了代码的安全性，隐藏掉比较好。

vue3+vite 解决debugger断点调试定位不准确问题

让梦想疯狂

03-29

5783

取消勾选Enable JavaScript source maps即可。浏览器F12开发者工具调试页面。

vue项目debugger调试看不到源码

qq_46524280的博客

12-15

2630

【代码】vue项目debugger调试看不到源码。

WebStorm调试Vue项目详细指南及可运行源码

本文标题“WebStorm调试Vue项目[可运行源码]”明确指出了其核心内容：通过WebStorm这一功能强大的JavaScript开发工具，实现对Vue.js项目的完整调试流程，并提供了可实际运行的源代码包，使得开发者不仅能够理论学习...

vue定位源代码怎么实现

03-28

在Vue中实现源代码定位主要有以下几种方法，结合开发工具和代码规范来实现： ### 一、使用Vue Devtools跳转 1. 安装浏览器插件`Vue.js devtools` 2. 通过组件树定位目标组件 3. 点击右上角`</>`图标直接跳转到IDE...

webstorm导入vue项目

最新发布

07-25

参考引用[1]和[3]，导入Vue项目到WebStorm的关键步骤包括：首先确保环境准备就绪，然后执行导入操作，最后解决可能遇到的问题。引用[2]提到了代码提示的配置，这也是用户可能会关心的点。具体操作流程可以这样设计...

vue项目中debugger调试看不到源码

qq_42177730的博客

04-21

5995

在修改vue项目的问题时，发现代码里面输入debugger后，在浏览器点击操作发现可以进入断点，但显示的是已经压缩好的代码，无法看到源码。解决方案： 1 打开vue.config.js文件，修改productionSourceMap: true, 1 打开vue.config.js文件，添加 devtool: "cheap-module-source-map", 然后重启项目。 ...

关于webstorm打开Vue项目时，无法通过Ctrl+鼠标左键快速定位的解决方法，解决打开.vue文件时打开一直卡在Analyzing的状态

qq_44228012的博客

07-26

3670

关于webstorm打开Vue项目时，无法通过Ctrl+鼠标左键快速定位的解决方法，解决打开.vue文件时打开一直卡在Analyzing的状态

vue3项目怎么debug调试，为你解惑debug为什么看不到源码——jeecgboot-vue3

JEECG官方博客

09-05

2680

采用setup标签写的代码，debuger的时候看不到源码，导致无法调试

随记：vue无法debug到源码处

LL_long的博客

11-09

943

随记：vue无法debug到源码处

vue源码调试

weixin_42630688的博客

07-20

825

使用vscode进行调试去vue仓库下载源码修改package.json，打包生成sourcemap "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap", npm run dev 生成dist文件在项目根目录新建index.html，引入vue.js <!DOCTYPE html> <html lang="en"> <head> .

vue模块无法跳转

qq_41108396的博客

10-21

647

出现的问题点击路由跳转时，无法跳转并且控制台打印出错如下

解决webstorm不能识别vue的@路径引用

学习使我快乐_玉祥

03-06

2797

vue3版本： vue.config.js文件中加入如下内容： module.exports = { resolve: { alias: { "@": require("path").resolve(__dirname, "src") } } }; 在webstorm的设置中找到Webpack设置，选第三个，选中vue.config.js文件，重启后就会生效。 ...

vue项目源码_找准切入点，调试看源码，事半功倍

weixin_39611937的博客

12-12

231

关注若川视野，回复"pdf" 领取资料，回复"加群"，可加群长期交流学习最近写了很多源码分析相关的文章，React、Vue 都有，想把我阅读源码的一些心得分享给大家。React：React 架构的演变 - 从同步到异步React 架构的演变 - 从递归到循环React 架构的演变 - 更新机制React 架构的演变 - Hooks 的实现Vue：Vue 模板编译原理Vue3 模板编译优化...