教程【免费下载链接】jstipsThis is about useful JS tips!项目地址https://gitcode.com/gh_mirrors/js/jstips点击查看免费下载本指南源自 jstips 專案 實用的 Console Logging 技巧英文原版見 Helpful Console Logging Tricks。它介紹兩個極具實戰價值的開發工具技巧利用「條件中斷點」在不暫停頁面的前提下於 Console 記錄資料以及用「空字串串接」強制把函式原始碼印出來。讀完本文你將能在 Chrome / Firefox / Edge / Safari 中徒手設定console.log(data.value) false這類不中斷的記錄點並用一行程式碼快速檢視任何函式的實作內容。適用前提本文所有技巧均基於瀏覽器 DevTools 的 DebuggerConsole 面板且僅建議用於開發與除錯環境正式上線前請記得移除所有記錄用程式碼。用條件中斷點「記錄」而不是「暫停」當一個函式每次被呼叫時你都想要在 Console 看到某個值但又不希望中斷程式流程最輕量的做法就是「條件中斷點」。原理只有條件為 true 才會暫停頁面條件中斷點conditional breakpoint與一般中斷點不同一般中斷點只要執行到該行就暫停條件中斷點則會先評估你設定的條件表達式只有當條件計算結果為true時才會暫停頁面執行緒。善用這個特性我們可以把「記錄」與「暫停」拆開只要讓條件永遠為false就能達到「每次經過都記錄、但從不暫停」的效果。以原文件中的寫法為例假設你想記錄data.valueconsole.log(data.value) false這個條件利用了 JavaScript 的短路求值short-circuit evaluation規則——的運算元會依序評估一旦遇到false就立刻回傳不再繼續。因此console.log(data.value)會被執行把值印到 Console false保證整個條件結果恆為false條件不成立頁面執行緒不會被暫停但記錄已經完成。同理console.log(foo) false也永遠是false你可以用它在任意位置埋入「不暫停的記錄點」。這一技巧與 jstips 第 59 期「Short-circuits 狀態」 中介紹的condition dosomething()思路完全一致把「副作用記錄」放在左側把「控制結果false」放在右側。注意因為console.log本身回傳undefinedfalsy即使你只寫console.log(data.value)作為條件它也不會觸發暫停加上 false只是讓意圖更明確同時避免某些除錯器對「表達式回傳值」的額外提示。實戰順帶計算函式被呼叫的次數原文件特別指出這項技巧「也可以使用在記錄你的函式或 callback 被呼叫了多少次」。例如在高頻事件點擊、滾動、輪詢中於處理函式的第一行設定console.log(handleClick 被呼叫) false每次事件觸發Console 就會累積一條記錄。若想直接看到計數可改用console.count搭配同樣的 false技巧console.count(handleClick 被呼叫的次數) false這樣你不僅知道「有沒有被呼叫」還能直接獲得呼叫總次數且全程不會暫停頁面、不影響執行緒效能。各瀏覽器如何設定條件中斷點原文件列出了四個主要瀏覽器的設定位置整理如下操作入口以各家 DevTools 當時的版本為準瀏覽器設定方式EdgeF12 開發工具在 Debugger 面板中於目標程式行設定中斷點後開啟「Managing Breakpoints」功能來新增條件ChromeDevTools在 Sources 面板中對目標行點擊左側行號建立中斷點再「右鍵 → Edit breakpoint…」輸入條件FirefoxDebugger在 Debugger 面板中對目標行設定中斷點後透過「Set a conditional breakpoint」輸入條件Safari在 Developer Guide 的 Debugger 區段中對中斷點設定條件共通的操作要點是先建立一般中斷點再為它附加條件表達式然後把條件填入console.log(...) false即可。把函式變數印成原始碼funcVariable 另一個常被忽略的 Console 技巧是「查看函式變數的原始碼」。原文件的描述很直接當你把一個函式變數丟進console.log很多情況下 DevTools 只會顯示它的參考資訊或函式名稱而不是程式內容最快的解法是把它與空字串串接強制轉成字串再輸出console.log(funcVariable );原理字串串接觸發型別強制轉換JavaScript 中運算子只要任一運算元是字串就會觸發型別強制轉換type coercion另一個運算元會被轉成字串後串接。函式物件在轉為字串時會呼叫其內建的toString方法直接回傳函式的原始碼文字包含function宣告、參數與函式主體。因此funcVariable 等同於「把整個函式的程式碼變成字串」console.log再把它原樣印出——這比在 DevTools 中手動展開函式物件更直接、更快。這個技巧與 jstips 第 50 期的另一篇姊妹文「用監聽tap來快速 debug」 可以搭配使用tap負責在鏈式呼叫中途「順路印出」經過的值而 則負責「印出」函式本身的實作。提醒此技巧僅對「具名或可序列化的函式」有效若函式是原生內建函式native code轉字串後只會得到function name() { [native code] }這類佔位文字。把技巧串起來一個完整的除錯流程假設你在除錯一段鏈式呼叫沿用 tap 範例 的情境結果什麼都沒印出來。你可以用條件中斷點先確認資料來源再用字串轉換確認各環節的函式實作// 1. 在 bank_info 的第一行設條件中斷點console.log(bank_info.toString() ) false // 確認這個函式的程式碼是否符合預期。 // 2. 在 filter 的回呼中設條件中斷點console.log(c.balance) false // 確認每次經過 filter 時c.balance 的實際數值。 // 3. 把可疑的函式變數印出原始碼 console.log(bank_totals_by_client );這樣一來你既能「不暫停地觀察每次呼叫的值」也能「直接審視函式實作」兩個技巧互相補足正好覆蓋除錯時最常問的兩個問題資料是什麼與程式碼長什麼樣。相關閱讀jstips 第 50 期原文繁中英文版用監聽tap來快速 debug鏈式呼叫中途印值的tap函式三個有用的技巧短路求值與||預設值設定測量 JavaScript 程式碼區塊性能用console.time/console.timeEnd計時僅限開發環境使用捷徑計算Short-circuit evaluation與||的評估規則是本文技巧的語言基礎赞分享教程【免费下载链接】jstipsThis is about useful JS tips!项目地址https://gitcode.com/gh_mirrors/js/jstips点击查看免费下载相关推荐build-web-application-with-golang 實戰使用 GDB 動態除錯 Go 程式斷點、變數與 goroutine 監控build web application with golang 實戰使用 GDB 動態除錯 Go 程式斷點、變數與 goroutine 監控 本篇技術文档教程Windows系统优化终极指南Chris Titus Tech WinUtil完整教程Windows系统优化终极指南Chris Titus Tech WinUtil完整教程 Windows系统优化和软件管理一直是普通用户和技术爱好者的痛点每次桌面应用运维使用 AI 轉換聊天記錄ChatLab 官方轉換 Skill 的完整本地轉換流程使用 AI 轉換聊天記錄ChatLab 官方轉換 Skill 的完整本地轉換流程 ChatLab 是一套本地優先的 AI 聊天記錄分析工具當它尚無法直接識別上一篇YaCy完全配置手册从零开始构建企业级搜索解决方案 下一篇【亲测免费】 Paddle2ONNX 教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考