Chrome應該是每一個Web開發者必備的工具之一。它有而強大的Devtool，輔助我們的JavaScript調試，審視DOM元素，CSS即時修改等。以及它還有一個的龐大的插件系統，同時我們也可以很容易的擴展屬於自己的Chrome插件。如果希望了解更多的Chrome常用調試，請參見筆者早期的微信推送文章《15個必須知道的chrome開發者技巧》。
Chrome中的控制台console，是我們檢查程序允許是否正常的常用工具之一，同時它也是我們打印調試日志信息，運行調試代碼的常用工具。在國內近幾年，它也成為了程序員招聘的渠道之一。如下面百度的招聘信息：
在Console中打印日志的方式有log、info、warn、error這幾類方式。但它們並不是本文的主題。對於日志信息打印來說，一直都顯得很單調。直到最新版的Chrome和Firefox (+31)，我們可以嘗試更多多彩的打印格式了。在最新的Google chrome文檔中console.log支持如下的格式：
- %s 字符串格式化；
- %d/%i 整數格式化；
- %f 小數位數據格式化；
- %o 可擴展的DOM節點格式化；
- %O 可擴展的JavaScript對象格式化；
- %c 利用CSS來自定義樣式格式化輸出。
本文將要說的就是%c這個格式化器。我們可以利用CSS樣式來控制打印信息的輸出。這樣我們就可以得到一個多彩的日志信息，或者就是招聘廣告了。
下面代碼輸出效果為：
console.log('%c [破狼]-[雙狼說]!', 'background: #008000; color: #fff');
效果：
再如：下面這段來自http://stackoverflow.com/questions/7505623/colors-in-javascript-console示例，文字光影的效果：
代碼比較長，請移步到stackoverflow查看。這里主要是利用的text-shadow這個CSS3特性來實現的，文字光影效果：
var css = "text-shadow: -1px -1px hsl(0,100%,50%), 1px 1px hsl(5.4, 100%, 50%), 3px 2px hsl(10.8, 100%, 50%), .....";//
console.log("%cExample %s", css, 'all code runs happy');
效果如下：
在github也有log的repo，感興趣的讀者也可以研究研究。