掘金同款 console

水一篇

看完大概只須要一分鐘

常常不當心在掘金打開開發者工具，映入眼簾的就是掘金的招聘廣告了

喲，這裏還有個箭頭，點一下

能夠，看起來很是有意思

這個console怎麼寫的還真的不知道，不過不要緊，扒他源碼！

console.log("-----------")
this.outputGroup(["","掘金餐廳招前端廚師：","","地處望京，廚具先進，食材鮮美，朝十晚七，週六日均不營業。","","招牌菜有爆炒 Vue.js、紅燒 Node.js、Chrome 燉 Extension、宮爆 Panfish……","","要求注意衛生，以作菜爲樂，有精進廚藝之心；熟悉烹飪基礎理論者優先，可開發新式菜餚者優先。","","簡歷註明「FROM_JUEJIN_CONSOLE」投至：webuster@xitu.io。"].join("\n"),"BUG 爲什麼遲遲不改？頁面爲什麼加載失敗？元素爲什麼難以對齊？這一切到底是人性的扭曲仍是道德的淪喪？")
console.log("-----------")}}
{key:"outputGroup",value:function(e,t){"function"==typeof console.groupCollapsed?(console.groupCollapsed(t),console.log(e),console.groupEnd()):(console.log(t),console.log("-----------"),console.log(e),console.log("-----------"))}}])

複製代碼

主要就是這麼一句 console.groupCollapsed(t),console.log(e),console.groupEnd()

而後去就是mdn，刷一哈api, 超連接

好像徹底沒看懂的樣子，那麼就直接來個demo

代碼以下：

console.groupCollapsed('這裏是外面');
  console.log('這裏是裏面');
console.groupEnd();
複製代碼

運行以下：

大概就是這樣

若是你願意的話，還能夠這樣：

ps:層數多了的話，確實還蠻噁心的

小區別：
  - console.group 默認是展開狀態
  - console.groupCollapsed 默認是收起狀態
複製代碼

掘金餐廳這個後廚還能夠的樣子

that's all