zoukankan      html  css  js  c++  java
  • vuejs调试代码

    vuejs调试方式有哪些

    1 debugger;模式

    1.1 vscode打开项目

    image-20200913142925891

    1.2 启动项目

    image-20200913143147898

    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

    image-20200913174544857

    1.5浏览器检查

    image-20200913174643460

    1.6 点击页面事件

    image-20200913174735713

    image-20200913174950948

    上面img

    双击的方式无需配置任何

    2 devtools方式

    2.1 安装

    git clone https://github.com/vuejs/vue-devtools
    cd vue-devtools
    cnpm install
    
    修改manifest.json文件把"persistent":false改成true
    

    image-20200913175356895

    npm run build
    

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

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

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

    image-20200913175547378

    昨日已逝正在输入···
    赞赏支持!!!
    分享到: 更多
  • 相关阅读:
    C/C++ 获取线程入口地址模块等
    C/C++ IAT HOOK MessageBoxW
    C/C++ HOOK 全局 API
    c/c++创建静态库
    如何画Windows窗体
    WindowsPE TLS表
    WindowsPE 延迟加载导入表
    WindowsPE 资源表
    WindowsPE 重定位表
    WindowsPE 导出表
  • 原文地址:https://www.cnblogs.com/rhxuza1993/p/13662255.html
Copyright © 2011-2022 走看看