WordPress 主題開發除錯實戰：Firebug/DevTools、邊框法、樣式排除法與模組確認法

前言

WordPress 主題開發中，CSS 衝突、佈局錯位、白屏等問題層出不窮。本文整理四大實戰除錯策略，助你快速定位並解決前端疑難雜症。

策略一：瀏覽器開發者工具 (DevTools) —— 現代 Firebug 替代者

• Elements 面板：右鍵「檢查」即時查看盒模型、計算樣式、繼承鏈、偽元素。
• Console 面板：JS 錯誤、混合內容警告、自定義 `console.log` 追蹤模板邏輯。
• Network 面板：資源載入順序、狀態碼、大小、阻塞時間，找出 404 的 CSS/JS/字體。
• Sources 面板：對壓縮後的 CSS/JS 加上 Source Map 斷點調試。

實用技巧：勾選 Settings → Preferences → "Enable CSS source maps"，即可在 Styles 面板直接跳轉到原始 SCSS/Less 行號。

策略二：邊框/背景可視化法 —— 解決 IE/舊瀏覽器佈局異常

<?php
// 在開發環境 functions.php 臨時加入
add_action('wp_head', function () {
    if (current_user_can('manage_options')) {
        echo '<style> * { outline: 1px solid rgba(255,0,0,0.3) !important; } </style>';
    }
});
?>

• 紅色外框瞬間顯示每個元素佔據空間、margin collapse、float 清除問題。
• 針對單一元素：`style="outline: 2px dashed lime;"` (不影響佈局，優於 border)。
• 背景色法：`background: rgba(0,255,0,0.1);` 適合檢查透明區域、z-index 疊加。

策略三：最大/最小寬度二分法 —— 側邊欄下沉、容器撐破

1. 在疑似容器加 `width: 100px; overflow: hidden;` (極小值)。
2. 若下沉消失 → 確定是寬度溢出。
3. 二分法調整：`width: 50%` → `75%` → `87.5%` ... 直到找到臨界點。
4. 常見原因：圖片無 `max-width:100%`、長英文/URL 未換行、padding/border 未計入 `box-sizing:border-box`。

策略四：樣式排除法 (CSS 二分查找) —— 複雜多檔案衝突

1. 在 `` 依序註釋掉一半外部 CSS 檔案，重整觀察問題是否消失。
2. 鎖定問題檔案後，在該檔案中以區塊註釋 `/* ... */` 二分縮小範圍。
3. 最終定位到單一選擇器/屬性 (如 `float:left`、`position:absolute`、`display:table`)。
4. 修正或提高優先級 (建議用 BEM 命名 + 低專用度選擇器，避免 `!important`)。

策略五：模組確認法 (DOM 刪減法) —— 全頁面白屏/JS 阻塞

1. 在 DevTools Elements 面板，逐層刪除大區塊 (`
   `、`

   `、`
2. 問題消失時，該區塊即為罪魁禍首。
3. 進入區塊內部，繼續二分刪除子模組，直到鎖定具體元素/短代碼/小工具。

進階：PHP 端除錯輔助

<?php
// wp-config.php 開發環境
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);       // 寫入 wp-content/debug.log
define('WP_DEBUG_DISPLAY', false);  // 不直接輸出到畫面
define('SCRIPT_DEBUG', true);       // 載入未壓縮版 JS/CSS
define('SAVEQUERIES', true);        // $wpdb->queries 記錄所有 SQL

// 模板中快速查看變數
function dd($var) { echo '<pre>'; var_dump($var); echo '</pre>'; die; }
// 使用: dd($post); dd(get_queried_object());
?>

常見 WordPress 特有坑點速查

總結

善用 DevTools 可視化、二分法縮小範圍、PHP 端日誌 三位一體，WordPress 前端除錯不再是盲人摸象。養成「開發環境啟用除錯常數、上線前關閉」的習慣，能節省 80% 的排查時間。