Mars's Blog

程式碼追蹤定位

Mars Hung
doc
文章閱讀量次

一、說明

程式的開發及維護時，對程式掌握度的高低對開發維護的效率與質量影響很大，但我們又不可能將做過的程式永遠記得牢牢的，總會有其他人的改動，總會接觸其他人編寫的程式，所以個人對程式的閱讀追蹤能力很大一部份代表個人實力，在此介紹一些php web程式的閱讀追蹤方式。

除錯方法選擇指引

場景 推薦方法 適用時機
快速查找畫面內容位置 字串搜尋 不熟悉專案結構時
追蹤程式執行流程 依流程追蹤 熟悉 MVC 架構時
找出程式錯誤點 插行號/Xdebug 程式無輸出或邏輯錯誤
分析複雜邏輯 Xdebug 斷點除錯 需要逐步檢查變數值
追蹤 AJAX 請求 瀏覽器 DevTools 前後端資料交互問題
記錄系統運行狀態 日誌工具 (Monolog) 生產環境除錯

二、程式結構與追蹤

2.1 web使用模型

網頁使用流程可解析成(MVC)：

  1. User輸入網址
  2. Browser對Controller要求View頁面
  3. View對Controller發出ajax請求
  4. Controller透過Model存取Database
  5. Controller將資料ajax回應給View
  6. View渲染畫面給User

從流程中可看出，View是web系統的起點跟終點

2.2 字串搜尋方式追蹤

適用：想要找到畫面內容所在程式碼

  • 以 Yii 2 basic 預設頁面為例，假設這個頁面我從未接觸過

  • 我想將「Congratulations!」改成「Congratulations-trace」時，可直接從頁面原始碼中的目標附近找一個不太可能重複的字串，如「class=”jumbotron”」

  • 將字串「class=”jumbotron”」貼到IDE的全專案搜尋中尋找，如字串選得好，找到的可能目標會非常少，很容易確認目標。

  • 修改後查看狀況，完成！

使用本方法，需注意不要選可能是組合字、變數等字串，大略可用tag, id, class, style名稱/值 為搜尋字串

2.3 依流程追蹤

適用：想要找到畫面內容所在程式碼

  • 從網址列可以得知目標是Controller: site, Method: index

  • 打開目標程式，可以找到目標view檔案

  • 打開目標View，找到目標，修改後查看成果。完成！

使用本方法，需熟知framework運作流程及相關函式。

2.4 插行號/檔名/字串方式追蹤

適用：

  • 狀況一：當程式錯誤後會沒有任何輸出時
  • 狀況二：當想知道有哪些判斷式被執行時

狀況一：當程式錯誤後會沒有任何輸出時

如果要確定在執行哪段程式時發生錯誤，可在可能的錯誤點前插行號。

下例假設資料處理掛了且沒有錯誤輸出。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// 預設輸出
$opt = [
    'code' => 200,
    'message' => 'OK',
];

try {
    // 取得輸入資料
    $post = $input->post();
    echo __LINE__."\n";
    // 初始化
    $users = \app\service\Users::getInstance();
    $rule = \app\service\Rule::getInstance();
    $timeoff = \app\service\Timeoff::getInstance();
    $punch = \app\service\Punch::getInstance();
    $attend = \app\service\Attendance::getInstance();

    echo __LINE__."\n";
    // 輸入資料整理
    $userData = $users->prepare($post);

    echo __LINE__."\n";
    // 資料驗証
    if (! $rule->validate($userData)) {
        echo __LINE__."\n";
        throw new Exception('Input error', 400);
    }

    // 取得相關資料
    $timeoffData = $timeoff->get($userData['id'], $startDate, $endDate);
    $punchData = $punch->get($userData['id'], $startDate, $endDate);

    echo __LINE__."\n"; // <=== 因資料處理掛了，所以本行為最後一個輸出的行號
    // 資料處理
    $attendData = $attend->workStatus($timeoff, $punch, $startDate, $endDate);

    echo __LINE__."\n";
    // 寫入資料
    $attend->write($attendData);
} catch (Exception $e) {
    // 錯誤處理
    $opt = [
        'code' => $e->getCode(),
        'message' => $e->getMessage(),
    ];
}

// 輸出結果
return $output->json($opt);

上例可看出：

  • 最後一個輸出行號在資料處理之前
  • $rule->validate($userData)驗証有通過，因為沒有看到丟出例外前的那個行號
  • 當然如果不嫌麻煩，也可以不用__LINE__行號(魔術常量)，而是自己定義輸出內容

狀況二：當想知道有哪些判斷式被執行時

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// 取得$userID在$startDate至$endDate的出勤資料
$attendances = $attend->get($userID, $startDate, $endDate);


// 本行號用來確定有開始動作
echo __LINE__."\n";

