The running application
Most of Tracemoor works on the source code and its index. This section covers the functions that work with the program while it runs: a terminal to start and test it, and inspectors that connect to a running web page or VS Code extension.
From what you see to the code
Static analysis starts at the code. The runtime functions start at the running program and lead back to the code. Example: in the running Weatherreport web page you pick the search field. The web inspector returns the element, its CSS selector, its text and the name of the React component that rendered it. Send to Chat attaches this record to the chat, and the AI looks up the source file in the label index.
flowchart LR
APP["Running program"] -->|"inspector, screenshot"| REC["Element, call stack, log"]
REC -->|"label index, call graph"| SRC["Source code"]
The inspectors capture single events: one picked element, one click, one recording period. They do not step through code and do not record every call. For breakpoints and stepping, use the debugger of your IDE.
Functions in this section
| Topic | Use |
|---|---|
| Terminal | Shell tabs in the bottom panel, split panes, sending output to the AI. |
| Run and build | Start and build the project from the toolbar, with commands from run.toml and build.toml. |
| Web inspector | Connect to Chrome, pick an element, trace a click, record network and console events. |
| VS Code inspector | Start VS Code with the project's extension, list and trigger commands, capture console output. |
Two related functions are described in other sections:
- A screenshot of the running program can be attached to a question. See Ask with a screenshot and Find the code behind a label.
- The AI can look at and operate the window of a running program on macOS. See Let the AI operate the app.
Which inspector opens
Analysis › Connect Browser… and the connect button in the toolbar open the inspector that fits the project. The button shows a plug, for an extension project a bug with a play symbol. For a project that Tracemoor detects as a VS Code extension, they open the VS Code inspector, otherwise the web inspector. The project type is shown in the Details panel under Project.
A project that is both a web front end and a VS Code extension asks which one to inspect: VS Code Extension or Web Frontend. Analysis › Inspect VS Code Extension… opens the VS Code inspector directly.