使用Webstorm如何调试Vue代码

在我们前端开发过程中相信很多人都是通过console.log来调试我们的代码的,但是当代码复杂度比较高的时候这个方法就比较鸡肋了。

这里我来教大家在Webstorm中如何来调试自己的代码,当然Webstom只是我常用的开发工具,用Vs code也是可以的。

  1. 点击编辑创建配置项
  2. 名称:怎么取都可以,这里我自己命名为PC;URL:填写需要测试的项目运行起来的地址,我这里是本地的8080,可根据自己的情况修改,浏览器:选择自己常用的即可。确保在加载脚本时检测到断点可开可不开。
  3. 运行需要调试的项目 一般是通过:npm run dev 或者npm run serve;成功运行后,会提示项目访问URL,这个要和前文提到的配置项里面URL保持一致。
  4. 运行调试按住快捷键ALT+F5或者点击这里开启
  5. 调试项目,可以在自己需要调试的代码之前 加上 debugger开启断点,但是测试完毕后记得移除或者在webstorm点击右边代码行数可开启断点
  6. 加上这些后可以ctrl+f5重新开启调试或者继续点击这里
  7. 进入你需要调试的代码后页面显示如下
  8. 比较重要的就这三项,熟练使用后你的调试效率会快的飞起
  • 7
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用WebStorm创建Vue项目的步骤如下: 1. 打开终端,并运行以下命令安装Vue脚手架:npm install vue-cli -g 2. 然后在终端中切换到你想要创建Vue项目的文件夹,并运行以下命令:vue init webpack myproject1 (其中myproject1是你的项目名称) 3. 按照提示输入相关内容,比如项目名称、描述等。 4. 完成以上步骤后,Vue项目将被创建在指定的文件夹中。 另外,如果你希望在WebStorm中快速启动Vue项目,可以进行以下配置: 1. 打开WebStorm,点击顶部菜单栏的"File",然后选择"Open"。 2. 在文件浏览器中选择你创建的Vue项目文件夹,点击"Open"按钮导入项目。 3. 导入项目后,WebStorm会自动检测到该项目的相关配置文件,并设置好Vue开发环境。 4. 接下来,你可以在WebStorm中编辑和修改Vue项目代码。 5. 若要运行项目并调出控制台,可以使用WebStorm的内置功能,在顶部菜单栏中选择"Run",然后选择"Run"或者按下快捷键"Ctrl + Shift + R"。 通过以上步骤,你就可以在WebStorm中创建和运行Vue项目了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [用webstorm创建vue项目](https://blog.csdn.net/u014274590/article/details/84849474)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [使用webstorm来创建并且运行vue项目详细教程](https://blog.csdn.net/qq_36538012/article/details/88054170)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值