Diagnosing (debugging) tours

Sometimes your tour is not working properly inside your web application. To find the cause, you can use the Product Fruits debugger. This tool comes handy for analyzing what's happening under the hood.

How to start the debugger

These steps are valid for Chrome browser.

  1. Navigage to your application to a page where the Product Fruits code is installed.

  2. Press Ctrl+Shift+J on Windows or Command+Option+J to open Developer tools

  3. A new panel or window show similar to this will appear: devtools_console

  4. Copy and paste this line: window.productFruits.services.attachDebugger() - it should look something like this: devtools_console2

  5. Press Enter. You can now close Developers tools by clicking on the close button in the corner of the window or panel.

  6. Product Fruits Debugger should appear in your application: debugger

What I can find in the Product Fruits debugger

You should see all the published tours listed. You can click on each tour name to expand messages from the tour. For example:

debugger2

You can find useful messages that can give you a clue why something is not working as expected. Here are a few examples:

  • Waiting for the target element to be on the page. - your tour is running, but the target element is not found on the page. Product Fruits waits for it and will continue after the element will be added to the page.
  • URL doesn't match - stopping. - your tour is running, but the URL is different than the defined one on your step.