--- a/devtools/client/shared/components/frame.js
+++ b/devtools/client/shared/components/frame.js
@@ -164,53 +164,60 @@ module.exports = createClass({
     if (showFunctionName) {
       let functionDisplayName = frame.functionDisplayName;
       if (!functionDisplayName && showAnonymousFunctionName) {
         functionDisplayName = webl10n.getStr("stacktrace.anonymousFunction");
       }
 
       if (functionDisplayName) {
         elements.push(
-          dom.span({ className: "frame-link-function-display-name" },
-            functionDisplayName),
+          dom.span({
+            key: "function-display-name",
+            className: "frame-link-function-display-name",
+          }, functionDisplayName),
           " "
         );
       }
     }
 
     let displaySource = showFullSourceUrl ? long : short;
     if (isSourceMapped) {
       displaySource = getSourceMappedFile(displaySource);
     } else if (showEmptyPathAsHost && (displaySource === "" || displaySource === "/")) {
       displaySource = host;
     }
 
     sourceElements.push(dom.span({
+      key: "filename",
       className: "frame-link-filename",
     }, displaySource));
 
     // If we have a line number > 0.
     if (line) {
       let lineInfo = `:${line}`;
       // Add `data-line` attribute for testing
       attributes["data-line"] = line;
 
       // Intentionally exclude 0
       if (column) {
         lineInfo += `:${column}`;
         // Add `data-column` attribute for testing
         attributes["data-column"] = column;
       }
 
-      sourceElements.push(dom.span({ className: "frame-link-line" }, lineInfo));
+      sourceElements.push(dom.span({
+        key: "line",
+        className: "frame-link-line"
+      }, lineInfo));
     }
 
     // Inner el is useful for achieving ellipsis on the left and correct LTR/RTL
     // ordering. See CSS styles for frame-link-source-[inner] and bug 1290056.
     let sourceInnerEl = dom.span({
+      key: "source-inner",
       className: "frame-link-source-inner",
       title: isLinkable ?
         l10n.getFormatStr("frame.viewsourceindebugger", tooltip) : tooltip,
     }, sourceElements);
 
     // If source is not a URL (self-hosted, eval, etc.), don't make
     // it an anchor link, as we can't link to it.
     if (isLinkable) {
@@ -220,20 +227,25 @@ module.exports = createClass({
           onClick(this.getSource(frame));
         },
         href: source,
         className: "frame-link-source",
         draggable: false,
       }, sourceInnerEl);
     } else {
       sourceEl = dom.span({
+        key: "source",
         className: "frame-link-source",
       }, sourceInnerEl);
     }
     elements.push(sourceEl);
 
     if (showHost && host) {
-      elements.push(" ", dom.span({ className: "frame-link-host" }, host));
+      elements.push(" ");
+      elements.push(dom.span({
+        key: "host",
+        className: "frame-link-host",
+      }, host));
     }
 
     return dom.span(attributes, ...elements);
   }
 });

--- a/devtools/client/shared/components/stack-trace.js
+++ b/devtools/client/shared/components/stack-trace.js
@@ -40,25 +40,27 @@ const StackTrace = createClass({
   render() {
     let {
       stacktrace,
       onViewSourceInDebugger,
       onViewSourceInScratchpad
     } = this.props;
 
     let frames = [];
-    stacktrace.forEach(s => {
+    stacktrace.forEach((s, i) => {
       if (s.asyncCause) {
         frames.push("\t", AsyncFrame({
+          key: `${i}-asyncframe`,
           asyncCause: s.asyncCause
         }), "\n");
       }
 
       let source = s.filename.split(" -> ").pop();
       frames.push("\t", Frame({
+        key: `${i}-frame`,
         frame: {
           functionDisplayName: s.functionName,
           source,
           line: s.lineNumber,
           column: s.columnNumber,
         },
         showFunctionName: true,
         showAnonymousFunctionName: true,