You can use the debugger in the Firefox dev tools.
From
https://www.zotero.org/support/dev/client_coding/building_the_standalone_client:
A -debugger
flag
will run the Mozilla DevTools server, which you can connect to
from the Firefox DevTools by using the “Connect…” option and
pointing to port 6100. You'll first need to enable browser
chrome/add-on and remote debugging in the settings (gear icon)
pane of the Firefox Web Console and pass -t
to
the dir_build
script.
(You'll want to use the build_and_run script [1], which is an easier
interface to dir_build, if you're building Zotero from source.)
But Bluebird promises tend to make using a debugger fairly difficult
(and I don't believe you can blackbox scripts in the current Fx dev
tools, or at least in remote mode), so just adding Zotero.debug()
lines may be easier. (I rarely bother with the debugger personally
and use Zotero.debug() almost exclusively, since any code change
requires restarting Zotero, and that requires reconnecting from the
dev tools, but the debugger might be useful for exploration.) For
trying out UI modifications, the Inspector is extremely useful.
In terms of architecture, there's not really much documentation,
though
https://www.zotero.org/support/dev/client_coding/javascript_api has
some example code. But basically, most UI entry points are in
zoteroPane.js, and the core, non-window code is in 'xpcom'. The data
layer (item saving, etc.) is in 'xpcom/data'. The left/middle panes
are collectionTreeView.js and itemTreeView.js. The translation
architecture is…complicated. Translators run in their own sandbox
and can be developed with Scaffold [2] without building Zotero from
source.
Happy to give additional guidance if you say more about the parts
you're interested in.
- Dan
[1]
https://www.zotero.org/support/dev/client_coding/building_the_standalone_client#helper_script
[2]
https://www.zotero.org/support/dev/translators/scaffold