JavaScript libraries + jQuery plugins contradict: how to debug?

Question

I'm not the very best expert, but I can do a decent job good looking and functional websites or web applications. My main tools are PHP5, HTML5, CSS2 y 3, a database (SQLite, MySQL) and JavaScript and jQuery.

I'm not an expert at all in JavaScript. I often find interesting jQuery plugins or tutorials and try to mix them up to do the functionality needed. This time I'm mixing maybe too much plugins and js files from different sources.

In fact, my app do what I want except for certain behaviors. There are no errors, everything looks fine, but the misbehavior persists. So maybe I need to specify a class I don't know about, or one contradicts another one from another plugin and I just can't understand, for example, why a <button type="button">DON'T submit</button> just submits the form.

Anyway, my point is: how can I debug this situation? Is there a generic tool, suggestion, workflow or something to help me understand conflicts or omissions between libraries or plugins? (JavaScript libraries, my own JavaScripts and jQuery plugins)?

Edit

I know about Chrome's debugger and Firebug. But maybe I just don't know how to get the functionality I need. Reading about how to use these tools haven't helped me. For example: I've got a tag which has inherit a class I didn't assigned it to by hand (example: <button type="button" disabled>DON'T submit</button> I didn't write disabled by myself) So some JavaScript file is assigning it, but how can I see WHO did this? Which file? Class? Plugin? Library? Etc? That's another example of what I mean to ask.

Answer 1

It is possible that you're using two libraries that use the $() function. In jQuery, the $() function is just shorthand for jQuery(), so you could try taking your jQuery code and replacing every instance of "$(" with "jQuery(" and see if that helps out. Without know what scripts you're using I can't tell if that will work or not, but this is likely the problem if you have more than one framework (e.g. jQuery) loaded at one time.

Just make sure you don't change any non-jQuery functions from $() to jQuery() or else they'll break.

Answer 2

The default functionality of the <button> tag is the same as <input type="submit">.

http://htmldog.com/reference/htmltags/button/

Answer 3

Yes, there are tools to debug javascript.

Chrome as inbuilt debugger (Press F12 to open it)

But my favourite is firebug (its an addon for firefox, download it from here)

To resolve the conflicting issue, read here

Also, by default <button> submits the form.

If you do not want <button> to submit form, you can use this,

<button type="button" onclick='return false;'>DON'T submit</button>