webstorm vue调试

比眉伴天荒 2023-02-09 13:17 1阅读 0赞

调试  
编辑调试配置，新建JavaScript调试配置，并设置要访问的url，以及Remote url配置，如下图所示:

![20200518232008758.gif][]

在URL处填写: http://localhost:8080(古月: 本文章是8080端口, 具体的端口看自己的程序写的是监听哪一个)

在src的Remote url处填写: webpack:///src

保存好调试配置

![20200518232159218.gif][]

启动server，可以使用WebStorm npm scripts中双击start启动server， 也可以在命令行中执行命令npm run start启动server

点击debug，调试DebugTest，这时候会打开chrome，如下图所示 :

当我们在chrome中点击测试按钮，WebStorm就会响应断点状态，如下图所示:

![20200518232241144.gif][]

总结  
目前我最喜欢的Vue项目调试方式还是: WebStorm+Chrome，因为WebStorm的代码编辑，重构等功能本来就很强大，调试时的的变量显示也是最友好的。只是WebStorm会比较重，启动较慢，但是功能最强大。VSCode+Chrome调试功能会稍微逊色一些，但是也基本可用，比较轻量级，启动速度较快。如果经常切换项目，可以考虑使用VSCode+Chrome的调试方式。  
[https://blog.csdn.net/guyue35/article/details/81669457][https_blog.csdn.net_guyue35_article_details_81669457]

[20200518232008758.gif]: https://img-blog.csdnimg.cn/20200518232008758.gif
[20200518232159218.gif]: https://img-blog.csdnimg.cn/20200518232159218.gif
[20200518232241144.gif]: https://img-blog.csdnimg.cn/20200518232241144.gif
[https_blog.csdn.net_guyue35_article_details_81669457]: https://blog.csdn.net/guyue35/article/details/81669457

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue-6.编译器webstorm

Vue专栏（帮助你搭建一个优秀的Vue架子） [Vue-1.零基础学习Vue][Vue-1._Vue] [Vue-2.Nodejs的介绍和安装][Vue-2.Node

傷城~/ 2024年03月24日 18:25/ 0 赞/ 64 阅读

相关 webstorm下debug调试react js程序

第一步：添加给你的`Chrome`添加`JetBrains IDE Support`的插件，需要翻墙，就是下图的这个。 ![img][] image 第二步：我们把

布满荆棘的人生/ 2023年09月29日 09:16/ 0 赞/ 14 阅读

相关 webstorm vue调试

调试编辑调试配置，新建JavaScript调试配置，并设置要访问的url，以及Remote url配置，如下图所示: ![20200518232008758.gif][

比眉伴天荒/ 2023年02月09日 13:17/ 0 赞/ 2 阅读

相关 WebStorm--调试

原文网址：[WebStorm--调试\_IT利刃出鞘的博客-CSDN博客\_webstorm调试][WebStorm--_IT_-CSDN_webstorm] 环境搭建

谁践踏了优雅/ 2022年12月23日 00:39/ 0 赞/ 463 阅读

相关 Webstorm启动一个vue项目

1. 下载node.js并安装，其中包含了npm 参照：https://www.cnblogs.com/aizai846/p/11441693.html

淩亂°似流年/ 2022年12月15日 11:20/ 0 赞/ 390 阅读

相关 WebStorm项目--Vue.js入门

原文网址：[WebStorm项目--Vue.js入门\_IT利刃出鞘的博客-CSDN博客][WebStorm_--Vue.js_IT_-CSDN] 其他网址 > [使用

小灰灰/ 2022年11月21日 11:26/ 0 赞/ 252 阅读

相关 webstorm创建和调试vue项目

安装node.js 官网下载安装 https://nodejs.org/en/ cmd下创建项目创建项目文件夹webpack-vue,并cd进入安装v

待我称王封你为后i/ 2022年05月12日 14:06/ 0 赞/ 468 阅读

相关 webstorm创建vue项目

准备工作，这些就不一一说明了，如果有不会的，可以去前面的教程里面看一看，找一找。 > 1：webstorm的安装： > 2：node.js的安装 > 3：安装Git

柔情只为你懂/ 2022年01月31日 05:49/ 0 赞/ 435 阅读

相关 vue学习笔记（WebStorm安装）

慕课网：https://www.imooc.com/video/18553 一、前往官网下载：https://www.jetbrains.com/webstorm/do

亦凉/ 2022年01月06日 10:47/ 0 赞/ 222 阅读

相关使用WebStorm运行vue项目

在WebStorm中怎么打开一个已有的项目，这个不用多说，那么如何运行一个vue项目呢？ 1.点击下图中右上角的红框。 ![watermark_type_ZmFuZ3poZ

女爷i/ 2021年09月25日 15:20/ 0 赞/ 629 阅读