console.log 不是debugger（調試器）。它擅長搞清楚你的JavaScript應用程序在幹什麼，但是，它僅僅只能輸出少量的信息。如果你的代碼很複雜，你需要一個恰當的調試器。這就是爲什麼我們在Firefox
DevTools Playground（Firebox開發工具面板）中增加了一個全新的有關調試的部分。我們已經構建了四個的基本課程，課程的主要內容是使用Firefox調試器來檢查和修復一個簡單的JavaScript待辦事項應用程序（to-do
app）。
介紹調試器面板
這些課程是完全免費的，而且可以從Github上下載待辦事項應用程序代碼.
這些課程對我們來說是一種新的形式，我們非常高興地將它們帶給您。我們一直在尋找新的方法來幫助開發者學習東西，改善日常工作流程。如果你有一個想法，請讓我們知道。我們將在未來幾個月內擴展開發工具面板，而且，我們很樂意聽取像你這樣的開發者的想法或者意見。
如果你還不是很熟悉Firefox調試器，請看一下MDN上面的調試器文檔，還有這個快速入門視頻:
現在讓我們從新的調試器面板中看一個教訓。曾經使用 console.log 來查找變量的值？現在使用調試器，有一個更容易更精確的方法來查找變量的值。
使用調試器來查找一個變量的值
使用Firefox調試器比使用 console.log 更容易找到變量。下面介紹它是如何工作的：
讓我們一起看一個簡單的待辦事項應用程序。在新標籤頁打開to-do應用程序。
這個應用程序有一個 addTodo 函數，它將獲取輸入表單的值，創建一個對象，然後將該對象添加到任務數組上。讓我們通過添加一個新的任務來測試輸出。你可能希望將這個新任務添加到列表中，但你會看到 [object
HTMLInputElement]。
出現問題啦，我們需要調試代碼。也許你會在整個函數中添加 console.log，來定位代碼哪裏出現問題啦。這個方法可能看起來如下代碼所示：
const addTodo = e => {
e.preventDefault();
const title = document.querySelector(".todo__input");
console.log('title is: ', title);
const todo = { title };
console.log('todo is: ', todo');
items.push(todo);
saveList();
console.log(‘The updated to-do list is: ‘, items);
document.querySelector(".todo__add").reset();
};這個可以工作，但是看起來很麻煩而且尷尬。當調試完成之後，我們不得不記得刪除這些代碼。這裏有一個更好的方法，就是使用調試器的斷點（breakpoint）功能。
學習更多的調試器面板信息
調試器面板介紹了使用Firefox調試器的基本功能：檢查調用堆棧，設置條件斷點等等。我們知道使用調試器（調試JavaScript）有一個陡峭的學習曲線，所以我們開發了一個易於理解的簡單的待辦事項應用程序。可以在你的瀏覽器中正常運行。你可以從Github上下載這個應用程序的代碼
