手機前端開發調試利器 vConsole

時間 2019-11-18

標籤手機前端開發調試利器 vconsole 简体版

原文原文鏈接

vConsole 詳細介紹php

咱們在開發手機版網頁的時候，經常會出現下面的情景：前端

(1) 開發時，在本身電腦上運行得好好的，在手機上打開就掛了，可是手機上又看不到error log； git

(2) 上線後，某用戶表示頁面失靈，但咱們本身又重現不出來，看不到用戶側的出錯信息。github

若是說(1)還能夠經過電腦鏈接手機以查看log來解決，那(2)在沒有完善的前端上報體系時就很是被動了。瀏覽器

做爲開發者，咱們的訴求很簡單：有沒有快捷的方法在手機前端頁面看到log日誌？微信

莫慌，抱緊vConsole！網絡

vConsole是一款由微信公衆平臺前端團隊打造的前端調試面板，專治手機端看log難題。微信公衆平臺

目前vConsole自帶有2個面板，默認爲「日誌」面板，負責展現log。ui

細心的同窗可能會發現上面的log顏色各有不一樣。與電腦端的Developer Tools同樣，開發者能夠經過調用不一樣的方法來打出不一樣的顏色，以便快速區分日誌類型：spa

console.log('foo'); // 白底黑字  console.info('bar'); // 白底紫字  console.debug('oh'); // 白底黃字  console.warn('foo'); // 黃底黃字  console.error('bar'); // 紅底紅字

第二個是「系統」面板，vConsole會自動將一些基礎信息（如系統版本）打印出來，方便開發者定位問題。若頁面是在微信內置瀏覽器中打開的，vConsole還會打印出微信版本號、當前網絡類型等額外信息。

默認狀況下，vConsole的面板是隱藏起來的。咱們能夠點擊右下角的「面板」懸浮按鈕來顯示vConsole面板。

Talk is cheap, show me the code.

首先，在須要展現日誌的頁面引入vConsole模塊。咱們建議在<head>中而非<body>底部引入，方便後續的新版本vConsole在頁面初始化時預埋各類debug鉤子。引入後，會自動生成window.vConsole對象實例。

<head> <script src='path/to/vconsole.min.js'></script> </head>

對於更一般的狀況，咱們只需在調試模式下才啓用vConsole，平時用戶無需看到調試面板。這時候就須要開發者自行判斷引入模塊的時機。以PHP爲例，經過判斷URL中有無 dev_mode參數來選擇性加載vConsole：

<?php if($_GET['dev_mode'=='1'){?> <script src='path/to/vconsole.min.js'></script> <?php}?>

若是項目中用到了CommonJS或SeaJS這種AMD/CMD規範的模塊加載方式，能夠在module中使用require()引入vConsole：

var vConsole =require('path/to/vconsole.min.js');

好了，怎麼打印log呢？與電腦端一致，能夠直接使用console.log()等方法來打印日誌，目前支持的方法有：

console.log('foo'); console.info('bar'); console.debug('oh'); console.warn('foo'); console.error('bar');

若頁面未加載vConsole模塊，console.log()會直接輸出到原生控制檯中；加載模塊後，日誌則會輸出到原生控制檯+前端面板。所以沒必要擔憂兼容性問題。

引入模塊後，vConsole會有一小段時間用於初始化工做，在渲染出面板HTML以前將沒法當即打印log。所以，若要在引入模塊後當即打印log，應使用vConsole.ready()方法：

vConsole.ready(function() { console.log('Hello World'); 
});

微信掃描如下二維碼（或微信內長按圖片識別二維碼），便可體驗vConsole面板。

目前vConsole已開源到WeChatFE的Github中。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。