wb_sunny toggle dark mode help how to use
Visually compare two versions of a website with side-by-side matching, or overlay using opacity (onion), swipe and color blending modes.
diffsite makes it easy to compare two versions of a website. It uses two iframes, where the pages chosen via the first and second URL are loaded into, and allows to switch between comparison and overlay modes quickly to check for differences between both pages.
diffsite itself is able to work offline. Simply reload the page twice to store all diffsite assets, and you are good to go using the tool offline. This does not work for URLs loaded within the iframes, so make sure these are available offline, too (e.g. when testing locally on localhost/dev environment).
diffsite builds all comparison modes up on embedding the given URLs within iframes. This allows to include the full page provided within an adjustable view, and have all interactive elements in place to test differences in interactivity.
Unfortunately, this solution brings limitations in some situations and for some websites:
Basically, HTTP and HTTPS URLs are supported. You may also compare websites that are running locally, e.g. using a URL on localhost.
Between the URL inputs, there is a toggle labeled 'vs.' which can be used to detect AMP pages (or their canonical counterpart) when only one URL is provided. This fills in the second URL with the AMP/canonical counterpart and instantly loads it into the comparison view.
Whenever a valid URL is provided, the diffsite URL is updated, so you can share the diffsite tool URL with others and the URLs will be automatically prefilled and loaded into the comparison views.
Optionally, you can provide just one URL that either is or has an AMP page, and let diffsite auto-detect the AMP or canonical page for you. To trigger auto-detection, add a parameter &getamp=1 to the diffsite tool URL.
In viewport width dropdown, a device can be selected from which the screen width will be set for the iframes. A selection of reference devices used worldwide is provided to set the width of the iframes where the web pages are loaded into for comparison. The selection is based on to those devices available in Chrome DevTools by default.
Optionally, an above-the-fold line can be displayed as an indicator for the device's screen size (see advanced settings).
There are two modes available to display the two websites for comparison: side-by-side and overlay. The toggle allows quick switching between both modes, as both have their advantages for the comparison process.
Both pages are displayed next to each other in non-scrolling iframes. This way both pages can be scrolled simultaneously within the diffsite tool, and compared in a side-by-side view.
Since the URLs are embedded within iframes, both pages are fully interactive. For example, to compare an expandable mobile menu on both pages, expand the menu in side-by-side mode, and then switch to overlay mode to start the visual comparsion.
The overlay comparison stacks both iframes/pages and allows to choose between several overlay modes to support spotting differences between both pages.
In overlay comparison, all click/pointer events on the iframes are disabled, since the focus is on visual comparison, not interaction.
The overlay modes are only available when comparison mode is set to overlay.
In swipe mode, a vertical control handle (line) is shown that allows to set the portion displayed of each page by dragging it to left or right. The left side shows the part of the first URL, the right side shows the second URL. This allows to find differences by swiping the handle back and forth and observing visual differences.
Opacity is disabled for this overlay mode, as it does not make sense being applied when both pages are displayed side-by-side.
The blend overlay mode sets all pixels to black that are identical between the first and the second page, and highlights pixels that are different. This makes it easy to spot differences on pages that are almost identical.
By using the shift controls next to the comparison views, small pixel shifts can be easily detected in this mode – e.g. when elements are only a few pixels off.
Technically, it works by using a color filter on the second page in CSS (mix-blend-mode: difference). So there is unfortunately no way to display a percentage value that indicates how identical both pages are, using this implementation.
In onion mode, both pages are stacked and no filters or special controls are applied as in the other overlay modes. Use the opacity control to set transparency of the second page. In this mode, you can spot differences by playing around with the opacity and observing changes in the onion view.
Opacity controls the transparency for the second page in some of the overlay modes. It is automatically disabled when leaving overlay mode and restored with its previous value when re-entering a mode that supports opacity.
All properties set over advanced settings are stored locally in your browser, and will be restored when reloading diffsite.
This line shows the size of the device screen, as selected in viewport width dropdown. It refers to the term above-the-fold, which is used for the first visible part of newspapers when folded.
Be aware that this only refers to the full screen size of the device, and does not take other elements into account that may be on the screen: OS-specific controls, status bar and browser UI usually take up some of the space.
Using the shift controls on the left and right sides of the comparison area, you can move each of the pages up/down relative to the other page. This helps to compensate minimal pixel shifts in the layout, to be able to compare the rest of the page without being impacted by a pixel shift at the top of the page.
Using the arrows, the page can be shifted up and down in 1-pixel steps. The input inbetween the fields can be used to enter any positive or negative value to directly shift the page by that pixel distance.