--- a/devtools/client/webconsole/store.js
+++ b/devtools/client/webconsole/store.js
@@ -17,16 +17,18 @@ const {
 const {
   MESSAGE_OPEN,
   MESSAGES_ADD,
   MESSAGES_CLEAR,
   PRIVATE_MESSAGES_CLEAR,
   REMOVED_ACTORS_CLEAR,
   NETWORK_MESSAGE_UPDATE,
   PREFS,
+  INITIALIZE,
+  FILTER_TOGGLE,
 } = require("devtools/client/webconsole/constants");
 const { reducers } = require("./reducers/index");
 const {
   getMessage,
   getAllMessagesUiById,
 } = require("devtools/client/webconsole/selectors/messages");
 const DataProvider = require("devtools/client/netmonitor/src/connector/firefox-data-provider");
 const {
@@ -72,16 +74,17 @@ function configureStore(hud, options = {
     createRootReducer(),
     initialState,
     compose(
       applyMiddleware(thunk.bind(null, {prefsService})),
       enableActorReleaser(hud),
       enableBatching(),
       enableNetProvider(hud),
       enableMessagesCacheClearing(hud),
+      ensureCSSErrorReportingEnabled(hud),
     )
   );
 }
 
 function thunk(options = {}, { dispatch, getState }) {
   return next => action => {
     return (typeof action === "function")
       ? action(dispatch, getState, options)
@@ -161,16 +164,44 @@ function enableActorReleaser(hud) {
       return state;
     }
 
     return next(releaseActorsEnhancer, initialState, enhancer);
   };
 }
 
 /**
+ * This is responsible for ensuring that error reporting is enabled if the CSS
+ * filter is toggled on.
+ */
+function ensureCSSErrorReportingEnabled(hud) {
+  return next => (reducer, initialState, enhancer) => {
+    function ensureErrorReportingEnhancer(state, action) {
+      let proxy = hud ? hud.proxy : null;
+      if (!proxy) {
+        return reducer(state, action);
+      }
+
+      state = reducer(state, action);
+      if (!state.filters.css) {
+        return state;
+      }
+
+      let cssFilterToggled =
+        action.type == FILTER_TOGGLE && action.filter == "css";
+      if (cssFilterToggled || action.type == INITIALIZE) {
+        proxy.target.activeTab.ensureCSSErrorReportingEnabled();
+      }
+      return state;
+    }
+    return next(ensureErrorReportingEnhancer, initialState, enhancer);
+  };
+}
+
+/**
  * This enhancer is responsible for fetching HTTP details data
  * collected by the backend. The fetch happens on-demand
  * when the user expands network log in order to inspect it.
  *
  * This way we don't slow down the Console logging by fetching.
  * unnecessary data over RDP.
  */
 function enableNetProvider(hud) {

--- a/devtools/server/actors/tab.js
+++ b/devtools/server/actors/tab.js
@@ -1003,16 +1003,29 @@ TabActor.prototype = {
       return {};
     }
     this._toggleDevToolsSettings(options);
 
     return {};
   },
 
   /**
+   * Ensure that CSS error reporting is enabled.
+   */
+  ensureCSSErrorReportingEnabled(request) {
+    if (!this.docShell || this.docShell.cssErrorReportingEnabled) {
+      return {};
+    }
+
+    this.docShell.cssErrorReportingEnabled = true;
+    // FIXME(emilio): Reparse sheets.
+    return {};
+  },
+
+  /**
    * Handle logic to enable/disable JS/cache/Service Worker testing.
    */
   _toggleDevToolsSettings(options) {
     // Wait a tick so that the response packet can be dispatched before the
     // subsequent navigation event packet.
     let reload = false;
 
     if (typeof options.javascriptEnabled !== "undefined" &&
@@ -1425,16 +1438,17 @@ TabActor.prototype = {
  */
 TabActor.prototype.requestTypes = {
   "attach": TabActor.prototype.onAttach,
   "detach": TabActor.prototype.onDetach,
   "focus": TabActor.prototype.onFocus,
   "reload": TabActor.prototype.onReload,
   "navigateTo": TabActor.prototype.onNavigateTo,
   "reconfigure": TabActor.prototype.onReconfigure,
+  "ensureCSSErrorReportingEnabled": TabActor.prototype.ensureCSSErrorReportingEnabled,
   "switchToFrame": TabActor.prototype.onSwitchToFrame,
   "listFrames": TabActor.prototype.onListFrames,
   "listWorkers": TabActor.prototype.onListWorkers,
   "logInPage": TabActor.prototype.onLogInPage,
 };
 
 exports.TabActor = TabActor;
 

--- a/devtools/server/actors/webconsole/worker-listeners.js
+++ b/devtools/server/actors/webconsole/worker-listeners.js
@@ -1,10 +1,10 @@
 /* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
-/* vim: set ft= javascript ts=2 et sw=2 tw=80: */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* global setConsoleEventHandler, retrieveConsoleEvents */
 
 "use strict";
 

--- a/devtools/shared/client/tab-client.js
+++ b/devtools/shared/client/tab-client.js
@@ -98,16 +98,23 @@ TabClient.prototype = {
   /**
    * Bring the window to the front.
    */
   focus: DebuggerClient.requester({
     type: "focus"
   }, {}),
 
   /**
+   * Ensure relevant pages have error reporting enabled.
+   */
+  ensureCSSErrorReportingEnabled: DebuggerClient.requester({
+    type: "ensureCSSErrorReportingEnabled",
+  }, {}),
+
+  /**
    * Reload the page in this tab.
    *
    * @param [optional] object options
    *        An object with a `force` property indicating whether or not
    *        this reload should skip the cache
    */
   reload: function(options = { force: false }) {
     return this._reload(options);