Ember Installation (Experimental)

!!! warning
Ember support is very early and experimental. At this point, we've only tested on a couple of relatively simple apps. If you are willing to give this a shot on your codebase, we would love to hear about your experience so we can continue to improve support.

Install the CodeSee package in your JavaScript or TypeScript app

In the terminal, run the install command for your package manager:

=== "npm"

```shell
npm install --save-dev @codesee/tracker@latest @codesee/babel-plugin-instrument@latest
```

=== "yarn"

```shell
yarn add --dev @codesee/tracker@latest @codesee/babel-plugin-instrument@latest
```

Configure your project

You need to modify your Babel config, and import @codesee/tracker, both of which you can do in the ember-cli-build.js file. Here is an example structure that should work well for your app.

Note that:

• CodeSee detects development mode.
• CodeSee constructs an object that is your Babel options, and passes that into the EmberApp constructor. Then, only in development mode, we add @codesee/instrument to the list of Babel plugins, along with the frameworks: ["ember"] option.
• Only in development mode, we use app.import to load the @codesee/tracker/build/codesee.web.hosted.js npm package. For a local install, import @codesee/tracker/build/codesee.web.js instead.

module.exports = function (defaults) {
  const isDevelopment = process.env.EMBER_ENV === 'development';

  let babel = {
    /* If you have any existing Babel configuration, move it here */
  };

  // Adds CodeSee instrumentation, but only in development mode
  if (isDevelopment) {
    babel.plugins = babel.plugins || [];
    babel.plugins.push( ["@codesee/instrument", {frameworks: ["ember"]}] );
  }

  let app = new EmberApp(defaults, {
    babel,
    /* Any additional EmberApp configuration for your app goes here */
  });

  // Loads CodeSee, but only when in development mode
  if (isDevelopment) {
    app.import('node_modules/@codesee/tracker/build/codesee.web.hosted.js');
  }


  /* ... */


  return app.toTree();
};

Optional: configuration for large or high data applications

verbose: boolean

By default, CodeSee instruments your code in order to record the data value of every expression. This always results in the application running slower while recording, and in rare circumstances, it can cause a noticeable slow down even when not recording. If this slowdown is happening in your application, you can configure CodeSee to use verbose: false (or terse) mode. CodeSee will instrument your code less and capture less data (just the inputs and outputs of functions), but continue to provide the same tracing, side effects, and visualizations as always.

• Verbose mode (default): gets all of the runtime data but in some applications or recordings can cause a noticeable slowdown.
• Terse mode: captures less runtime data, but your recordings will be more performant. If you have a high data application, or are noticing slowdown, we recommend you try setting verbose: false.

"plugins": [
   ["@codesee/instrument", { "hosted": true, "verbose": false }],
   /* ... other dev plugins ... */
]

!!! note
This setting affects all developers working on the application. It requires a clean build.

Rebuild and run your app locally

Rebuild your app, wait a few seconds, and you should see the CodeSee button towards the top right of your screen. Congrats, you're ready to start using CodeSee!