--- a/devtools/client/aboutdebugging/aboutdebugging.css
+++ b/devtools/client/aboutdebugging/aboutdebugging.css
@@ -202,16 +202,22 @@ button {
 .addons-web-ext-tip {
   display: inline-block;
   margin-inline-end: 1ch;
 }
 
 .addons-tip {
   display: flex;
   align-items: center;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  background-image: url(chrome://devtools/skin/images/help.svg);
+  background-repeat: no-repeat;
+  padding-inline-start: 32px;
+  height: 24px;
 }
 
 .addons-tip-icon {
   margin-inline-end: 1ch;
 }
 
 .error-page {
   display: flex;
@@ -239,16 +245,17 @@ button {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
 }
 
 .addon-target-container .target {
   align-items: center;
   display: flex;
   margin: 0;
   padding: 16px 0;
+  font-size: 14px;
 }
 
 .addon-target-actions {
   border-top: 1px solid rgba(0, 0, 0, 0.2);
 }
 
 .addon-target-container .target-icon {
   margin-inline-end: 16px;
@@ -257,17 +264,16 @@ button {
 .addon-target-container .name {
   align-self: center;
   font-size: 16px;
   font-weight: 600;
 }
 
 .addon-target-info {
   display: grid;
-  font-size: 14px;
   grid-template-columns: 128px 1fr;
 }
 
 .addon-target-info-label {
   padding-inline-end: 8px;
   padding-bottom: 8px;
 }
 

--- a/devtools/client/aboutdebugging/components/addons/panel.js
+++ b/devtools/client/aboutdebugging/components/addons/panel.js
@@ -145,21 +145,16 @@ module.exports = createClass({
         name: temporaryName,
         targets: temporaryTargets,
         client,
         debugDisabled,
         targetClass,
         sort: true
       }),
       dom.div({ className: "addons-tip"},
-        dom.img({
-          className: "addons-tip-icon",
-          role: "presentation",
-          src: "chrome://devtools/skin/images/help.svg",
-        }),
         dom.span({
           className: "addons-web-ext-tip",
         }, Strings.GetStringFromName("webExtTip")),
         dom.a({ href: WEB_EXT_URL, target: "_blank" },
           Strings.GetStringFromName("webExtTip.learnMore")
         )
       )
     ),

--- a/devtools/client/aboutdebugging/components/addons/target.js
+++ b/devtools/client/aboutdebugging/components/addons/target.js
@@ -3,28 +3,31 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* eslint-env browser */
 
 "use strict";
 
 const { createClass, DOM: dom, PropTypes } =
   require("devtools/client/shared/vendor/react");
-const { debugAddon, uninstallAddon } = require("../../modules/addon");
+const { debugAddon, uninstallAddon, isTemporaryID } = require("../../modules/addon");
 const Services = require("Services");
 
 loader.lazyImporter(this, "BrowserToolboxProcess",
   "resource://devtools/client/framework/ToolboxProcess.jsm");
 
 loader.lazyRequireGetter(this, "DebuggerClient",
   "devtools/shared/client/main", true);
 
 const Strings = Services.strings.createBundle(
   "chrome://devtools/locale/aboutdebugging.properties");
 
+const TEMP_ID_URL = "https://developer.mozilla.org/Add-ons" +
+                    "/WebExtensions/WebExtensions_and_the_Add-on_ID";
+
 function filePathForTarget(target) {
   // Only show file system paths, and only for temporarily installed add-ons.
   if (!target.temporarilyInstalled || !target.url || !target.url.startsWith("file://")) {
     return [];
   }
   let path = target.url.slice("file://".length);
   return [
     dom.dt(
@@ -62,16 +65,33 @@ function internalIDForTarget(target) {
           { href: target.manifestURL, target: "_blank", className: "manifest-url" },
           Strings.GetStringFromName("manifestURL"),
         ),
       )
     ),
   ];
 }
 
+function temporaryID(target) {
+  if (!isTemporaryID(target.addonID)) {
+    return [];
+  }
+
+  return [
+    dom.div({ className: "addons-tip" },
+      dom.span({ className: "addons-web-ext-tip" },
+        Strings.GetStringFromName("temporaryID")
+      ),
+      dom.a({ href: TEMP_ID_URL, className: "temporary-id-url", target: "_blank" },
+        Strings.GetStringFromName("temporaryID.learnMore")
+      )
+    )
+  ];
+}
+
 module.exports = createClass({
   displayName: "AddonTarget",
 
   propTypes: {
     client: PropTypes.instanceOf(DebuggerClient).isRequired,
     debugDisabled: PropTypes.bool,
     target: PropTypes.shape({
       addonActor: PropTypes.string.isRequired,
@@ -114,16 +134,17 @@ module.exports = createClass({
       dom.div({ className: "target" },
         dom.img({
           className: "target-icon",
           role: "presentation",
           src: target.icon
         }),
         dom.span({ className: "target-name", title: target.name }, target.name)
       ),
+      ...temporaryID(target),
       dom.dl(
         { className: "addon-target-info" },
         ...filePathForTarget(target),
         ...internalIDForTarget(target),
       ),
       dom.div({className: "addon-target-actions"},
         dom.button({
           className: "debug-button addon-target-button",

--- a/devtools/client/aboutdebugging/modules/addon.js
+++ b/devtools/client/aboutdebugging/modules/addon.js
@@ -2,16 +2,17 @@
  * 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");
 loader.lazyImporter(this, "AddonManager", "resource://gre/modules/AddonManager.jsm");
+loader.lazyImporter(this, "AddonManagerPrivate", "resource://gre/modules/AddonManager.jsm");
 
 let toolbox = null;
 
 exports.debugAddon = function (addonID) {
   if (toolbox) {
     toolbox.close();
   }
 
@@ -22,8 +23,12 @@ exports.debugAddon = function (addonID) 
     }
   });
 };
 
 exports.uninstallAddon = async function (addonID) {
   let addon = await AddonManager.getAddonByID(addonID);
   return addon && addon.uninstall();
 };
+
+exports.isTemporaryID = function (addonID) {
+  return AddonManagerPrivate.isTemporaryInstallID(addonID);
+};

new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging/test/addons/test-devtools-webextension-noid/manifest.json
@@ -0,0 +1,5 @@
+{
+  "manifest_version": 2,
+  "name": "test-devtools-webextension-noid",
+  "version": "1.0"
+}

--- a/devtools/client/aboutdebugging/test/browser.ini
+++ b/devtools/client/aboutdebugging/test/browser.ini
@@ -4,16 +4,17 @@ subsuite = devtools
 support-files =
   head.js
   addons/unpacked/bootstrap.js
   addons/unpacked/install.rdf
   addons/bad/manifest.json
   addons/bug1273184.xpi
   addons/test-devtools-webextension/*
   addons/test-devtools-webextension-nobg/*
+  addons/test-devtools-webextension-noid/*
   service-workers/delay-sw.html
   service-workers/delay-sw.js
   service-workers/empty-sw.html
   service-workers/empty-sw.js
   service-workers/fetch-sw.html
   service-workers/fetch-sw.js
   service-workers/push-sw.html
   service-workers/push-sw.js

--- a/devtools/client/aboutdebugging/test/browser_addons_debug_info.js
+++ b/devtools/client/aboutdebugging/test/browser_addons_debug_info.js
@@ -51,8 +51,33 @@ add_task(function* testWebExtension() {
 
   let manifestURL = container.querySelector(".manifest-url");
   ok(manifestURL.href.startsWith("moz-extension://"), "href for manifestURL exists");
 
   yield uninstallAddon({document, id: addonId, name: addonName});
 
   yield closeAboutDebugging(tab);
 });
+
+add_task(function* testTemporaryWebExtension() {
+  let addonName = "test-devtools-webextension-noid";
+  let { tab, document } = yield openAboutDebugging("addons");
+
+  yield waitForInitialAddonList(document);
+  yield installAddon({
+    document,
+    path: "addons/test-devtools-webextension-noid/manifest.json",
+    name: addonName,
+    isWebExtension: true
+  });
+
+  let addons = document.querySelectorAll("#temporary-extensions .addon-target-container");
+  // Assuming that our temporary add-on is now at the top.
+  let container = addons[addons.length-1];
+  let addonId = container.dataset.addonId;
+
+  let temporaryID = container.querySelector(".temporary-id-url");
+  ok(temporaryID, "Temporary ID message does appear");
+
+  yield uninstallAddon({document, id: addonId, name: addonName});
+
+  yield closeAboutDebugging(tab);
+});

--- a/devtools/client/locales/en-US/aboutdebugging.properties
+++ b/devtools/client/locales/en-US/aboutdebugging.properties
@@ -83,16 +83,25 @@ manifestURL = Manifest URL
 webExtTip = You can use web-ext to load temporary WebExtensions from the command line.
 
 # LOCALIZATION NOTE (webExtTip.learnMore):
 # This string is displayed as a link next to webExtTip and leads the user to the MDN
 # documentation page for web-ext.
 # (https://developer.mozilla.org/Add-ons/WebExtensions/Getting_started_with_web-ext)
 webExtTip.learnMore = Learn more
 
+# LOCALIZATION NOTE (temporaryID):
+# This string is displayed as a message about the add-on having a temporaryID.
+temporaryID = This WebExtension has a temporary ID.
+
+# LOCALIZATION NOTE (temporaryID.learnMore):
+# This string is displayed as a link next to the temporaryID message and leads
+# the user to MDN.
+temporaryID.learnMore = Learn more
+
 # LOCALIZATION NOTE (selectAddonFromFile2):
 # This string is displayed as the title of the file picker that appears when
 # the user clicks the 'Load Temporary Add-on' button
 selectAddonFromFile2 = Select Manifest File or Package (.xpi)
 
 # LOCALIZATION NOTE (reload):
 # This string is displayed as a label of the button that reloads a given addon.
 reload = Reload