nightwing edited this page Mar 12, 2012 · 3 revisions
Clone this wiki locally



acebug can inspect js objects and show their properties in a popup. Starting with the code

   var attr = document.getElementById('header').quer // 

place cursor after last dot and use one of ctrl-Space, ctrl-., alt-. to open autocompletion popup acebug will run document.getElementById('header') and show properties of resulting object in the popup

short description, (or mdc documentation for some builtin finctions), is shown in the second panel

typing adl will filter list to properties containing 'a', 'd', 'l' characters in right order with addEventListener on top


enter will insert suggested text and close the popup

shift-enter will do the same and remove old property name (i.e quer)

ctrl-.|alt-. will insert suggested text add . and start autocompleter

also autocompleter will give list of event names for addEventListener( and list of ids for document.getElementById(

note that autocompleter works for edit mode in css panel as well.


to allow editing of multiple code snippets simultaneously acebug uses cells. press Shift-Enter to create one all the content in between two lines starting with #>> is a cell

if selection is not empty pressing run or dir button will execute selected text otherwise whole cell containing the cursor is executed

line starting with #>> is a cell header where you can specify how the cell should be executed (press ctrl+space for list of options)

for now you can specify value of this with this=(js to find this value) which is equivalent of doing function(){cell contents}.call(js to find this value)

and language lang=js or lang=cf . Default value is js (note that cells without lang attribute will try to use language of previous cell) running a cell without lang attribute tries to guess best matching language, which means code that isn't valid js but is valid coffeeScript will run as coffeeScript


for cells with lang=cf opening autocompleter in the cell header shows js equivalent (not as good as on coffeeScript website, but sufficient after first few days of learning coffeeScript)

resource tab

list of all scripts css and images on the page, needs a lot more work to become really useful

script tab

ctrl+space on script tab executes selection in console


pressing ctrl+shift+B beautifies selected text using https://github.com/einars/js-beautify (works for js/html/css)


  • add console tab to the script tabs' sidebar
  • special key bindings for mac (if you are a mac user please help)
  • use ace for script tab
  • add .ace.js = .vimrc for ace