給騰訊開源庫vConsole添加信息打印位置

vConsole是一個輕量、可拓展、針對手機網頁的前端開發者調試面板。

特性

  • 查看 console 日誌
  • 查看網絡請求
  • 查看頁面 element 結構
  • 查看 Cookies、localStorage 和 SessionStorage
  • 手動執行 JS 命令行
  • 自定義插件

可是他有一個不足,就是隻能打印信息內容,不顯示信息打印的位置

1590146696(1).png

測試結果

1590146707(1).jpg


爲此我在原有的基礎上作了一些修改,讓它能夠顯示信息打印的位置

測試結果

1590146957(1).jpg


這是VUE項目的測試結果

1590147466(1).jpg

測試結果

1590147495(1).jpg

我把源代碼放在GitHub上,有須要的朋友能夠下載使用(僅測試了html、vue,兩種文件環境,其餘環境效果未知!)

VConsole.art2.jshtml

相關文章
相關標籤/搜索