首先,我必須承認這一點,我將利用這個平臺從我的開發環境中清理出骨架(輪廓)。有時候,我所做的“魔法”(有些人稱之為“編碼”),並不像我的同事在為他們展示這些巨集偉結果時候看到的那樣完美。 是的,我說過:有時候,我會使用老式的試錯法,我們都稱之為”除錯” : )
在過去的十年中,我熱衷的事情之一是前端開發(特別是 JavaScript)。作為一名“工匠”,我喜歡學習市面上的新工具。在這個故事中,我將給你們一些很棒的、更專業的技巧,去使用好用又“古老”的 console
。
是的,我們都知道它的基礎用法:
1 2 3 4 |
console.log(‘Hello World!’); // log a message or an object to console console.info(‘Something happened…’); // same as console log console.warn(‘Something strange happened…’); // same as console log but outputs a warning console.error(‘Something horrible happened…’); // same as console log but outputs an error |
所以,我希望現在我可以給你們一些以前不知道的技巧,以及那些可以讓你們成為一個更專業的除錯人員的玩法。
Tip #1 console.trace()
如果您想獲取日誌資訊的提示位置,可通過使用console.trace()
來獲取帶有記錄資料的堆疊跟蹤。
Tip #2 console.time() && console.timeEnd()
如果您試圖找到一個比較隱匿的效能問題,請使用console.time()
開始計算時間,然後使用console.timeEnd()
進行列印。
Tip #3 console.memory
如果你的效能問題更加棘手,並且你正在尋找一個隱匿的記憶體洩漏,你可能想嘗試並利用console.memory
(是屬性,不是函式)來檢查你的堆大小狀態。
Tip #4 console.profile(‘profileName’) & console.profileEnd(‘profileName’)
這不是標準的方法,但得到了廣泛的支援。你可以使用console.profile('profileName')
,然後使用console.profileEnd('profileName')
,從程式碼中啟動和結束瀏覽器效能工具 – “performance profile”。 這將幫助您精確地分析您想要的內容,並避免了您單擊滑鼠,它取決於程式執行時間。
Tip #5 console.count(“STUFF I COUNT”)
在函式或程式碼反覆出現的情況下,您可以使用console.count('?')
來計算您的程式碼被讀取的次數。
Tip #6 console.assert(false, “Log me!”)
是的,條件日誌記錄並沒有用if-else
包裝你的日誌 : )
您可以使用console.assert(condition, msg)
在condition
為假時記錄某些內容。
免責宣告:在 Node.js中,這將丟擲 Assertion Error!
Tip #7 console.group(‘group’) & console.groupEnd(‘group’)
寫了這麼多的日誌之後,你可能想對它們進行組織。一個小而有用的工具是console.group()
和console.groupEnd()
。使用控制檯組,將控制檯日誌組織在一起,每個分組在層次結構中建立另一個級別。 呼叫groupEnd()
減少一個級別(回到上一個層級)。
Tip #8 String substitutions
記錄日誌時,可以使用字串替換合併變數。這些引用是(%s = string,%i = integer,%o = object,%f = float
)。
Tip #9 console.clear()
那麼,寫了這麼多的日誌,現在是時候清理一下你的控制檯了。
Tip #10 console.table()
在我看來,這是一個真正的“瑰寶”! 你可以使用console.table()
列印一個非常漂亮的表格!
我真的希望這些技巧能讓大家的除錯更有效率,甚至更有樂趣!