不管怎麼重新整理，程式就是沒有運作而自己也完全不知道問題出在哪…
沒關係！那就讓我們來使用Chrome的開發者工具吧！
打開開發者工具之後將上面的分頁選擇到 Sources
Sources 裡面包含了當前網頁中使用到的所有檔案，包含JS、CSS、HTML都能在這裡看到！
接下來我們從左邊的資料夾裡面找出你想要監聽的檔案，然後在右邊的程式碼畫面上找到你想要看的段落。
然後按下該段落前方的數字
接著就是按下重新整理，然後去觸發想要監控的那隻程式或是條件。
當順利運作的時候呢網頁會罩上一層半透明的黑色遮罩，而上方會有一條工具列。
這個工具列可以控制程式監控是否要繼續往下執行又或者是跳出正在執行的程式。
而我們按下監聽的位置會出現藍色的底色，讓我們知道現在程式運作到什麼地方
這個工具除了可以讓我們知道程式運作的步驟跟順序之外，還能看到在運作過程中的value變化，讓我們能順利的一步步Debug！