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. Efcore迁移

    Efcore迁移 Add-Migration XX:1.根据模型的实际结构对比当前快照,从而生成新迁移文件的Up和Down方法2.根据模型的实际结构修改快照和新迁移文件---------------- ...

  2. python介绍，计算机组成。内存分布，进制，操作系统介绍

    学习小方法 ​三个W一个Hwwwh:what(是什么) why(为什么) where(怎么用) how(如何用) 来思考知识点多练,多写,多敲代码增加熟练度与代码量​ Python 是一门面向后台的编 ...

  3. golang web框架 beego 学习 （六） request body和module的映射

    router.go package routers import ( "gowebProject/controllers" "github.com/astaxie/bee ...

  4. 判断浏览器是否ie6

    if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) { ...

  5. 服务器NGINX连接数

    kill -HUP 1900  重启某个进程! 1.查看Web服务器(Nginx Apache)的并发请求数及其TCP连接状态: netstat -n | awk '/^tcp/ {++S[$NF]} ...

  6. docker（学习笔记）

    # 1. Docker介绍## 1.1 什么是容器?## 1.2 容器的前世今生FreeBASE jail ------> Linux vserverchroot ----> 完整的根文件 ...

  7. Python 日志文件处理

    今天想把 Python 项目中的日志 保存到文件中. 找到了方法.非常简单 https://www.cnblogs.com/nancyzhu/p/8551506.html 1. logging.bas ...

  8. 【51nod】1407 与与与与

    [51nod]1407 与与与与 设\(f(x)\) 为\(A_{i} \& x == x\)的\(A_{i}\)的个数 设\(g(x)\)为\(x\)里1的个数 \(\sum_{i = 0} ...

  9. HTTP最常见的响应头

    HTTP最常见的响应头如下所示: l         Allow:服务器支持哪些请求方法(如GET.POST等): l         Content-Encoding:文档的编码(Encode)方法 ...

  10. 精选实用 Chrome 扩展(20)

    ● Reading List 简介:收藏网页,稍后阅读 ● OneTab 简介:收起当前已打开的标签页,需要的时候恢复 ● IE Tab 简介:网页用IE打开 ● uBlock Origin ● Pe ...