在PC頁(yè)面,我們可以通過F12打開控制臺(tái)查看日志信息,方便測(cè)試調(diào)試。但是在移動(dòng)端,移動(dòng)端沒有控制臺(tái),所以我們無(wú)法查看頁(yè)面的信息wordpress安裝插件頁(yè)面無(wú)法打開,非常不方便。但是插件解決了這個(gè)問題~
簡(jiǎn)介:
用于移動(dòng)網(wǎng)頁(yè)的輕量級(jí)、可擴(kuò)展的前端開發(fā)人員調(diào)試面板。
與框架無(wú)關(guān),可用于 Vue、React 或任何其他框架。
現(xiàn)在是微信小程序官方調(diào)試工具。
特點(diǎn)
詳情請(qǐng)看下面的截圖。
手機(jī)預(yù)覽(點(diǎn)擊下方鏈接wordpress網(wǎng)站建設(shè),可以看到效果)
使用教程安裝方法:
添加到項(xiàng)目中的主要方式如下:
方法一:使用npm(推薦)
$ npm install vconsole
// 在 main.js 中

來(lái)自“”; //開發(fā)環(huán)境使用,生產(chǎn)環(huán)境自動(dòng)取消
if (.env. == "") { new (); }
并初始化,.log函數(shù)就可以使用了,如上。
來(lái)自'';
const = new();
//或者使用配置參數(shù)進(jìn)行初始化,詳情見文檔
const = new ({ theme: 'dark' });
// 然后就可以照常使用``等方法了
.log('Hello world');
//調(diào)試后wordpress安裝插件頁(yè)面無(wú)法打開,可以去掉
.();
方法二:使用CDN直接插入HTML
可用的 CDN:
安裝成功后。頁(yè)面
如何使用初始化和配置
引入后,需要手動(dòng)初始化:
var vConsole = new VConsole(option);
為可選對(duì)象,具體配置定義請(qǐng)參考公共屬性和方法。

使用 () 更新:
// 設(shè)指定鍵值:
vConsole.setOption('log.maxLogNumber', 5000);
// 覆蓋整個(gè)對(duì)象:
vConsole.setOption({ log: { maxLogNumber: 5000 } });
打印日志
和PC端打印日志一樣,可以直接使用.log()等方法直接打印日志:
console.log('Hello World');
模塊未加載時(shí),.log() 將直接打印到本機(jī)控制臺(tái);加載后,日志會(huì)打印到頁(yè)面前端+原生控制臺(tái)。
如果你希望日志只輸出到 ,你可以使用插件方法:
vConsole.log.log('Hello world');
日志類型
支持5種不同類型的日志wordpress建站,以不同顏色輸出到前面板:

console.log('foo'); // 白底黑字
console.info('bar'); // 白底紫字
console.debug('oh'); // 白底黃字
console.warn('foo'); // 黃底黃字
console.error('bar'); // 紅底紅字
其他方法
支持以下方法:
console.clear(); // 清空所有日志
console.time('foo'); // 啟動(dòng)名為 foo 的計(jì)時(shí)器
console.timeEnd('foo'); // 停止 foo 計(jì)時(shí)器并輸出經(jīng)過的時(shí)間
風(fēng)格
使用 %c 添加樣式:
console.log('%c blue %c red', 'color:blue', 'color:red'); // blue red

console.log('%c FOO', 'font-weight:bold', 'bar'); // FOO bar
console.log('%c Foo %c bar', 'color:red'); // Foo %c bar
只有第一個(gè)參數(shù)支持 %c 格式。一旦 %c 格式出現(xiàn),后面的字符串參數(shù)將作為 HTML 樣式替換 %c;未替換的 %c 和其余參數(shù)將作為默認(rèn)日志用作通常的輸出。
使用字符串替換
使用 %s、%d、%o 格式化輸出。
console.log('Hi %s, Im %s', 'Foo', 'Bar'); // Hi Foo, Im Bar
console.log('I had %d cakes', 3); // I had 3 cakes
console.log('The %o is large', obj); // The [[obj]] is large
特殊格式
支持使用[]作為第一個(gè)參數(shù)將日志輸出到面板:
console.log('[system]', 'foo'); // 'foo' 會(huì)輸出到 System 面板
console.log('[system] bar'); // 這行日志會(huì)輸出到 Log 面板而非 System 面板
如果你寫了一個(gè)自定義的日志面板插件,你也可以按照上面的格式將日志輸出到自定義面板:
console.log('[myplugin]', 'bar'); // 'myplugin' 為自定義面板插件的 id
內(nèi)置插件網(wǎng)絡(luò)請(qǐng)求
文章來(lái)自互聯(lián)網(wǎng),侵權(quán)請(qǐng)聯(lián)系刪除,文章闡述觀點(diǎn)來(lái)自文章出處,并不代表本站觀點(diǎn)。
www.bjcthy.com