├── .babelrc ├── .circleci └── config.yml ├── .eslintignore ├── .eslintrc ├── .flowconfig ├── .gitignore ├── .prettierrc ├── CHANGELOG.md ├── LICENSE ├── README.md ├── assets ├── base.jpg ├── com.jpg ├── data.jpg ├── element-ui.css ├── element-ui.js ├── erweima.jpg ├── event.jpg ├── feixiangjiance.jpg ├── fonts │ └── element-icons.woff ├── nav.jpg ├── screenshot.jpg ├── show.mov ├── show.mp4 ├── video.jpg └── viewBar.jpg ├── build ├── build.js ├── configs.js └── rollup.dev.config.js ├── dist ├── vue-component-inspector.common.js ├── vue-component-inspector.esm.browser.js ├── vue-component-inspector.esm.browser.min.js ├── vue-component-inspector.esm.js ├── vue-component-inspector.js ├── vue-component-inspector.js.map ├── vue-component-inspector.js.rej └── vue-component-inspector.min.js ├── examples └── basic │ └── index.html ├── netlify.toml ├── package.json ├── scripts ├── release.sh └── verifyCommitMsg.js ├── src ├── components │ ├── basic.vue │ ├── data.vue │ ├── dataItem.vue │ ├── event.vue │ ├── index.vue │ ├── navigation.vue │ └── treeLoading.vue ├── config.js ├── helper │ ├── event.js │ ├── imgs.js │ └── label.js ├── index.js ├── install.js ├── page │ ├── contaienr-01.vue │ ├── contaienr-02.vue │ ├── contaienr-03.vue │ └── page.vue └── util │ ├── dom.js │ └── util.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@vue/babel-preset-jsx" 5 | ] 6 | } -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zglz/vue-component-inspector/afcad8da6cd8b7ff3e3c714428c718fedf104523/.circleci/config.yml -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "plugins": [ 4 | "flowtype" 5 | ], 6 | "extends": [ 7 | "plugin:vue-libs/recommended", 8 | "plugin:flowtype/recommended" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zglz/vue-component-inspector/afcad8da6cd8b7ff3e3c714428c718fedf104523/.flowconfig -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .idea/* -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "printWidth": 80 5 | } 6 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zglz/vue-component-inspector/afcad8da6cd8b7ff3e3c714428c718fedf104523/CHANGELOG.md -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zglz/vue-component-inspector/afcad8da6cd8b7ff3e3c714428c718fedf104523/LICENSE -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue-Component-Inspector 2 | 3 | > Vue-Component-Inspector 是一款 Vue 2.0 开发调试工具，它本身也是一个 Vue 组件。 4 | 5 | > 特点：易安装，兼容性强。 6 | 7 | 8 | 基于 [Element-UI](https://element.faas.ele.me/#/zh-CN/component/installation) 开发。 9 | 10 | ![](./assets/screenshot.jpg) 11 | 12 | 13 | ## 安装方法 (Vue CLI ) 14 | 15 | ```bash 16 | $ npm install vue-component-inspector -S 17 | ``` 18 | 19 | 20 | ####在 main.js 中写入以下内容： 21 | ```js 22 | import VCI from 'vue-component-inspector' 23 | 24 | Vue.use(VCI) 25 | ``` 26 | 27 | ####在 app.vue 中写入以下内容： 28 | ```js 29 |
30 | 31 |
32 | ``` 33 | 34 | 35 | ## 配置参数 36 | ```js 37 | const options = { 38 | noInspect: [] // 不可审查组件name 39 | }; 40 | Vue.use(VCI, options) 41 | ``` 42 | 43 | 44 | ## 使用教程 45 | 46 | ### 新增功能 47 | 1.非响检测 48 | 49 | 视频演示： 50 | https://www.bilibili.com/video/BV1vi4y1L7kf/ 51 | 52 | ![](./assets/feixiangjiance.jpg) 53 | 54 | 55 | 56 | ### 视频教程 57 | [视频地址](https://www.bilibili.com/video/BV19g4y1v7g6): https://www.bilibili.com/video/BV19g4y1v7g6 58 | 59 | ![](./assets/video.jpg) 60 | 61 | 62 | [视频地址](https://www.bilibili.com/video/BV19g4y1v7g6): https://www.bilibili.com/video/BV19g4y1v7g6 63 | 64 | #### 视图栏 65 | ![](./assets/viewBar.jpg) 66 | 67 | 1.组件视图开关 68 | 69 | 2.刷新视图按钮 70 | 71 | 72 | #### 导航面板 73 | ![](./assets/nav.jpg) 74 | 75 | 3.通过全局变量 $vm 访问当前选中的组件实例 76 | 77 | 4.跳转最近的可审查父组件 78 | 79 | 5.审查组件 80 | 81 | 82 | 83 | #### 基本信息面板 84 | ![](./assets/base.jpg) 85 | 86 | 7.组件名称 87 | 88 | 8.组件路径 89 | 90 | 91 | 92 | #### 数据面板 93 | ![](./assets/data.jpg) 94 | 95 | 96 | #### 事件面板 97 | ![](./assets/event.jpg) 98 | 99 | 8.DOM事件 100 | 101 | 9.组件事件 102 | 103 | 104 | 105 | #### ⚠️ 注意事项 106 | 107 | 108 | ##### 可审查组件 109 | 110 | 为了提高调试工具性能，并非所有的组件都具有可审查的权限。 ⚠️ **只有组件具有name属性，并且不在noInspect中配置的组件具有审查权限（ 具有name属性&&(!noInspect) ）** 111 | 112 | 使用 [Element-UI](https://element.faas.ele.me/#/zh-CN/component/installation) 作为基础 UI 的项目，建议配置如下： 113 | ```js 114 | const options = { 115 | noInspect:['ElPagination', 'ElDialog', 'ElAutocomplete', 'ElDropdown', 'ElDropdownMenu', 'ElDropdownItem', 'ElMenu', 'ElSubmenu', 'ElMenuItem', 'ElMenuItemGroup', 'ElInput', 'ElInputNumber', 'ElRadio', 'ElRadioGroup', 'ElRadioButton', 'ElCheckbox', 'ElCheckboxButton', 'ElCheckboxGroup', 'ElSwitch', 'ElSelect', 'ElOption', 'ElOptionGroup', 'ElButtonGroup', 'ElTable', 'ElTableColumn', 'ElDatePicker', 'ElTimeSelect', 'ElTimePicker', 'ElPopover', 'ElTooltip', 'ElBreadcrumb', 'ElBreadcrumbItem', 'ElForm', 'ElFormItem', 'ElTabs', 'ElTabPane', 'ElTag', 'ElTree', 'ElAlert', 'ElSlider', 'ElIcon', 'ElRow', 'ElCol', 'ElUpload', 'ElProgress', 'ElSpinner', 'ElBadge', 'ElCard', 'ElRate', 'ElSteps', 'ElStep', 'ElCarousel', 'ElScrollbar', 'ElCarouselItem', 'ElCollapse', 'ElCollapseItem', 'ElCascader', 'ElColorPicker', 'ElTransfer', 'ElContainer', 'ElHeader', 'ElAside', 'ElMain', 'ElFooter', 'ElTimeline', 'ElTimelineItem', 'ElLink', 'ElDivider', 'ElImage', 'ElCalendar', 'ElBacktop', 'ElPageHeader', 'ElCascaderPanel', 'ElAvatar', 'ElDrawer', 'ElPopconfirm', 'ElCollapseTransition', 'ElTreeNode', undefined, 'SvgIcon', 'SidebarItem','ElTableBody','ElTableHeader','ElSelectDropdown'] 116 | }; 117 | Vue.use(VCI, options) 118 | ``` 119 | 120 | 如果使用其他 UI 库，请自行配置 121 | 122 | 123 | ## 本地开发 124 | ```bash 125 | $ npm i 126 | $ npm run dev:dist 127 | ``` 128 | 129 | 130 | ## 感谢大家使用，如有问题联系我 131 | 132 | ![](./assets/erweima.jpg) 133 | 134 | 135 | 136 | 137 | -------------------------------------------------------------------------------- /assets/base.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zglz/vue-component-inspector/afcad8da6cd8b7ff3e3c714428c718fedf104523/assets/base.jpg -------------------------------------------------------------------------------- /assets/com.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zglz/vue-component-inspector/afcad8da6cd8b7ff3e3c714428c718fedf104523/assets/com.jpg -------------------------------------------------------------------------------- /assets/data.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zglz/vue-component-inspector/afcad8da6cd8b7ff3e3c714428c718fedf104523/assets/data.jpg -------------------------------------------------------------------------------- /assets/erweima.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zglz/vue-component-inspector/afcad8da6cd8b7ff3e3c714428c718fedf104523/assets/erweima.jpg -------------------------------------------------------------------------------- /assets/event.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zglz/vue-component-inspector/afcad8da6cd8b7ff3e3c714428c718fedf104523/assets/event.jpg -------------------------------------------------------------------------------- /assets/feixiangjiance.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zglz/vue-component-inspector/afcad8da6cd8b7ff3e3c714428c718fedf104523/assets/feixiangjiance.jpg -------------------------------------------------------------------------------- /assets/fonts/element-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zglz/vue-component-inspector/afcad8da6cd8b7ff3e3c714428c718fedf104523/assets/fonts/element-icons.woff -------------------------------------------------------------------------------- /assets/nav.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zglz/vue-component-inspector/afcad8da6cd8b7ff3e3c714428c718fedf104523/assets/nav.jpg -------------------------------------------------------------------------------- /assets/screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zglz/vue-component-inspector/afcad8da6cd8b7ff3e3c714428c718fedf104523/assets/screenshot.jpg -------------------------------------------------------------------------------- /assets/show.mov: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zglz/vue-component-inspector/afcad8da6cd8b7ff3e3c714428c718fedf104523/assets/show.mov -------------------------------------------------------------------------------- /assets/show.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zglz/vue-component-inspector/afcad8da6cd8b7ff3e3c714428c718fedf104523/assets/show.mp4 -------------------------------------------------------------------------------- /assets/video.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zglz/vue-component-inspector/afcad8da6cd8b7ff3e3c714428c718fedf104523/assets/video.jpg -------------------------------------------------------------------------------- /assets/viewBar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zglz/vue-component-inspector/afcad8da6cd8b7ff3e3c714428c718fedf104523/assets/viewBar.jpg -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const path = require('path') 3 | const zlib = require('zlib') 4 | const terser = require('terser') 5 | const rollup = require('rollup') 6 | const configs = require('./configs') 7 | 8 | if (!fs.existsSync('dist')) { 9 | fs.mkdirSync('dist') 10 | } 11 | 12 | build(configs) 13 | 14 | function build (builds) { 15 | let built = 0 16 | const total = builds.length 17 | const next = () => { 18 | buildEntry(builds[built]) 19 | .then(() => { 20 | built++ 21 | if (built < total) { 22 | next() 23 | } 24 | }) 25 | .catch(logError) 26 | } 27 | 28 | next() 29 | } 30 | 31 | function buildEntry ({ input, output }) { 32 | const { file, banner } = output 33 | const isProd = /min\.js$/.test(file) 34 | return rollup 35 | .rollup(input) 36 | .then(bundle => bundle.generate(output)) 37 | .then(bundle => { 38 | // console.log(bundle) 39 | const code = bundle.output[0].code 40 | if (isProd) { 41 | const minified = 42 | (banner ? banner + '\n' : '') + 43 | terser.minify(code, { 44 | toplevel: true, 45 | output: { 46 | ascii_only: true 47 | }, 48 | compress: { 49 | pure_funcs: ['makeMap'] 50 | } 51 | }).code 52 | return write(file, minified, true) 53 | } else { 54 | return write(file, code) 55 | } 56 | }) 57 | } 58 | 59 | function write (dest, code, zip) { 60 | return new Promise((resolve, reject) => { 61 | function report (extra) { 62 | console.log( 63 | blue(path.relative(process.cwd(), dest)) + 64 | ' ' + 65 | getSize(code) + 66 | (extra || '') 67 | ) 68 | resolve() 69 | } 70 | 71 | fs.writeFile(dest, code, err => { 72 | if (err) return reject(err) 73 | if (zip) { 74 | zlib.gzip(code, (err, zipped) => { 75 | if (err) return reject(err) 76 | report(' (gzipped: ' + getSize(zipped) + ')') 77 | }) 78 | } else { 79 | report() 80 | } 81 | }) 82 | }) 83 | } 84 | 85 | function getSize (code) { 86 | return (code.length / 1024).toFixed(2) + 'kb' 87 | } 88 | 89 | function logError (e) { 90 | console.log(e) 91 | } 92 | 93 | function blue (str) { 94 | return '\x1b[1m\x1b[34m' + str + '\x1b[39m\x1b[22m' 95 | } 96 | -------------------------------------------------------------------------------- /build/configs.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const buble = require('rollup-plugin-buble') 3 | const flow = require('rollup-plugin-flow-no-whitespace') 4 | const cjs = require('rollup-plugin-commonjs') 5 | const node = require('rollup-plugin-node-resolve') 6 | const replace = require('rollup-plugin-replace') 7 | const uglify = require('rollup-plugin-uglify') 8 | const version = process.env.VERSION || require('../package.json').version 9 | const vue = require('rollup-plugin-vue'); 10 | const terser = require("rollup-plugin-terser"); 11 | const banner = 12 | `/*! 13 | * vue-component-inspector v${version} 14 | * (c) ${new Date().getFullYear()} zhanggaungliang 15 | * @license MIT 16 | */` 17 | 18 | const resolve = _path => path.resolve(__dirname, '../', _path) 19 | 20 | module.exports = [ 21 | // browser dev 22 | { 23 | file: resolve('dist/vue-component-inspector.js'), 24 | format: 'umd', 25 | env: 'development' 26 | }, 27 | { 28 | file: resolve('dist/vue-component-inspector.min.js'), 29 | format: 'umd', 30 | env: 'production' 31 | }, 32 | { 33 | file: resolve('dist/vue-component-inspector.common.js'), 34 | format: 'cjs' 35 | }, 36 | { 37 | file: resolve('dist/vue-component-inspector.esm.js'), 38 | format: 'es' 39 | }, 40 | { 41 | file: resolve('dist/vue-component-inspector.esm.browser.js'), 42 | format: 'es', 43 | env: 'development', 44 | transpile: false 45 | }, 46 | { 47 | file: resolve('dist/vue-component-inspector.esm.browser.min.js'), 48 | format: 'es', 49 | env: 'production', 50 | transpile: false 51 | } 52 | ].map(genConfig) 53 | 54 | function genConfig (opts) { 55 | const config = { 56 | input: { 57 | input: resolve('src/index.js'), 58 | plugins: [ 59 | flow(), 60 | node(), 61 | cjs(), 62 | vue(), 63 | // babel(), 64 | replace({ 65 | __VERSION__: version 66 | }), 67 | terser.terser() 68 | 69 | ] 70 | }, 71 | output: { 72 | file: opts.file, 73 | format: opts.format, 74 | banner, 75 | name: 'vueComponentInspector', 76 | sourceMap: false 77 | }, 78 | 79 | } 80 | 81 | if (opts.env) { 82 | config.input.plugins.unshift(replace({ 83 | 'process.env.NODE_ENV': JSON.stringify(opts.env) 84 | })) 85 | } 86 | 87 | if (opts.transpile !== false) { 88 | // config.input.plugins.push(buble()) 89 | } 90 | 91 | return config 92 | } 93 | -------------------------------------------------------------------------------- /build/rollup.dev.config.js: -------------------------------------------------------------------------------- 1 | const { input, output } = require('./configs')[0] 2 | 3 | module.exports = Object.assign({}, input, { output }) 4 | -------------------------------------------------------------------------------- /dist/vue-component-inspector.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"vue-component-inspector.js","sources":["../node_modules/_vue-runtime-helpers@1.1.2@vue-runtime-helpers/dist/normalize-component.mjs","../node_modules/_vue-runtime-helpers@1.1.2@vue-runtime-helpers/dist/inject-style/browser.mjs","../src/components/treeLoading.vue","../src/components/navigation.vue","../src/components/basic.vue","../src/components/event.vue","../src/config.js","../src/util/util.js","../src/components/dataItem.vue","../src/components/data.vue","../src/components/index.vue","../src/page/contaienr-01.vue","../src/page/contaienr-02.vue","../src/page/contaienr-03.vue","../src/page/page.vue","../src/helper/label.js","../src/helper/imgs.js","../src/install.js","../src/util/dom.js","../src/index.js","../src/helper/event.js"],"sourcesContent":["function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {\r\n if (typeof shadowMode !== 'boolean') {\r\n createInjectorSSR = createInjector;\r\n createInjector = shadowMode;\r\n shadowMode = false;\r\n }\r\n // Vue.extend constructor export interop.\r\n const options = typeof script === 'function' ? script.options : script;\r\n // render functions\r\n if (template && template.render) {\r\n options.render = template.render;\r\n options.staticRenderFns = template.staticRenderFns;\r\n options._compiled = true;\r\n // functional template\r\n if (isFunctionalTemplate) {\r\n options.functional = true;\r\n }\r\n }\r\n // scopedId\r\n if (scopeId) {\r\n options._scopeId = scopeId;\r\n }\r\n let hook;\r\n if (moduleIdentifier) {\r\n // server build\r\n hook = function (context) {\r\n // 2.3 injection\r\n context =\r\n context || // cached call\r\n (this.$vnode && this.$vnode.ssrContext) || // stateful\r\n (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional\r\n // 2.2 with runInNewContext: true\r\n if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\r\n context = __VUE_SSR_CONTEXT__;\r\n }\r\n // inject component styles\r\n if (style) {\r\n style.call(this, createInjectorSSR(context));\r\n }\r\n // register component module identifier for async chunk inference\r\n if (context && context._registeredComponents) {\r\n context._registeredComponents.add(moduleIdentifier);\r\n }\r\n };\r\n // used by ssr in case component is cached and beforeCreate\r\n // never gets called\r\n options._ssrRegister = hook;\r\n }\r\n else if (style) {\r\n hook = shadowMode\r\n ? function (context) {\r\n style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));\r\n }\r\n : function (context) {\r\n style.call(this, createInjector(context));\r\n };\r\n }\r\n if (hook) {\r\n if (options.functional) {\r\n // register for functional component in vue file\r\n const originalRender = options.render;\r\n options.render = function renderWithStyleInjection(h, context) {\r\n hook.call(context);\r\n return originalRender(h, context);\r\n };\r\n }\r\n else {\r\n // inject component registration as beforeCreate hook\r\n const existing = options.beforeCreate;\r\n options.beforeCreate = existing ? [].concat(existing, hook) : [hook];\r\n }\r\n }\r\n return script;\r\n}\n\nexport default normalizeComponent;\n//# sourceMappingURL=normalize-component.mjs.map\n","const isOldIE = typeof navigator !== 'undefined' &&\r\n /msie [6-9]\\\\b/.test(navigator.userAgent.toLowerCase());\r\nfunction createInjector(context) {\r\n return (id, style) => addStyle(id, style);\r\n}\r\nlet HEAD;\r\nconst styles = {};\r\nfunction addStyle(id, css) {\r\n const group = isOldIE ? css.media || 'default' : id;\r\n const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });\r\n if (!style.ids.has(id)) {\r\n style.ids.add(id);\r\n let code = css.source;\r\n if (css.map) {\r\n // https://developer.chrome.com/devtools/docs/javascript-debugging\r\n // this makes source maps inside style tags work properly in Chrome\r\n code += '\\n/*# sourceURL=' + css.map.sources[0] + ' */';\r\n // http://stackoverflow.com/a/26603875\r\n code +=\r\n '\\n/*# sourceMappingURL=data:application/json;base64,' +\r\n btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +\r\n ' */';\r\n }\r\n if (!style.element) {\r\n style.element = document.createElement('style');\r\n style.element.type = 'text/css';\r\n if (css.media)\r\n style.element.setAttribute('media', css.media);\r\n if (HEAD === undefined) {\r\n HEAD = document.head || document.getElementsByTagName('head')[0];\r\n }\r\n HEAD.appendChild(style.element);\r\n }\r\n if ('styleSheet' in style.element) {\r\n style.styles.push(code);\r\n style.element.styleSheet.cssText = style.styles\r\n .filter(Boolean)\r\n .join('\\n');\r\n }\r\n else {\r\n const index = style.ids.size - 1;\r\n const textNode = document.createTextNode(code);\r\n const nodes = style.element.childNodes;\r\n if (nodes[index])\r\n style.element.removeChild(nodes[index]);\r\n if (nodes.length)\r\n style.element.insertBefore(textNode, nodes[index]);\r\n else\r\n style.element.appendChild(textNode);\r\n }\r\n }\r\n}\n\nexport default createInjector;\n//# sourceMappingURL=browser.mjs.map\n","\r\n\r\n\r\n\r\n\r\n\r\n","\r\n\r\n\r\n\r\n\r\n\r\n","\r\n\r\n\r\n\r\n\r\n\r\n","\r\n\r\n\r\n\r\n\r\n\r\n","export const NoInspect = []\r\n\r\nexport const VueBuiltIn = ['KeepAlive', 'transition', 'TransitionGroup', 'Basic', 'Navigation', 'Data','Event']\r\n","import { NoInspect, VueBuiltIn } from './../config'\r\n\r\nexport function isViewCom (vm) {\r\n // debugger\r\n const vmNname = vm.$options.name\r\n let ret = true\r\n if (!vmNname) { // not Name\r\n ret = false\r\n }\r\n if (NoInspect.indexOf(vmNname) > 0) { // NoInspect\r\n ret = false\r\n }\r\n if (VueBuiltIn.indexOf(vmNname) > 0) { // VueBuiltIn com\r\n ret = false\r\n }\r\n if (vmNname === 'VueComponentInspector') {\r\n ret = false\r\n }\r\n return ret\r\n}\r\n\r\nexport function isPlainObject (obj) {\r\n return Object.prototype.toString.call(obj) === '[object Object]'\r\n}\r\n","\r\n\r\n\r\n\r\n\r\n\r\n","\r\n\r\n\r\n\r\n\r\n\r\n","\r\n\r\n\r\n\r\n\r\n\r\n","\r\n\r\n\r\n\r\n\r\n\r\n","\r\n\r\n\r\n\r\n\r\n\r\n","\r\n\r\n\r\n\r\n\r\n\r\n","\r\n\r\n\r\n\r\n\r\n","import { comLabelLogo } from './imgs'\r\n// previous vue\r\nlet preVm = null\r\n// clear DomEventLabel-fn\r\nlet clearDomEventLabel = null\r\nconst EventLabelCollection = []\r\nconst componentsLabelProps = {\r\n attr: {\r\n className: 'vue-component-inspector'\r\n },\r\n style: {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n margin: '4px',\r\n background: '#a6dfa6',\r\n cursor: 'pointer',\r\n fontSize: '8px',\r\n zIndex: 10\r\n }\r\n\r\n}\r\nconst componentsLabelImgProps = {\r\n attr: {\r\n src: comLabelLogo\r\n },\r\n style: {\r\n width: '20px',\r\n float: 'left'\r\n }\r\n\r\n}\r\nconst eventIconProps = {\r\n attr: {\r\n className: 'el-icon-caret-left event-icon'\r\n },\r\n style: {\r\n fontSize: '31px',\r\n position: 'absolute',\r\n left: '-22px',\r\n top: '-7px',\r\n color: '#a6dfa2'\r\n }\r\n\r\n}\r\nconst domEventLabelProps = {\r\n attr: {\r\n innerText: 'e',\r\n className: 'event-label'\r\n },\r\n style: {\r\n background: 'rgb(255, 255, 255)',\r\n color: 'rgb(166, 223, 162)',\r\n border: '3px solid rgb(166, 223, 162)',\r\n display: 'inline-block',\r\n borderRadius: '5px',\r\n padding: '3px 5px',\r\n position: 'absolute',\r\n top: '-1px',\r\n left: '186px',\r\n cursor: 'pointer',\r\n fontSize: '17px',\r\n lineHeight: '10px',\r\n marginLeft: '5px',\r\n zIndex: '10'\r\n }\r\n\r\n}\r\n// setElementProps\r\nfunction setElementProps (el, props) {\r\n for (const key in props) {\r\n if (key === 'attr') {\r\n for (const attrKey in props[key]) {\r\n el[attrKey] = props[key][attrKey]\r\n }\r\n }\r\n if (key === 'style') {\r\n for (const styleKey in props[key]) {\r\n el.style[styleKey] = props[key][styleKey]\r\n }\r\n }\r\n }\r\n}\r\n// createDomEventLabel\r\nfunction createDomEventLabel (vm) {\r\n function setPosition (nodeEventMap) {\r\n nodeEventMap.map((map, i) => {\r\n const offsetTop = map.eventNode.offsetTop\r\n const offsetLeft = map.eventNode.offsetLeft\r\n const top = offsetTop\r\n const left = map.eventNode.offsetWidth + offsetLeft\r\n setElementProps(map.eventLabel, { style: { top: (top + 'px'), left: (left + 'px') }})\r\n })\r\n }\r\n if (vm.$options.eventList) {\r\n const domEvent = vm.$options.eventList.dom\r\n const nodeEventMap = []\r\n // add label\r\n domEvent.map((e, i) => {\r\n const eventNode = e.el\r\n\r\n const eventIcon = document.createElement('i')\r\n setElementProps(eventIcon, eventIconProps)\r\n const span = document.createElement('span')\r\n setElementProps(span, domEventLabelProps)\r\n span.appendChild(eventIcon)\r\n\r\n e.eventLabel = span\r\n nodeEventMap.push({\r\n eventNode: eventNode,\r\n eventLabel: span\r\n })\r\n EventLabelCollection.push(span)\r\n // eventlabel add event\r\n span.addEventListener('click', () => {\r\n preVm.$options.eventList.dom.map((dom) => {\r\n if (dom.eventLabel === span) {\r\n setElementProps(span, { style: { color: '#409EFF', borderColor: '#409EFF' }})\r\n setElementProps(eventIcon, { style: { color: '#409EFF' }})\r\n dom.isShow = true\r\n } else {\r\n // debugger\r\n setElementProps(dom.eventLabel, { style: { color: '#a6dfa5', borderColor: '#a6dfa5' }})\r\n setElementProps(dom.eventLabel.getElementsByTagName('i')[0], { style: { color: '#a6dfa5' }})\r\n dom.isShow = false\r\n }\r\n })\r\n // updata view\r\n document.getElementById('event').__vue__.$forceUpdate()\r\n })\r\n })\r\n // add eventLabel\r\n nodeEventMap.map((map, i) => {\r\n map.eventNode.parentNode.appendChild(map.eventLabel)\r\n })\r\n // position\r\n setPosition(nodeEventMap)\r\n window.removeEventListener('resize', setPosition(nodeEventMap))\r\n window.addEventListener('resize', setPosition(nodeEventMap))\r\n return EventLabelCollection\r\n } else {\r\n return []\r\n }\r\n}\r\n// createComponentsLabel\r\nexport function createComponentsLabel (el, vm, vmNname) {\r\n const div = document.createElement('div')\r\n div.title = `<${vmNname}/>`\r\n setElementProps(div, componentsLabelProps)\r\n // createImg\r\n const img = document.createElement('img')\r\n setElementProps(img, componentsLabelImgProps)\r\n div.appendChild(img)\r\n // setEvent\r\n div.addEventListener('click', (e) => {\r\n e.stopPropagation()\r\n e.preventDefault()\r\n // clear previous style\r\n if (preVm) {\r\n let el = preVm.$el\r\n if (preVm.$options.comment) { // comment\r\n el = el.parentNode\r\n }\r\n setElementProps(el, { style: { outline: '1px solid green' }})\r\n }\r\n // set previous vm\r\n preVm = vm\r\n // set curVm\r\n vm.$root.VCIIndex.change(vm)\r\n // set cur style\r\n setElementProps(el, { style: { outline: '3px solid red', outlineOffset: '-3px' }})\r\n // clearDomEventLabel\r\n clearDomEventLabel && clearDomEventLabel()\r\n // create event label\r\n const domEventLabel = createDomEventLabel(vm)\r\n // set clearDomEventLabel-fn\r\n vm.$root.clearDomEventLabel = clearDomEventLabel = function () {\r\n domEventLabel.map((v) => {\r\n v.remove()\r\n })\r\n }\r\n // set global $vm\r\n window.$vm = vm\r\n })\r\n // Append the created child element to the component parent element\r\n // el.parentNode.appendChild(div);\r\n // Append the created child element to the component element\r\n // el.appendChild(div);\r\n // positiong ComponentsLabel\r\n function setCreateComponentsLabelPosition (map) {\r\n map.map((map, i) => {\r\n const offsetTop = map.vmEl.offsetTop\r\n const offsetLeft = map.vmEl.offsetLeft\r\n const top = offsetTop\r\n // let left = map.vmEl.offsetWidth/2 + offsetLeft\r\n const left = offsetLeft\r\n setElementProps(map.componentsLabel, { style: { top: (top + 'px'), left: (left + 'px') }})\r\n })\r\n }\r\n window.setTimeout(() => {\r\n setCreateComponentsLabelPosition([{\r\n vmEl: el,\r\n componentsLabel: div\r\n }])\r\n }, 2000)\r\n window.addEventListener('resize', () => {\r\n setCreateComponentsLabelPosition([{\r\n vmEl: el,\r\n componentsLabel: div\r\n }])\r\n })\r\n return div\r\n}\r\n\r\n","// logo\r\nexport const comLabelLogo = 'data:image/jpg;base64,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'\r\n","import index from './components/index.vue'\r\nimport page from './page/page.vue'\r\nimport { isViewCom } from './util/util'\r\nimport { NoInspect } from './config'\r\nimport { addEventList } from './helper/event'\r\nimport { createComponentsLabel } from './helper/label'\r\nexport let _Vue\r\nexport function install (Vue,options={}) {\r\n if (install.installed && _Vue === Vue) return\r\n install.installed = true\r\n _Vue = Vue\r\n // debugger\r\n let noInspect = options.noInspect||[]\r\n noInspect.map((v)=>{\r\n NoInspect.push(v)\r\n })\r\n\r\n\r\n const componentsLabelCollection = []\r\n // minxin mounted , destroyed\r\n Vue.mixin({\r\n mounted () {\r\n let el = this.$el\r\n const vmNname = this.$options.name\r\n if (this && this.$root === this) {\r\n // rootVm\r\n\r\n // set componentsLabelCollection\r\n this.$root.componentsLabelCollection = componentsLabelCollection\r\n this.$root.$options.fileUrl = 'root'\r\n // set curVm\r\n this.curVm = null\r\n }\r\n if (isViewCom(this)) {\r\n // remark selet element\r\n if (el.nodeType === 8) {\r\n el = el.parentNode\r\n this.$options.comment = true\r\n }\r\n /* const computedStyle = document.defaultView.getComputedStyle(el, null)\r\n const position = computedStyle.position\r\n if (position !== 'absolute' && position !== 'relative' && position !== 'fixed') {\r\n el.style.position = 'relative'\r\n }*/\r\n // Process Event\r\n window.setTimeout(() => {\r\n addEventList(this)\r\n })\r\n // add component label\r\n const componentsLabel = createComponentsLabel(el, this, vmNname)\r\n this.componentsLabel = componentsLabel\r\n componentsLabelCollection.push({ vmEl: el, componentsLabel: componentsLabel })\r\n }\r\n },\r\n destroyed () {\r\n this.componentsLabel && this.componentsLabel.remove()\r\n }\r\n })\r\n Vue.component('Page', page)\r\n Vue.component('VueComponentInspector', index)\r\n}\r\n","/* @flow */\r\n\r\nexport const inBrowser = typeof window !== 'undefined'\r\n","import { install } from './install'\r\nimport { inBrowser } from './util/dom'\r\nconst VCI = {\r\n install: install,\r\n version: '__VERSION__'\r\n}\r\nexport default VCI\r\nif (inBrowser && window.Vue) {\r\n window.Vue.use(VCI,{\r\n noInspect:['ElPagination', 'ElDialog', 'ElAutocomplete', 'ElDropdown', 'ElDropdownMenu', 'ElDropdownItem', 'ElMenu', 'ElSubmenu', 'ElMenuItem', 'ElMenuItemGroup', 'ElInput', 'ElInputNumber', 'ElRadio', 'ElRadioGroup', 'ElRadioButton', 'ElCheckbox', 'ElCheckboxButton', 'ElCheckboxGroup', 'ElSwitch', 'ElSelect', 'ElOption', 'ElOptionGroup', 'ElButtonGroup', 'ElTable', 'ElTableColumn', 'ElDatePicker', 'ElTimeSelect', 'ElTimePicker', 'ElPopover', 'ElTooltip', 'ElBreadcrumb', 'ElBreadcrumbItem', 'ElForm', 'ElFormItem', 'ElTabs', 'ElTabPane', 'ElTag', 'ElTree', 'ElAlert', 'ElSlider', 'ElIcon', 'ElRow', 'ElCol', 'ElUpload', 'ElProgress', 'ElSpinner', 'ElBadge', 'ElCard', 'ElRate', 'ElSteps', 'ElStep', 'ElCarousel', 'ElScrollbar', 'ElCarouselItem', 'ElCollapse', 'ElCollapseItem', 'ElCascader', 'ElColorPicker', 'ElTransfer', 'ElContainer', 'ElHeader', 'ElAside', 'ElMain', 'ElFooter', 'ElTimeline', 'ElTimelineItem', 'ElLink', 'ElDivider', 'ElImage', 'ElCalendar', 'ElBacktop', 'ElPageHeader', 'ElCascaderPanel', 'ElAvatar', 'ElDrawer', 'ElPopconfirm', 'ElCollapseTransition', 'ElTreeNode', undefined, 'SvgIcon', 'SidebarItem','ElTableBody','ElTableHeader','ElSelectDropdown']\r\n })\r\n}\r\n","export function addEventList (vm) {\r\n const eventList = { dom: [], com: [] }\r\n\r\n /** *************** addDOMEvent **********************/\r\n // 获取具有DOM事件的Vnode\r\n const VnodeListWithEvent = []\r\n function parseVnodehEvent (vnode, VnodeListWithEvent) {\r\n if (vnode.data && vnode.data.on && (!vnode.componentInstance)) {\r\n VnodeListWithEvent.push(vnode)\r\n }\r\n if (vnode.children) {\r\n vnode.children.map((vm, i) => {\r\n parseVnodehEvent(vm, VnodeListWithEvent)\r\n })\r\n }\r\n }\r\n parseVnodehEvent(vm._vnode, VnodeListWithEvent)\r\n\r\n VnodeListWithEvent.map((Vnode, i) => {\r\n const VnodeEvent = Vnode.data.on\r\n if (VnodeEvent) {\r\n const event = []\r\n for (const key in VnodeEvent) {\r\n // get eventFnName\r\n const eventFullFnName = VnodeEvent[key].fns.name\r\n let eventFnName = ''\r\n if (eventFullFnName === key) {\r\n //\r\n if (vm.$options.methods) {\r\n Object.keys(vm.$options.methods).map((m) => {\r\n if (VnodeEvent[key].fns.toString().indexOf(m) > -1) {\r\n eventFnName = m\r\n }\r\n })\r\n }\r\n } else {\r\n eventFnName = eventFullFnName.split(' ')[1]\r\n }\r\n // VnodeEvent[key].fns\r\n // if(!eventFnName){\r\n // debugger\r\n // }\r\n\r\n event.push({\r\n name: eventFnName||'inline-event',\r\n type: 'on' + key,\r\n fn: eventFnName ? vm[eventFnName] : VnodeEvent[key].fns\r\n })\r\n }\r\n\r\n eventList.dom.push({\r\n name: 'ele' + i,\r\n el: Vnode.elm,\r\n event: event,\r\n isShow: false\r\n })\r\n\r\n // debugger\r\n }\r\n })\r\n\r\n vm.$options.eventList = eventList\r\n\r\n /** *************** addCOMEvent **********************/\r\n\r\n // if(vm.$options.name === \"Container01\"){\r\n // debugger\r\n\r\n const ComEvent = vm.$options._parentListeners\r\n\r\n for (const key in ComEvent) {\r\n // get eventFnName\r\n const eventFullFnName = ComEvent[key].fns.name\r\n let eventFnName = ''\r\n if (eventFullFnName === key) {\r\n //\r\n let $parent = vm.$parent\r\n while (!eventFnName) {\r\n if ($parent.$options.methods) {\r\n Object.keys($parent.$options.methods).map((m) => {\r\n if (ComEvent[key].fns.toString().indexOf(m) > -1) {\r\n eventFnName = m\r\n }\r\n })\r\n }\r\n if (!$parent.$parent) {\r\n break\r\n }\r\n $parent = $parent.$parent\r\n }\r\n } else {\r\n eventFnName = eventFullFnName.split(' ')[1]\r\n }\r\n\r\n eventList.com.push({\r\n name: eventFnName,\r\n type: key,\r\n el: vm.el,\r\n fn: eventFnName ? vm[eventFnName] : ComEvent[key].fns\r\n })\r\n }\r\n\r\n // }\r\n\r\n //\r\n}"],"names":["normalizeComponent","template","style","script","scopeId","isFunctionalTemplate","moduleIdentifier","shadowMode","createInjector","createInjectorSSR","createInjectorShadow","options","hook","render","staticRenderFns","_compiled","functional","_scopeId","context","this","$vnode","ssrContext","parent","__VUE_SSR_CONTEXT__","call","_registeredComponents","add","_ssrRegister","$root","$options","shadowRoot","originalRender","h","existing","beforeCreate","concat","isOldIE","navigator","test","userAgent","toLowerCase","id","css","group","media","styles","ids","Set","has","code","source","map","sources","btoa","unescape","encodeURIComponent","JSON","stringify","element","document","createElement","type","setAttribute","undefined","HEAD","head","getElementsByTagName","appendChild","push","styleSheet","cssText","filter","Boolean","join","index","size","textNode","createTextNode","nodes","childNodes","removeChild","length","insertBefore","addStyle","NoInspect","VueBuiltIn","isPlainObject","obj","Object","prototype","toString","preVm","clearDomEventLabel","EventLabelCollection","componentsLabelProps","attr","className","position","top","left","margin","background","cursor","fontSize","zIndex","componentsLabelImgProps","src","width","float","eventIconProps","color","domEventLabelProps","innerText","border","display","borderRadius","padding","lineHeight","marginLeft","setElementProps","el","props","key","attrKey","styleKey","createComponentsLabel","vm","vmNname","div","title","img","setCreateComponentsLabelPosition","i","vmEl","offsetTop","offsetLeft","componentsLabel","addEventListener","e","stopPropagation","preventDefault","$el","comment","parentNode","outline","VCIIndex","change","outlineOffset","domEventLabel","setPosition","nodeEventMap","eventNode","offsetWidth","eventLabel","eventList","domEvent","dom","eventIcon","span","borderColor","isShow","getElementById","__vue__","$forceUpdate","window","removeEventListener","createDomEventLabel","v","remove","$vm","setTimeout","_Vue","VCI","install","Vue","installed","noInspect","componentsLabelCollection","mixin","[object Object]","name","fileUrl","curVm","ret","indexOf","isViewCom","nodeType","com","VnodeListWithEvent","parseVnodehEvent","vnode","data","on","componentInstance","children","_vnode","Vnode","VnodeEvent","event","eventFullFnName","fns","eventFnName","methods","keys","m","split","fn","elm","ComEvent","_parentListeners","$parent","addEventList","component","page","version","use"],"mappings":"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"} -------------------------------------------------------------------------------- /dist/vue-component-inspector.js.rej: -------------------------------------------------------------------------------- 1 | diff a/dist/vue-component-inspector.js b/dist/vue-component-inspector.js (rejected hunks) 2 | @@ -2093 +2095 @@ 3 | - contaienr01: __vue_component__$6,contaienr02: __vue_component__$7,contaienr03: __vue_component__$8 4 | + contaienr01: __vue_component__$6, contaienr02: __vue_component__$7, contaienr03: __vue_component__$8 5 | @@ -2103,2 +2105,2 @@ 6 | - defaultValue: function(val) { 7 | - } 8 | + defaultValue: function (val) { 9 | + } 10 | @@ -2109,3 +2111,3 @@ 11 | - componentsView(view){ 12 | - }, 13 | - getData01(){ 14 | + componentsView (view) { 15 | + }, 16 | + getData01 () { 17 | @@ -2113,2 +2115,2 @@ 18 | - }, 19 | - getData02(){ 20 | + }, 21 | + getData02 () { 22 | @@ -2165,2 +2167,2 @@ 23 | - inject("data-v-03bf61da_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", map: {"version":3,"sources":[],"names":[],"mappings":"","file":"page.vue"}, media: undefined }) 24 | - ,inject("data-v-03bf61da_1", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", map: {"version":3,"sources":[],"names":[],"mappings":"","file":"page.vue"}, media: undefined }); 25 | + inject("data-v-ac9f5db6_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", map: {"version":3,"sources":[],"names":[],"mappings":"","file":"page.vue"}, media: undefined }) 26 | + ,inject("data-v-ac9f5db6_1", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", map: {"version":3,"sources":[],"names":[],"mappings":"","file":"page.vue"}, media: undefined }); 27 | @@ -2170 +2172 @@ 28 | - const __vue_scope_id__$9 = "data-v-03bf61da"; 29 | + const __vue_scope_id__$9 = "data-v-ac9f5db6"; 30 | -------------------------------------------------------------------------------- /examples/basic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 |
19 | 20 | 27 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | ignore = "git diff --quiet HEAD^ HEAD ./docs/" 3 | publish = "docs/.vuepress/dist" 4 | command = "yarn run docs:build" 5 | 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-component-inspector", 3 | "version": "1.1.17", 4 | "description": "development tool for Vue.js 2", 5 | "author": "zhangguangliang-2020-06-20", 6 | "license": "MIT", 7 | "main": "dist/vue-component-inspector.common.js", 8 | "module": "dist/vue-component-inspector.esm.js", 9 | "unpkg": "dist/vue-component-inspector.js", 10 | "jsdelivr": "dist/vue-component-inspector.js", 11 | "sideEffects": false, 12 | "repository": { 13 | "type": "git", 14 | "url": "" 15 | }, 16 | "typings": "", 17 | "files": [ 18 | "src", 19 | "dist/*.js", 20 | "types/*.d.ts" 21 | ], 22 | "keywords": [ 23 | "vue", 24 | "dev", 25 | "development", 26 | "tools" 27 | ], 28 | "scripts": { 29 | "dev": "node examples/server.js", 30 | "dev:dist": "rollup -wm -c build/rollup.dev.config.js", 31 | "build": "node build/build.js", 32 | "lint": "eslint --fix --ext .js,.vue src" 33 | }, 34 | "gitHooks": {}, 35 | "lint-staged": { 36 | "*.{js,vue}": [ 37 | "eslint --fix", 38 | "git add" 39 | ] 40 | }, 41 | "devDependencies": { 42 | "@babel/preset-env": "^7.12.1", 43 | "axios": "^0.19.0", 44 | "babel-core": "^6.24.1", 45 | "babel-eslint": "^10.0.2", 46 | "babel-loader": "^7.1.3", 47 | "babel-plugin-syntax-dynamic-import": "^6.18.0", 48 | "babel-preset-env": "^1.6.1", 49 | "babel-preset-es2015-rollup": "^3.0.0", 50 | "babel-preset-flow-vue": "^1.0.0", 51 | "browserstack-local": "^1.4.0", 52 | "buble": "^0.19.8", 53 | "chromedriver": "^81.0.0", 54 | "conventional-changelog-cli": "^2.0.11", 55 | "cross-spawn": "^6.0.5", 56 | "css-loader": "^2.1.1", 57 | "dotenv": "^8.0.0", 58 | "es6-promise": "^4.2.8", 59 | "eslint": "^4.19.1", 60 | "eslint-plugin-flowtype": "^2.46.1", 61 | "eslint-plugin-jasmine": "^2.10.1", 62 | "eslint-plugin-vue-libs": "^2.1.0", 63 | "express": "^4.17.1", 64 | "express-urlrewrite": "^1.2.0", 65 | "flow-bin": "^0.66.0", 66 | "geckodriver": "^1.16.2", 67 | "jasmine": "2.8.0", 68 | "lint-staged": "^8.2.0", 69 | "nightwatch": "^1.3.5", 70 | "nightwatch-helpers": "^1.0.0", 71 | "path-to-regexp": "^1.8.0", 72 | "rollup": "^1.20.1", 73 | "rollup-plugin-babel": "^4.4.0", 74 | "rollup-plugin-buble": "^0.19.8", 75 | "rollup-plugin-commonjs": "^10.0.2", 76 | "rollup-plugin-flow-no-whitespace": "^1.0.0", 77 | "rollup-plugin-node-resolve": "^5.2.0", 78 | "rollup-plugin-replace": "^2.0.0", 79 | "rollup-plugin-uglify": "^6.0.4", 80 | "rollup-watch": "^4.0.0", 81 | "selenium-server": "^3.141.59", 82 | "terser": "^4.2.0", 83 | "typescript": "^3.5.2", 84 | "vue": "^2.5.16", 85 | "vue-loader": "^15.2.1", 86 | "vue-template-compiler": "^2.6.11", 87 | "vuepress": "^0.14.11", 88 | "vuepress-theme-vue": "^1.1.0", 89 | "webpack": "^4.35.2", 90 | "webpack-dev-middleware": "^3.7.0", 91 | "yorkie": "^2.0.0" 92 | }, 93 | "bugs": { 94 | "url": "" 95 | }, 96 | "homepage": "", 97 | "dependencies": { 98 | "element-ui": "^2.13.2", 99 | "eslint-plugin-vue": "^4.7.1", 100 | "rollup-plugin-vue": "^5.1.9" 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /scripts/release.sh: -------------------------------------------------------------------------------- 1 | set -e 2 | echo "Enter release version: " 3 | read VERSION 4 | 5 | read -p "Releasing v$VERSION - are you sure? (y/n)" -n 1 -r 6 | echo # (optional) move to a new line 7 | if [[ $REPLY =~ ^[Yy]$ ]] 8 | then 9 | echo "Releasing v$VERSION ..." 10 | npm test 11 | 12 | # commit 13 | VERSION=$VERSION npm run build 14 | git add dist 15 | git commit -m "build: bundle $VERSION" 16 | npm version $VERSION --message "chore(release): %s" 17 | 18 | # changelog 19 | npm run changelog 20 | echo "Please check the git history and the changelog and press enter" 21 | read OKAY 22 | git add CHANGELOG.md 23 | git commit -m "chore(changelog): $VERSION" 24 | 25 | # publish 26 | git push origin refs/tags/v$VERSION 27 | git push 28 | npm publish 29 | fi 30 | -------------------------------------------------------------------------------- /scripts/verifyCommitMsg.js: -------------------------------------------------------------------------------- 1 | const chalk = require('chalk') // eslint-disable-line 2 | const msgPath = process.env.GIT_PARAMS 3 | const msg = require('fs').readFileSync(msgPath, 'utf-8').trim() 4 | 5 | const commitRE = /^(v\d+\.\d+\.\d+(-(alpha|beta|rc.\d+))?$)|((revert: )?(feat|fix|docs|style|refactor|perf|test|workflow|ci|chore|types|build)(\(.+\))?: .{1,50})/ 6 | 7 | if (!commitRE.test(msg)) { 8 | console.log() 9 | console.error( 10 | ` ${chalk.bgRed.white(' ERROR ')} ${chalk.red(`invalid commit message format.`)}\n\n` + 11 | chalk.red(` Proper commit message format is required for automated changelog generation. Examples:\n\n`) + 12 | ` ${chalk.green(`feat(compiler): add 'comments' option`)}\n` + 13 | ` ${chalk.green(`fix(v-model): handle events on blur (close #28)`)}\n\n` + 14 | chalk.red(` See .github/COMMIT_CONVENTION.md for more details.\n`) + 15 | chalk.red(` You can also use ${chalk.cyan(`npm run commit`)} to interactively generate a commit message.\n`) 16 | ) 17 | process.exit(1) 18 | } 19 | -------------------------------------------------------------------------------- /src/components/basic.vue: -------------------------------------------------------------------------------- 1 | 9 | 61 | 62 | 67 | 69 | 70 | -------------------------------------------------------------------------------- /src/components/data.vue: -------------------------------------------------------------------------------- 1 | 61 | 241 | 242 | 282 | 284 | 285 | -------------------------------------------------------------------------------- /src/components/dataItem.vue: -------------------------------------------------------------------------------- 1 | 29 | 64 | 65 | 70 | 72 | 73 | -------------------------------------------------------------------------------- /src/components/event.vue: -------------------------------------------------------------------------------- 1 | 34 | 81 | 82 | 116 | 118 | 119 | -------------------------------------------------------------------------------- /src/components/index.vue: -------------------------------------------------------------------------------- 1 | 57 | 157 | 158 | 245 | 288 | 289 | -------------------------------------------------------------------------------- /src/components/navigation.vue: -------------------------------------------------------------------------------- 1 | 35 | 148 | 149 | 198 | 200 | 201 | -------------------------------------------------------------------------------- /src/components/treeLoading.vue: -------------------------------------------------------------------------------- 1 | 6 | 41 | 42 | 47 | 49 | 50 | -------------------------------------------------------------------------------- /src/config.js: -------------------------------------------------------------------------------- 1 | export const NoInspect = [] 2 | 3 | export const VueBuiltIn = ['KeepAlive', 'transition', 'TransitionGroup', 'Basic', 'Navigation', 'Data','Event'] 4 | -------------------------------------------------------------------------------- /src/helper/event.js: -------------------------------------------------------------------------------- 1 | export function addEventList (vm) { 2 | const eventList = { dom: [], com: [] } 3 | 4 | /** *************** addDOMEvent **********************/ 5 | // 获取具有DOM事件的Vnode 6 | const VnodeListWithEvent = [] 7 | function parseVnodehEvent (vnode, VnodeListWithEvent) { 8 | if (vnode.data && vnode.data.on && (!vnode.componentInstance)) { 9 | VnodeListWithEvent.push(vnode) 10 | } 11 | if (vnode.children) { 12 | vnode.children.map((vm, i) => { 13 | parseVnodehEvent(vm, VnodeListWithEvent) 14 | }) 15 | } 16 | } 17 | parseVnodehEvent(vm._vnode, VnodeListWithEvent) 18 | 19 | VnodeListWithEvent.map((Vnode, i) => { 20 | const VnodeEvent = Vnode.data.on 21 | if (VnodeEvent) { 22 | const event = [] 23 | for (const key in VnodeEvent) { 24 | // get eventFnName 25 | const eventFullFnName = VnodeEvent[key].fns.name 26 | let eventFnName = '' 27 | if (eventFullFnName === key) { 28 | // 29 | if (vm.$options.methods) { 30 | Object.keys(vm.$options.methods).map((m) => { 31 | if (VnodeEvent[key].fns.toString().indexOf(m) > -1) { 32 | eventFnName = m 33 | } 34 | }) 35 | } 36 | } else { 37 | eventFnName = eventFullFnName.split(' ')[1] 38 | } 39 | // VnodeEvent[key].fns 40 | // if(!eventFnName){ 41 | // debugger 42 | // } 43 | 44 | event.push({ 45 | name: eventFnName||'inline-event', 46 | type: 'on' + key, 47 | fn: eventFnName ? vm[eventFnName] : VnodeEvent[key].fns 48 | }) 49 | } 50 | 51 | eventList.dom.push({ 52 | name: 'ele' + i, 53 | el: Vnode.elm, 54 | event: event, 55 | isShow: false 56 | }) 57 | 58 | // debugger 59 | } 60 | }) 61 | 62 | vm.$options.eventList = eventList 63 | 64 | /** *************** addCOMEvent **********************/ 65 | 66 | // if(vm.$options.name === "Container01"){ 67 | // debugger 68 | 69 | const ComEvent = vm.$options._parentListeners 70 | 71 | for (const key in ComEvent) { 72 | // get eventFnName 73 | const eventFullFnName = ComEvent[key].fns.name 74 | let eventFnName = '' 75 | if (eventFullFnName === key) { 76 | // 77 | let $parent = vm.$parent 78 | while (!eventFnName) { 79 | if ($parent.$options.methods) { 80 | Object.keys($parent.$options.methods).map((m) => { 81 | if (ComEvent[key].fns.toString().indexOf(m) > -1) { 82 | eventFnName = m 83 | } 84 | }) 85 | } 86 | if (!$parent.$parent) { 87 | break 88 | } 89 | $parent = $parent.$parent 90 | } 91 | } else { 92 | eventFnName = eventFullFnName.split(' ')[1] 93 | } 94 | 95 | eventList.com.push({ 96 | name: eventFnName, 97 | type: key, 98 | el: vm.el, 99 | fn: eventFnName ? vm[eventFnName] : ComEvent[key].fns 100 | }) 101 | } 102 | 103 | // } 104 | 105 | // 106 | } -------------------------------------------------------------------------------- /src/helper/imgs.js: -------------------------------------------------------------------------------- 1 | // logo 2 | export const comLabelLogo = 'data:image/jpg;base64,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' 3 | -------------------------------------------------------------------------------- /src/helper/label.js: -------------------------------------------------------------------------------- 1 | import { comLabelLogo } from './imgs' 2 | // previous vue 3 | let preVm = null 4 | // clear DomEventLabel-fn 5 | let clearDomEventLabel = null 6 | const EventLabelCollection = [] 7 | const componentsLabelProps = { 8 | attr: { 9 | className: 'vue-component-inspector' 10 | }, 11 | style: { 12 | position: 'absolute', 13 | top: 0, 14 | left: 0, 15 | margin: '4px', 16 | background: '#a6dfa6', 17 | cursor: 'pointer', 18 | fontSize: '8px', 19 | zIndex: 10 20 | } 21 | 22 | } 23 | const componentsLabelImgProps = { 24 | attr: { 25 | src: comLabelLogo 26 | }, 27 | style: { 28 | width: '20px', 29 | float: 'left' 30 | } 31 | 32 | } 33 | const eventIconProps = { 34 | attr: { 35 | className: 'el-icon-caret-left event-icon' 36 | }, 37 | style: { 38 | fontSize: '31px', 39 | position: 'absolute', 40 | left: '-22px', 41 | top: '-7px', 42 | color: '#a6dfa2' 43 | } 44 | 45 | } 46 | const domEventLabelProps = { 47 | attr: { 48 | innerText: 'e', 49 | className: 'event-label' 50 | }, 51 | style: { 52 | background: 'rgb(255, 255, 255)', 53 | color: 'rgb(166, 223, 162)', 54 | border: '3px solid rgb(166, 223, 162)', 55 | display: 'inline-block', 56 | borderRadius: '5px', 57 | padding: '3px 5px', 58 | position: 'absolute', 59 | top: '-1px', 60 | left: '186px', 61 | cursor: 'pointer', 62 | fontSize: '17px', 63 | lineHeight: '10px', 64 | marginLeft: '5px', 65 | zIndex: '10' 66 | } 67 | 68 | } 69 | // setElementProps 70 | function setElementProps (el, props) { 71 | for (const key in props) { 72 | if (key === 'attr') { 73 | for (const attrKey in props[key]) { 74 | el[attrKey] = props[key][attrKey] 75 | } 76 | } 77 | if (key === 'style') { 78 | for (const styleKey in props[key]) { 79 | el.style[styleKey] = props[key][styleKey] 80 | } 81 | } 82 | } 83 | } 84 | // createDomEventLabel 85 | function createDomEventLabel (vm) { 86 | function setPosition (nodeEventMap) { 87 | nodeEventMap.map((map, i) => { 88 | const offsetTop = map.eventNode.offsetTop 89 | const offsetLeft = map.eventNode.offsetLeft 90 | const top = offsetTop 91 | const left = map.eventNode.offsetWidth + offsetLeft 92 | setElementProps(map.eventLabel, { style: { top: (top + 'px'), left: (left + 'px') }}) 93 | }) 94 | } 95 | if (vm.$options.eventList) { 96 | const domEvent = vm.$options.eventList.dom 97 | const nodeEventMap = [] 98 | // add label 99 | domEvent.map((e, i) => { 100 | const eventNode = e.el 101 | 102 | const eventIcon = document.createElement('i') 103 | setElementProps(eventIcon, eventIconProps) 104 | const span = document.createElement('span') 105 | setElementProps(span, domEventLabelProps) 106 | span.appendChild(eventIcon) 107 | 108 | e.eventLabel = span 109 | nodeEventMap.push({ 110 | eventNode: eventNode, 111 | eventLabel: span 112 | }) 113 | EventLabelCollection.push(span) 114 | // eventlabel add event 115 | span.addEventListener('click', () => { 116 | preVm.$options.eventList.dom.map((dom) => { 117 | if (dom.eventLabel === span) { 118 | setElementProps(span, { style: { color: '#409EFF', borderColor: '#409EFF' }}) 119 | setElementProps(eventIcon, { style: { color: '#409EFF' }}) 120 | dom.isShow = true 121 | } else { 122 | // debugger 123 | setElementProps(dom.eventLabel, { style: { color: '#a6dfa5', borderColor: '#a6dfa5' }}) 124 | setElementProps(dom.eventLabel.getElementsByTagName('i')[0], { style: { color: '#a6dfa5' }}) 125 | dom.isShow = false 126 | } 127 | }) 128 | // updata view 129 | document.getElementById('event').__vue__.$forceUpdate() 130 | }) 131 | }) 132 | // add eventLabel 133 | nodeEventMap.map((map, i) => { 134 | map.eventNode.parentNode.appendChild(map.eventLabel) 135 | }) 136 | // position 137 | setPosition(nodeEventMap) 138 | window.removeEventListener('resize', setPosition(nodeEventMap)) 139 | window.addEventListener('resize', setPosition(nodeEventMap)) 140 | return EventLabelCollection 141 | } else { 142 | return [] 143 | } 144 | } 145 | // createComponentsLabel 146 | export function createComponentsLabel (el, vm, vmNname) { 147 | const div = document.createElement('div') 148 | div.title = `<${vmNname}/>` 149 | setElementProps(div, componentsLabelProps) 150 | // createImg 151 | const img = document.createElement('img') 152 | setElementProps(img, componentsLabelImgProps) 153 | div.appendChild(img) 154 | // setEvent 155 | div.addEventListener('click', (e) => { 156 | e.stopPropagation() 157 | e.preventDefault() 158 | // clear previous style 159 | if (preVm) { 160 | let el = preVm.$el 161 | if (preVm.$options.comment) { // comment 162 | el = el.parentNode 163 | } 164 | setElementProps(el, { style: { outline: '1px solid green' }}) 165 | } 166 | // set previous vm 167 | preVm = vm 168 | // set curVm 169 | vm.$root.VCIIndex.change(vm) 170 | // set cur style 171 | setElementProps(el, { style: { outline: '3px solid red', outlineOffset: '-3px' }}) 172 | // clearDomEventLabel 173 | clearDomEventLabel && clearDomEventLabel() 174 | // create event label 175 | const domEventLabel = createDomEventLabel(vm) 176 | // set clearDomEventLabel-fn 177 | vm.$root.clearDomEventLabel = clearDomEventLabel = function () { 178 | domEventLabel.map((v) => { 179 | v.remove() 180 | }) 181 | } 182 | // set global $vm 183 | window.$vm = vm 184 | }) 185 | // Append the created child element to the component parent element 186 | // el.parentNode.appendChild(div); 187 | // Append the created child element to the component element 188 | // el.appendChild(div); 189 | // positiong ComponentsLabel 190 | function setCreateComponentsLabelPosition (map) { 191 | map.map((map, i) => { 192 | const offsetTop = map.vmEl.offsetTop 193 | const offsetLeft = map.vmEl.offsetLeft 194 | const top = offsetTop 195 | // let left = map.vmEl.offsetWidth/2 + offsetLeft 196 | const left = offsetLeft 197 | setElementProps(map.componentsLabel, { style: { top: (top + 'px'), left: (left + 'px') }}) 198 | }) 199 | } 200 | window.setTimeout(() => { 201 | setCreateComponentsLabelPosition([{ 202 | vmEl: el, 203 | componentsLabel: div 204 | }]) 205 | }, 2000) 206 | window.addEventListener('resize', () => { 207 | setCreateComponentsLabelPosition([{ 208 | vmEl: el, 209 | componentsLabel: div 210 | }]) 211 | }) 212 | return div 213 | } 214 | 215 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import { install } from './install' 2 | import { inBrowser } from './util/dom' 3 | const VCI = { 4 | install: install, 5 | version: '__VERSION__' 6 | } 7 | export default VCI 8 | if (inBrowser && window.Vue) { 9 | window.Vue.use(VCI,{ 10 | noInspect:['ElPagination', 'ElDialog', 'ElAutocomplete', 'ElDropdown', 'ElDropdownMenu', 'ElDropdownItem', 'ElMenu', 'ElSubmenu', 'ElMenuItem', 'ElMenuItemGroup', 'ElInput', 'ElInputNumber', 'ElRadio', 'ElRadioGroup', 'ElRadioButton', 'ElCheckbox', 'ElCheckboxButton', 'ElCheckboxGroup', 'ElSwitch', 'ElSelect', 'ElOption', 'ElOptionGroup', 'ElButtonGroup', 'ElTable', 'ElTableColumn', 'ElDatePicker', 'ElTimeSelect', 'ElTimePicker', 'ElPopover', 'ElTooltip', 'ElBreadcrumb', 'ElBreadcrumbItem', 'ElForm', 'ElFormItem', 'ElTabs', 'ElTabPane', 'ElTag', 'ElTree', 'ElAlert', 'ElSlider', 'ElIcon', 'ElRow', 'ElCol', 'ElUpload', 'ElProgress', 'ElSpinner', 'ElBadge', 'ElCard', 'ElRate', 'ElSteps', 'ElStep', 'ElCarousel', 'ElScrollbar', 'ElCarouselItem', 'ElCollapse', 'ElCollapseItem', 'ElCascader', 'ElColorPicker', 'ElTransfer', 'ElContainer', 'ElHeader', 'ElAside', 'ElMain', 'ElFooter', 'ElTimeline', 'ElTimelineItem', 'ElLink', 'ElDivider', 'ElImage', 'ElCalendar', 'ElBacktop', 'ElPageHeader', 'ElCascaderPanel', 'ElAvatar', 'ElDrawer', 'ElPopconfirm', 'ElCollapseTransition', 'ElTreeNode', undefined, 'SvgIcon', 'SidebarItem','ElTableBody','ElTableHeader','ElSelectDropdown'] 11 | }) 12 | } 13 | -------------------------------------------------------------------------------- /src/install.js: -------------------------------------------------------------------------------- 1 | import index from './components/index.vue' 2 | import page from './page/page.vue' 3 | import { isViewCom } from './util/util' 4 | import { NoInspect } from './config' 5 | import { addEventList } from './helper/event' 6 | import { createComponentsLabel } from './helper/label' 7 | export let _Vue 8 | export function install (Vue,options={}) { 9 | if (install.installed && _Vue === Vue) return 10 | install.installed = true 11 | _Vue = Vue 12 | // debugger 13 | let noInspect = options.noInspect||[] 14 | noInspect.map((v)=>{ 15 | NoInspect.push(v) 16 | }) 17 | 18 | 19 | const componentsLabelCollection = [] 20 | // minxin mounted , destroyed 21 | Vue.mixin({ 22 | mounted () { 23 | let el = this.$el 24 | const vmNname = this.$options.name 25 | if (this && this.$root === this) { 26 | // rootVm 27 | 28 | // set componentsLabelCollection 29 | this.$root.componentsLabelCollection = componentsLabelCollection 30 | this.$root.$options.fileUrl = 'root' 31 | // set curVm 32 | this.curVm = null 33 | } 34 | if (isViewCom(this)) { 35 | // remark selet element 36 | if (el.nodeType === 8) { 37 | el = el.parentNode 38 | this.$options.comment = true 39 | } 40 | /* const computedStyle = document.defaultView.getComputedStyle(el, null) 41 | const position = computedStyle.position 42 | if (position !== 'absolute' && position !== 'relative' && position !== 'fixed') { 43 | el.style.position = 'relative' 44 | }*/ 45 | // Process Event 46 | window.setTimeout(() => { 47 | addEventList(this) 48 | }) 49 | // add component label 50 | const componentsLabel = createComponentsLabel(el, this, vmNname) 51 | this.componentsLabel = componentsLabel 52 | componentsLabelCollection.push({ vmEl: el, componentsLabel: componentsLabel }) 53 | } 54 | }, 55 | destroyed () { 56 | this.componentsLabel && this.componentsLabel.remove() 57 | } 58 | }) 59 | Vue.component('Page', page) 60 | Vue.component('VueComponentInspector', index) 61 | } 62 | -------------------------------------------------------------------------------- /src/page/contaienr-01.vue: -------------------------------------------------------------------------------- 1 | 16 | 87 | 88 | 90 | 92 | 93 | -------------------------------------------------------------------------------- /src/page/contaienr-02.vue: -------------------------------------------------------------------------------- 1 | 6 | 58 | 59 | 68 | 70 | 71 | -------------------------------------------------------------------------------- /src/page/contaienr-03.vue: -------------------------------------------------------------------------------- 1 | 13 | 94 | 95 | 97 | 99 | 100 | -------------------------------------------------------------------------------- /src/page/page.vue: -------------------------------------------------------------------------------- 1 | 9 | 44 | 46 | 48 | 49 | -------------------------------------------------------------------------------- /src/util/dom.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | export const inBrowser = typeof window !== 'undefined' 4 | -------------------------------------------------------------------------------- /src/util/util.js: -------------------------------------------------------------------------------- 1 | import { NoInspect, VueBuiltIn } from './../config' 2 | 3 | export function isViewCom (vm) { 4 | // debugger 5 | const vmNname = vm.$options.name 6 | let ret = true 7 | if (!vmNname) { // not Name 8 | ret = false 9 | } 10 | if (NoInspect.indexOf(vmNname) > 0) { // NoInspect 11 | ret = false 12 | } 13 | if (VueBuiltIn.indexOf(vmNname) > 0) { // VueBuiltIn com 14 | ret = false 15 | } 16 | if (vmNname === 'VueComponentInspector') { 17 | ret = false 18 | } 19 | return ret 20 | } 21 | 22 | export function isPlainObject (obj) { 23 | return Object.prototype.toString.call(obj) === '[object Object]' 24 | } 25 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zglz/vue-component-inspector/afcad8da6cd8b7ff3e3c714428c718fedf104523/yarn.lock --------------------------------------------------------------------------------