Inspector

View Source

Tidewave Web includes a default inspector integrated with our coding agent. The Inspector understands both server-side templates and client-side components.

Usage

You can find the inspector on the top right of your browser window. Once enabled, you can hover page elements:

Inspector example

Once you click an element, the chat box will show an element is currently inspected:

Update chat with inspected element

If you send a message, Tidewave will include precise information about that element, such as its location on the page, part of its contents, as well as the server-side templates and client components involved in rendering the particular element.

Framework overlay

By holding the Ctrl key (or Cmd key on macOS) while the Inspector is enabled. We will automatically show template/component metadata in a purple overlay. See the video below:

Clicking the element while the Ctrl key (or Cmd key on macOS) are pressed will open up the template/component in your configured editor.

Shortcuts

The inspector supports the following shortcuts:

  • Ctrl+Click or Cmd+Click (macOS): when hovering an element, you may Ctrl+Click it, and Tidewave will open up the element in your editor using your configured editor integration

  • Escape: disables the Inspector