Test Mode Inspector Feature Guide

Introduction

We are excited to introduce the Test Mode Inspector, a powerful new feature that enhances your development experience by providing a detailed inspection of data attributes, errors, and warnings directly within your test mode site's. This guide will walk you through the functionality of the Test Mode Inspector and how it can streamline your workflow.

Accessing the Test Mode Inspector

The Test Mode Inspector can be accessed by clicking on the "Test Mode" badge, which appears at the bottom of your website when in test mode. This button is your gateway to a comprehensive diagnostic panel that lists all the unique data attributes, alongside any errors and warnings detected on your page. To close the Inspector Panel click on the "Hide Inspector" badge.

Using the Inspector Panel

Upon clicking the "Test Mode" button, a side panel will appear, containing the following inspector items:

• Found Data Attributes - Green
• Found Warnings & Errors - Yellow and Red
• X-ray View: At the top right of the side panel, you'll find an X-ray toggle. When enabled, it highlights the elements associated with the listed data attributes, errors, and warnings on the page, enabling you to visually track their locations.

Understanding Errors and Warnings

Errors and warnings are shown for individual items on the page, making it easier for you to pinpoint specific issues. The Inspector categorizes issues to help you prioritize fixes and optimizations:

• Errors: These are critical issues that may affect the functionality of your site or app and should be addressed immediately.
• Warnings: These are suggestions for improvements or potential issues that might not be critical but could improve the overall performance or user experience.

Test Mode Inspector Visibility

It's important to note that the Test Mode Inspector is only visible when your site is in test mode. It will not appear on live apps or websites to ensure a clean user experience for your visitors. Additionally, if you find that the Inspector sidebar is obscuring content on your page, you can click the "Switch Sides" button to toggle the sidebar to the other side of your screen. This ensures that you can always access and view the entirety of your content without interference from the Inspector panel.

Conclusion

The Test Mode Inspector is designed to make your testing and development process more efficient by providing immediate, on-page diagnostics. By integrating this feature into your workflow, you can ensure a higher quality product with a smoother path to deployment. If you have any ideas on how to make this Test Mode Inspector better please let us know!