Using Firebug or Chrome Dev Tools to find JavaScript Conflicts

You can use Firebug or Chrome Dev Tools to try to find the cause of plugin and theme conflicts in WordPress.

You will need to be skilled at using Firebug or Chrome Dev Tools to find what is causing your JavaScript conflict and how to resolve it. If that description does not fit you, you can learn about these extremely useful developer tools at the following links.

https://getfirebug.com/wiki/
http://www.evotech.net/blog/2007/06/introduction-to-firebug/
http://www.youtube.com/watch?v=sHbYpl1XFiM
http://www.tipsandtricks-hq.com/debugging-javascript-code-with-firebug-1899
https://developers.google.com/chrome-developer-tools/

In looking at JavaScript conflicts it’s important to realize that:

Different JavaScript may be loading on different pages, as plugins should ideally only load JavaScript on relevant pages.
Problems occurring on only some browsers or devices is relatively common with JavaScript Conflicts.
Lack of errors and errors showing a symptom rather than the cause is unfortunately more commonly the case than not.

Finally, it may help you to run a JavaScript trace in Firebug or Chrome Dev Tools to see where the JavaScript stops responding.

Remember that a problem in one script can cause issues in another.

For example, some jQuery errors can stop jQuery processing any more script, which can make the culprit hard to find. A jQuery error in one of your plugins or your themes’ javascript files can stop jQuery processing before it gets to the CF7 script.