腾讯T4大佬连夜整理的前端开发小技巧，你绝对用得到！

编程-老鸟

于 2021-02-27 20:58:53 发布

阅读量545

点赞数

文章标签：前端 css vue.js html

本文链接：https://blog.csdn.net/pc_372/article/details/114190816

版权

这篇博客分享了四位腾讯T4级别的前端开发者整理的开发小技巧，包括使用vConsole在h5端进行调试，通过Charles进行本地文件替换以方便查看效果，利用Chrome的Overrides功能直接替换线上文件，以及如何有效运用Lighthouse提升网页性能。这些工具和方法能帮助开发者提升工作效率并解决实际问题。

摘要由CSDN通过智能技术生成

开发 tips

vConsole

h5应用开发过程中，一般是使用浏览器调试，但是真的将代码放到h5端，偶尔还是会遇到一些处理不到的情况，比如，之前遇到的情况，使用new Date('2020-11-17 12:12')(safari、ie貌似都不行，慎用), 这样的格式转换，兼容性没有考虑到，chrom调试一切正常，但是手机打开应用后，时间参数返回的却是null，这种情况就比较坑

于是就考虑，怎么如浏览器一样查看h5端的代码、接口返回及报错信息呢？

发现了一个比较好用的工具 - VCosole，调用也非常简单，因为非项目必须，所以直接在项目的html页面中添加如下代码, 不需要时随手可以删除：

    <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
    <script>
      var vConsole = new VConsole();
    </script>
复制代码

项目启动后，就会出现一个vConsole的按钮，点击即可打开上图所示的模拟devtools 的界面，此时报错信息也可以看到啦～