使用webstorm调试vue 2 项目

已于 2024-02-05 15:51:18 修改
阅读量1.7k 收藏 9
点赞数 5
分类专栏： vue 文章标签： webstorm vue.js ide
于 2024-02-05 15:50:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhu7727926/article/details/136042757
版权
本文指导如何在WebStorm2023.1环境下使用npm6.14.12调试Vue2项目，涉及步骤包括设置JavaScruotddebug、配置Webpackdevtool（如eval-source-map），以及处理进入JS页无法进入Vue页的问题解决方案。

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

学习目标：

使用webstorm调试vue 2 项目
笔者环境：
npm 6.14.12
webstorm 2023.1
vue 2

学习内容：

例如：

  1. 正常启动npm 项目

  2. 配置javaScruot dubug
    配置你的项目地址就好
    在这里插入图片描述

  3. 使用dubug运行你配置的调式页
    在这里插入图片描述

  4. 问题
    如果进入了js页无法进入vue 页
    1.查看settting 的vue.js插件是否安装
    2.查看webpack.conf.js文件是否配置了devtool：“eval-source-map”，如果还是不行可以替换"cheap-module-eval-source-map"

WebStorm中如何调试Vue项目
邓邓子的博客
08-03 6058
打开菜单 “File” -> “Setting…”，选中 “Build，Execution，Deployment”，可以看到 Port，默认的 Port 端口为 63342。
webstorm debug调试vue项目
weixin_39417324的博客
08-10 3753
1.运行npm，然后控制台会打印下图中的地址，复制local的地址。2.run–>Edit Configuration，如下图.....
webStorm debug vue项目的两种方案
大话家的博客
06-24 1826
总的来说，方案2的操作，实际上会让webstorm打开两个端口，一个是服务端口（对应我这里的serve服务），另外一个就是debug端口（对应我这里的serve JavaScript），通过debug端口浏览器和webstorm之间交互用户debugger动作，以便知道用户干了什么。
vue专题之webstorm创建vue2.x项目【二】
亲测，只为展现最完美的有效！
02-27 9157
一、背景 安装好vue的开发环境之后，可以用命令创建vue项目，也可以用开发软件创建，这里选 webstorm。 ps：vue开发环境搭建详见：vue专题之开发环境与项目搭建【一】 下面开始创建项目 二、新建项目 点击webstorm菜单栏的 file>new>project 需要注意的是，上面四个选项，如果有空的表示该项没有安装，需要安装。安装说明回看 vue专题之开发环境与项目搭建【一】 还有一点，如果没有安装git客户端，项目是新建不了的。 此时要么安装git客户端，要么就用命令创
WebStorm 如何调试 Vue 项目
独泪了无痕
11-12 2634
关于使用 WebStorm 如何调试 Vue 代码就介绍到这了，相信你已经掌握了使用 WebStorm 调试 Vue 代码的基本方法。WebStorm 作为一款功能强大的IDE，提供了丰富的调试功能和技巧，可以帮助你更高效地开发和调试 Vue 应用。当然，除了 WebStorm 外，还有很多其他的调试工具和技术可以使用，如Chrome DevTools、Visual Studio Code等。你可以根据自己的需求和喜好选择合适的工具来提高开发效率，希望本文对你有所帮助！
使用webstorm玩转Vue2
weixin_34345753的博客
07-26 225
虽然尤雨溪一直偏爱sublime，但对于webstorm深度使用者来说，可以通过合理的配置，将webstorm的特性发挥到极致。 1. perferences里面找到File and Templates 配置。 位置在File => Perfernces => Editor => File and Code Templa...
webstrom Debug 调试vue项目的方法步骤
10-18
调试Vue项目通常需要利用WebStorm提供的调试工具来帮助开发者发现和修复代码中的错误。下面是使用WebStorm进行Vue项目调试的一些详细步骤和知识点。 1. 安装和配置WebStorm 首先，确保你的系统上已经安装了WebStorm...
webstorm搭建vue项目（新手参考）
01-20
首先安装webstorm，因为webstorm 集成了多种版本控制工具，基本的功能都可以使用，比如git。同时它也支持node.js调试，对于学生也有免费的优惠，稍后会讲如何申请。 webstorm官网 自己选择要安装的路径 然后就是...
用webstorm和vscode断点调试vue
12-04
为了提高开发效率和代码质量，开发者需要掌握如何在WebStorm和VSCode中进行断点调试Vue项目。本文将详细阐述这两种主流IDE的Vue断点调试技术。 首先，我们来了解什么是断点调试。断点调试是一种强大的开发工具，它...
vue2.0学习——使用webstorm创建一个vue项目
热门推荐
雪小白
07-09 6万+
背景：小白自学vue，翻阅了好多大神的博客，看了网上很多的视频，过程很吃力，好在功夫不负有心人，磕磕绊绊的也算入门了，现为自己vue的学习阶段做个小小的总结。vue2.0的基础知识的总结暂时不总结成文，带有时间时再说吧。           我使用的是webstorm来创建vue项目，前辈说用这个软件学习还是不错的，事实证明，确实不错。 一、webstorm的安装： 1、什么是webstorm...
webstorm 调试vue项目
liuchao的博客
06-01 5382
在webstorm中配置远程调试vue项目。
WebStorm运行vue项目
m0_71242735的博客
08-17 1545
1.安装webstorm 2. 需要安装node.js 环境，可以去官网下载3. 安装完需要查看 按win+r 输入cmd进入4. 输入命令node -v 和npm -v
WebStorm用Debug模式调试Vue等前端项目
m0_74825409的博客
12-11 2230
非常的麻烦，而且浏览器中对变量的追踪功能也有限，同时我也一直好奇WebStorm中Debug启动方式的作用，今天研究了一下，果然WebStorm提供了更简单的调试方法，记录一下。涉及到稍复杂的逻辑，就需要在代码中侵入增加debugger，或者在浏览器中找到js文件，再手动添加断点。开发前端时，一直很苦恼调试前端代码的麻烦。在控制台打印变量值，来验证预期结果。命令的作用是关闭浏览器的跨域限制。
WebStorm上运行vue2.0
冷兮Coding
07-18 4715
首先打开我们之前用vue-cli脚手架生成的项目，还没有创建项目的同学可以看我上一篇博客（博客链接）     1.打开WebStorm         2.点击open选择你项目的路径后打开。   3.之后在右上角，点击Edit Configurations          4.点击打开页面左侧的加号，选择npm          5.之后进行如下配置即可在WebStorm上运行...
使用WebStorm如何调试Vue代码
w708955424的博客
05-28 1469
WebStorm作为一款功能强大的IDE，提供了丰富的调试功能和技巧，可以帮助你更高效地开发和调试Vue应用。如果你使用的是Vue CLI创建的项目，并且已经配置了开发服务器（通常使用webpack-dev-server），那么你需要将URL设置为开发服务器的地址（如http://localhost:8080）。另外，WebStorm支持多种调试工具，包括浏览器的开发者工具，但本文主要讲解的是使用WebStorm自带的调试功能。2. 在你想要调试的代码行左侧点击，你会看到一个红色的圆圈。
解决了老版本WebStorm调试vue项目的问题之一一
IamChen的专栏
06-21 3140
解决chrome升级带来的webstorm下的vue调试问题
WebStorm 在Settings → File and Code Templates中 自定义一个用于创建Vue2.0的模板。
u012632105的博客
10-12 424
template>下的唯一元素<div> 的class为${NAME}的驼峰转中划线格式，例如：${NAME}为testVueAbc的话，class就是 test-vue-abc。现在，每次创建Vue2.0单文件组件时，WebStorm都会使用这个自定义模板，以便快速创建Vue组件。在Vue Component文件中，复制整个模板代码，并粘贴到下方的Template text框中。在Description中输入简短的模板描述，例如：Vue2.0单文件组件模板。点击Apply，保存模板设置。
使用Webstorm如何调试Vue代码
qq_63605379的博客
02-28 1480
调试Vue代码
webstorm部署vue2项目
最新发布
12-28
### 部署 Vue 2 项目到 WebStorm 为了在 WebStorm 中成功部署 Vue 2 项目，需确保开发环境已配置好 Node.js 和 npm 或 yarn。创建新项目或打开现有项目时，WebStorm 提供了良好的集成支持。 #### 创建新的 Vue 2 项目 通过 WebStorm 的内置工具可以快速初始化一个新的 Vue 2 应用程序： 1. 打开 WebStorm 并选择 `Create New Project`。 2. 在左侧列表中找到并点击 `Static Web` 类型下的 `Vue.js (Legacy)` 模板[^1]。 3. 输入项目的名称和位置，然后点击 `Create` 完成设置。 对于已有项目，在导入过程中同样可以选择合适的模板来匹配现有的框架版本。 #### 构建与运行项目 一旦项目建立完毕，可以通过终端执行构建命令来进行本地测试和服务启动： ```bash npm run serve ``` 这条命令会自动编译资源文件并通过 webpack-dev-server 启动一个热重载服务器，方便开发者实时查看更改效果。 #### 使用 WebStorm 进行调试 WebStorm 支持直接附加至正在运行的应用进程上进行断点调试。只需按如下操作即可实现： - 设置 JavaScript 断点； - 点击右上方绿色虫子图标开启浏览器端口监听模式； - 当页面加载触发相应事件时即进入暂停状态等待进一步指令处理。 此外，还可以利用 WebStorm 自带的 Live Edit 功能实现实时编辑预览功能，无需频繁刷新网页就能看到修改后的界面变化情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值