How to debug chrome extension background file

We are regular to open chrome developers tool, by right click and inspect element (CTRL + SHIFT+ I) or just by pressing F-12 on the keyboard to debug our JavaScript source code.
But when you open chrome developers tool to debug your code, you will probably see the “option.js”, “popup.html” files but not the “background.js, like this:
Resources-background JS file not found
And If you try to access the Sources, you will get something like this:
Sources - background JS file not found
So my solution to you is by using this URL in your Google chrome browser:

  1. chrome://inspect
  2. Click on “Extensions”
  3. Choose the extension you want to debug.

You can see the debug in the image:
4_Chrome inspect extensions
And after clicking on one of the extensions, your chrome developers tool will look like this:
5_chrome inspect extensions backgroundJS file
Notice that this issue is not always the case, because sometimes you will find the “background.js” file in just by clicking on F-12 in popup.html view and you will see this :

3_background JS file have been found
Thanks for reading this post, if you have other solution to this I will be glad to add it here.

mhmd

Hello, I'm Mohammad Daka, software engineer who love coding. In my spare time I blogs about JavaScript,PHP, Chrome Extensions, helpful resources and tools, I'm also working on my own projects. Don't hesitate to contact me at my twitter account: @mohammad_daka :)

You may also like...

1 Response

  1. backupbot says:

    when you open chrome developers tool to debug your code, mysql backup

Leave a Reply

Your email address will not be published. Required fields are marked *