# Debugging tips and tricks **URL:** \ **Category:** Uncategorized\ **Created:** [April 24, 2018, 2:31pm UTC](https://discuss.emberjs.com/t/debugging-tips-and-tricks/14623 "2018-04-24T14:31:11Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![rondale\_sc](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rondale_sc/32/13883_2.png) [@rondale\_sc](https://discuss.emberjs.com/u/rondale_sc)\ **Post date:** [April 24, 2018, 2:31pm UTC](https://discuss.emberjs.com/t/debugging-tips-and-tricks/14623/1 "2018-04-24T14:31:14Z")
I’ve learned many tips and tricks from the Ember.js Community slack that have been lost to other users over the years. I know firsthand how valuable knowing the right trick here or there is to unblocking your problem. So let’s hear them! Criteria and Guidelines: 1. It should be generic, though posting specifics to QUnit or Mocha seem fine. 2. It should be small and understandable. 3. It should provide sufficient detail to help others use and implement it. Even small things can help people, so don’t think you can’t share because it is “too basic” or “everybody knows that,” because someone out there might not and this could help them. And a little bit of attribution goes a long way. If you found this out from someone in the Slack channel, give them a shout out. You’re experience is valuable, so please feel free to share! 😄 I think it fair that I start. * * * **Get Settled State** Ember’s test harness wants to wait for async behavior to be completed before it advances the test. It does so by returning a `wait` promise from many of the test helpers (e.g. `visit`). The wait function is covered very well in this [blogpost](https://medium.com/square-corner-blog/the-ember-run-loop-and-asynchronous-testing-c03326181623). To simplify the `wait` helper returns a promise that resolves when the following things have completed: - router transition - scheduled run loops - waiters - jQuery.ajax And there is a neat way to kinda “cheat” to figure that out. Take for instance you have a `visit('/some-route')`, which does return a `wait` promise, and you `debugger;` immediately afterward. You can call the following to get easy access to the state of the `wait`: ```auto require('@ember/test-helpers').getSettledState() ``` Which will output something that looks like this: ![06%20AM](https://us1.discourse-cdn.com/flex019/uploads/emberjs_public/original/2X/7/76dfa203775322c9f4b7a8644e08786457d92fc0.png) Pretty excellent. You can use that information to narrow down where you should look if, for instance, your test was timing out. Shout out to @TBieniek for showing me this in the `#-testing` channel this afternoon. And inspiring me to create this thread. Happy (bug) hunting! ---
**Author:** ![rondale\_sc](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rondale_sc/32/13883_2.png) [@rondale\_sc](https://discuss.emberjs.com/u/rondale_sc)\ **Post date:** [April 24, 2018, 2:34pm UTC](https://discuss.emberjs.com/t/debugging-tips-and-tricks/14623/2 "2018-04-24T14:34:11Z")
Also, @chancancode had a great talk at EmberConf that covered many useful debugging tricks. Like black-boxing scripts and a fun walkthrough of how to use the Chrome devtools. Check that out here: [![]( " - YouTube") ](https://www.youtube.com/watch?v=bt9MRkf5Mus) ---
**Author:** ![rwjblue](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rwjblue/32/9411_2.png) [@rwjblue](https://discuss.emberjs.com/u/rwjblue)\ **Post date:** [April 25, 2018, 1:14pm UTC](https://discuss.emberjs.com/t/debugging-tips-and-tricks/14623/3 "2018-04-25T13:14:45Z")
> [@rondale\_sc](#): > > I’ve learned many tips and tricks from the Ember.js Community slack that have been lost to other users over the years. I know firsthand how valuable knowing the right trick here or there is to unblocking your problem. So let’s hear them! Awesome idea! > [@rondale\_sc](#): > > Get Settled State Just wanted to mention that the `@ember/test-helpers` [API documentation](https://github.com/emberjs/ember-test-helpers/blob/master/API.md) says this about `getSettledState`: > Check various settledness metrics, and return an object with the following properties: > > - `hasRunLoop` - Checks if a run-loop has been started. If it has, this will be `true` otherwise it will be `false`. > - `hasPendingTimers` - Checks if there are scheduled timers in the run-loop. These pending timers are primarily registered by `Ember.run.schedule`. If there are pending timers, this will be `true`, otherwise `false`. > - `hasPendingWaiters` - Checks if any registered test waiters are still pending (e.g. the waiter returns `true`). If there are pending waiters, this will be `true`, otherwise `false`. > - `hasPendingRequests` - Checks if there are pending AJAX requests (based on `ajaxSend` / `ajaxComplete` events triggered by `jQuery.ajax`). If there are pending requests, this will be `true`, otherwise `false`. > - `pendingRequestCount` - The count of pending AJAX requests. ---
**Author:** ![efx](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/efx/32/17920_2.png) [@efx](https://discuss.emberjs.com/u/efx)\ **Post date:** [April 27, 2018, 4:09pm UTC](https://discuss.emberjs.com/t/debugging-tips-and-tricks/14623/4 "2018-04-27T16:09:31Z")
2 simple tips come to mind: ### ember testing server tip From my experience working in a larger application, I find narrowing in on a single test or suite indispensible. I run something like `ember test --filter 'my test name' --launch nothing`. Why `--launch nothing`? I prefer opening the test server suite in my already open browser instead of ember-cli spawning a new browser for me. This starts the testing server so you can simply navigate to the testing URL. (probably localhost:7357) ### 3rd party library imports If you import 3rd party libraries using `app.import` in your `ember-cli-build.js`, it can be useful to include development sources instead of the already minified assets. For example, say you are using [the Highchart’s library](https://github.com/highcharts/highcharts-dist). In your application’s `ember-cli-build.js`, you can include it like so: ```js app.import('node_modules/highcharts/highcharts.js'); ``` This will include the already minified version. By editing the import path to include the uncompressed file `highcharts.src.js`, you get the developer friendly version of the file: ```js app.import('node_modules/highcharts/highcharts.src.js'); ``` This will vary by 3rd party library, so digging through their installed directory within `node_modules` shows you what files are available. ---
**Author:** ![rondale\_sc](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rondale_sc/32/13883_2.png) [@rondale\_sc](https://discuss.emberjs.com/u/rondale_sc)\ **Post date:** [April 27, 2018, 5:18pm UTC](https://discuss.emberjs.com/t/debugging-tips-and-tricks/14623/5 "2018-04-27T17:18:41Z")
This is great! I love the `ember test --filter --no-launch` command. In fact I have an alias that places the `filter` at the end like: `alias etsf='ember test --no-launch --filter= '` which let’s you invoke it with `etsf jonathan`. Great tip! ---
**Author:** ![gmartell](https://avatars.discourse-cdn.com/v4/letter/g/91b2a8/32.png) [@gmartell](https://discuss.emberjs.com/u/gmartell)\ **Post date:** [April 30, 2018, 4:27am UTC](https://discuss.emberjs.com/t/debugging-tips-and-tricks/14623/6 "2018-04-30T04:27:53Z")
Better yet, include them all: ``` app.import({ production: './node_modules/highcharts/highcharts.js', development: './node_modules/highcharts/highcharts.src..js', test: './node_modules/highcharts/highcharts.src..js' }); ``` Repeat the app.import if you have imports (i.e. css, etc.) [Managing Dependencies](https://guides.emberjs.com/v3.1.0/addons-and-dependencies/managing-dependencies/) ---
**Author:** ![efx](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/efx/32/17920_2.png) [@efx](https://discuss.emberjs.com/u/efx)\ **Post date:** [May 1, 2018, 8:52pm UTC](https://discuss.emberjs.com/t/debugging-tips-and-tricks/14623/7 "2018-05-01T20:52:37Z")
Grand, thanks for the update! I was only able to get this working by not specifying the relative path: ```nohighlight app.import({ production: 'node_modules/highcharts/highcharts.js', development: 'node_modules/highcharts/highcharts.src.js', test: 'node_modules/highcharts/highcharts.src.js' }); ``` ---
**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\ **Post date:** [May 2, 2018, 6:33pm UTC](https://discuss.emberjs.com/t/debugging-tips-and-tricks/14623/8 "2018-05-02T18:33:12Z")
FYI, I’ve heard @rwjblue say on multiple occasions that minified assets should never be imported this way, even into the production, because ember-cli will try to re-minify them, which can cause issues. Ideally there would be an option within the import call to say “skip minification”, but I don’t think that exists yet. ---
**Author:** ![efx](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/efx/32/17920_2.png) [@efx](https://discuss.emberjs.com/u/efx)\ **Post date:** [May 7, 2018, 2:20pm UTC](https://discuss.emberjs.com/t/debugging-tips-and-tricks/14623/9 "2018-05-07T14:20:59Z")
Huh, I did not know that. This sounds like a perfect opportunity to clarify and document the appropriate way to import assets on the primary ember-cli website. Could you try opening a PR with this information @Panman8201? ---
**Author:** ![backspace](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/backspace/32/9927_2.png) [@backspace](https://discuss.emberjs.com/u/backspace)\ **Post date:** [July 13, 2020, 9:09pm UTC](https://discuss.emberjs.com/t/debugging-tips-and-tricks/14623/10 "2020-07-13T21:09:00Z")
@chancancode’s debugging talk is now viewable here, in case anyone is coming along much later and encountering a missing video! 💞 [![](https://img.youtube.com/vi/MAAouySLtqA/maxresdefault.jpg "EmberConf 2018: Prying Open the Black Box by Godfrey Chan") ](https://www.youtube.com/watch?v=MAAouySLtqA)