How to define where function is slows down?

Question

I have report view where a bunch of controls located, there is an example code:

@Html.DevExpress().DropDownEdit(
settings =>{
settings.Name = "SomeList";
settings.Width = 100;
settings.SetDropDownWindowTemplateContent(c =>{
@Html.DevExpress().ListBox(
...
).BindList(ViewData["SomeList"]).Render();
some code...
).GetHtml()

When it render first time it works fine, but in business logic there is another drop down let's call it dropdown #2. When user select some values in dropdown#2 JS handle this action send request to the server to get actual value for first dropdown, then clear all rendered values from dropdown #1 and insert new items.

And problem in performance lies in how devexpress create new items on client side. From backend there is now 8000 new items can be added to dropdown #1 and it keep growing. And user must wait 5-10 seconds when browser render it. I tried to research what is happening when new item is creating but there are a lot of devexpress function which call another functions.

JS code look's like:

SomeList.BeginUpdate();
l = data.SomeList.length;
while (x < l) {
    SomeList.AddItem(data.SomeList[x].Name, data.SomeList[x].Id);
    x++;
}
SomeList.EndUpdate();

BeginUpdate and EndUpdate is devexpress functions that prohibbit browser render control while adding new items. Without this function it takes eternity to finish adding new items. I know start point of problem it is - item creating code SomeList.AddItem(...).

So my question: is there way to do something like console.trace(SomeList.AddItem(...)) and see full trace which will be executed on first code pass?

Also is there way to determine which function call take alot of time to execute?