--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -60,17 +60,17 @@ const PORTRAIT_MODE_WIDTH_THRESHOLD = 70
 // the sidebar automatically switches from 'landscape/horizontal' to 'portrait/vertical'
 // mode.
 const SIDE_PORTAIT_MODE_WIDTH_THRESHOLD = 1000;
 
 const THREE_PANE_ENABLED_PREF = "devtools.inspector.three-pane-enabled";
 const THREE_PANE_ENABLED_SCALAR = "devtools.inspector.three_pane_enabled";
 const THREE_PANE_CHROME_ENABLED_PREF = "devtools.inspector.chrome.three-pane-enabled";
 const TELEMETRY_EYEDROPPER_OPENED = "devtools.toolbar.eyedropper.opened";
-const TRACK_CHANGES_ENABLED = "devtools.inspector.changes.enabled";
+const TRACK_CHANGES_PREF = "devtools.inspector.changes.enabled";
 
 /**
  * Represents an open instance of the Inspector for a tab.
  * The inspector controls the breadcrumbs, the markup view, and the sidebar
  * (computed view, rule view, font view and animation inspector).
  *
  * Events:
  * - ready
@@ -117,17 +117,17 @@ function Inspector(toolbox) {
   this._markupBox = this.panelDoc.getElementById("markup-box");
 
   // Map [panel id => panel instance]
   // Stores all the instances of sidebar panels like rule view, computed view, ...
   this._panels = new Map();
 
   this.reflowTracker = new ReflowTracker(this._target);
   this.styleChangeTracker = new InspectorStyleChangeTracker(this);
-  if (Services.prefs.getBoolPref(TRACK_CHANGES_ENABLED)) {
+  if (Services.prefs.getBoolPref(TRACK_CHANGES_PREF)) {
     this.changesManager = new ChangesManager(this);
   }
 
   // Store the URL of the target page prior to navigation in order to ensure
   // telemetry counts in the Grid Inspector are not double counted on reload.
   this.previousURL = this.target.url;
 
   this.nodeMenuTriggerInfo = null;
@@ -267,16 +267,24 @@ Inspector.prototype = {
     this.isReady = false;
 
     // Set the node front so that the markup and sidebar panels will have the selected
     // nodeFront ready when they're initialized.
     if (this._defaultNode) {
       this.selection.setNodeFront(this._defaultNode, { reason: "inspector-open" });
     }
 
+    if (Services.prefs.getBoolPref(TRACK_CHANGES_PREF)) {
+      // Get the Changes front, then call a method on it, which will instantiate
+      // the ChangesActor. We want the ChangesActor to be guaranteed available before
+      // the user makes any changes.
+      this.changesFront = this.toolbox.target.getFront("changes");
+      await this.changesFront.allChanges();
+    }
+
     // Setup the splitter before the sidebar is displayed so, we don't miss any events.
     this.setupSplitter();
 
     // We can display right panel with: tab bar, markup view and breadbrumb. Right after
     // the splitter set the right and left panel sizes, in order to avoid resizing it
     // during load of the inspector.
     this.panelDoc.getElementById("inspector-main-content").style.visibility = "visible";
 
@@ -951,17 +959,17 @@ Inspector.prototype = {
             this.fontinspector = new FontInspector(this, this.panelWin);
           }
 
           return this.fontinspector.provider;
         }
       },
       defaultTab == fontId);
 
-    if (Services.prefs.getBoolPref(TRACK_CHANGES_ENABLED)) {
+    if (Services.prefs.getBoolPref(TRACK_CHANGES_PREF)) {
       // Inject a lazy loaded react tab by exposing a fake React object
       // with a lazy defined Tab thanks to `panel` being a function
       const changesId = "changesview";
       const changesTitle = INSPECTOR_L10N.getStr("inspector.sidebar.changesViewTitle");
       this.sidebar.queueTab(
         changesId,
         changesTitle,
         {