home
  • Blog
1.12
  • Getting Started
  • Concepts
  • The Object Model
  • Application
  • Templates
    • Handlebars Basics
    • The Application Template
    • Conditionals
    • Displaying a List of Items
    • Binding Element Attributes
    • Binding Element Class Names
    • Links
    • Actions
    • Input Helpers
    • Development Helpers
    • Rendering with Helpers
    • Writing Helpers
  • Routing
  • Components
  • Controllers
  • Models
  • Views
  • Enumerables
  • Testing
  • Configuring Ember.js
  • Ember Inspector
  • Cookbook
  • Understanding Ember.js
  • Contributing to Ember.js
Old Guides - You are viewing the guides for Ember v1.12.0.
Go to v5.0.0

Development Helpers

Edit pencil

Development Helpers

Handlebars and Ember come with a few helpers that can make developing your templates a bit easier. These helpers make it simple to output variables into your browser's console, or activate the debugger from your templates.

Logging

The {{log}} helper makes it easy to output variables or expressions in the current rendering context into your browser's console:

{{log 'Name is:' name}}

The {{log}} helper also accepts primitive types such as strings or numbers.

Adding a breakpoint

The {{debugger}} helper provides a handlebars equivalent to JavaScript's debugger keyword. It will halt execution inside the debugger helper and give you the ability to inspect the current rendering context:

{{debugger}}

Just before the helper is invoked two useful variables are defined:

  • templateContext The current context that variables are fetched from. This is likely a controller.
  • typeOfTemplateContext A string describing what the templateContext is.

For example, if you are wondering why a specific variable isn't displaying in your template, you could use the {{debugger}} helper. When the breakpoint is hit, you can use the templateContext in your console to lookup properties:

> templateContext.get('name')
"Bruce Lee"
left arrow
Input Helpers
Rendering with Helpers
right arrow
On this page

  • Development Helpers
  • Logging
  • Adding a breakpoint
Team Sponsors Security Legal Branding Community Guidelines
Twitter GitHub Discord Mastodon

If you want help you can contact us by email, open an issue, or get realtime help by joining the Ember Discord.

© Copyright 2023 - Tilde Inc.
Ember.js is free, open source and always will be.


Ember is generously supported by
blue