给腾讯开源库vConsole添加信息打印位置

vConsole是一个轻量、可拓展、针对手机网页的前端开发者调试面板。

特性

  • 查看 console 日志
  • 查看网络请求
  • 查看页面 element 结构
  • 查看 Cookies、localStorage 和 SessionStorage
  • 手动执行 JS 命令行
  • 自定义插件

但是他有一个不足,就是只能打印信息内容,不显示信息打印的位置

给腾讯开源库vConsole添加信息打印位置_第1张图片

测试结果

给腾讯开源库vConsole添加信息打印位置_第2张图片


为此我在原有的基础上做了一些修改,让它可以显示信息打印的位置

测试结果

给腾讯开源库vConsole添加信息打印位置_第3张图片


这是VUE项目的测试结果

给腾讯开源库vConsole添加信息打印位置_第4张图片

测试结果

给腾讯开源库vConsole添加信息打印位置_第5张图片

我把源代码放在GitHub上,有需要的朋友可以下载使用(仅测试了html、vue,两种文件环境,其他环境效果未知!)

VConsole.art2.js

你可能感兴趣的:(javascript,前端)