Site editor

Use Chrome's inspector to debug an addon

Learn how to hook up Chrome's dev tools to your addon's node scripts

Summary

Node has a flag that let's you use Chrome's dev tools to inspect your app's and addon's node scripts.

First, put a debugger where you want to inspect. Then use the following command to start your Ember server (or any other ember command):

node --inspect --debug-brk node_modules/ember-cli/bin/ember serve

This will print out a URL you can open in Chrome. Open it and you'll see the dev tools full-screen. Press play/pause to start script execution, and then you'll hit your debugger statement and be able to inspect your node script.

Transcript

Have you ever needed to debug an addon, but you're not sure how?

Today I want to show you how to use Chrome's dev tools, which you're probably already familiar with from your normal application development, to debug the node code in your addons and applications.

So, here I'm working on an addon, and I'm doing some work in the index.js file. Now, I'm kind of poking around in here, I may have copied some stuff from another addon that I saw, and I really just want to see what's going on.

Now, normally in our Ember code we're used to just throwing in a debugger, and using Chrome's dev tools to figure out what's going on. But if I save this and restart my server, nothing happens.

Instead what I need to do is start the Ember server using a special flag that node will recognize that will let us connect to the Chrome dev tools to see what's going on inside of our script.

Now — this is kind of a mouthful — we'll run

node --inspect --debug-brk node_modules/ember-cli/bin/ember serve

Now when we do this, we'll see that this is an experimental feature

Debugger listening on port 9229.
Warning: This is an experimental feature and could change at any time.
To start debugging, open the following URL in Chrome:
    chrome-devtools://devtools/remote/serve_file/@60cd6e859b9f557d2312f5bf532f6aec5f284980/inspector.html?experiments=true&v8only=true&ws=localhost:9229/e9d3a904-226b-402b-a917-2dcadf5f0ed0

but it tells us that we can open this URL in Chrome to start debugging. So we'll grab that, go back to Chrome, open a new tab, paste it in — and then we'll see that the dev tools open up.

Now this is the full complete dev tools that we're used to using in the side pane of a normal Chrome window. But here, they just kind of take up the full screen. And we'll see that it starts out paused on use strict, so what we're going to do is just hit Play here, and then our node code will continue to execute. And here we see right away, we hit the debugger right within our index.js file, and here we can see the code. This is an addon so, the this context here is this class, and it has our actual project which we can look at, we can see all the different configuration options. And so this can help us navigate around this file while we're trying to do some broccoli manipulations.

Now, this works for all node code, so you can do this as well if you needed to debug something in an application's ember-cli-build.js file. But basically this is the trick to get node to pause and let you use the debugger to inspect those variables just like you're used to doing in your normal development.

Now we can always click play here, and keep going, and we'll see that the server finishes its normal process, and then we can come back to our app and everything is working.

To shut this down, we'll come back and like normal we'll hit control+c, and we'll see that it tells us that we're waiting for the debugger to disconnect, so we'll just go over here to the debugger, close this, come back, and we'll see that the server has been shut down.

And that's it! Hopefully this should make it easier for you to see if your crazy Broccoli shenanigans are doing what you think they are.

👋 Hey there, Ember dev!

We hope you enjoyed this free video 🙂

If you like it and want to keep learning with us, we've written a free 6-lesson email course about the fundamental patterns of modern component design in Ember.

To get the first lesson now, enter your best email address below:

You can also check out more details about the course by clicking here.

Questions?

us, or ask in #media on Discord