webstorm调试html,调试vue项目

754 阅读1分钟

1 webstorm 调试 html

1.1 新建 html 文件

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>

 <script>
  let a = 'b'
    console.log(a)
    console.log('aaaa')
 </script>
</body>
</html>

1.2 在需要开始调试的 js 行打断点

image.png

1.3 右键选择 Debug

image.png

1.4 运行到断点处时

看到这个界面时就成功了。

image.png

2 webstorm 调试 vue 项目

2.1 正常在 webstorm 启动 vue 项目

2.2 在需要的地方打断点

image.png

2.3 配置 javascript Debug

image.png

2.4 debug 启动配置

运行到该函数时就会进入断点。

image.png