home
  • Blog
2.12
  • Getting Started
  • Tutorial
  • The Object Model
  • Routing
  • Templates
    • Handlebars Basics
    • Built-in Helpers
    • Conditionals
    • Displaying a List of Items
    • Displaying the Keys in an Object
    • Binding Element Attributes
    • Links
    • Actions
    • Input Helpers
    • Development Helpers
    • Writing Helpers
  • Components
  • Controllers
  • Models
  • Application Concerns
  • Testing
  • Ember Inspector
  • Addons and Dependencies
  • Configuring Ember.js
  • Contributing to Ember.js
  • Glossary
Old Guides - You are viewing the guides for Ember v2.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}}

When using the debugger helper you will have access to a get function. This function retrieves values available in the context of the template. For example, if you're wondering why a value {{foo}} isn't rendering as expected within a template, you could place a {{debugger}} statement and, when the debugger; breakpoint is hit, you can attempt to retrieve this value:

> get('foo')

get is also aware of keywords. So in this situation:

{{#each items as |item|}}
  {{debugger}}
{{/each}}

You'll be able to get values from the current item:

> get('item.name')

You can also access the context of the view to make sure it is the object that you expect:

> context
left arrow
Input Helpers
Writing 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