All modern browsers provide tools for web application debugging. These are usually simply called "Developer Tools" and can be invoked via a menu entry, a toolbar button, the F12 key or the key combination Ctrl+Shift+I.
As of today, using Google Chrome for debugging is recommended, since it currently offers the most mature developer tools and is the fastest, especially while debugging. Internet Explorer 11 is quite good in both disciplines, too, while Firefox trails the field especially in execution performance during debugging.
All modern browsers' developer tools provide tabs for different tools:
DOM Explorer / Element / Inspector — Inspect the page's actual DOM elements as a DOM tree, with the option to select an element on the rendered page to reveal it in the tree. Selected DOM tree nodes are highlighted on the rendered page. The DOM can be watched for changes and modified interactively.
Console — All JavaScript messages and errors are logged to this console, and it provides a read-eval-loop for JavaScript expressions.
Network — Inspect all HTTP network traffic between the client-side application and the server, static resources as well as Ajax (XHR) requests. Most developer tools offer to disable the cache while they are active, to make sure that you always load the most recent version of code and other resources you just changed.
Debugger / Sources — Inspect all loaded JavaScript and CSS sources, set breakpoints to debug in step-by-step mode. Most modern developer tools allow you to change sources interactively with immediate effect.
Profiles / Profiler / Audits / Memory / Analysis — Diverse tools to measure your web application's client-side and network performance and memory usage. Helpful to find memory leaks (see below) and track performance issues.
Since CoreMedia Studio is a Jangaroo application, please refer to
the tutorial about Jangaroo debugging with Firebug at
https://github.com/CoreMedia/jangaroo-tools/wiki/Tutorial-~-Debugging.
Essentially, you have to load CoreMedia Studio with the
#joo.debug parameter appended to the URL to debug the JavaScript code of your
component. This parameter loads the debug versions of the JavaScript files. In particular,
it loads every class in a separate file, which greatly simplifies debugging. In debugging
mode, both the Network tab and the list of loaded scripts in the
Sources / Debugger tab show the script files of your components. The line numbers
in the script files match the line numbers from your ActionScript source files, which
simplifies setting breakpoints at the appropriate spots in your code.
Also, third-party-libraries like Ext JS and CKEditor are loaded in their human-readable
(as opposed to "minified") versions when in Jangaroo debug mode.
Last but not least, for developer convenience, CoreMedia Studio,
skips the confirmation dialog that normally appears before reloading (F5).
All browser developer tools offer a convenient way to navigate to a certain script file or Jangaroo class (which, in debug mode, is a one-to-one mapping): With the Sources / Debugger tab active, press Ctrl-P (note that this invokes the print dialog when the focus is not on the developer tools!) and just start typing the name of the class (file) you want to debug, and the list is filtered incrementally. Some tools even support typing camel case prefixes of the class name, for example to find the class PreviewPanelToolbarBase in Google Chrome, press Ctrl-P and type "PrevPaToBa" to quickly reduce the number of suggestions.
To navigate to the desired line in the file, you can either add a colon (:) and the line number directly after the file search term, or press Ctrl-L or Ctrl-G (Goto Line) and enter the line number.
A very efficient way to locate a certain line of a Jangaroo class in Google Chrome's Developer Tools (to set a breakpoint, for instance) when working with IntelliJ IDEA is as follows. In IDEA, jump to the very start of the line (press Pos 1 repeatedly until there). Then, press Ctrl-Alt-Shift-C ("Copy Reference"). IDEA's status line shows a message that the file/line reference has been copied to the clipboard. Switch to Chrome Developer Tool's Sources tab (Alt-Tab suffices when changing back and forth) and press Ctrl-P. Now paste the file/line reference and replace the "a" of ".as" by "j" (for ".js"). The fastest way to do so is to use Ctrl-Left-Arrow twice, then Shift-Right, then type "j". Hitting Return, Chrome accepts the syntax file-path:line and takes you to the exact file and line.
The debugger allows you to set breakpoints, to automatically pause on errors, to step through the script at runtime and to evaluate expressions in the current scope of the script. In this context, the Console tab is also very helpful, because it offers a JavaScript shell for direct interaction with the current script. The console displays the results of the expressions evaluated in the shell and also messages generated by the current script runtime.
 |  |  |
 |