I have actually been using exactly this approach to investigating bugs for some time now. I started with ctrl+alt+clicking in vscode to open 10's of tabs, then taking a screenshot and drawing lines, but the large amount of tabs caused chaos, and then I suddenly noticed I need another tab and i would have to somehow merge the 2 images.
To fix this, I added a digital whiteboard to my workflow, and this is phenomenal. You can use any digital whiteboard, such as https://www.figma.com/figjam/, https://excalidraw.com/, https://miro.com/, or https://obsidian.md/canvas. My workflow generally goes like:
1. Copy screenshot of code in vscode
2. Paste into digital whiteboard
3. Go back to vscode and ctrl+click on symbol to see references, and then find the one i need.
4. Copy/paste that code into the digital whiteboard.
5. Add arrows to symbol in the code to connect 2 separate definitions/references/usages.
Having a tool such as territory.dev to replace the digital whiteboard would be really nice, as the copy/pasting and manual linking using arrows in the images is pretty time consuming, and the text in territory.dev is still copyable and searchable. In a canvas, i would have to use snipping tool on windows to extract specific text from the images again.
However, there are a lot of features I am missing from a tool like territory.dev, which makes the whiteboard superior:
* The most important feature that i would need for using a code exploration whiteboard, is that it works with the ui from a different application. I frequently add screenshots from the most diverse of places to the canvas, and link it to specific methods in my code, such as:
* Message or specific parts of the UI of the application i am working on
* Private messegas with other people
* Github issues/comments in our task management system
* Chrome console logs
* Chrome network requests
* Terminal output
* Database viewer output or sql queries
* Error messages/stack traces
* JSON data returned from requests
* CSV data returned from requests
This works well with a generic digital whiteboard, as i can just screenshot the other UI and then annotate it with a pencil, and then draw lines to what i'm working on.
* The canvas workflow works with all programming languages that my IDE supports. This means that for all programming languages, i get:
* Correct syntax highlight
* Correct goto definitions (by just using vscode, and then moving it to the canvas)
* Familiar theme
* Additional Inline actions and info provided by other extensions (count of references, inline errors, parameter hints, showing of translation string, etc)
You could make this work in a general way by instead of integrating with each language, you integrate with the LSP protocol, and then you can just plug in every LSP implementations for each programming language. In theory that would give you goto definitions for all languages.
* I often see myself "skipping" a definition if i am intimately familiar with the code i'm working with. If i know that an implementation on a high level runs a method to mutate an object, then the other method might be 10 hops away, but all of the methods in-between may not be relevant for the current bug i am investigating.
* In the same vein as above, I might sometimes follow a value through multiple functions, and in that case i would like to connect a mutation which is applied to my value directly to the usage of the value, even if it might not reference the same symbol.
* Sometimes i want to connect 2 things which don't have a symbolic reference between them, such as a magic string which is used multiple places, and afaik that isn't possible in your
* You can trace a "path" a variable takes through your system by connecting function calls to parameters, and then to usages of parameters or when they are passed into the next method. This makes trailing your steps when you lose your train of thought a lot easier.
* You have the usual features of digital whiteboards, such as adding comments, stickies, highlighting and other things.
I am really enthusiastic about this kind of working, and it really helps when you are 15+ layers deep into a problem (which happens relatively often) and you lose your train of thought.
I could walk someoene else who knows the code through one of my canvases, but I wouldn't share these whiteboards with a teammate though, as they are quite chaotic and are directly linked with the way i'm thinking.
We will be adding free notes soon. Arbitrary links and function calls is something I've been thinking about. We might do it if we find a good way. Yes, a completely free drawing board would be the extreme edge of the spectrum.
Having a tool such as territory.dev to replace the digital whiteboard would be really nice, as the copy/pasting and manual linking using arrows in the images is pretty time consuming, and the text in territory.dev is still copyable and searchable. In a canvas, i would have to use snipping tool on windows to extract specific text from the images again.
However, there are a lot of features I am missing from a tool like territory.dev, which makes the whiteboard superior:
* The most important feature that i would need for using a code exploration whiteboard, is that it works with the ui from a different application. I frequently add screenshots from the most diverse of places to the canvas, and link it to specific methods in my code, such as: * Message or specific parts of the UI of the application i am working on * Private messegas with other people * Github issues/comments in our task management system * Chrome console logs * Chrome network requests * Terminal output * Database viewer output or sql queries * Error messages/stack traces * JSON data returned from requests * CSV data returned from requests
This works well with a generic digital whiteboard, as i can just screenshot the other UI and then annotate it with a pencil, and then draw lines to what i'm working on.
* The canvas workflow works with all programming languages that my IDE supports. This means that for all programming languages, i get: * Correct syntax highlight * Correct goto definitions (by just using vscode, and then moving it to the canvas) * Familiar theme * Additional Inline actions and info provided by other extensions (count of references, inline errors, parameter hints, showing of translation string, etc)
You could make this work in a general way by instead of integrating with each language, you integrate with the LSP protocol, and then you can just plug in every LSP implementations for each programming language. In theory that would give you goto definitions for all languages.
* I often see myself "skipping" a definition if i am intimately familiar with the code i'm working with. If i know that an implementation on a high level runs a method to mutate an object, then the other method might be 10 hops away, but all of the methods in-between may not be relevant for the current bug i am investigating. * In the same vein as above, I might sometimes follow a value through multiple functions, and in that case i would like to connect a mutation which is applied to my value directly to the usage of the value, even if it might not reference the same symbol.
* Sometimes i want to connect 2 things which don't have a symbolic reference between them, such as a magic string which is used multiple places, and afaik that isn't possible in your
* You can trace a "path" a variable takes through your system by connecting function calls to parameters, and then to usages of parameters or when they are passed into the next method. This makes trailing your steps when you lose your train of thought a lot easier.
* You have the usual features of digital whiteboards, such as adding comments, stickies, highlighting and other things.
I am really enthusiastic about this kind of working, and it really helps when you are 15+ layers deep into a problem (which happens relatively often) and you lose your train of thought. I could walk someoene else who knows the code through one of my canvases, but I wouldn't share these whiteboards with a teammate though, as they are quite chaotic and are directly linked with the way i'm thinking.