So if you want to get this error in your DevTools, what you need to do is you need to go to DevTool settings, experiments, scroll to, oh yeah, actually don't scroll, but find the checkbox that says timeline event initiators and check it. So you need to have it checked. And then if you have it checked, what you would see is for every timer, for every request animation frame, call for stuff like that, you would see this very convenient errors that point you to the place where the code was, when the timer was scheduled.
But well, in this case I have a timer and this timer takes, the timer handler takes 90 milliseconds. And most of the codes here also seems like redux, some redux stuff, some function call, redux, redux, redux, redux, redux patch, rect redux, rect redux, keep going really low, rect redux, some anonymous function, name, rect DOM development, name TSX. Ooh, is there some expensive selector? Confusing.
So here by the way, here you could observe another DevTools bug that you would probably experience when you're profiling stuff. So whenever you get, like whenever I see this weird unlabeled function call in the middle of a main chart, so it's like a thing, right? In the middle of a frame with like a bunch of empty space underneath it, what actually seems to be happening here there is that DevTools failed to capture the actual function calls that are happening during this whole time. I raised the buck about this, and fortunately nobody fixed yet, but that happens with the Rheq profiling from time to time, this is very unfortunate, I, this is where I'm going to deal with because it's hide what's happening in the trace. And the only way to deal with this that they have is switching to an older Chrome version, which my reference is just Chrome 90, I typically use Chrome 90, and trying to record trace there because older versions are not, like I guess function differently, so like they're not always affected by the change.
So, let's actually try doing that because look, there's one yellow function call, unlabeled, like dot any function name here, and there's another yellow function call unlabeled without any associations here with a bunch of empty space underneath and some like random references. And this is just super, super weird. Like, or not super, super weird, it's like I saw this a bunch of times, so I know this is just debtos bug. So let's try to profile that part correctly. And to do that, I'm going to search for Chromium old versions, and I'm going to find any link that let me download Chromium old versions, which I was, oh yeah, I typically use this link. It looks very shady, but it actually links to like the official common data storage, googleapps.com, so it's okay. Frederick suggests to probably use the Firefox Profiler, which is actually a good idea. I have never tried it. It should probably work, but I'm not going to risk it now. So I'm just going to look for a game mac irm90 something. No, give me the 90, please, give me the 90. Why can't I see the 90? All right, whatever, I'll take the 90. 92, 92, 92. Yeah, this one. Let's take that one. I'm going to download. Should download Chromium. Open the archive. Oh, wait, no, no, no, oh no. Hold on. Right, because it's the. You need to right-click and, you need to remove the, some attributes. Hold on, what's the X-utters? I know you can see my column line history. Luts Chrome. Chrome Mac. Oh, Chrome Mac five. You can see I've done, this is not my first time doing this. From your map. And now it should supposedly open, yes. So this is Mac OS thingy, it just happens if you did a lot of tabs that's like unsigned or something, like not the official publishing channel or whatever. Anyway.
Mm. Now, if I take my URL and go to my old Chromium and open the app here and then try to record this same interaction using the old Chromium. So open. Open the dropdown, click record, click text, oh no, I did not enable CPU throttling. Stop recording. Hold on, let me do it with CPU throttling so we get the same picture. Right, open, record. Stop recording and stop. So what I'll see is I'll get, again, the same three. Wait, oh. Hold on. Next display. Ah. That's what I can get for having an extra display. I would get the same, I would see the same three things that I saw in the previous recording, right? And here's my timer fire that I was looking into. Oh no, it has the same bug. Dang, I really need Chrome 90. But like, anyway, I'm not gonna spend more time on this. This is something I typically work around by getting Chrome 90, maybe it's too old, I can't load it from there. But you could really see that it's, like once you start seeing it more often, you would clearly see that this is a Chrome bug. Because if you compare the two recordings, compare over this function calls, this weird unlabeled function calls are happening. You would just see that they're happening in very different places. You would say that most of the code looks the same. Right, we have the CarseB, it's split into two functions here. But this is another DevTools bug, it was actually fixed. Sometimes DevTools in the past used to, they are still, are they still doing it? I don't know. But sometimes when you would have a long function, a long single function, DevTools would split that function into two separate legs, which is also confusing. But if you look at the code, you would see that it's pretty much the same code, CarseB, yada, yada, yada, like all the same, the same execution stack, right? Except that here, this weird unlabeled function calls happens right after the next function. And here, the functions just continue.