--- a/devtools/client/webconsole/new-console-output/components/console-output.js
+++ b/devtools/client/webconsole/new-console-output/components/console-output.js
@@ -38,17 +38,17 @@ const ConsoleOutput = createClass({
       let node = ReactDOM.findDOMNode(this);
       node.scrollTop = node.scrollHeight;
     }
   },
 
   render() {
     let messageNodes = this.props.messages.map(function (message) {
       return (
-        MessageContainer({ message })
+        MessageContainer({ message, key: message.id })
       );
     });
     return (
       dom.div({className: "webconsole-output"}, messageNodes)
     );
   }
 });
 

--- a/devtools/client/webconsole/new-console-output/test/actions/test_messages.js
+++ b/devtools/client/webconsole/new-console-output/test/actions/test_messages.js
@@ -18,16 +18,19 @@ function run_test() {
 add_task(function* () {
   const packet = testPackets.get("console.log");
   const action = messageAdd(packet);
   const expected = {
     type: constants.MESSAGE_ADD,
     // Prepare message is tested independently.
     message: prepareMessage(packet)
   };
+  // Remove ID for deepEqual comparison.
+  action.message = action.message.remove('id');
+  expected.message = expected.message.remove('id');
   deepEqual(action, expected,
     "messageAdd action creator returns expected action object");
 });
 
 add_task(function* () {
   const action = messagesClear();
   const expected = {
     type: constants.MESSAGES_CLEAR,

--- a/devtools/client/webconsole/new-console-output/test/store/test_messages.js
+++ b/devtools/client/webconsole/new-console-output/test/store/test_messages.js
@@ -20,19 +20,24 @@ function run_test() {
  */
 add_task(function* () {
   const { getState, dispatch } = storeFactory();
 
   dispatch(actions.messageAdd(packet));
 
   const expectedMessage = prepareMessage(packet);
 
-  let messages = getAllMessages(getState());
-  deepEqual(messages.toArray(), [expectedMessage],
-    "MESSAGE_ADD action adds a message");
+  const messages = getAllMessages(getState());
+  equal(messages.size, 1, "We added exactly one message.")
+
+  const message = messages.first();
+  notEqual(message.id, expectedMessage.id, "ID should be unique.");
+  // Remove ID for deepEqual comparison.
+  deepEqual(message.remove('id'), expectedMessage.remove('id'),
+      "MESSAGE_ADD action adds a message");
 });
 
 /**
  * Test repeating messages in the store.
  */
 add_task(function* () {
   const { getState, dispatch } = storeFactory();
 
@@ -77,17 +82,17 @@ add_task(function*() {
 
   let messages = getAllMessages(getState());
   equal(messages.size, 1,
     "MESSAGE_ADD action adds a message");
 
   dispatch(actions.messageAdd(clearPacket));
 
   messages = getAllMessages(getState());
-  deepEqual(messages.first(), prepareMessage(clearPacket),
+  deepEqual(messages.first().remove('id'), prepareMessage(clearPacket).remove('id'),
     "console.clear clears existing messages and add a new one");
 });
 
 /**
  * Test message limit on the store.
  */
 add_task(function* () {
   const { getState, dispatch } = storeFactory();

--- a/devtools/client/webconsole/new-console-output/types.js
+++ b/devtools/client/webconsole/new-console-output/types.js
@@ -22,9 +22,10 @@ exports.ConsoleMessage = Immutable.Recor
   type: null,
   level: null,
   messageText: null,
   parameters: null,
   repeat: 1,
   repeatId: null,
   category: "output",
   severity: "log",
+  id: null,
 });

--- a/devtools/client/webconsole/new-console-output/utils/messages.js
+++ b/devtools/client/webconsole/new-console-output/utils/messages.js
@@ -17,16 +17,22 @@ const {
   LEVELS,
   SEVERITY_LOG,
 } = require("../constants");
 const WebConsoleUtils = require("devtools/shared/webconsole/utils").Utils;
 const STRINGS_URI = "chrome://devtools/locale/webconsole.properties";
 const l10n = new WebConsoleUtils.L10n(STRINGS_URI);
 const { ConsoleMessage } = require("../types");
 
+let messageId = 0;
+function getNextMessageId() {
+  // Return the next message id, as a string.
+  return "" + messageId++;
+}
+
 function prepareMessage(packet) {
   // This packet is already in the expected packet structure. Simply return.
   if (packet.source) {
     return packet;
   }
 
   return transformPacket(packet);
 }
@@ -69,16 +75,17 @@ function transformPacket(packet) {
         source: MESSAGE_SOURCE.CONSOLE_API,
         type,
         level,
         parameters,
         messageText,
         repeatId: getRepeatId(message),
         category: CATEGORY_WEBDEV,
         severity: level,
+        id: getNextMessageId(),
       });
     }
 
     case "pageError": {
       let { pageError } = packet;
       let level = MESSAGE_LEVEL.ERROR;
       if (pageError.warning || pageError.strict) {
         level = MESSAGE_LEVEL.WARN;
@@ -88,41 +95,43 @@ function transformPacket(packet) {
 
       return new ConsoleMessage({
         source: MESSAGE_SOURCE.JAVASCRIPT,
         type: MESSAGE_TYPE.LOG,
         messageText: pageError.errorMessage,
         repeatId: getRepeatId(pageError),
         category: CATEGORY_JS,
         severity: level,
+        id: getNextMessageId(),
       });
     }
 
     case "evaluationResult":
     default: {
       let { result } = packet;
 
       return new ConsoleMessage({
         source: MESSAGE_SOURCE.JAVASCRIPT,
         type: MESSAGE_TYPE.RESULT,
         level: MESSAGE_LEVEL.LOG,
         parameters: result,
         repeatId: getRepeatId(result),
         category: CATEGORY_OUTPUT,
         severity: SEVERITY_LOG,
+        id: getNextMessageId(),
       });
     }
   }
 }
 
 // Helpers
 function getRepeatId(message) {
   let clonedMessage = JSON.parse(JSON.stringify(message));
+  delete clonedMessage.id;
   delete clonedMessage.timeStamp;
-  delete clonedMessage.uniqueID;
   return JSON.stringify(clonedMessage);
 }
 
 function convertCachedPacket(packet) {
   // The devtools server provides cached message packets in a different shape
   // from those of consoleApiCalls, so we prepare them for preparation here.
   let convertPacket = {};
   if (packet._type === "ConsoleAPI") {