// 出勤資料-落點 - 重複打卡、無效卡、缺卡、遲到、早退等狀況，會依打卡先後順序及落點判斷
foreach ($attendances as $key => $att) {

    // 本行輸出為：定位loop迴圈數
    echo '$key = '.$key."\n";

    // 本行輸出為：印出迴圈內容
    //echo '$att = '. var_export($att, true) ."\n";

    // 本行號用來確定loop開始
    echo __LINE__."\n";

    try {
        if ($att <= $workStart) {
            // 上班前
            echo __LINE__."\n";
            // 略...
        } elseif ($workStart < $att && $att < $restStart) {
            // 上班後至休息前
            echo __LINE__."\n";
            // 略...
        } elseif ($restStart <= $att && $att < $restEnd) {
            // 休息時間
            echo __LINE__."\n";
            // 略...
        } elseif ($restEnd < $att && $att < $workEnd) {
            // 休息後至下班前
            echo __LINE__."\n";
            // 略...
        } elseif ($workEnd <= $att) {
            // 下班後
            echo __LINE__."\n";
            // 略...
        }
    } catch (Exception $e) {
        // 例外處理
        echo __LINE__."\n";
    }

    // 本行號用來確定loop結尾
    echo __LINE__."\n";
}

// 本行號用來確定結尾
echo __LINE__."\n";
  • 從輸出的 行號、定位loop迴圈數、印出迴圈內容 可協助判斷程式碼執行狀況。
  • 當然如果不嫌麻煩，也可以不用__LINE__(行號魔術常量)，而是自己定義輸出內容

2.5 追蹤呼叫歷程

適用： 想知道本函被呼叫的過程時，可使用函式debug_backtrace()取得呼叫歷程。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
class Home extends CI_Controller
{
    public function index()
    {
        // $options = 2;時顯示較少資訊 ； $limit 為向上追蹤層數，0為不限
        $debug =  debug_backtrace($options = 2, $limit = 0);
        print_r($debug);
        exit;
    }
}

// 輸出結果：
// Array
// (
//     [0] => Array
//         (
//             [file] => /var/www/html/system/core/CodeIgniter.php
//             [line] => 532
//             [function] => index
//             [class] => Home
//             [type] => ->
//         )
//
//     [1] => Array
//         (
//             [file] => /var/www/html/index.php
//             [line] => 318
//             [args] => Array
//                 (
//                     [0] => /var/www/html/system/core/CodeIgniter.php
//                 )
//
//             [function] => require_once
//         )
//
// )

2.6 查看輸入輸出資料變化

適用：輸入輸出值錯誤 (沒有語法錯誤)

1
2
3
4
5
6
7
8
9
// 查看參數值
echo '$id = '. $id ."\n";
echo '$date = '. $date ."\n";

// 資料取得函式
$data = $obj->getData($id, $date);

// 查看資料內容
echo '$data = ' . var_export($data, 1) . "\n";
  • 觀察輸入輸出值是否符合預期

三、現代除錯工具

3.1 使用 Xdebug 進行斷點除錯

Xdebug 是 PHP 最強大的除錯工具，可以設定斷點、逐步執行、查看變數值。

安裝 Xdebug

1
2
3
4
5
# Ubuntu/Debian
sudo apt-get install php-xdebug

# 檢查是否安裝成功
php -m | grep xdebug

設定 php.ini

1
2
3
4
5
[xdebug]
zend_extension=xdebug.so
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_port=9003

VS Code 設定

  1. 安裝擴充套件：PHP Debug
  2. 建立 .vscode/launch.json：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {
      "version": "0.2.0",
      "configurations": [
        {
          "name": "Listen for Xdebug",
          "type": "php",
          "request": "launch",
          "port": 9003
        }
      ]
    }

使用方式

  1. 在程式碼行號左側點擊設定斷點（紅點）
  2. 按 F5 啟動除錯模式
  3. 瀏覽器執行程式，觸發斷點
  4. 可逐步執行（F10）、進入函式（F11）、查看變數值

優點：

  • 不需修改程式碼即可除錯
  • 可即時查看所有變數狀態
  • 支援條件斷點、監看變數

3.2 使用瀏覽器 DevTools 追蹤 AJAX

Chrome DevTools Network 面板

  1. 按 F12 打開開發者工具
  2. 切換到 Network 面板
  3. 執行 AJAX 請求
  4. 點擊請求查看：
    • Headers：請求方法、URL、狀態碼
    • Payload：POST 傳送的資料
    • Response：伺服器回應內容

實用技巧

1
2
3
4
5
6
7
8
// 在 Console 中攔截 AJAX 請求
(function() {
  var open = XMLHttpRequest.prototype.open;
  XMLHttpRequest.prototype.open = function() {
    console.log('AJAX Request:', arguments);
    open.apply(this, arguments);
  };
})();

3.3 使用 Monolog 記錄日誌

生產環境不適合使用 echo 或 Xdebug，應使用專業日誌工具。

安裝 Monolog

1
composer require monolog/monolog

基本使用

1
2
3
4
5
6
7
8
9
10
11
12
use Monolog\Logger;
use Monolog\Handler\StreamHandler;

// 建立 logger
$log = new Logger('name');
$log->pushHandler(new StreamHandler('/path/to/your.log', Logger::DEBUG));

// 記錄不同等級的訊息
$log->debug('Debug message', ['user_id' => $userId]);
$log->info('User login', ['username' => $username]);
$log->warning('Unusual activity detected');
$log->error('Database connection failed', ['error' => $e->getMessage()]);

日誌等級

  • DEBUG：詳細的除錯資訊
  • INFO：一般資訊訊息
  • WARNING：警告訊息
  • ERROR：錯誤訊息
  • CRITICAL：嚴重錯誤

優點：

  • 不影響程式執行效能
  • 可記錄到檔案、資料庫、Email 等
  • 支援不同等級的日誌過濾
  • 適合生產環境長期監控

四、參考資料

Recents

Archives

Categories

Tags