Getting started

Step-by-Step Introduction to WP Bug Detector

Guide: How to set up and use the WP Bug Detector Plugin

Video Instruction

Manual Guide

Plugin Installation & Activtion

Download the plugin

Download the wp-bug-detector.zip file from your account page.

Install & activate plugin

To install and activate the plugin, go to your WordPress Dashboard -> Plugins -> Add new. Select or drag and drop the wp-bug-detector.zip file into the upload field and click on upload. Once it is installed, click “activate”.

Setting up the plugin

Insert License Key

In your WordPress Dashboard, navigate to WP Bug Detector -> Settings -> General Settings. In the field “License Key” put in the License Key from your account page on wp-bug-detector.com.

Select URLs

Under WP Bug Detector -> Settings -> URLs select the URLs to be tested. The amount of URLs allowed is predefined by your WP Bug Detector package.

Do further settings

In the CSS selector you can chose to hide or ignore specific parts of your webpages.

Capture website & run a comparison

Capture Website version

Navigate to WP Bug Detector -> Comparison Grid and click on “Capture new website version”. This way, the current state of the preselected URLs will be captured and screenshots taken. This step might take a few minutes.

After the screenshots of the selected pages have been taken, you can take a detailed look by clicking on the mobile, tablet or desktop view of the respective screenshot. This will open up a popup. Here, you can switch between mobile, tablet or desktop version by clicking on the corresponding small icon above the screenshot. Using the arrows at the top right, you can switch between the pages.

Run a comparison

Once the state of the preselected URLs was taken according to step 5, a button “New Comparison” will appear. By clicking on it, the actual state are screenshotted and compared to the screenshots from step 5 (the website version indicated). This step might take a few minutes.

Check out the results

In the Comparison Grid, once the comparison is finished, the results can be seen. A small indicator at the left already indicates the total amount of bugs found for mobile, tablet and desktop view.

By clicking on the mobile, tablet or desktop view of the compared screenshots, a popup will appear. In the popup, the button “Difference” (in the image Nr. 1) will show the highlighted bugs. The button “Comparison” (Nr. 2) enables the slider to compare the screenshot of the URL of the captured website version (before) and the screenshot of the succeeding comparison (after). The buttons “before” (Nr. 3) and “after” (Nr.4) will show the corresponding screenshot. In the popup, you can switch between the mobile, tablet and desktop view by clicking on the small icons above the image. Using the small arrows at the top, you can switch to the next page comparison.

Filter needs review

The filter “Needs Review” filters all results where a bug was found and that need to be reviewed. Comparisons, where no differences were found, will thus be hidden.

Further Questions?

Check out our Help Center for further information.