Debugging Brackets

Peter Flynn edited this page Jan 19, 2015 · 6 revisions

Simple Debugging

To bring up the Chrome Developer Tools on the Brackets window, use Debug > Show Developer Tools. This will open a new tab in Chrome containing the developer tools. You can use console.log(), breakpoints, etc. just as if you were debugging a normal web page.

The first time you open Developer Tools, you must disable caching - otherwise using Reload while dev tools are open will not reflect changes to certain code (such as extensions).

To debug code that runs at startup you can launch Brackets, open the developer tools, set your breakpoints, and then select Debug > Reload Brackets. Developer tools will remember your breakpoints as the startup process runs after reload.

If Debug > Show Developer Tools doesn't work
If Brackets is in a really bad state, the menu item might be missing or do nothing. In that case, open a tab in Chrome (other browsers won't work) and go to http://localhost:9234. You should see a link corresponding to the Brackets window titlebar label. Click that link to open Developer Tools.

Two-Window Workflow

You can run two instances of Brackets so you still have a working editor if you end up breaking Brackets in the process of making code changes:

  • Use "Debug > New Window" to launch a new, separate Brackets instance.
  • In window #2, you can open a different folder on disk to access other content for testing your extension (e.g. test.html).
  • In window #1, edit your extension code and save.
  • Reload window #2 to pick up extension changes, and test it out.
  • Don't reload window #1 until you're at a good stable "safe point."

You can open separate copies of developer tools for the two windows if needed.

Debugging Unit Tests

Some Brackets unit tests run directly in the unit test runner window, while others pop up a separate test instance of Brackets.

To debug tests that run in the unit test window -- click "Show Developer Tools" in the window header.
You must disable caching once you open dev tools, even if you've already done so in the dev tools for the main Brackets window.

To debug tests that run in a separate window -- see Debugging Test Windows in Unit Tests.

Debugging Brackets with Theseus

Theseus is an awesome research project built atop Brackets, providing omniscient, retroactive debugging for JavaScript. And you can use Theseus to debug Brackets itself! Here's how...

See Also

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.