1

I am developing a js code converter. here is a(much simplified) example input.js

let a=5
let b=6
const result = a + b;
console.log(result)

and the corresponding output.js

const t={}
t.a=5
t.b=6
t.result = t.a + t.b;
console.log(t.result)

I would like to debug the input.js using chrome devtools. While debugging, I want to run output.js, but see input.js on the devtool debugger. I am using source map for that and it works. the problem is that when hovering on a, I don't see the corresponding value t.a

my question is: is is possible to create a source map that will show me the value of t.a while hovering on a?

3
  • AFAIK, the source map contains this information. It's a missing feature in the devtools. Commented Jun 23 at 20:42
  • @jabaa so chrome devtools doesn't have it. how about firefox? Commented Jun 23 at 21:00
  • It's quite some time since I've read about the details of source maps and I'm not expert for devtools in all possible browser, but IIRC a source map is a simple mapping between positions in one source file and another source file. There is no configuration for devtools inside the source maps, but this mapping should be enough to achieve what you want. You can try different browser or try to implement it with a browser extension. Commented Jun 23 at 21:15

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.