大家可能會遇到一些谷歌瀏覽器模擬手機端沒問題,但是真機上會出現的bug,真機上沒有F12,很難定位bug原因。
偶爾找到一款工具,可以方便的在手機端打開F12,記錄一下分享給大家。
這款工具就是vconsole,記錄一下使用方法:
一、多頁面,用script的方式引入
首先引入vconsole
<script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
之後在需要使用的頁面引入
var vConsole = new VConsole();
如果是生產環境,不想讓用戶看到,可以這樣做:
if(window.location.href.indexOf("debugger")!=-1){
var vConsole = new VConsole();
}
在頁面url加一個?debugger就可以啓動調試模式
二、單頁面應用,比如在vue中引入
首先
npm install vconsole
之後在main.js或者需要的頁面引入
import Vconsole from 'vconsole'
const vConsole = new Vconsole()
Vue.use(vConsole)