Getting Started With CodeSee: Anatomy of a Data Flow
When you record an interaction with CodeSee you create a Data Flow. A data flow is a detailed view of every line of the code that ran in that interaction.
- - Backend: This function connects to a function on the backend.
- - Go To Execution: Allows you to go to where the function is executed.
- - Network Request: Indicates a network request
- - State Change: Indicates a React state change
The CodeSee Data Flow is laid out in code execution order meaning that it shows what order each function was called in regardless of what file the function is located in.
Code That Ran
The function name is located at the top left and the file path is located to the right of the function name
User Events on the Timeline
Every time you interact with your app via the mouse or keyboard, you can see what operations were triggered. Use the arrows to jump quickly to the next user interaction in the recording.
If you are overwhelmed by the information presented in the data flow or you want to remove some of the cruft in order to narrow down your focus, you can filter out functions by hovering over the ellipses and clicking Exclude All - Filter out all instances.
Callback Go to Execution
Understanding your code requires you to be able to follow the flow of execution from one function to the next and one file to the next. With CodeSee, you can instantly continue the flow of execution from a callback to where it’s executed with the click of a button. Using the Go to Execution menu that appears next to callback functions, you can jump to the points in the execution map where it was executed.
The column on the right shows all of the values of the variables, functions, objects etc when you made a recording.
If there is a loop, whether it’s an explicit loop like a for loop or an implicit loop like reduce, you can visualize each iteration of the loop and the values of the data on each loop’s iteration.
Add CodeSee.log() where you want more visibility, record your app, and your data flow will have links in the right side bar that jump you directly to where each CodeSee.log() occurred. It’s like having a print statement... everywhere!
Most dev tools are organized in files and folders. Normally to understand what’s going on we have to mentally map how functions call each other. With CodeSee when a function calls another function don’t need to do this mental gymnastics, to see a function that calls another function, you can dive in that function by clicking on the expand button to see more about the called function.
When you are diving in to a Data Flow, the current function that you are exploring sticks to the top so you always are aware of what line of code is part of which function. When that function is about to scroll off screen, we show you where the function ends. If you have nested functions, we show you the end of each function.
Sometimes your function does something that is beyond what that function was intended to do. For example, we write a function that takes X and doubles it, and it returns that doubling. Every time we call it with three, we’re going to get six, every time. But let’s imagine that whenever you call this function, something else happens like the number six getting written to a file or getting sent over the network, stored in a database, logged to disk or printed onto the screen. Those other events are called side effects. We think those side effects are really important in understanding how a program works so we highlight them in a special way. If a function has a side effect, it will be indicated as this function and to view that side effect, you can use the inspector simply by clicking view.
The inspector is like having x-ray vision into side effects. Right now we show you the behavior of Network Requests, the request and the response and data state changes, but we plan to show other side effects like database calls and dom changes soon.
myvar 3 + x myfunc("a", "b")
CodeSee shows you the statements in the left most column of the data flow, it shows you the expressions in the center column and the value of each of the expressions at the time the recording was made in the right most column.
When you hover over the expression in the center column it highlights the expression in the code in the left most column.
You can search not only your code, but also your runtime data: the value of every variable and expression. Use Search in the top bar of your data flow to easily find any data, whether it’s a buggy value, an error message, or a specific user’s ID. All results will show up, even if they’re deeply nested in the call stack.
React State Changes
You can see each React state change (the value both before and after the change) directly next to your code in a data flow. You can examine not just the change but all of the code that led up to it. When you see the state change icon, click on “View” to see React state change details in the side effects panel.