vuejs调试代码

vuejs调试方式有哪些

1 debugger;模式

1.1 vscode打开项目

1.2 启动项目

1.3 配置以下其中一种

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  rules: {
    "no-debugger": "off",
    "no-console": "off"
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

package.json

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "no-debugger": "off",
      "no-console": "off"
    }
  },

1.4 js、vue中加debugger

1.5浏览器检查

1.6 点击页面事件

上面

双击的方式无需配置任何

2 devtools方式

2.1 安装

git clone https://github.com/vuejs/vue-devtools
cd vue-devtools
cnpm install

修改manifest.json文件把"persistent":false改成true

npm run build

Chrome浏览器 > 更多程序 > 拓展程序

点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入, 安装成功如下图

vue项目, 打开f12, 选择vue就可以使用了.