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. Direct2D 学习笔记（3）图层 Layer

    利用图层Layer绘制资源网址:https://docs.microsoft.com/zh-cn/windows/win32/direct2d/direct2d-layers-overview   1 ...

  2. elasticsearch7.1.1【win】下载安装

    下载:https://www.elastic.co/cn/downloads/elasticsearch 历史版本下载:https://www.elastic.co/cn/downloads/past ...

  3. php 获取文件mime类型的方法

    php 获取文件mime类型的方法 使用fileinfo需要安装php_fileinfo扩展. 如已安装可以在extension_dir目录下找到php_fileinfo.dll(windows),f ...

  4. python代码注释 - python基础入门(4)

    在 python改变世界,从hello world开始 中我们已经完成了第一个python程序,代码是有了,关键是好像好不知道写的啥玩意? 一.什么是代码注释 代码注释就是给一段代码加上说明,表明这段 ...

  5. Zookeeper学习之Watcher事件类型和ZK状态

    1.Zookeepe  Watcherr的事件类型和ZK状态. zookeeper:Watcher.ZK状态,事件类型(一)zookeeper有watch事件,是一次性触发的,当watch监视的数据发 ...

  6. PS复制图层快捷键

    选中图层,按“Ctrl + J”即可快速复制图层.

  7. Java基础---Java 开发工具IntelliJ IDEA 快捷操作

    IDE中快捷编写函数的方法 public static void main(String[] args) ===> psvm System.out.println(); ====> sou ...

  8. LIUNX随堂学习-3 权限

    1.权限分为三类:读r,写w,执行x 2.读r:可以ls改目录下的子文件名,子目录名 写w:可以在该目录下创建.删除.重命名 执行x:可以cd到该目录下 3. ll  (ls -l) 下详细信息的意义 ...

  9. 模块 os 和 sys

    目录 os 模块 sys 模块 os 模块 os 模块是与操作系统交互的一个接口 方法 详解 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir(&quo ...

  10. uboot中打开 debug调试信息的方法

    在uboot目录下include/common.h中, 原理:只需要让 _DEBUG 的值为 1即可. 最简单的做法就是在下图第一行之前添加 #define DEBUG