การบันทึก การรายงานข้อผิดพลาด และการวินิจฉัย
สร้างชั้นการบันทึกและรายงานข้อผิดพลาด เพื่อให้คุณวินิจฉัยปัญหาในส่วนขยายที่ทำงานบนเครื่องของผู้ใช้จริงได้
การบันทึก การรายงานข้อผิดพลาด และการวินิจฉัย เป็นบทเรียน Browser Extensions Development (Chrome & Edge) ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Browser Extensions Development (Chrome & Edge) และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Browser Extensions Development (Chrome & Edge) มีบทเรียนทั้งหมด 4 บทเรียน
บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ
You Cannot Watch Every Console
Once your extension ships, you cannot open dev tools on every user's browser. A deliberate logging and error-reporting strategy is how you learn what is going wrong in the wild.
A Central Log Function
Wrap logging in one function so you can change behavior in a single place, add timestamps, and silence output in production.
function log(level, msg) {
console[level]('[MyExt] ' + new Date().toISOString() + ' ' + msg)
}Log Levels
Use distinct levels so you can filter noise. Common ones: debug, info, warn, and error.
log('warn', 'Quota nearly full')
log('error', 'Sync failed')Catching Uncaught Errors
Add a global error handler in each context to capture exceptions you did not anticipate.
self.addEventListener('error', (e) => {
log('error', e.message + ' @ ' + e.filename)
})Catching Rejected Promises
Unhandled promise rejections are a common silent failure. Listen for unhandledrejection too.
self.addEventListener('unhandledrejection', (e) => {
log('error', 'Unhandled: ' + e.reason)
})Persisting a Log Ring Buffer
Keep the last N log entries in storage so users can export them when reporting a bug. Cap the size to avoid filling the quota.
async function persist(entry) {
const { logs = [] } = await chrome.storage.local.get('logs')
logs.push(entry)
if (logs.length > 200) logs.shift()
await chrome.storage.local.set({ logs })
}Letting Users Export Logs
Add an options-page button that dumps stored logs to a downloadable file, making support requests far more useful.
const blob = new Blob([JSON.stringify(logs, null, 2)], { type: 'application/json' })
const url = URL.createObjectURL(blob)
chrome.downloads.download({ url, filename: 'myext-logs.json' })Remote Error Reporting
For aggregate insight, POST anonymized error reports to your own endpoint. Always make this opt-in and strip personal data.
fetch('https://errors.example.com', {
method: 'POST',
body: JSON.stringify({ msg, version })
})Respecting Privacy
Never log page contents, URLs with tokens, or anything sensitive. Disclose any remote reporting in your privacy policy and store listing.
Silencing Logs in Production
Gate verbose logging behind a debug flag so release builds stay quiet and fast, while you can flip it on when investigating.
const DEBUG = false
function debug(msg) { if (DEBUG) log('debug', msg) }Correlating Across Contexts
Tag each log with its source (popup, content, worker) so you can trace a bug that spans contexts and messaging.
log('info', '[worker] received PING')Quick Check
Test your diagnostics knowledge.
Recap
You built a diagnostics layer:
- Central log function with levels
- Global
errorandunhandledrejectionhandlers - A capped log buffer in storage with export
- Opt-in, privacy-safe remote reporting
- A debug flag and per-context tagging
Good diagnostics turn mysterious field bugs into fixable reports.
เรียนรู้ JavaScript ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 12
- บทเรียน
- 48
คำถามที่พบบ่อย
บทเรียน “การบันทึก การรายงานข้อผิดพลาด และการวินิจฉัย” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การบันทึก การรายงานข้อผิดพลาด และการวินิจฉัย” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Browser Extensions Development (Chrome & Edge) ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Browser Extensions Development (Chrome & Edge) มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การบันทึก การรายงานข้อผิดพลาด และการวินิจฉัย”
สร้างชั้นการบันทึกและรายงานข้อผิดพลาด เพื่อให้คุณวินิจฉัยปัญหาในส่วนขยายที่ทำงานบนเครื่องของผู้ใช้จริงได้ คุณปฏิบัติ Browser Extensions Development (Chrome & Edge) ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Browser Extensions Development (Chrome & Edge) หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Browser Extensions Development (Chrome & Edge) บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การบันทึก การรายงานข้อผิดพลาด และการวินิจฉัย” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Browser Extensions Development (Chrome & Edge) นี้ได้ไหม
ได้ บทเรียน Browser Extensions Development (Chrome & Edge) ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การแก้ไขข้อบกพร่องของส่วนประกอบส่วนขยาย
- การเขียนการทดสอบหน่วยสำหรับส่วนขยาย
- กลยุทธ์การเพิ่มประสิทธิภาพ
- การบันทึก การรายงานข้อผิดพลาด และการวินิจฉัย