Profile tasks in an Nx workspace with Chrome Devtools

If you're in an Nx workspace and want to figure out which tasks take the longest, you can prefix the NX_PROFILE environment variable to any command and have a JSON file produce which you can directly import into Chrome Devtools under the performance tab.

Share with a coworker

Transcript

[00:00] So if you want to have a look at the actual task graph of a given command here, we can just run the command, like run nx build, let's say I want to build here the admin application, and then suffix it just with the dash dash graph, which then opens up the browser and specifically the NX Graph here, selecting already the tasks and you can see the admin build here visualized. So basically running admin build means running the data access order build as well as the utils build and then finally running the actual build itself since this one depends on these two. If you now want to trace the performance of these tasks you can use the NX profile environment variable and let's just here create a profile JSON and then run NX build admin again. Now we want to probably skip the NX cache just to make sure it's being run without the caching to get some actual numbers. And now we can go to the Chrome DevTools, to the performance tab and then import this profile JSON.

[00:57] And so this now opens up the DevTools view and now you can have a look at the actual running times of these different tasks.