如果您使用的是 Chrome 111 以上版本,可能已經注意到我們已變更斷點側欄的設計。在 Chrome 113 中,新側欄完全取代舊版設計。我們重新設計的目標是改善中斷點工作流程,方法如下:
為所有設定的暫停點提供更完善的總覽。讓使用者更容易存取及操作中斷點,讓工作流程更「直覺」。讓現有的中斷點功能可供查看。
本文假設您已熟悉使用中斷點進行偵錯。如果您之前沒有使用過中斷點,請參閱這篇關於中斷點的總覽文章,進一步瞭解如何使用中斷點來偵錯程式碼。
接下來,我們來看看新版設計提供哪些功能,以及如何使用新的側欄!請注意,重新設計的目標是讓現有功能更直覺好用,並方便存取,而非新增功能。
遇到例外狀況時暫停,以便調查程式碼擲回錯誤的原因
程式碼是否擲回例外狀況?別擔心!Chrome 開發人員工具可讓您在發生例外狀況時暫停,以便在例外狀況發生的時間點停止執行。這有助於您調查並進一步瞭解程式碼擲回錯誤的情況。您可以勾選側欄中的對應核取方塊,選擇是否要在發生已偵測到的例外狀況或未偵測到的例外狀況時暫停。
管理中斷點:展開相關的中斷點群組,並摺疊其他群組,以便專注於相關內容
中斷點可能分散在多個檔案中。中斷點側欄會根據中斷點所屬的檔案進行分組。展開相關的暫停點群組,並摺疊其他群組,只專注於目前偵錯工作階段中重要的暫停點。
管理中斷點:只要按一下滑鼠,即可跳至程式碼、移除中斷點,或啟用/停用中斷點
您可以透過中斷點側欄,輕鬆完成常見的作業。以下概略說明如何 ...
前往程式碼編輯器中的中斷點位置。移除檔案中的一個或所有中斷點。啟用或停用檔案中的一個或所有中斷點。
只要按一下滑鼠,就能完成所有操作!當然,這些選項也會在內容選單中顯示:
按一下中斷點程式碼片段,跳至中斷點位置
您是否想檢查程式碼中設定中斷點的位置,並分析周圍的程式碼?只要按一下側欄中中斷點的程式碼片段,程式碼編輯器就會開啟程式碼位置。
按一下移除按鈕,即可移除檔案中的單一中斷點或所有中斷點
將滑鼠游標懸停在中斷點或中斷點群組上,即可顯示移除按鈕,按一下即可移除檔案中的單一或所有中斷點。
停用檔案中的單一或所有中斷點
勾選或取消勾選中斷點旁的核取方塊,即可啟用或停用中斷點。
如要啟用或停用檔案中的所有中斷點,請將滑鼠游標懸停在中斷點群組上,然後勾選或取消勾選檔案名稱旁邊的核取方塊。
善用這些較不為人知的中斷點功能:條件中斷點和記錄點
編輯中斷點可修改中斷點條件或變更記錄點記錄
將滑鼠游標懸停在暫停點上,然後按一下畫面上顯示的「編輯」按鈕,即可編輯暫停點條件或記錄。系統會開啟對話方塊,讓您變更中斷點類型和中斷點詳細資料。
或者,您也可以在程式碼編輯器中選取中斷點所在的行,然後在 Linux 上輸入 Control + Alt + b,在 Mac 上輸入 Command + Alt + b,即可開啟中斷點編輯對話方塊。
您也可以將滑鼠游標懸停在側欄的暫停點上,快速檢查條件或記錄點記錄:
結論
我們重新設計中斷點側欄,目的是讓使用中斷點進行偵錯作業變得更簡單。最重要的是,我們希望能讓內容更有條理,方便使用者存取及瞭解。希望這些改善措施能協助您在下次偵錯時順利進行!
如有進一步改善建議,請回報錯誤!
下載預覽管道
建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能,測試最新的網路平台 API,並在使用者發現問題前,協助您找出網站的問題!
與 Chrome 開發人員工具團隊聯絡
請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。
- 請前往 crbug.com 提交意見回饋和功能要求。
- 在開發人員工具中,依序按一下「more_vert」 更多選項 >「Help」 >「Report a DevTools issue」,即可回報開發人員工具的問題。
- 在 Twitter 上傳送訊息給 @ChromeDevTools。
- 在 YouTube 影片「What's new in DevTools」或「開發人員工具提示」YouTube 影片中留言。