Brackets Debug

Debugging is an important activity. In some cases, you might need to debug Brackets.

It is easy to debug issues in Brackets Code Editor.

For Example:
If a particular shortcut is not working, then you can debug the Brackets editor to find the exact issue.

In most cases, the issue is due to an Extension.

Brackets Help

Let’s assume that you are having issues with Brackets. There can be any issue and the important issues are –

  • Installing Brackets
  • Live preview not working
  • Page loading issues
  • Brackets running slow
  • Problem with local server in Brackets
  • Extension not working properly

For any help related to Brackets, go to the “Help” menu and navigate to –

This will  lead to the Wiki page for troubleshooting.

Debug issues in Brackets

There can be any issue while working on a project.

Let’s assume that there is an issue in which few keyboard shortcuts are not working.

If few shortcuts are not working, the most common issue is that the shortcuts from 2 or more extensions are conflicting.

To verify if the problem is due to extensions, follow this –

  • Reload with extensions(Shortcut is F5)
  • Navigate to Debug -> Show Developer Tools (Shortcut is F12).
  • Click on “Console” and check for any errors.
  • Verify the log to check if any problem exists.
Brackets Show Developer tools console

In the above image, it is clear that the problem is because of Emmet and Beautify extensions but there will also be cases when it will not be clear  which extension is causing an issue.

In such cases, follow these steps –

  • Reload Brackets without Extensions(Shift + F5)
  • Go to Debug -> Show Developer Tools and click on “Console” to check if any error still exists.

In most cases, the errors will go off once you reload Brackets without extensions.

Brackets Developer tools console showing no errors

The above image confirms that the extensions are causing the issue. To verify which extension is causing the issue, follow this –
a) Go to Help -> Show Extensions Folder. Now double click on “user” and cut the 1st extension and move it to the “disabled” folder.

Verify the console if the issue is resolved. If it is not resolved, then cut the next extension and move to the “disabled” folder. Again, verify if the problem still exists. If the issue is not resolved, follow the same steps with other extensions.

The other way to disable extensions is to navigate to “Extension Manager” and disable the extension one by one.

Brackets disable extension from extension manager

b) Optionally, you can also uninstall any extensions from the Extensions Manager but this option is not preferred.

Brackets Preferences

Brackets has its own Preferences File. To open this file, navigate to Debug -> Open Preferences File.

It opens the Brackets.json file which contains the current preferences.

You can edit this file to modify the value of  an existing property or add a new preference for a property.

Any changes you do in this file will automatically change the settings in Brackets Text editor.

So, you can use this file to modify your personal preferences.

Edit the Preferences File

You can edit the Brackets.json file directly by changing the values and it will automatically reflect in the Brackets Editor.

For example:
Change the – “fonts.fontSize”: “12px” to “fonts.fontSize”: “14px” and see that the font size is changed in Brackets. Similarly, you can change any other preferences.

Brackets preferences file

Create custom Preferences File

Sometimes, you might require to create your own custom Preferences File based on a particular project or requirement.

To create a new file, simply create a new file  with the name as “.brackets.json“.

Add your project related or user related preferences here. Any changes you do in this file will override the Preferences of the default brackets.json file.

Create your own custom keys

Brackets gives you an option to set up your own custom keys.
Just go to Debug -> Open User Key Map

While, you can set your own keys, there are Exceptions that you cannot use the special commands and Reserved keywords because the special commands and Reserved keywords cannot be overridden

The User Key Map will appear like this –

Brackets user key map

Simply open the link – “Brackets user key map” in the browser to understand how you can update the user key map file and read about the documentation Link.

  “overrides”: {
    “key-1”: “cmd-id-1”

Here, key-1, key-2,…key-n are windows/mac key like F4, Ctrl-E, etc.

cmd-id-1, cmd-id-2,…cmd-id-n are command ids for the respective keys. For Example – navigate.toggleQuickEdit is the command id for Quick Edit.

Suppose, you need to add a new key for “Quick Edit”, then go to the full command list, and find the command id for “Quick Edit” as below –

Brackets Command Id

In this case, the command id is – navigate.toggleQuickEdit“. If you wish to add the key for this as F8, then the User Key Map File( keymap.json) will have an entry as –

    “overrides”: {
        “F8”: “navigate.toggleQuickEdit”

Tutorials for all brains!