Review changes before you save

Saving variation code on a running experiment republishes it, so whatever you save goes to visitors. Review changes shows you exactly what you are about to save, line by line, next to the code that is saved now. You can keep editing in the comparison and save straight from it.

​

Where you can compare code

This page covers the first three. All of them use the same comparison view.

​

Review changes in the inline editor

​

What the comparison shows

• One file at a time. You see the open file, variation.js or variation.css. Switch with the tabs in the header. If you turn review on while the open file is unchanged and the other file has changes, it opens on the file that changed.
• The left side is always read only. It is the saved code. The right side is your draft and you can keep typing in it. It is the same draft the editor holds, so leaving the comparison keeps every edit.
• Every character counts. A change that only adds or removes whitespace shows as a change, because Save sends it.
• The layout follows the width. At 900 pixels wide or more the two versions sit side by side. Narrower than that, the comparison switches to a single inline view.
• Your editor settings apply. The theme, font size, word wrap and ligatures you set with the cog icon apply to the comparison too.

​

Library changes

Libraries you attach from Libraries are part of what Save sends, so a library change counts as an unsaved change even when the code is untouched. A comparison of code cannot show it, so one line under the header names it: When only the libraries changed, both sides of the comparison show the same code and the line carries the difference. See Dev libraries for what a library key is. A comparison of two versions in Code history shows the same line when their libraries differ, read from the older version to the newer one.

​

Save from the comparison

Saving works the same from the comparison as from the editor. Click Save in the header, or press Ctrl+S (Cmd+S) with the cursor in either side. The request is exactly the one the editor would send.

• Your code is formatted on save. Save runs Prettier over both files before sending them, the same as a save from the editor. A file that does not parse is sent as it is. So the stored code can differ in layout from what you reviewed. Code history always shows what was actually stored.
• A syntax error blocks the save. A red strip names the file, for example variation.js has a syntax error. Fix it before saving.
• Data may need a decision. On an experiment that has collected data, saving changed code first asks whether to reset or keep that data. The comparison stays open while you decide. See Editing a running test.
• Success closes the comparison. You see Saved and republished on a running experiment, or Code saved otherwise. The comparison closes and you are back in the editor, which stays open with your code.

​

Why Review changes is unavailable

The button is disabled, with the tooltip No unsaved changes, whenever your draft matches the saved code: the JavaScript, the CSS and the library keys are all the same. That includes the moment right after a save. To see what your last save changed, open History on the variation and click Previous save. See quick picks.

​

Leave the comparison

Each of these keeps your draft:

• Click Back to editor in the editor header. It is never disabled.
• Click the close button (×) in the comparison’s own header, next to the Esc to close hint. Its tooltip reads Close comparison (Esc).
• Press Esc with the cursor in the comparison.

Esc goes to the code editor’s own popups first. If the find widget, the suggestion list, parameter hints, the rename box, the command palette (F1), Go to line (Ctrl+G), a peek view or a similar popup is open, Esc closes that. If text is selected or you have extra cursors, Esc clears them. Press Esc again to close the comparison. One exception: when a hover tooltip is showing, a single Esc hides it and also closes the comparison.

​

Full screen

Full screen in the editor header opens the editor over the page. Review changes works the same way there, and the library line stays under the header. Esc with the cursor in the comparison closes the comparison and keeps you in full screen. Esc outside the comparison leaves full screen, as the button’s tooltip, Exit full screen (Esc), says.

​

When the experiment is locked

Once a running experiment has 1,000 visitors since its last reset, its variation code locks. Edit is no longer offered and the Variations card shows Locked. See editor freezes on running tests. If the lock takes effect while you already have the editor open:

• The editor and the comparison both turn read only.
• Save is disabled, with the tooltip Code is read only.
• Libraries is hidden.
• Ctrl+S shows the lock message instead of saving.

You can still open Review changes to read what you had changed. Pause the experiment to edit and save again.

​

Compare with saved in the experiment editor

When you edit an existing experiment, the code editor in the Variations section offers Compare with saved in place of Review changes. It opens the same comparison, Saved on the left and Your changes on the right, and the right side stays editable. It differs from Review changes in a few ways:

• Only for saved variations. It is not offered while you create an experiment, or on a variation you added and have not saved yet.
• JavaScript and CSS only. Library changes do not make it available and are not listed.
• No save from inside it. The experiment editor saves the whole experiment with its own button, Save changes, or Save & republish on a running experiment. Ctrl+S inside the comparison does not save.
• Done closes it. Done closes the code editor and the comparison, and reopening starts on the editor. After the experiment saves, an open comparison closes, since there is nothing left to compare.

On a locked experiment the variation shows View code, and the editor and the comparison are both read only.

​

Compare a recovered draft

Autosave keeps the code you are typing in this browser, so a reload or a crash does not lose it. See Autosave and drafts. When you open the editor and such a draft is waiting, the recovery banner above the editor offers Recover (Recover anyway when the saved code has changed since), Discard, and Compare with saved. Compare with saved opens a read only comparison inside the banner:

• Saved on the left, Recovered draft on the right.
• variation.js and variation.css switch the file. If only the CSS differs, it opens on variation.css.
• When the draft changed the variation’s libraries, for example after you restored an older version, a line names the library difference.

Comparing never applies the draft. Recover and Discard stay the only ways to settle it. Close the comparison with Hide comparison, its close button or Esc.

​

If the comparison does not load

The comparison loads the first time you open one. If it cannot load, which usually means the dashboard was updated while your tab was open, the comparison area reads Couldn’t show the comparison. Save your changes, then reload the page. with a Retry button. Your draft and the rest of the page are untouched. A read only comparison reads Couldn’t show the comparison. Reload the page to try again.

​

Keyboard shortcuts

The full list, for review and for History, is in the Code history reference.

​

Related