随笔 - 363  文章 - 24  评论 - 7  阅读 - 33万 
  2020年9月13日

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

posted @ 2020-09-13 17:57 天之城 阅读(421) 评论(0) 推荐(0) 编辑
  2019年8月15日
摘要: List<TbUserInvalid> students = JSON.parseObject(json,new TypeReference<List<TbUserInvalid>>(){}); // Json 转List 阅读全文
posted @ 2019-08-15 13:36 天之城 阅读(140) 评论(0) 推荐(0) 编辑
  2019年6月28日
摘要: { "version": "0.2.0", "configurations": [{ "name": "谷歌浏览器", //运行html文件,用谷歌浏览器打开 "type": "chrome", "request": "launch", "url": "${file}", "sourceMaps": 阅读全文
posted @ 2019-06-28 16:25 天之城 阅读(512) 评论(0) 推荐(0) 编辑
  2019年6月20日
摘要: ├─ inst│ ├─ bin│ ├─ build.txt│ ├─ help│ ├─ Install-Windows-zip.txt│ ├─ ipr.reg│ ├─ jre32│ ├─ jre64│ ├─ lib│ ├─ license│ ├─ plugins│ ├─ product-info.js 阅读全文
posted @ 2019-06-20 15:08 天之城 阅读(171) 评论(0) 推荐(0) 编辑
摘要: mvn install:install-file -Dfile=D:\wonderspace\wonders\2宁波_内网\gateway-api\target\gateway-api.jar -DgroupId=com.wonders.health -DartifactId=gateway-api 阅读全文
posted @ 2019-06-20 09:22 天之城 阅读(254) 评论(0) 推荐(0) 编辑
  2019年6月18日
摘要: ├─ .obsolete ├─ .wlck ├─ .wtid ├─ 1194979849.code-snippets-0.1.18 ├─ abeyuhang.vscode-lesslint-0.0.1 ├─ abierbaum.vscode-file-peek-1.0.1 ├─ abusaidm.h 阅读全文
posted @ 2019-06-18 11:26 天之城 阅读(382) 评论(0) 推荐(0) 编辑
  2019年6月13日
摘要: beetl:# RESOURCE.autoCheck= true resource-auto-check: true #热加载beetl模板,开发时候用 阅读全文
posted @ 2019-06-13 16:32 天之城 阅读(438) 评论(0) 推荐(0) 编辑
  2019年6月4日
摘要: Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\runas]@="管理员取得所有权""NoWorkingDirectory"=""[HKEY_CLASSES_ROOT\*\shell\runas\command]@="c 阅读全文
posted @ 2019-06-04 13:52 天之城 阅读(7360) 评论(0) 推荐(0) 编辑
摘要: DEVICE=eth1HWADDR=00:50:56:33:EF:21TYPE=EthernetUUID=f35bd21c-9636-4e3f-a05c-bd4382c352bfONBOOT=yesNM_CONTROLLED=yesDEERDNS=noIPV6INIT=noUSERCTL=no#BO 阅读全文
posted @ 2019-06-04 13:35 天之城 阅读(270) 评论(0) 推荐(0) 编辑
  2019年6月3日
摘要: 3/30 6/12 09/7 12/7 阅读全文
posted @ 2019-06-03 09:38 天之城 阅读(126) 评论(0) 推荐(0) 编辑
摘要: 阅读全文
posted @ 2019-06-03 09:01 天之城 阅读(98) 评论(0) 推荐(0) 编辑
  2019年5月13日
摘要: Adobe Acrobat Advanced REST client Axure RP Extension for Chrome Charset Chrono下载管理器 Code Cola CSS Sprite Generator & Ruler Css to SCSS or SASS Conver 阅读全文
posted @ 2019-05-13 07:34 天之城 阅读(491) 评论(0) 推荐(0) 编辑
  2019年4月17日
摘要: 阅读全文
posted @ 2019-04-17 13:54 天之城 阅读(84) 评论(0) 推荐(0) 编辑
  2019年4月4日
摘要: maven加载springboot project 1● 下载项目 2● 构建project mvn install mvn package 3● idea加载 4● run启动 =====>waiting 阅读全文
posted @ 2019-04-04 10:28 天之城 阅读(256) 评论(0) 推荐(0) 编辑
  2019年3月20日
摘要: [user] name = 1111 email = 111@111.com[credential] helper = store 阅读全文
posted @ 2019-03-20 14:01 天之城 阅读(234) 评论(0) 推荐(0) 编辑
点击右上角即可分享
微信分享提示