web-scraper-chrome-extension icon indicating copy to clipboard operation
web-scraper-chrome-extension copied to clipboard

Published 20 hours ago • verified publisher icon ispras

How to debug and use breakpoints in JS code which built by Webpack?

Open Tony20221 opened this issue 3 years ago • 2 comments

I am using Firefox and I am not finding an easy way to debug and put breakpoints. Webpack puts the code I want to put a breakpoint on in a long line of an eval statement. I am using yarn watch:dev.

How does one debug and place breakpoints in such code which is hard to read? I am familiar with debugging extensions before the JS code gets built.

Tony20221 avatar Jun 03 '22 04:06 Tony20221

  1. Run "watch:dev"
  2. Open "Add-ons and themes" menu
  3. Click "Tools for all add-ons" image
  4. Choose "Debug add-ons"
  5. Find web-scrapper extension and click on "Inspect" button image
  6. Choose debug panel image
  7. Here you can find active extension scripts image
  8. On some page open dev-tools pannel and choose Web Scrapper image
  9. You may notice how the panel appeared new scripts like "Controller"
  10. Profit image

Hat331 avatar Jun 03 '22 10:06 Hat331

Thanks a lot! I didn't think to look under 'Webpack' in there.

Tony20221 avatar Jun 03 '22 17:06 Tony20221