IDEA中Debug调试VUE前端项目调试JS只需两步

目录
  • 前言
  • 第一步，找到jsdebug运行时
  • 第二步、打断点、运行jsdubg项
  • 结语

前言

有一个礼拜没发quarku+graalvm相关的内容了，因为博主在忙一个新的前端项目去了，从element-ui切换到antdv,也有很多新的东西需要一边啃文档一边输出，程序出现bug自是在所难免的，所以需要开发工具可以非常方便的debug程序。

在java开发中，debug就是一个debug启动按钮解决的事情，而在前端开发中，IDEA这个开发工具也提供了非常好用的jsdebug工具，博主的这个用法不是网上介绍的那种需要安装插件才能用的方式，免安装浏览器插件可以直接用，只需两步。

第一步，找到jsdebug运行时

在Run/Debug Configurations中，找到JavaScript Debug运行时，新建一个JavaScript Debug运行项，界面如下图所示：

序号1、输入jsdebug启动项目的名称

序号2、复制前端项目浏览地址到这里

这里需要说明下，jsdebug并不是帮你启动了一个前端项目，前端项目该怎么启动还怎么启动

序号3、选择一个你本地安装好的浏览器，我这里选择的就是360极速浏览器

第二步、打断点、运行jsdubg项

给需要的代码打上断点，运行刚刚第一步创建好的jsdebg项，IDEA会帮你在新的浏览器窗口里打开刚刚设置的URL地址，现在你可以在这个新打开的窗口里操作，当遇到你打断点的代码，IDEA的断点就会激活，这个时候就可以愉快的Debug起来了，效果如下图：

结语

IDEA的这个前端调试工具非常好用，却没有得到很好的普及，网上搜到的那种方式大多是安装一个IDEA的浏览器插件配合使用，相比来说，博主发现的这个调试工具简直太好用了，而且注意哦，此法不仅可以调试VUE的项目，而是适合所有的前端项目

