webstorm如何调试vue项目的js

webstormvuewebstorm调试jsjs

1.编辑调试配置，新建JavaScript调试配置，并设置要访问的url地址，如下图所示:



在URL处填写示例: http://localhost:8080

保存好调试配置

2.先用dev正常启动项目，然后切换到刚才设置的js调试名称，点击debug按钮，这时候会打开chrome，如下图所示 :



4.当我们在chrome中运行页面，WebStorm就会响应断点状态，如下图所示:

webstorm如何调试vue项目的js的更多相关文章

  1. 基于vue项目的js工具方法汇总

    以下是个人过去一年在vue项目的开发过程中经常会用到的一些公共方法,在此进行汇总,方便以后及有需要的朋友查看~ let util = {}; /** * @description 日期格式化 * @p ...

  2. WebStorm+Chrome调试Vue步骤

    在调试时请 注意 : 在WebStorm中启动调试时,WebStorm会根据你设置的url,自动打开新的Chrome浏览器进程访问这个设置的url,而且这个浏览器页面和你平常看到的浏览器差异会比较大, ...

  3. VueJs(15)--- Webstorm+Chrome 调试Vue项目

    Webstorm+Chrome 调试Vue项目 前言 在项目开发中,Debug模式是非常有必要的,后端对于IDEA工具而言Debug模式非常方便,但前端WebStorm而言如果启用Debug模式是需要 ...

  4. vue 项目的I18n国际化之路

    I18n (internationalization ) ---未完善 产品国际化是产品后期维护及推广中重要的一环,通过国际化操作使得产品能更好适应不同语言和地区的需求 国际化重点:1. 语言语言本地 ...

  5. 基于Vue cli生成的Vue项目的webpack4升级

    前面的话 本文将详细介绍从webpack3到webpack4的升级过程 概述 相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除 ...

  6. vue项目的mode:history模式

    最近做的Vue + Vue-Router + Webpack +minitUI项目碰到的问题,在此记录一下,Vue-router 中有hash模式和history模式,vue的路由默认是hash模式, ...

  7. 56.关于vue项目的seo问题

    不可否定的是,vue现在火.但是在实际项目中,特别是像一下交互网站,我们不可避免会考虑到的是seo问题,这直接关系到我们网站的排名,很多人说用vue搭建的网站不能做优化,那我们真的要放弃vue,放弃前 ...

  8. Vue项目的npm环境搭建

    Vue项目的环境搭建主要步骤如下: vue项目创建 安装NodeJS +到官网下载自己系统对应的版本,这里我们下载Windows系统的64位zip文件,下载完成后解压,可以看到里面有一个node.ex ...

  9. vue项目的webpack4.X配置

    这两天摆弄webpack,躺过很多坑,直到今天看了一位博主的文章才得以解决.他对配置中的各个部分做说明. 下面的配置99.9%抄自博主: https://www.cnblogs.com/nianyif ...

随机推荐

  1. 【Leetcode_easy】637. Average of Levels in Binary Tree

    problem 637. Average of Levels in Binary Tree 参考 1. Leetcode_easy_637. Average of Levels in Binary T ...

  2. C#数字除法

    C#中计算double a=1/1000:应该结果是0.001,但为什么会变成0呢? C# 中 如果相除的两个数都是整数(int 型) 那么除的结果就是只取整数部分 所以你才会取到0 如果你要取精确的 ...

  3. 安装LoadRunner各种提示解决方法（转载）

    原文地址链接:https://jingyan.baidu.com/article/915fc414fc60fc51394b20fa.html 1.问:当安装提示"Micosoft Visua ...

  4. nginx 工作原理总结

    1.  Nginx的模块与工作原理 Nginx由内核和模块组成,其中,内核的设计非常微小和简洁,完成的工作也非常简单,仅仅通过查找配置文件将客户端请求映射到一个location block(locat ...

  5. 学习笔记：oracle学习一：oracle11g体系结构之物理存储结构

    目录 1.物理存储结构 1.1 数据文件 1.2 控制文件 1.3 日志文件 1.3.1 重做日志文件 1.3.2 归档日志文件 1.4 服务器参数文件 1.4.1 查看服务器参数 1.4.2 修改服 ...

  6. 工作总结--CTO（张王岩）IO的正式使用

    4个抽象类 InputStreawm int read()  void close() OutputStream void write(int) void flush() void close() R ...

  7. 生成 n 个不同的随机数且随机数区间为 [0,n)

    生成 n 个不同的随机数且随机数区间为 [0,n) Java 实现 import java.util.ArrayList; import java.util.List; import java.uti ...

  8. [转帖]微软宣布即将开始大规模推送Windows 10 V1903重大版本更新

    微软宣布即将开始大规模推送Windows 10 V1903重大版本更新 https://www.cnbeta.com/articles/tech/894303.htm 微软要批量更新 1903了 bu ...

  9. K8S从入门到放弃系列-(10)kubernetes集群之kube-proxy部署

    摘要: kube-proxy的作用主要是负责service的实现,具体来说,就是实现了内部从pod到service和外部的从node port向service的访问 新版本目前 kube-proxy ...

  10. 笔记-9：使用random库生成随机数

    random:主要目的是生成随机数 函数 说明 seed(a=None) 初始化随机数,默认值为当前系统时间 random() 生成一个[0.0,1.0)之间的随机数小数 randint(a,b) 生 ...