Profiling a nodejs app from the chrome dev tools

Instructor: [00:01] In order to profile a Node.js app in Chrome DevTools, we need to start our server with the inspect flag. It's Node --inspect, and the file name. This starts Node.js in debug mode. The server exposes post API, and serves a client on port 3000.

[00:19] Let's head to the browser to view the client and query the server. We finally get results. Now I'll open the Node.js DevTool using the Node.js icon at the top of the DevTools. The Node.js tool opens, in this case, in the source tab. I'll minimize the folders panel, and head to the Profiler tab.

[00:46] Here, I simply start the recording, and go back to the UI to run the query. I ran one query, which took around a second to complete. Once it completes, we head back to the profiler tab to stop the recording.

[01:16] After the recording stops, you'll be directed to the results page. I'll maximize the DevTools window.

[01:25] The timeline at the top shows areas of activity during the recording. In this case, our two queries. We can select an area in the timeline to zoom in on a part that is interesting. I'll zoom in on the bigger part that means a code that took longer to run.

[01:42] Below the timeline, we can see the flame chart. It shows us the functions, the trend for a certain process. In this case, it is our post query. At the bottom of the flame charts, we can see an anonymous function. Below it, instances of the generate data function.

[02:01] Clicking one of the functions in the flame chart will lead us to the relevant line in the code. In this case, we see the post request and inside the generate data function. We can also see that every request will return 10 times the data of the former request. This is the cause for the time differences between the two requests in the recording.

[02:22] Another thing we can see is that the data sending to the client took quite a while. Besides the flame chart, we also have the bottom-up and top-down views. We're concerned by total-time and self-time of the functions. Total-time is the time this function and its children took to run. Self-time is the time it took the function itself to run. We can see generate data is the time consumer in our case.

[02:50] We can click the triangle near the functions to see the parent in the bottom-up view. It matches the flow in the flame chart. The top-bottom view shows us the same data, only this time, clicking the triangle will show us the children functions.

[03:09] We can start another recording and it will be listed in the CPU profiles list, so we can take multiple recordings and view them at our leisure.

[03:19] To summarize, we started our server with the inspect flag. We then opened the node JS DevTools from the regular Chrome dev tool. In the profiler tab, we started recording and made a request to the server. We saw how to analyze the results and see the flow of the app in the bottom-up, top-down and flame chart view.