Using the Dev Tools

Inspect and edit with precision when you need advanced control.

Dev Tools provides powerful capabilities for detailed editing and inspection of your application's structure and behavior. While Dazl's toolbars handle most tasks, Dev Tools gives you precision control when you need to make exact adjustments, debug issues, or understand implementation details.

Click the Dev Tools button (top-right) to access detailed editing and inspection features.

Elements panel

The Elements panel shows your page structure as a navigable tree, making it easy to select specific elements and understand how your application is organized:

What it shows:

• Hierarchical tree of all page elements
• How components are nested and organized
• Real-time sync with Stage selection

When to use:

• Selecting overlapping or hard-to-click elements
• Understanding complex layout structures
• Navigating deeply nested components
• Ensuring proper element relationships

How it works:

• Click any element in tree → selects it on Stage
• Select element on Stage → highlights it in tree
• Expand/collapse sections to explore structure

Style and Props tabs

Once you've selected an element, these tabs provide direct access to modify its visual appearance and inspect its functional behavior:

Style Tab

Control visual appearance - colors, sizes, spacing, typography, effects, and more.

Direct editing:

• Click any value to modify it
• See inherited styles and cascading
• Override specific properties
• Make precise adjustments

Editing workflow (Style only):

1. Select element (Stage or Elements panel)
2. Choose Style tab
3. Click values to edit directly
4. Changes appear immediately on Stage

Props Tab - Component controls:

Inspect functional behavior - component settings, data bindings, interactions.

• Settings unique to each component type
• Data connections and state management
• Runtime values are displayed in real time according to the application state

Console panel

The Console panel provides real-time feedback about your application's performance and any issues that need attention:

What you'll see:

• Errors (red) - Problems preventing functionality
• Warnings (yellow) - Potential issues to address
• Log (gray) - Technical details

When to use:

• Something isn't working as expected
• Understanding application behavior
• Debugging layout or interaction issues
• Monitoring performance during development

Troubleshooting workflow:

1. Notice issue in Preview mode
2. Check Console for error messages
3. Copy error message to share with AI
4. Ask AI: "I'm getting this error: [message]. Please fix it"

Code panel

The Code panel gives you access to how your visual application translates into actual code, helping you understand implementation and offering the option to manually customize or include anything.

Panel layout:

• File Browser (left) - All project files and folders
• File Viewer (right) - Content of the selected file

What you can do:

• View any project file (CSS, JavaScript, HTML, etc.)
• See how visual changes affect underlying code
• Review AI-generated implementation
• Understand project structure and organization
• Add or modify code manually by pasting ready made snippets or writing it by hand

Common workflows

Here are the most effective ways to use Dev Tools for different types of tasks you'll encounter while building applications:

Precision editing:

1. Use Elements panel to select hard-to-reach elements
2. Switch to Style tab or use the Editing Toolbar for exact property adjustments
3. Verify changes in Preview mode

Debugging problems:

1. Notice issue during testing
2. Check Console for error messages
3. Use Elements panel to locate problematic element
4. Fix the style visually or ask the AI to fix the issue (include relevant console messages)
5. Test fix in Preview mode

Understanding implementation:

1. Make visual changes on Stage
2. Use Elements panel to see the resulting code structure
3. Learn patterns from AI-generated solutions and ask for modifications accordingly

Dev Tools provides the precision control you need for professional results while maintaining Dazl's visual-first approach.