5.2 デバッグ手法
Debugging Techniques
リンク
コンポーネント別DevTools
| コンポーネント | DevToolsの開き方 |
|---|---|
| Service Worker | chrome://extensions → 「Service Worker」リンク |
| Popup | Popup上で右クリック → 検証 |
| Content Script | 対象ページでF12 |
| Options | Optionsページで右クリック → 検証 |
console.logの活用
// 構造化データの出力
console.table(items);
// 処理時間の計測
console.time('処理A');
await heavyProcess();
console.timeEnd('処理A');
// スタックトレース
console.trace('ここに到達');よくあるエラー
| エラー | 原因 |
|---|---|
| Uncaught TypeError | undefined/nullへのアクセス |
| Extension context invalidated | 拡張機能が再読み込みされた |
| Cannot read property of undefined | 非同期処理の順序問題 |
デバッグのコツ
- Service Workerは停止するので、再起動後の状態を確認
- chrome.storage.local.get()で保存データを確認
- エラーページでは「エラー」ボタンで詳細確認
参考文献
[1] Chrome Extensions - Debugging
[1] Chrome Extensions - Debugging