以上就是IDEA中Debug调试VUE前端项目调试JS只需两步的详细内容，更多关于Debug前端VUE项目调试JS的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Vue3.x源码调试的实现方法

    几句话说下我看源码的方式 断点调试 根据demo小例子或者api的使用姿势进行调试,每个小例子只关心其走过的逻辑分支. 如何调试vue3.x的ts源码 官网说使用 yarn dev 命令就可以对其进行调试,可是运行该命令后,是生成过后的代码,不能对其编写的ts源码进行调试. 其实再生成对应的sourcemap文件,便可以原汁原味的调试. 先看下几个截图: 如果这是你想要的调试效果,下面请看下如何生成sourcemap文件. 生成sourcemap文件 rollup.js中文文档 // rollu

  • 如何用Idea或者webstorm跑一个Vue项目(步骤详解)

    如何用Idea或者webstorm跑一个Vue项目(步骤详解)

    现在vue.js几乎是程序员必会的前端框架啦~ 今天就学习记录一下怎么运行一个vue项目 无论是Idea还是webstorm,都是一样的操作. 去网上随便找一个开源项目,以下就是操作的流程,不管是用webstorm还是idea界面都一样. 第一步:终端输入npm install命令 第二步:配置这里 第三步:第二步点开以后就是这个界面 其中,name自己随便写 package.json的路径 scripts这里写dev还是serve,看json文件配置 第四步:这就是配置文件,里面是命令 第五步

  • Vue程序调试的方法

    1.写本文的背景 因为程序的调试非常重要,程序猿可以利用好的调试方法去查找定位自己的问题所在之处.从而,达到纠正自己程序错误的地方,健壮自己的程序,让问题变得越来越少,程序变得越来越健康.故作此文,而且日后会将实用的调试程序方法不断进行迭代更新. 2.调试与测试 调式与测试实际有异曲同工之妙,只不过对象不同.测试面向的是产品级,系统级:而调试往往是程序里的某一部分,某个方法,某个属性或者对象.最终效果也很类似,好的测试人员,测试方案可以将产品系统的问题解决在摇篮中:好的调试方法也会让你对程序的运

  • 在IDEA中Debug调试VUE项目的详细步骤

    在IDEA中Debug调试VUE项目的详细步骤

    调试js代码,每次都在要在代码中写debugger,或者在chrome中打断点,而且chrome的断点信息不人性化.偶然发现idea竟然有这个功能,简直神器啊.研究了半天终于搞定了,哈哈,开心.下面是详细步骤: 1.下载浏览器插件 在chrome应用商店搜索"jetbrains ide support"插件,可能需要FQ(不会百度,老D google host),如下图,这里是我安装好的.这里我试过找下载好的插件,安装但是没有连接成功,总是提示错误,下文会提到.所以别偷懒,老老实实下载

  • Vue调试神器vue-devtools安装方法

    Vue调试神器vue-devtools安装方法

    什么是vue-devtools? vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率.接下来我们就介绍一下vue-devtools的安装. 安装方式 1.chrome商店直接安装: vue-devtools可以从chrome商店直接下载安装,非常简单,这里就不过多介绍了.不过要注意的一点就是,需要翻墙才能下载. 2.手动安装: 第一步:找到vue-devtools的github项目,并将其clone到本地. vue-devtools g

  • IDEA中Debug调试VUE前端项目调试JS只需两步

    IDEA中Debug调试VUE前端项目调试JS只需两步

    目录 前言 第一步,找到jsdebug运行时 第二步.打断点.运行jsdubg项 结语 前言 有一个礼拜没发quarku+graalvm相关的内容了,因为博主在忙一个新的前端项目去了,从element-ui切换到antdv,也有很多新的东西需要一边啃文档一边输出,程序出现bug自是在所难免的,所以需要开发工具可以非常方便的debug程序. 在java开发中,debug就是一个debug启动按钮解决的事情,而在前端开发中,IDEA这个开发工具也提供了非常好用的jsdebug工具,博主的这个用法不是

  • 只需两步实现Eclipse+Maven快速构建第一个Spring Boot项目

    随着使用Spring进行开发的个人和企业越来越多,Spring从一个单一简介的框架变成了一个大而全的开源软件,最直观的变化就是Spring需要引入的配置也越来越多.配置繁琐,容易出错,让人无比头疼,简化Spring配置简直可以说是民心所向. Spring Boot是由Pivotal团队提供的一个基于Java的全新的开源框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.如今,Spring Boot逐渐成为快

  • Vue前端项目自适应布局的简单方法

    Vue前端项目自适应布局的简单方法

    目录 一.单位尺寸 二.基于rem实现自适应布局 附:html5页面 的rem 布局适配方法 总结 一.单位尺寸 px % vw.vh: 窗口 em: 针对父元素的font-size rem:“root em”的缩写,是一个相对长度单位:rem单位作用于非根元素时,相对于根元素(html)字体大小,rem单位作用于根元素字体大小时,相对于其出初始字体大小. 说明: 谷歌浏览器,字体的默认大小是16px; 如果父元素item1的font-size=50px,那么子元素item2的1em=50px.

  • vue前端项目打包成Docker镜像并运行的实现

    vue前端项目打包成Docker镜像并运行的实现

    目录 vue前端项目打包成Docker镜像并运行 前端将vue打包成镜像发布 一.总体预览 二.打包配置 三.问题思考 vue前端项目打包成Docker镜像并运行 首先说明咱们的前端项目是基于Vue的,反向代理使用的是nginx 1.打包vue前端项目生成dist文件夹上传至服务器 新建一个文件夹,叫vueDockerTest,下面的文件都需要. cert是你存放ssl证书的文件夹,nginx.conf 是nginx的配置文件,dist是你打包的前端静态文件 2.修改Dockerfile文件 #

  • jenkins+docker+nginx+nodejs持续集成部署vue前端项目

    jenkins+docker+nginx+nodejs持续集成部署vue前端项目

    目录 前提: 思路: 步骤: 配置nodejs工具 git代码文件目录如下 Dockerfile的文件内容 nginx.conf主配置文件的内容 最近比较闲,尝试了一下docker部署业务测试环境的前端vue项目,作此记录 这里我的环境是Jenkins+docker+harbor+nginx部署,但是由于此项目以节点形式加入jenkins,构建和部署都在一台,所以没有用到harbor,但是生产环境可能部署和构建不在一台,会需要先推送到harbor,也有详细步骤. 前提: 1安装好了jenkins

  • 浅谈vue+webpack项目调试方法步骤

    浅谈vue+webpack项目调试方法步骤

    题外话:这几个月用vue写了三个项目了,从绊手绊脚开始慢慢熟悉,婶婶的感到语言这东西还是得有点框框架架,太自由了容易乱搞,特别人多的时候. 从webpack开始 直接进入正题.有人觉得vue项目难调试,是因为用了webpack.所有代码揉在了一起,还加了很多框架代码,根本不知道怎么下手.所以vue+webpack调试要从webpack入手.我们先从一般情况开始说. -sourcemap webpack配置提供了devtool这个选项,如果设置为 '#source-map',则可以生成.map文件

  • Vue前端项目部署IIS的实现

    背景:最近用vue写了个demo(不涉及调用后台数据),为了给销售团队更好的给客户讲述产品的一些特点及大体的感官认识.需要将自己做的项目安装到他们的笔记本上面去,作为一个销售人员来说,他不会知道例如vue中的npm run dev/serve等命令,电脑中也没有相应的运行环境,这时候就需要用到windows本身自带的IIS服务,将本地开发的项目放到这个服务器上面去,这样就解决了这个场景的问题. 具体的实施步骤如下(以win10为例) 1.win+r打开cmd命令窗口,输入control打开控制面

  • vue前端优雅展示后端十万条数据面试点剖析

    vue前端优雅展示后端十万条数据面试点剖析

    目录 前置工作 后端搭建 前端页面 直接渲染 setTimeout分页渲染 requestAnimationFrame 文档碎片 + requestAnimationFrame 懒加载 虚拟列表 前置工作 如果后端真的返回给前端10万条数据,咱们前端要怎么优雅地展示出来呢?(哈哈假设后端真的能传10万条数据到前端) 先把前置工作给做好,后面才能进行测试 后端搭建 新建一个server.js文件,简单起个服务,并返回给前端10w条数据,并通过nodemon server.js开启服务 没有安装no

  • Django项目中用JS实现加载子页面并传值的方法

    在Django的开发过程中,有一些功能是通过JS根据用户的不同选择来加载页面中的某一部分(子页面)的.如果子页面中有我们需要传入的值.可以这么实现 在js函数中调用 $("#base_page_div1").load('SUB_URL #sub_page_div1'); 此处 SUB_URL只需要是你在父页面对于URL基础上的多处部分即可.比如 父页面的URL为  /resource/base_url/    子页面的URL为: /resource/base_url/sub_url/

随机推荐