--- a/devtools/client/aboutdebugging/components/addons/panel.js
+++ b/devtools/client/aboutdebugging/components/addons/panel.js
@@ -71,17 +71,18 @@ module.exports = createClass({
     this.props.client.listAddons()
       .then(({addons}) => {
         let extensions = addons.filter(addon => addon.debuggable).map(addon => {
           return {
             name: addon.name,
             icon: addon.iconURL || ExtensionIcon,
             addonID: addon.id,
             addonActor: addon.actor,
-            temporarilyInstalled: addon.temporarilyInstalled
+            temporarilyInstalled: addon.temporarilyInstalled,
+            isWebExtension: addon.isWebExtension,
           };
         });
 
         this.setState({ extensions });
       }, error => {
         throw new Error("Client error while listing addons: " + error);
       });
   },

--- a/devtools/client/aboutdebugging/components/addons/target.js
+++ b/devtools/client/aboutdebugging/components/addons/target.js
@@ -26,23 +26,24 @@ module.exports = createClass({
   propTypes: {
     client: PropTypes.instanceOf(DebuggerClient).isRequired,
     debugDisabled: PropTypes.bool,
     target: PropTypes.shape({
       addonActor: PropTypes.string.isRequired,
       addonID: PropTypes.string.isRequired,
       icon: PropTypes.string,
       name: PropTypes.string.isRequired,
+      isWebExtension: PropTypes.bool,
       temporarilyInstalled: PropTypes.bool
     }).isRequired
   },
 
   debug() {
     let { target } = this.props;
-    debugAddon(target.addonID);
+    debugAddon(target);
   },
 
   reload() {
     let { client, target } = this.props;
     // This function sometimes returns a partial promise that only
     // implements then().
     client.request({
       to: target.addonActor,

--- a/devtools/client/aboutdebugging/modules/addon.js
+++ b/devtools/client/aboutdebugging/modules/addon.js
@@ -2,22 +2,67 @@
  * 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/. */
 
 "use strict";
 
 loader.lazyImporter(this, "BrowserToolboxProcess",
   "resource://devtools/client/framework/ToolboxProcess.jsm");
 
-let toolbox = null;
+loader.lazyRequireGetter(this, "gDevTools",
+                         "devtools/client/framework/devtools", true);
+loader.lazyRequireGetter(this, "TargetFactory",
+                         "devtools/client/framework/target", true);
+loader.lazyRequireGetter(this, "Toolbox",
+                         "devtools/client/framework/toolbox", true);
+loader.lazyRequireGetter(this, "DebuggerClient",
+                         "devtools/shared/client/main", true);
+loader.lazyRequireGetter(this, "DebuggerServer",
+                         "devtools/server/main", true);
+
+let toolboxProcess = null;
 
-exports.debugAddon = function (addonID) {
-  if (toolbox) {
-    toolbox.close();
+exports.debugAddon = function (target) {
+  if (target.isWebExtension) {
+    return debugWebExtension(target);
+  }
+
+  debugInToolboxProcess(target.addonID);
+  return Promise.resolve();
+};
+
+function debugInToolboxProcess(addonID) {
+  if (toolboxProcess) {
+    toolboxProcess.close();
   }
 
-  toolbox = BrowserToolboxProcess.init({
+  toolboxProcess = BrowserToolboxProcess.init({
     addonID,
     onClose: () => {
-      toolbox = null;
+      toolboxProcess = null;
     }
   });
-};
+
+  return Promise.resolve();
+}
+
+async function debugWebExtension(target) {
+  const client = new DebuggerClient(DebuggerServer.connectPipe());
+  await client.connect();
+
+  const {addons} = await client.listAddons();
+  let addonActor = addons.filter(addon => addon.id === target.addonID).pop();
+
+  const {form} = await client.request({to: addonActor.actor, type: "connect"});
+
+  if (form.isOOPExtension) {
+    let options = {form, client, chrome: true, isTabActor: true};
+    const addonTarget = await TargetFactory.forRemoteTab(options);
+
+    const hostType = Toolbox.HostType.WINDOW;
+    const toolbox = await gDevTools.showToolbox(addonTarget, "webconsole", hostType);
+    toolbox.once("destroyed", () => client.close());
+  } else {
+    client.close();
+
+    debugInToolboxProcess(target.addonID);
+  }
+}