# Profiling of cells?

**URL:** <https://talk.observablehq.com/t/profiling-of-cells/935>\
**Category:** Uncategorized\
**Created:** [June 30, 2018, 3:27pm UTC](https://talk.observablehq.com/t/profiling-of-cells/935 "2018-06-30T15:27:22Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [June 30, 2018, 3:27pm UTC](https://talk.observablehq.com/t/profiling-of-cells/935/1 "2018-06-30T15:27:22Z")

</div>

I’m working on a program that does a few heavy computations and lots of rendering, and I want to track which cells are making it slow.

It would be super cool to be able to read the time spent by the system in each cell, and the number of times it’s been called / has yielded.

Currently what I’m doing is having a cell with:  
`instrumentation = ({})`

then in all other interesting cells,

```auto
const start = performance.now();

…computes result…

instrumentation.delaunay = performance.now() - start;

return result;

```

Any idea that could make this leaner? I also wonder if a variant of this could not be a native feature.

---

<div class="post-metadata">

**Author:** ![jashkenas](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jashkenas/32/1778_2.png) [@jashkenas](https://talk.observablehq.com/u/jashkenas)\
**Post date:** [July 2, 2018, 5:48pm UTC](https://talk.observablehq.com/t/profiling-of-cells/935/2 "2018-07-02T17:48:05Z")

</div>

That’s a very interesting suggestion.

My main instinct is that it’s going to be very hard for us to add anything more useful than what your browser inspector already provides. I assume that you’ve already tried your browser performance profiler on your notebook? Even running in the sub-frame, notebooks are pretty easy to profile, use the debugger, and so on.

For example, running it on my old earthquakes notebook shows me that I’m allocating a lot of JS objects that I shouldn’t be, if I want to avoid GC pauses:

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/1X/004a4383d29c17a0e23aa32654d615ff9ae9e4fc.png)

Is there a reason why the profiler wouldn’t tell you which cell is taking up most of the time in your notebook?

---

<div class="post-metadata">

**Author:** ![severo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/severo/32/786_2.png) [@severo](https://talk.observablehq.com/u/severo)\
**Post date:** [July 2, 2018, 6:11pm UTC](https://talk.observablehq.com/t/profiling-of-cells/935/3 "2018-07-02T18:11:38Z")

</div>

Is there a documentation of where to find the objects managed by Observable in the browser developpers tools? For example: how to print the value of a cell in the console?

---

<div class="post-metadata">

**Author:** ![jashkenas](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jashkenas/32/1778_2.png) [@jashkenas](https://talk.observablehq.com/u/jashkenas)\
**Post date:** [July 2, 2018, 6:24pm UTC](https://talk.observablehq.com/t/profiling-of-cells/935/4 "2018-07-02T18:24:29Z")

</div>

@severo —

The Observable runtime doesn’t expose the graph of cells as global variables, but you can certainly log the value of any cell to the console from within a notebook. Because of the reactive runtime, it will even re-log the cells value whenever it changes:

```auto
console.log(cell)

```

---

<div class="post-metadata">

**Author:** ![severo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/severo/32/786_2.png) [@severo](https://talk.observablehq.com/u/severo)\
**Post date:** [July 2, 2018, 6:32pm UTC](https://talk.observablehq.com/t/profiling-of-cells/935/5 "2018-07-02T18:32:52Z")

</div>

Thanks. I already use that way, but I wondered if it would be possible to inspect any of the variables directly from the console, without console.log().  
What is the reason to hide the variables?

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [July 3, 2018, 3:31pm UTC](https://talk.observablehq.com/t/profiling-of-cells/935/6 "2018-07-03T15:31:03Z")

</div>

Probably the reason is my own limitations with the profiler. On your earthquakes page, for example, I don’t know where to read the names of the functions involved (those that have this red-ear marker). Everything seems hidden in “observable workers”. I’ll dig more.

---

<div class="post-metadata">

**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [July 3, 2018, 9:18pm UTC](https://talk.observablehq.com/t/profiling-of-cells/935/7 "2018-07-03T21:18:14Z")

</div>

Jeremy’s picture might not be the easiest screencap to see what you are looking for. Here’s the Chrome dev tools timeline with a “bottom up” tree of one animation frame.

Part of the difficulty may be that you get a mix of anonymous functions and minified names, so it’s a bit hard to guess what the functions are actually about. If you loaded an unminified version of D3 it would probably be clearer

 ![56%20PM](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/1X/897a3bf4a6462a6f14aabd82a46b2bf4bc516467.png)

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [July 3, 2018, 9:30pm UTC](https://talk.observablehq.com/t/profiling-of-cells/935/8 "2018-07-03T21:30:32Z")

</div>

Ha! so it looks like something is missing from my Chrome devtools…

 ![07](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/1X/b5d4a07dc78de97098174356eb3706328cc2b8ab.png)

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [July 3, 2018, 9:36pm UTC](https://talk.observablehq.com/t/profiling-of-cells/935/9 "2018-07-03T21:36:31Z")

</div>

Firefox works, I’ll be fine 🙂

 ![08](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/1X/b6c578108ca9dd056e9904febaa415536e1bc2d8.png)

---

<div class="post-metadata">

**Author:** ![jashkenas](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jashkenas/32/1778_2.png) [@jashkenas](https://talk.observablehq.com/u/jashkenas)\
**Post date:** [July 3, 2018, 9:37pm UTC](https://talk.observablehq.com/t/profiling-of-cells/935/10 "2018-07-03T21:37:42Z")

</div>

@Fil — I think you’re right about this. I too have trouble peering inside of the inspector to see what’s going on within the “micro task” promise callbacks that serve as the bodies of your cells being evaluated.

For example, in Chrome, I can’t see within the “Run Microtasks” and “Animation Frame Fired” activity to see the names of the function being called, that take up most of the run time:

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/1X/d536410739afa858c9693ee1fc434c792223d2f7.png)

And in Firefox, although you can see the functions reported in the flame graph:

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/1X/22ccd3907dfc89f66c26c992d87df3e1801400f8.png)

… you can’t navigate to their source from there.

The call tree is a little more helpful at telling you where the expensive calls are coming from — but still fundamentally points back at an eval() in minified source code:

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/1X/737324fdfd8a223b7f0ed5448149f184c23d90a6.png)

We need to figure out a better approach…

---

<div class="post-metadata">

**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [July 3, 2018, 10:39pm UTC](https://talk.observablehq.com/t/profiling-of-cells/935/11 "2018-07-03T22:39:58Z")

</div>

Okay weird, now I can’t get back to my previous screenshot either.

Maybe Chrome updated itself between then and now, and the new version has a less useful profiler? I’m not quite sure what happened, but I don’t have time to figure it out right now…

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [July 5, 2018, 3:48pm UTC](https://talk.observablehq.com/t/profiling-of-cells/935/12 "2018-07-05T15:48:52Z")

</div>

For what it’s worth, a while back I wrote an FPS meter and toyed around with the various cell update methods: [https://beta.observablehq.com/d/8bea3f94176f0330](https://beta.observablehq.com/d/8bea3f94176f0330)

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [July 5, 2018, 4:06pm UTC](https://talk.observablehq.com/t/profiling-of-cells/935/13 "2018-07-05T16:06:09Z")

</div>

for fps I’m using exponential decay, makes me feel like an atomic scientist

> **[Image to GPU.js](https://observablehq.com/@fil/image-to-gpu)**
>
> An Observable notebook by Fil.

> **[FPS // Exponential decay](https://observablehq.com/d/c104502b8869c42e)**
>
> An Observable notebook by Fil.
