阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

小編精選 - 技術文章翻譯 · 12月20日

🦸 使用 console.trace 增強您的除錯技巧

概括

🔍 你的除錯超能力是什麼？我的發現是 console.trace() - 它透過揭示程式碼中的確切執行路徑，將數小時的偵錯時間縮短為幾分鐘。在下面的評論部分分享您改變遊戲規則的除錯工具，它改變了您的開發工作流程！

跳過介紹，進入內容要點

介紹

當我第一次開始編碼時，我嚴重依賴 console.log 來除錯和了解我的程式碼是如何運作的。我想我們中的許多人都經歷過這種情況——到處散佈 console.log 語句來追蹤討厭的錯誤。但隨著我們的應用程式不斷增長以及我們與更大的團隊合作，這種方法很快就會變得混亂。

我記得一個讓我困惑的特殊錯誤。這與我熟悉的服務有關，所以我自信地接受了這項任務。經過兩個小時的深入研究多個檔案並用console.log語句亂扔我的程式碼後，我仍然沒有更接近找到根本原因。沮喪之餘，我向一位資深開發人員尋求協助。就在那時，我了解到了console.trace的魔力。

我第一次可以看到函數呼叫的堆疊追蹤，讓我清楚地了解執行流程。這就像擁有一張地圖，而不是在黑暗中徘徊，猜測在哪裡放置我的 console.log 語句。

在下面的評論部分分享您的個人經驗，以了解哪些除錯工具可以幫助您更快地除錯問題。

除錯是軟體開發的重要組成部分，JavaScript 提供了多種工具來簡化此過程。最常見的兩個是console.log 和console.trace。讓我們以一個簡單的書店應用程式為例，深入探討如何有效地使用這些工具。

書店建築

如果您想使用 console.log 和 console.trace 來使用服務，請造訪我的 github 儲存庫連結。

什麼是`console.log` ？

控制台日誌

console.log是一種用於將訊息列印到控制台的方法。它通常用於顯示變數值、追蹤執行流程或簡單地為開發人員輸出資訊。

何時使用：當您需要輸出簡單訊息或變數值時，請使用console.log 。它非常適合快速檢查並確認程式碼的某些部分是否按預期執行。

什麼是`console.trace` ？

控制台追蹤

console.trace是一種更進階的偵錯工具，它不僅記錄訊息，還提供堆疊追蹤。此堆疊追蹤顯示了導致呼叫console.trace的函數呼叫順序，這對於理解執行流程和辨識可能出現問題的位置非常寶貴。

何時使用它：當您需要有關執行流的更多上下文時，請使用console.trace 。它對於複雜的應用程式特別有用，在這些應用程式中，了解呼叫堆疊可以幫助診斷問題。

場景：🦹 除錯神秘訂單總計計算

假設我們收到客戶投訴訂單總數不正確。以下是我們如何展示console.trace()與console.log()的強大功能：

首先，我們修改OrderService.js以包含兩種除錯方法：

class OrderService {
    calculateTotal(items) {
        console.log('Calculating total for items:', items);  // Traditional approach

        const total = items.reduce((total, item) => {
            const book = this.bookService.getBook(item.bookId);
            console.trace('Book price calculation');  // Using console.trace
            return total + (book.price * item.quantity);
        }, 0);

        return total;
    }
}

當您使用總計不正確的訂單來執行此命令時，您將看到以下內容：

使用console.log() ：

Calculating total for items: [
  { bookId: 'book1', quantity: 2 },
  { bookId: 'book2', quantity: 1 }
]

使用console.trace() ：

Trace: Book price calculation
    at OrderService.calculateTotal (src/services/OrderService.js:40)
    at OrderService.createOrder (src/services/OrderService.js:27)
    at Object.<anonymous> (src/index.js:27)

console.trace()輸出立即向我們顯示整個呼叫堆疊，揭示：

計算從index.js開始
透過createOrder
然後點擊calculateTotal

當您有多個服務相互呼叫時，這一點變得特別有價值。例如，如果我們查看以下訂單建立流程：

    createOrder(userId, items) {
        // console.trace('Creating order');  // Using console.trace

        const user = this.userService.getUser(userId);
        if (!user) {
            throw new Error('User not found');
        }

        // Verify all books are available
        for (const item of items) {
            if (!this.bookService.checkBookAvailability(item.bookId, item.quantity)) {
                throw new Error(`Book ${item.bookId} not available in requested quantity`);
            }
        }

        const order = {
            orderId: Math.random().toString(36).substr(2, 9),
            user: user,
            items: items,
            total: this.calculateTotal(items),
            status: 'pending'
        };

        // Process billing
        this.billingService.processBilling(order);

        return order;
    }

如果我們在processBilling方法中加入console.trace() ，我們可以看到完整的服務呼叫鏈：

// In BillingService.js
processBilling(order) {
    console.trace('Processing billing');
    return this.createInvoice(order);
}

這將輸出：

Trace: Processing billing
    at BillingService.processBilling (src/services/BillingService.js:3)
    at OrderService.createOrder (src/services/OrderService.js:32)
    at Object.<anonymous> (src/index.js:27)

這條軌跡立即向我們展示了：