search

ispras / web-scraper-chrome-extension

Web data extraction tool implemented as chrome extension
GNU Lesser General Public License v3.0
214 stars 68 forks source link

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

Closed Tony20221 closed 1 year ago

Tony20221 commented 2 years ago

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.

Hat331 commented 2 years ago
  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
Tony20221 commented 2 years ago

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