好用的npm包：debug

npm是JavaScript的包管理系統，提供通用的模塊給其餘開發者及工程內使用，相似於Java語言 的 maven庫，設計師使用的素材庫。

好用的npm包系列致力於挖掘一些好玩實用的npm包，聊些使用場景和實現思路。若是說程序員喜歡用本身的方式去實現別人已實現的東西，叫作重複造輪子, 那麼這個系列就是帶你去看飛輪海 。

基本介紹

DEBUG是一種計算機程序。馬克2號（Harvard Mark II）編制程序的葛麗絲·霍波（Grace Hopper）是一位美國海軍准將及計算機科學家，同時也是世界最先的一批程序設計師之一。有一天，她在調試設備時出現故障，拆開繼電器後，發現有隻飛蛾被夾扁在觸點中間，從而「卡」住了機器的運行。因而，霍波詼諧的把程序故障統稱爲「臭蟲（BUG）」，把排除程序故障叫DEBUG，而這奇怪的「稱呼」，竟成爲後來計算機領域的專業行話。

debug在npm上週下載量1千八百萬+，github上有6k+的star，是一個受關注的高頻基礎包。

基本使用場景

主要的功能包括命名空間和色彩定義、毫秒級時間差、printf語法變量替換，附帶個函數性能比較的代碼示例意思一下。

// 計算函數性能示例，傳入一個純數字數組，計算其平均值
// avgA 使用 lodash 庫中 sum 求和
// avgB 使用ES5中 Array.proptype.reduce求和
const _ = require('lodash');
const debug = require('debug');
const debugA = debug('avgA:');
const debugB = debug('avgB:');
const testFixture = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 使用lodash sum求和
function avgA(arr) {
  return _.sum(arr) / arr.length;
}

// 使用原生reduce 求和
function avgB(arr) {
  return arr.reduce((cal, curr) => cal + curr, 0) / arr.length;
}

const range = _.range(0, 10000000, 1);
range.forEach((index) => {
  const result = avgA(testFixture);
  if (index % 1000000 === 0) {
    debugA('time %d', index);
  }
})

range.forEach((index) => {
  const result = avgB(testFixture);
  if (index % 1000000 === 0) {
    debugB('time %d', index);
  }
})
複製代碼

運行結果：

使用場景1: 項目中根據環境開啓debug

實際項目中，每每線下環境要開啓調試，而線上環境要有條件開啓。

const _ = require('lodash');
const debug = require('debug');
const debugA = debug('A:');
const debugB = debug('B:');

// 當環境爲production時，全部的debugA均不會輸出

if (process.env.NODE_ENV === 'production') {
  debugA.enabled = false;
}

debugA('hello world');
debugB('I am new to debug');
複製代碼

運行結果：

使用場景2: 展現有意思的字符畫

咱們是一羣有着特殊信仰的羣體...

順便打個廣告？AIS-TXD招人，前端/設計師快到碗裏來，簡歷速投 txd-jobs@list.alibaba-inc.com

代碼分析

源碼能夠看下官方github，基本邏輯以下:

• 環境判斷分發 Node.js 使用 /node.js , browser 使用 /browser.js
• node.js 部分 處理命令行啓動指令，顏色定義和命令行展現庫tty
• browser.js 部分 處理js申明配置，顏色定義（枚舉web安全色值），底層使用 console.log
• common.js 部分，通用邏輯，包含實例建立、啓用開關、色彩選擇、printf 語法等

本期的npm包 debug 就介紹到這裏，遇到有類似場景的狀況就放心使用吧, 還有什麼實用的npm包歡迎在留言區推薦啦。

關注查看更多原創內容

關注公衆號投遞簡歷 （招聘視覺、交互、前端）