0

if we have a html and JavaScript code beside it and there is undefined variable in my JavaScript I can see error in Firefox development tool(F12). now i developing an extension but i can't see error any where.

I read in this link about Setting up an extension development environment but that isn't help me.

i see similar questions in stackoverflow but they didn't help me.

<html>
<p id='p1' onclick='add()'>1</p>
<script>
function add(){
p1 = document.getElementById('p1')
p1.innerText++
}


observer = new MutationObserver(function(mutations){
  console.log(mutations)
});
observer.observe(p1,{
  childList :true
});
</script>
</html>

in this case if i wrote p2 instead of p1 i see in DevTools Console something like : Uncaught RefrenceError...

but if i use under javascript code as extension i can't debug or see errors


p1 = document.getElementById('p1')

observer = new MutationObserver(function(mutations){
  console.log(mutations)
});
observer.observe(p1,{
  childList :true
});

my goal for extension is track changes in a page an log them. but i can't see errors in DevTool Console for my extension.

EDIT: the problem is when i load my extension, debugger in empty.(i can't see my js files)

why?

kankan256
  • 210
  • 1
  • 4
  • 18

1 Answers1

0

You need to fix the JavaScript as the first step.

1- declare variables with var, let, const (also better to close code with ; you can read some "JavaScript Best Practices" by searching Google)

const p1 = document.getElementById('p1');

2- ++ is for numbers while the content of p1 is text l.e. '1'

3- You have to reassign the value back to the element

here is an example:

  function add(){
    const p1 = document.getElementById('p1');
    p1.textContent = parseInt(p1.textContent) +1;
  }

Which debugger are you using?

Did you go to about:debugging -> This Nightly -> your extension -> inspect?

erosman
  • 7,094
  • 7
  • 27
  • 46