bi-agents/_bmad/wds/workflows/5-agentic-development/templates/components/DEV-MODE-GUIDE.md

Dev Mode - Usage Guide

Purpose: Easy feedback on prototypes by copying Object IDs to clipboard

---

🎯 What is Dev Mode?

Dev Mode is a built-in feature in all WDS prototypes that allows testers, stakeholders, and designers to easily reference specific UI elements when providing feedback.

Instead of saying "The button in the top right", you can say "Fix customer-sign-bankid" - precise and unambiguous!

---

🚀 How to Use

Step 1: Activate Dev Mode

Two ways:

1. Click the Dev Mode button (top-right corner)
2. Press Ctrl+E on your keyboard

The button will turn blue and say "Dev Mode: ON"

---

Step 2: Find the Element

• Hover over any element you want to reference
• You'll see a gray outline appear
• A tooltip shows the Object ID

Prototype still works normally! You can click buttons, fill forms, etc.

---

Step 3: Copy the Object ID

• Hold the Shift key (outline turns green)
• Click the element while holding Shift
• Object ID is copied! ✓

You'll see a green success message: "✓ Copied: [object-id]"

Important: Shift key is disabled when typing in form fields (input, textarea, etc.) so you can type capital letters and special characters normally!

---

Step 4: Paste in Feedback

Now paste the Object ID in your feedback:

Good feedback:

❌ Issue with `customer-sign-bankid`:
The button is disabled even after I check the consent checkbox.

💡 Suggestion for `sidebar-video`:
Make the video auto-play on mobile.

Developer knows EXACTLY which element you're talking about!

---

🎨 Visual Guide

State	Appearance	Action
Dev Mode OFF	Normal prototype	Click button or press Ctrl+E
Dev Mode ON (hovering)	Gray outline	Shows Object ID in tooltip
Shift held (hovering)	Green outline	Click to copy
After copying	Green flash	Object ID in clipboard

---

⌨️ Keyboard Shortcuts

• Ctrl+E: Toggle Dev Mode on/off
• Shift + Click: Copy Object ID (when dev mode is on)

---

💡 Tips

1. Activate once, then navigate through prototype normally
2. Hold Shift only when copying - prototype works without it
3. Type in fields normally - Shift is disabled when focused on input/textarea
4. Deactivate when done testing (Ctrl+E again)
5. Object IDs are permanent - always refer to the same element

---

📋 Example Workflow

Tester's Perspective:

1. Open prototype
2. Press Ctrl+E (Dev Mode on)
3. Test the prototype normally
4. Find a bug - hover over problem element
5. Hold Shift, click element
6. Paste Object ID into bug report: "customer-facility-startdate-group shows wrong default date"
7. Continue testing

Designer's Perspective:

Receives feedback:

Bug: `customer-facility-startdate-group` shows wrong default date

• Open prototype
• Press Ctrl+F in browser, search for customer-facility-startdate-group
• Find exact element in code
• Fix the date calculation
• Done! ✅

---

🔧 For Developers

When you receive Object IDs in feedback:

1. Open the HTML file
2. Search for the Object ID (Ctrl+F)
3. Element is either:
   • id="object-id" attribute
   • data-object-id="object-id" attribute
4. Fix the issue in that specific element

---

❓ FAQs

Q: Does Dev Mode affect the prototype?
A: No! The prototype works normally. You need to hold Shift to copy IDs.

Q: Can I use this on mobile?
A: Yes! The button appears on mobile too. Use a Bluetooth keyboard or on-screen Shift key.

Q: Can I type in form fields while Dev Mode is on?
A: Yes! Shift key is automatically disabled when you're typing in input fields or textareas, so you can type capital letters and special characters normally.

Q: What if an element doesn't have an ID?
A: Dev Mode walks up the tree to find the nearest parent with an ID.

Q: Can I copy multiple IDs?
A: Yes! Hold Shift, click first element, release Shift, hold again, click second element, etc.

Q: Is this only for bugs?
A: No! Use it for any feedback - bugs, suggestions, questions, clarifications.

---

🎓 Best Practices

For Testers:

• ✅ DO: Include Object ID in every piece of feedback
• ✅ DO: Test prototype normally, copy IDs when needed
• ✅ DO: Combine Object ID with description
• ❌ DON'T: Leave Dev Mode on during normal use

For Designers:

• ✅ DO: Ensure all interactive elements have Object IDs
• ✅ DO: Use descriptive, consistent naming
• ✅ DO: Include Dev Mode in all prototypes
• ❌ DON'T: Change Object IDs after sharing prototype

---

🚨 Troubleshooting

Problem: Dev Mode button not showing
Solution: Check that dev-mode.js and dev-mode.css are loaded

Problem: Clicking doesn't copy
Solution: Make sure you're holding Shift while clicking

Problem: Tooltip not showing
Solution: Element might not have an ID - check console logs

Problem: Can't turn off Dev Mode
Solution: Press Ctrl+E or refresh the page

---

Dev Mode makes feedback precise, fast, and frustration-free! 🎯