DevTools slow and unhelpful #5703

So I tried out DevTools.

Acknowledgement up front: I realize that what I try to navigate in below are big files and stuff might be more fun with smaller files.

This is on top-of-tree on dart (92239e6b273e3a1223887a33cd55533839aeaf29).

This is my experience:

out/ReleaseX64/dart --enable-vm-service --pause_isolates_on_start pkg/front_end/tool/_fasta/compile.dart pkg/front_end/tool/_fasta/compile.dart

• Click the link to open devtools.
• Click "debugger" on the top tab.
• Now I want to add a breakpoint on finishFunction in body_builder.dart. I'd like to be able to just write that somewhere (I could in observatory) --- but I at least can't find that.
• So I'll navigate to it via ctrl+p (which, granted, is much nicer than if I wanted to navigate to stuff in observatory).
• It's slow to open the file though, and there's no indication that it's doing anything. It took more than 6.5 seconds for it to load.
• Now I want to go to the finishFunction method as I try to hit "ctrl+f" to search. Seemingly nothing happens, but then ~6 seconds later a search thing shows up. Clicking the "x" to close the search thing again takes another ~6 seconds. Bringing it back again takes yet another ~6 seconds. (For the fun of it I recorded in chromes devtools, and indeed there's a call taking 6.65 seconds, going down a long chain of stuff seemingly ending in a function b2A taking 6.47 seconds before breaking up into smaller calls).
• Anyways, I paste finishFunction into the search box and it quickly goes to the first instance. It's a comment and not what I'm looking for so I hit thinking it would take me to the next instance. It does not. I don't know if there's any shortcut I can press, but I haven't found it --- I have to use my mouse to hit the (small) "down" arrow thing. I find the function and set a breakpoint.
• I click the "resume" button.
• Once it gets there I'd like to start stepping. I have no indication of keyboard shortcuts for this so I use my mouse.
• Stepping in the same file seems to be somewhat responsive, but stepping into another file is slow. Again (although I didn't time it this time) ~6 seconds.
• Stepping out of the function (and back into body_builder.dart) first took maybe a second, but it was at the top of the file, then after 6+ seconds it jumped down to where it actually was supposed to be, then spend some more seconds where scrolling with the mouse did nothing. At this point some of the line it's in also looks weird: final SourceFunctionBuilder builder looks fuzzy --- see screenshot below.
• Stepping into another file again, this time timing it via chromes devtools profiler, takes a long time. Chrome reports a task taking 6.41 seconds.
• Stepping out seemingly consists of two tasks each taking ~500 ms, then one taking 6.43 seconds, one more taking ~375 ms, and another taking 6.76 seconds. This time I scrolled back and forth a bit while waiting for it to start responding, seemingly having the effect that it stayed at the top of the file instead of showing the part of the file where the debugger is.
• Trying to click on the previous frame (in another file) takes a long time, e.g. according to chrome one task taking 7.1 seconds (and others taking 600+ ms each). Once it's done it shows the top of the file, not line 1122 where the call was. I have to click the same frame again to actually go there.
• Clicking back to the top frame does the same thing, but with a twist: After maybe half a second it jumps to the top of the current file, but where the top line showing what file it is in claiming to be in the file I clicked on. Then, several seconds later, the content was updated to the right content. Again it stayed at the top of the file.
• Trying to reload the page is slow and wrong: First (after waiting patiently) it shows the content of the body_builder.dart file, claiming it's the compile.dart file (the entry point); then it switches, claiming that it shows body_builder.dart, but actually showing the content of compile.dart.
• Now I want to try to evaluate something in the console. Where my debugger currently is it's about to run variable.type, so I'll start typing that. There's autocompletion, that's nice. I type vari and hit enter to accept variable. I type .ty and hit enter to accept .type. It replaces everything so it now just says type which, hitting enter to evaluate, obviously does not work. I try again, it's the same thing. I ctrl+a to select all (i.e. type) and start typing vari again. This type it suggests type as the autocompletion. I write variable. myself and autocompletion starts working again, suggesting, eventually, type, but both enter and tab to accept it still results in the whole thing disappearing. Trying again where I record it, it doesn't suggest the variable initially though. Either way recording attached.

Attachments:
Fuzzy "final SourceFunctionBuilder builder":

Autocomplete not working right:
autocomplete.webm

All in all I didn't have a great time. Can we please do something about this?