如何在瀏覽器控制台(console)里輸出彩色樣式調試信息


最近我在打開淘寶,發現它里面實現以一些非常奇特的效果。我打開淘寶瀏覽器的控制台,看到了下面的信息:

安全警告!
請勿在此控制台輸入或粘貼你不明白的代碼,以避免攻擊者竊取你的信息來冒充你。

在控制台(console)里看到這些信息內容我並不奇怪,讓我感到奇怪的是,“警告”兩個字是紅色的,而且背景色是黃色的。而且字體也不其它文字要大一些。這格式化的樣式現實效果是如何實現的?

console.log("%c%s",
            "color: red; background: yellow; font-size: 24px;",
            "警告!");

這里的用法很像C語言里格式化字符串輸出的 printf 函數, log 的第一個參數聲明第二、第三個參數的作用,第二個參數就是樣式,第三個參數是要輸出的字符串。

至於為什么要用這樣的格式化效果,它能幫助你更好的在控制台(console)輸出debug信息,更好的為調試程序服務。比如,嚴重錯誤或警告信息就需要用打個字體,醒目的顏色突出顯示,你覺得呢,你會用這個彩色的控制台(console)信息輸出技巧嗎?


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM