如何通过jQuery调试DOM操作？

Question

I'm working on an website with some dynamic jQuery content. If the user pushed a button ("show menu") on the page, an javascript function runs. Let this function call loadMenu() .

The loadMenu() function loads a menu (web conent) from server using ajax. Part of this loaded code is javascript/jquery. 2 functions of this code make some elements on the page draggable, 2 other functions make some elements on the webpage droppable. These functions are all started at $.ready-Time (if the DOM is ready). All this works fine.

Now i added an "MenuAlwaysVisible" feature. This means: if the web-page is loading and finished ( ready ) the user doesn't need to press the button "show menu", because the javascript loadMenu() now fires automatically, if the page is ready

The problem now is, it looks like, the draggable handler are attached and worked as defined, but droppable does not work.

I'm not sure, but probably the droppable function runs on a time, where the DOM elements doesn't like to be droppable? Ore maybe some other jQuery codes overrides this? (but there are no other droppable elements on the page)?

So the question is: how to analyze that problem: how to debug DOM manipulation, using Windows and Firefox/Firebug or Safari, Chrome .. whatever...

Thank you!

Answer 1

To answer my own question: i did not found any alternatives way than using firebug and console.info() or console.warn() to debug the code. Thanks @ all for the comments

Answer 2

One debugging trick I have found endlessly useful for dealing with JQuery is the insert obvious code trick. Slap in a .hide() command on some obvious, identifiable part of the page, and see if the code ever runs. Lets you track which code pieces are not behaving as intended, and which are simply never being used in the first place.