12 | 调试：提高开发效率必备的Vue Devtools

Object.entries([...document.querySelectorAll("*")].map(n=>n.tagName).reduce((pre, cur)=>{ pre[cur] = (pre[cur] || 0) + 1; return pre; }, {})).sort((a, b)=>b[1]-a[1]).slice(0, 3)

debugger 也是高级程序员必备的断点调试法，你一定要掌握。 很赞同大圣老师的这句话。我觉得是基本必备技能。但我发现真的有很多人不太会，甚至没调试过代码，没安装过vue-devtools。 其实vue官方文档有写怎么调试。《在 VS Code 中调试》https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html 更是少数人知道 vue-devtools 可以直接打开页面对应的组件源文件，不需要问同事，定位半天。 我之前也写过文章分析这个功能原理。《据说 99% 的人不知道 vue-devtools 还能直接打开对应组件文件？本文原理揭秘》https://juejin.cn/post/6959348263547830280

vue3项目通过vite打包后，如何支持dev-tools啊

贺老面试题。。。还有其他的题吗，在哪里可以学习呢

看大家的写法都挺优秀的，大圣老师说的不用sort 和并列打印数据的问题，个人思考用桶排序求解🤔，代码如下，互相学习。 function main() { let tags = Array.from(document.querySelectorAll('*')); let tMap = {}, max = min = 1; tags.forEach(tag => { let v = tag.tagName; if (!tMap[v]) tMap[v] = 0; tMap[v]++; max = Math.max(tMap[v], max); min = Math.min(tMap[v], min); }); let bucket = new Array(max - min + 1); Object.keys(tMap).forEach(v => { if (!bucket[tMap[v] - min]) bucket[tMap[v] - min] = []; bucket[tMap[v] - min].push(v); }); let res = [], count = 3, i = bucket.length - 1; while (count > 0 && i >= 0) { if (bucket[i]) { count--; res.push(bucket[i]); } i--; } return res; };

发现公司的vue项目都屏蔽了vuetools...在生产上开着是不是有点不安全？

let tag = [...document.querySelectorAll('*')].map(node => node.nodeName) let many3 = {} for (let i=0;i<tag.length;i++) { if (!many3[tag[i]]) { many3[tag[i]] = 0 } many3[tag[i]]++ } return Object.keys(many3).map(itemKey => ({label: itemKey, value: many3[itemKey]})).sort((item1, item2) => item2.value-item1.value)

vue-devtools有两个，其中一个是不支持vue3的 下面是Google应用商店的扩展的链接，这个链接指向的插件是支持vue3的 http://chrome.google.com/webstore/detail/ljjemllljcmogpfapbkkighbhhppjdbg

参考答案之一， 其实这一题还可以扩展很多，比如不让你用sort，比如如果三四五名词的次数一样，怎么把这些并列的也打出来等等 let ret = Object.entries([...document.querySelectorAll('*')].map(node => node.nodeName).reduce((ret,n)=>{ ret[n] = ret[n]?ret[n]+1:1 return ret },{})).sort((a,b)=>b[1]-a[1]).slice(0,3) console.table(ret)

devTool 是很牛的“谁用谁知道”，通过这节，如果没用过的小伙伴赶紧尝试下； 这节课后有如下感想： 1. 调试是工程的重要一环。 2. 想要提高调试环节的效率，要有好的方法，更要有趁手的工具 3. 在 web 开发领域，不夸张的说，最优秀和专业的非 Chrome devtoool 莫属。 4. 针对特定框架，更更专业的工具是各个“框架公司”基于 devtool 开发的“专属”测试工具。 5. 掌握方法论，并且熟练使用工具；是提高开发效率的明智选择。 6. 如果对 devtool 这么“神奇”抱有好奇，想知道这个是怎么实现的，其实结合思考题，就 能略知一二，其实原理是相通的