Skip Javascript Framework while Debugging in Chrome

Question

I did research and found this website give my very useful information https://divshot.com/blog/tips-and-tricks/ignoring-library-code-while-debugging-in-chrome/

I did enable blackbox mode for the file pattern as following

(firebug|angular|knockout|jquery|bootstrap|modernizr|respond)

However, if i click the pause button in developer tools and when the mouse is over a page, the script still stop at jquery.min.js with the yellow box showing like the picture.

I just want to debug which function is performed when i did some action like, Click particular button etc.

But the jquery.min.js stop me from knowing this. Do you have any idea how to workaround or to make debugging more easier?

Thank you very much.

Answer 1

You can use default devtools ignore list.

1. Click on gear at the right side, and include all files you want to skip, by clicking at the "Add pattern ..." button

Answer 2

You need to enter in one library at a time if you are going to do them like that. Read the docs on blackboxing for more info https://developer.chrome.com/devtools/docs/blackboxing

You can:

• enter the name of a file,
• use regular expressions to target:
  • files that contain a specific name /backbone.js$,
  • certain types of files like .min.js$
• or enter in an entire folder that contains scripts you want to blackbox such as bower_components.

To my knowledge you cannot enter a regex like (thing1|thing2|thing3|etc). That will not work.

Here's a screenshot of what you can do though.