The trick is ⌘⌥I, which lets you step through your running JS code line by line, watching the variable values change, and inspecting the properties of objects, in the browser's symbolic debugger.
In either browser, you can select something on the web page, and use ⌘⌥I or "Inspect Element" in the Ctrl-click contextual menu.
(In Safari, you may first need to enable the 'Developer Menu' through Preferences > Advanced).
I personally prefer to use the Chrome tools (easier XPATH searches), but both hugely reward the effort of some patient exploration and experimentation. The debugger is really the best place to watch it all happen in slow motion, and learn how it all works.
(You can already use Script Editor to draft your Browser Javacript code, converting the function which will be used in the browser to a string, and submitting it for browser execution using the techniques shown in this post:
Using the Safari JS debugger with JXA will be very cool. I only wish they would push it out for Yosemite. Maybe El Capitan will be different, but so far it takes me about a year to upgrade Mac OS after it’s release. Just too many bugs in both the OS and apps, and too many apps that are broken. As you know, I’m just now upgrading to Yosemite.
But this is all good stuff. I’m clipping it all to my Evernote account.