監控來源中的變數

Chrome 開發人員工具可讓你輕鬆查看應用程式的多個變數。觀察「來源」中的變數可避免控制台出現問題,並專注於改善程式碼。

「來源」面板可讓您查看應用程式中的變數。位於偵錯工具側欄的手錶區段。只要利用這項功能,您就不必在控制台中重複記錄物件。

偵錯工具的觀看部分

新增變數

如要將變數新增至觀察清單,請點選版面標題右側的新增圖示。這項操作會開啟內嵌輸入內容,讓您提供要觀察的變數名稱。填入完成後,按下 Enter 鍵,即可將該鍵加到清單中。

「加入待觀看影劇清單」按鈕

監看程式會在新增變數時顯示該變數目前的值。如未設定或找不到變數,系統會顯示 該值

觀察清單中未定義的變數

正在更新變數

隨著應用程式持續運作,變數值可能會改變。除非您逐步執行,否則觀察清單並非變數的即時檢視畫面。使用中斷點執行逐步執行時,系統會自動更新已觀察的值。如要手動重新檢查清單中的變數,請按下區段標題右側的重新整理按鈕。

重新整理觀察變數按鈕

系統會要求重新整理,因為系統會重新檢查目前的應用程式狀態。每個已觀看的項目都會更新為目前值。

更新後的變數正在觀察

移除變數

為了能盡量減少您看到的內容,您可能需要從待觀看影劇清單中移除變數。只要將遊標懸停在變數,然後按一下右側的移除圖示,即可執行此操作。

將「懸停」變數從觀察清單中移除