Latihan 1 dari materi Remote Debugging di Debugging — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Implementasikan source map resolver untuk debugging remote — memetakan posisi kode yang sudah di-minify ke kode aslinya.
1. createSourceMap(mappings)
mappings: array of { minLine, minCol, origFile, origLine, origCol }
Return object dengan method resolve(minLine, minCol)
resolve(minLine, minCol)
Cari mapping yang cocok persis dengan minLine dan minCol
Return { file: origFile, line: origLine, col: origCol }, atau null jika tidak ditemukan
2. formatStackTrace(frames, sourceMap)
frames: array of { fn, file, line, col } (posisi minified)
Gunakan sourceMap.resolve() untuk mendapatkan lokasi asli
Return array of string: "${fn} (${origFile}:${origLine}:${origCol})"
Jika tidak ada mapping yang cocok, gunakan nilai original dari frame
Hint
createSourceMap(mappings) closure yang store mappings. resolve(minLine, minCol): cari mapping.find(m => m.minLine === minLine && m.minCol === minCol). Return { file: origFile, line: origLine, col: origCol } atau null.
formatStackTrace: mapping untuk tiap frame. Kalau ada → `${fn} (${mapped.file}:${mapped.line}:${mapped.col})`. Kalau null → pakai file/line/col asli frame.
Pattern: frames.map(f => { const m = sourceMap.resolve(f.line, f.col); return m ? `${f.fn} (${m.file}:${m.line}:${m.col})` : `${f.fn} (${f.file}:${f.line}:${f.col})`; }).
HyperSheets
bagian dari BelajarWeb.dev
🔄
Memperbarui Aplikasi
Versi baru tersedia. Halaman akan dimuat ulang otomatis...