Live debugging

When you build Product Fruits content and publish it, you might come across issues like hints are not displaying, a tour doesn't start or a checklist is not visible. We have a robust debugger tool that you can use on your live site. This tool will tell you the current state of your Product Fruits content.

Use the debugger directly in your application, outside of the Product Fruits editor.

How to start the debugger

A. Via Bookmark

If you are using bookmarks, you can drag&drop the following link into your bookmarks toolbar. The debugger can be then launched easily by clicking on the bookmark when your application is loaded in the particular tab.

Drag&drop this to the bookmarks toolbar: Launch Product Fruits Debugger

B. Via Browser Console

If you want to use Browser Console to launch our debugger, you can. The following steps are valid for the Chrome browser.

Step by step

1. Navigate to your application to a page where the Product Fruits code is installed.
    
2. Right-click somewhere on the page to display the system menu. Click on Inspect.
   Note - sometimes you can get a different menu if you right-click e.g. on the YouTube video or similar. Try to right-click somewhere else in your application.
   
    
3. A new panel or window show similar to this will appear
   
    
4. Copy and paste window.productFruits.services.attachDebugger() into the Console window:
   
   
   
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: