• 元宝
    2021-11-12
    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)

    作者回复: cool，和我写的简直一毛一样 给你点个赞 最后用console.table打印一下

    共 2 条评论
    52
  • 若川
    2021-11-12
    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

    作者回复: 给力给力，没翻墙的同学可以看下这个文章的devtools安装方法

    共 5 条评论
    39
  • Kobe的篮球
    2021-12-13
    vue3项目通过vite打包后，如何支持dev-tools啊

    作者回复: 新增这个命令 "build:dev": "vue-tsc --noEmit && vite build --mode=development", 这样就打包了一个支持devtools的打包版

    
    12
  • 轻飘飘过
    2021-11-17
    看大家的写法都挺优秀的，大圣老师说的不用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; };
    展开

    作者回复: cool

    
    1
  • 飞翔国度
    2021-11-16
    发现公司的vue项目都屏蔽了vuetools...在生产上开着是不是有点不安全？

    作者回复: 生产上确实不要开devtools，而且默认build的时候也会吧devtools相关的代码屏蔽

    共 2 条评论
    1
  • Beauty~fish🐬
    2021-11-30
    贺老面试题。。。还有其他的题吗，在哪里可以学习呢

    作者回复: 贺老有个live 很久之前听的

    
    
  • 乐叶
    2021-11-12
    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)

    作者回复: cool

    
    
  • ch3cknull
    2021-11-12
    vue-devtools有两个，其中一个是不支持vue3的 下面是Google应用商店的扩展的链接，这个链接指向的插件是支持vue3的 http://chrome.google.com/webstore/detail/ljjemllljcmogpfapbkkighbhhppjdbg
    
    15
  • 花果山大圣
    2021-11-12
    参考答案之一， 其实这一题还可以扩展很多，比如不让你用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)
    
    11
  • ll
    2021-11-13
    devTool 是很牛的“谁用谁知道”，通过这节，如果没用过的小伙伴赶紧尝试下； 这节课后有如下感想： 1. 调试是工程的重要一环。 2. 想要提高调试环节的效率，要有好的方法，更要有趁手的工具 3. 在 web 开发领域，不夸张的说，最优秀和专业的非 Chrome devtoool 莫属。 4. 针对特定框架，更更专业的工具是各个“框架公司”基于 devtool 开发的“专属”测试工具。 5. 掌握方法论，并且熟练使用工具；是提高开发效率的明智选择。 6. 如果对 devtool 这么“神奇”抱有好奇，想知道这个是怎么实现的，其实结合思考题，就 能略知一二，其实原理是相通的
    
    5