diff --git a/devtools/client/inspector/markup/test/browser.ini b/devtools/client/inspector/markup/test/browser.ini
index 0f1003542e77..038b87c3df13 100644
--- a/devtools/client/inspector/markup/test/browser.ini
+++ b/devtools/client/inspector/markup/test/browser.ini
@@ -50,6 +50,7 @@ support-files =
   doc_markup_update-on-navigtion_1.html
   doc_markup_update-on-navigtion_2.html
   doc_markup_view-original-source.html
+  doc_markup_shadowdom_open_debugger_pretty_printed.html
   events_bundle.js
   events_bundle.js.map
   events_original.js
@@ -78,6 +79,7 @@ support-files =
   lib_react_with_addons_15.3.1_min.js
   lib_react_with_addons_15.4.1.js
   react_external_listeners.js
+  shadowdom_open_debugger.min.js
   !/devtools/client/debugger/test/mochitest/helpers.js
   !/devtools/client/debugger/test/mochitest/helpers/context.js
   !/devtools/client/inspector/test/head.js
@@ -211,6 +213,7 @@ tags = clipboard
 [browser_markup_shadowdom_noslot.js]
 [browser_markup_shadowdom_open_debugger.js]
 skip-if = (os == 'win' && processor == 'aarch64') # bug 1533507
+[browser_markup_shadowdom_open_debugger_pretty_printed.js]
 [browser_markup_shadowdom_shadowroot_mode.js]
 [browser_markup_shadowdom_show_nodes_button.js]
 [browser_markup_shadowdom_slotted_keyboard_focus.js]
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_open_debugger_pretty_printed.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_open_debugger_pretty_printed.js
new file mode 100644
index 000000000000..fc2c95bb4de4
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_open_debugger_pretty_printed.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that clicking on the "custom" badge opens the debugger to the pretty-printed
+// custom element definition.
+
+/* import-globals-from ../../../debugger/test/mochitest/helpers.js */
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/debugger/test/mochitest/helpers.js",
+  this
+);
+
+/* import-globals-from ../../../debugger/test/mochitest/helpers/context.js */
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/debugger/test/mochitest/helpers/context.js",
+  this
+);
+
+const TEST_URL =
+  URL_ROOT + "doc_markup_shadowdom_open_debugger_pretty_printed.html";
+
+add_task(async function() {
+  info("Open inspector.");
+  await clearDebuggerPreferences();
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+
+  await selectNode("test-component", inspector);
+  const testFront = await getNodeFront("test-component", inspector);
+
+  const testContainer = inspector.markup.getContainer(testFront);
+  const customBadge = testContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-custom]"
+  );
+
+  info("Click custom badge.");
+  customBadge.click();
+
+  await toolbox.getPanelWhenReady("jsdebugger");
+  const dbg = createDebuggerContext(toolbox);
+
+  await waitForSelectedSource(dbg, "shadowdom_open_debugger.min.js");
+  await waitForSelectedLocation(dbg, 2);
+
+  info("Pretty-print source.");
+  clickElement(dbg, "prettyPrintButton");
+  await waitForSelectedSource(dbg, "shadowdom_open_debugger.min.js:formatted");
+  info("Switch back to the original source.");
+  await selectSource(dbg, "shadowdom_open_debugger.min.js");
+
+  info("Return to inspector.");
+  await toolbox.selectTool("inspector");
+
+  info("Click custom badge again.");
+  customBadge.click();
+
+  await waitForSelectedSource(dbg, "shadowdom_open_debugger.min.js:formatted");
+  await waitForSelectedLocation(dbg, 4);
+});
diff --git a/devtools/client/inspector/markup/test/doc_markup_shadowdom_open_debugger_pretty_printed.html b/devtools/client/inspector/markup/test/doc_markup_shadowdom_open_debugger_pretty_printed.html
new file mode 100644
index 000000000000..725bb0753bba
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_shadowdom_open_debugger_pretty_printed.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Custom Element Pretty-Printed Source Test</title>
+  <script src="shadowdom_open_debugger.min.js"></script>
+</head>
+<body>
+    <test-component></test-component>
+</body>
+</html>
diff --git a/devtools/client/inspector/markup/test/shadowdom_open_debugger.min.js b/devtools/client/inspector/markup/test/shadowdom_open_debugger.min.js
new file mode 100644
index 000000000000..86208529baf9
--- /dev/null
+++ b/devtools/client/inspector/markup/test/shadowdom_open_debugger.min.js
@@ -0,0 +1,2 @@
+/* eslint-disable */
+"use strict";customElements.define("test-component",class extends HTMLElement{constructor(){super();let shadowRoot=this.attachShadow({mode:"open"});shadowRoot.innerHTML="<slot>some default content</slot>"}connectedCallback(){}disconnectedCallback(){}});
diff --git a/devtools/client/inspector/markup/views/element-editor.js b/devtools/client/inspector/markup/views/element-editor.js
index 98ca3d900926..f5308d2be0bc 100644
--- a/devtools/client/inspector/markup/views/element-editor.js
+++ b/devtools/client/inspector/markup/views/element-editor.js
@@ -907,8 +907,17 @@ ElementEditor.prototype = {
     }
   },
 
-  onCustomBadgeClick: function() {
-    const { url, line, column } = this.node.customElementLocation;
+  onCustomBadgeClick: async function() {
+    let { url, line, column } = this.node.customElementLocation;
+    const originalLocation = await this.markup.toolbox.sourceMapURLService.originalPositionFor(
+      url,
+      line,
+      column
+    );
+    if (originalLocation) {
+      ({ sourceUrl: url, line, column } = originalLocation);
+    }
+
     this.markup.toolbox.viewSourceInDebugger(
       url,
       line,
diff --git a/devtools/server/actors/inspector/node.js b/devtools/server/actors/inspector/node.js
index 9442a18d70d5..b64a4d4ea2b3 100644
--- a/devtools/server/actors/inspector/node.js
+++ b/devtools/server/actors/inspector/node.js
@@ -530,6 +530,7 @@ const NodeActor = protocol.ActorClassWithSpec(nodeSpec, {
     return {
       url: customElementDO.script.url,
       line: customElementDO.script.startLine,
+      column: customElementDO.script.startColumn,
     };
   },