Developer tools

Keyboard shortcut

• Open Studio command bar: On macOS press ⌘ + K, on Windows/Linux press Ctrl + K.
  • When you are inside Cockpit Studio, this shortcut opens the Studio command bar instead of the global command bar.
  • From there you can access all Studio‑specific developer commands.

Studio developer tools in Cockpit

Inside Studio, the developer tooling is split into:

• Developer commands in the command bar (quick actions, environment controls).
• Studio Debugger (a powerful but dangerous low‑level editor for your project document).

Developer commands (Studio command bar)

Open the command bar with ⌘ + K (macOS) / Ctrl + K (Windows/Linux), then type “Developer” to see all Studio‑specific commands:

• Developer: Show/Hide Debugging Info
  • Toggles the Studio Debugger on and off.
  • When enabled, the main Studio content is replaced with a debug view that lets you directly inspect and edit the underlying project document.
• Developer: Reload Client Context
  • Triggers a reload of the frontend context Studio receives from your host application.
  • Useful when you changed configuration or definitions in your host (sections, blocks, markets, etc.) and want Studio to re‑reflect them without a full browser reload.
• Developer: Reload Preview
  • Forces the Studio preview iframe to refresh using the current project state.
  • Handy when the preview got out of sync or you changed host code that affects rendering.
• Developer: Use Localhost / Use Remote Host
  • Toggles between using your local development host and the remote deployed host for the Studio preview.
  • After switching, the page reloads so Studio connects to the new target.
• Developer: Clear Orchestr Caches
  • Clears cached Orchestr responses for the current project.
  • Use this when you are debugging data issues and want to ensure you see fresh responses from your orchestr layer.

Studio Debugger

The Studio Debugger is a dedicated view that gives you low‑level access to the project document. It is intended only for advanced users and comes with a warning in the browser console and on screen, because you can easily create invalid states.

When the debugger is open, you can:

• Inspect the full project document
  • JSON view: See the raw rc project document as pretty‑printed JSON.
  • Explorer view: Browse the same document interactively using a tree/explorer UI.
• Create content structures
  • Add a new page: Create a page variant by choosing a page type from your project context and giving it a label.
  • Add a local section to a page: Select a specific page variant and location (header/body/footer), choose a section component from your definitions, and insert it at an index.
  • Add a block to a local section: Select a section and slot, then add one of the allowed block components at a given position.
• Reorganize content
  • Move or copy a section: Select a source section and a target location (page, variant, position) and either move the section there or duplicate it.
• Delete structures
  • Delete a page variant: Select a page variant and remove it entirely.
  • Delete a section: Select a section and remove it from the page.
• Edit props at a low level
  • Set static props on sections or blocks:
    • Choose whether you want to target a section or a specific block.
    • Provide a prop path (supports nested paths like config.theme and array access like items[itemId].label).
    • Choose a value type (string, number, boolean) and enter the value.
    • Optionally specify a locale or leave it empty to use the default locale.
    • The debugger applies the change directly to the underlying document.

While the debugger is open, the current project store is also assigned to window.project in the browser, so advanced users can experiment from the browser console. This is unsupported and should only be used if you fully understand the data model.

Orchestr Devtools (Nuxt integration)

In addition to the Studio‑specific developer tools, Laioutr ships Orchestr Devtools as a Nuxt module for introspecting Orchestr requests and responses:

• Nuxt Devtools integration
  • When you add @laioutr-core/orchestr-devtools to modules in your nuxt.config.ts, Nuxt Devtools shows an “Orchestr Devtools” custom tab.
  • This tab hosts a specialized request/response explorer for Orchestr.
• Request editor
  • A client‑side request editor lets you construct and send Orchestr queries from within Devtools.
  • You can quickly iterate on queries while keeping them isolated from your production code.
• Response discovery view
  • Orchestr responses are visualized using a DiscoveryJS‑powered explorer.
  • The view highlights:
    • Total chunks, query results, link collections and unique entities.
    • Linked entities through link collections (including counts and relationships).
    • Errors, including messages, stacks and error data where available.
  • This makes it much easier to understand complex orchestr responses and diagnose issues.

These tools are designed to complement each other: Studio developer tools focus on your page and component structure, while Orchestr Devtools focuses on the data and queries that power your frontend.