在浏览器中调试js代码很不舒服,所以查阅了各位前辈的博客,再此记录一下:
1. 生成项目,我的项目中的package.json入下图:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@vue/cli": "^3.3.0",
"axios": "^0.18.0",
2. 使用webstorm打开项目,点击terminate,输入命令 npm run serve 或者 yarn serve
3. 添加一个js的运行配置
4. 点击debug,会打开一个新的chrome窗口
找到我们的项目中的js脚本,添加一个断点,然后在浏览器中操作,当运行到断点后,可以查看断点出的变量的值
其他语言debug时,都是一键式,但是vue这个debug,需要分2步来,就是步骤2和步骤3
另外,断点和运行到光标处很好用,但是那个step over,无法运行到下一条语句,总是进入到一个奇怪的代码页面,不知道为什么。