QA Tools: Breakpoint Difference Analyzer

With complex Boxes that have mobile breakpoints, it is easy to accidentally let breakpoints get out of sync with the top-level desktop versions. When you make changes to a top-level box, some but not all of those changes will automatically propagate to the breakpoint. For example, if you add a Custom Field to a form, that will not propagate to breakpoints: Digioh doesn’t know if you really want it to also appear on the mobile version.

Usually, if there are differences between breakpoints, that will cause problems for user experience, data integration, or both. We’ve developed a QA Tool in the form of an app, #73: Breakpoint Difference Analyzer. Install it from the profile menu top right, Custom JS (Apps). This app automatically displays all discrepancies that it finds between breakpoints, and activates only in Box Preview mode (users will never see this for live boxes).

See the example output below. Note that this is an extreme example, hopefully your boxes won’t have so many differences!

For interpreting App output, the first word refers to the specific field, button, or element. A prefix like “ep1” means Extra Page 1, “thx” means the thankyou page, and no prefix means the main page. So for example, ep1_custom1 refers to the Custom 1 form field on Extra Page 1.

This app is “Always On”. If you want to disable it or reduce the amount of ouput, you can set box-level metadata commands like this:

  • breakpoint_diff = false : disables the entire app
  • breakpoint_diff_css = false : disables just the CSS comparison
  • breakpoint_diff_content = false : disables content comparison (e.g. button text; perhaps most useful for comparison to other boxes)

Questions? Comments? Let us know at contact@digioh.com