AI Profiled 50 Commits. I Just Described the Bug | Bernie Sumption, AG Grid

This talk explores the challenges of debugging rendering performance in web applications and how artificial intelligence can assist in this process. The speaker discusses the limitations of traditional performance profiling tools, specifically in Chrome, and illustrates how AI can automate tedious debugging tasks. They emphasize the importance of using Chrome's developer tools MCP to enhance AI capabilities. The session provides insights into various techniques, such as regression bisection, creating standalone reproductions, and synthetic stress tests, which can help developers identify and resolve performance issues methodically. The speaker encourages using AI to understand options for tackling performance problems, fostering both learning and efficiency in the debugging process.

I work for AG Grid, but I'm not going to be talking about the grid today. I'm going to be talking about a rabbit hole that I disappeared down for several months. Debugging rendering performance is really hard, and I wanted to try and figure out how to get AI to do that for me. And I've been trying to think about what what to cover because it's just a

7-minute talk here, and and what what I think I got time for I'm not going to be able to walk you through the whole process, but I want to inspire you with some things that you might not have realized were possible of ways that you can get AI to tackle this really problem for you. So, first of all, why rendering performance is really hard to debug is

basically as hard to debug because the information we get from the tools is not very good. So, we're going to record a performance profile in Chrome here. You click that little button, you interact with your application, and you stop it, and you'll get this thing called a performance flame graph. And the thing that I want to show you in this So, first of all, there's a little

video at the top that shows you your interaction. You can pick a bit you're interested in, zoom in on it, and what I want to show you is how good the information is you're getting from the JavaScript section. It shows you every single function in your application, exactly how long it spent. And this is why frameworks are so fast. They have this amazing information to optimize their

performance. When you're trying to get your rendering performance fast, you don't get any of that. It just tells you how long you spent in each section of the application. And so, what we've had to do historically, if we want to make our apps render fast, is basically to do science on our apps. So, first of all, you need to learn as much as you can about the

rendering process in CSS. Then you basically come up with hypotheses, like reasons why you think your app might be slow, and you test those by editing your app and recording another performance profile and looking at the differences. And it's basically doing science. It's painstaking, it's repetitive, it's time-consuming, and it can be really boring. And if there's one thing AI is good at, it's automating boring stuff. So,

there is a Chrome developer tools MCP, which if you install, it can do anything that you can do in that UI. It can click through your page, record performance traces, and analyze for them. And the most important thing that AI can do is to flatten the learning curve. So, it used to be that you needed to be an expert to get results. Now you can basically start

doing this and get AI to take you through the process and learn as you go. So, if there's only two things that you take away from this, I want it to be these two things. First of all, in order for all of this to work, you have to install the Chrome developer tools MCP. Without [snorts] that, Claude doesn't know what it doesn't know. It won't recommend that

you do this. It'll just be ignorant. All right, so you need to do that yourself. And then my big suggestion is ask the AI what your options are. Don't say fix this performance problem. Don't even say why is it slow. Say explain to me my options, and that's how you become an expert, and that's that's how you learn and build up a toolbox of techniques. So, I'm

going to show you a few of these techniques now. Again, we're just going to be going through them quite quickly, but the idea is to show you what's possible, and just remember anything in here, you can get AI to explain to you and then do it next week. So, the first is a regression bisection. So, a regression is a special case of a performance problem where you

have a version of your application that you know is good and a version is that you know is bad, and you can automatically find out exactly like you can ask Claude find the commit that introduced this issue, and it will do a thing called a git bisection for you. So, if you know 50 commits ago your app was good, now it has this problem, you can say

find the commit that introduced it, and it will check out a commit in the middle and test it. As in it will check out that source code, build your uh open it, start the dev server, open it in Chrome, navigate to the page, do the action that you told it was slow, record the performance profile, find out whether or not it's slow, really time-consuming stuff. And let's

say, okay, we figured out commit 25 was good, so it'll repeat the process again, and it'll go through it systematically through your whole commit history to find out the exact commit and you I've I've gone away from a lunch break where I had this doing it for an hour and I came back and it's like, "Hey, this commit that that's your problem." Uh So, another technique I

use all the time is a standalone reproduction. So, here's the page I showed you earlier that we recorded a performance trace from. If I was interested in like the resize performance of that grid, there's a whole bunch of other stuff up there that's just noise that's going to pollute the uh trace. So, you can tell Claude, "Hey, here's a page I'm interested in. Just make a standalone

version of that that just has the grid." And I asked it to do that and it built this. Now, if you're interested in the resize performance, you can make this little button here where you have a little button that this just resizes the grid five times. If you record a performance trace while you're doing that, you'll get really clean data. There's nothing else on the page. So,

again, a great way of investigating your performance problems. Uh there's a synthetic stress test, another technique I use all the time. the basic idea here is if you think something might be a little problem, create a crazy example that makes it a big problem so you can see it. So, we we were we received reports that uh the more elements there were on a page, the more

the longer our styles took to load. We couldn't see it happening normally. So, I just said, "Claude, build me a page that has 100,000 divs on it." And uh there's a little button here to show and hide the divs and a button to create a grid which is going to add our styles to the page. And using this, we were able to reproduce the issue cuz it's

a crazy example with way more divs than you'd normally have. So, this is basically just a like a tiny little um insight I'm trying to give you into the power of these tools. The idea is there is so much more that you can do. You can get Claude to go through and comment out every line in your in your CSS one by one until it finds out

finds the one that's causing a problem. You can ask it to go through your app proactively looking for performance problems, exercising every feature. Basically, the only limit is your imagination. And yeah, what I want to communicate to you you just need to ask AI to explain to you what's possible. I have this field I'm interested in, what techniques can I use? and it will explain all this

stuff to you. Oh, and also install the Chrome MCP, otherwise it doesn't know what it's doing. Thanks. >> [applause]