diff --git a/devtools/client/netmonitor/src/components/websockets/FrameListItem.js b/devtools/client/netmonitor/src/components/websockets/FrameListItem.js
index 8468f769e08b..fff0022fb0e2 100644
--- a/devtools/client/netmonitor/src/components/websockets/FrameListItem.js
+++ b/devtools/client/netmonitor/src/components/websockets/FrameListItem.js
@@ -64,7 +64,11 @@ class FrameListItem extends Component {
       visibleColumns,
     } = this.props;
 
-    const classList = ["ws-frame-list-item", index % 2 ? "odd" : "even"];
+    const classList = [
+      "ws-frame-list-item",
+      index % 2 ? "odd" : "even",
+      item.type,
+    ];
     if (isSelected) {
       classList.push("selected");
     }
diff --git a/devtools/client/netmonitor/test/browser.ini b/devtools/client/netmonitor/test/browser.ini
index 7c23ad06a536..0eec01b297ee 100644
--- a/devtools/client/netmonitor/test/browser.ini
+++ b/devtools/client/netmonitor/test/browser.ini
@@ -3,6 +3,7 @@ tags = devtools
 subsuite = devtools
 support-files =
   dropmarker.svg
+  file_ws_backend_wsh.py
   head.js
   html_cause-test-page.html
   html_content-type-without-cache-test-page.html
@@ -47,6 +48,7 @@ support-files =
   html_open-request-in-tab.html
   html_worker-test-page.html
   html_websocket-test-page.html
+  html_ws-test-page.html
   js_worker-test.js
   js_worker-test2.js
   js_websocket-worker-test.js
@@ -232,3 +234,4 @@ skip-if = (os == 'win' && os_version == '6.1' && !debug) # Bug 1547150
 [browser_net_waterfall-click.js]
 [browser_net_websocket_stacks.js]
 [browser_net_worker_stacks.js]
+[browser_net_ws-basic.js]
diff --git a/devtools/client/netmonitor/test/browser_net_ws-basic.js b/devtools/client/netmonitor/test/browser_net_ws-basic.js
new file mode 100644
index 000000000000..f24efc49d63e
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_ws-basic.js
@@ -0,0 +1,78 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Test for working WS connection made and sent/received messages are correct.
+ */
+
+add_task(async function() {
+  const { tab, monitor } = await initNetMonitor(WS_PAGE_URL);
+  info("Starting test... ");
+
+  const { document, store, windowRequire } = monitor.panelWin;
+  const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+
+  store.dispatch(Actions.batchEnable(false));
+
+  // Wait for WS connection to be established + send messages
+  await ContentTask.spawn(tab.linkedBrowser, {}, async () => {
+    await content.wrappedJSObject.openConnection(1);
+  });
+
+  const requests = document.querySelectorAll(".request-list-item");
+  is(requests.length, 1, "There should be one request");
+
+  // Select the request to open the side panel.
+  EventUtils.sendMouseEvent({ type: "mousedown" }, requests[0]);
+
+  // Wait for all sent/received messages to be displayed in DevTools
+  wait = waitForDOM(
+    document,
+    "#messages-panel .ws-frames-list-table .ws-frame-list-item",
+    2
+  );
+
+  // Click on the "Messages" panel
+  EventUtils.sendMouseEvent(
+    { type: "click" },
+    document.querySelector("#messages-tab")
+  );
+  await wait;
+
+  // Get all messages present in the "Messages" panel
+  const frames = document.querySelectorAll(
+    "#messages-panel .ws-frames-list-table .ws-frame-list-item"
+  );
+
+  // Check expected results
+  is(frames.length, 2, "There should be two frames");
+
+  // Sent frame
+  is(
+    frames[0].children[0].textContent,
+    " Payload 0",
+    "The correct sent payload should be displayed"
+  );
+  is(frames[0].classList.contains("sent"), true, "The payload type is 'Sent'");
+
+  // Received frame
+  is(
+    frames[1].children[0].textContent,
+    " Payload 0",
+    "The correct received payload should be displayed"
+  );
+  is(
+    frames[1].classList.contains("received"),
+    true,
+    "The payload type is 'Received'"
+  );
+
+  // Close WS connection
+  await ContentTask.spawn(tab.linkedBrowser, {}, async () => {
+    await content.wrappedJSObject.closeConnection();
+  });
+
+  await teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/file_ws_backend_wsh.py b/devtools/client/netmonitor/test/file_ws_backend_wsh.py
new file mode 100644
index 000000000000..ce95658cb5c0
--- /dev/null
+++ b/devtools/client/netmonitor/test/file_ws_backend_wsh.py
@@ -0,0 +1,14 @@
+from __future__ import absolute_import
+from mod_pywebsocket import msgutil
+
+
+def web_socket_do_extra_handshake(request):
+    pass
+
+
+def web_socket_transfer_data(request):
+    while not request.client_terminated:
+        resp = msgutil.receive_message(request)
+        msgutil.send_message(request, resp)
+
+    msgutil.close_connection(request)
diff --git a/devtools/client/netmonitor/test/head.js b/devtools/client/netmonitor/test/head.js
index 3485e6c38e1d..4ae082cf084f 100644
--- a/devtools/client/netmonitor/test/head.js
+++ b/devtools/client/netmonitor/test/head.js
@@ -48,6 +48,9 @@ const WS_URL = "ws://127.0.0.1:8888/browser/devtools/client/netmonitor/test/";
 const WS_HTTP_URL =
   "http://127.0.0.1:8888/browser/devtools/client/netmonitor/test/";
 
+const WS_BASE_URL =
+  "http://mochi.test:8888/browser/devtools/client/netmonitor/test/";
+const WS_PAGE_URL = WS_BASE_URL + "html_ws-test-page.html";
 const API_CALLS_URL = EXAMPLE_URL + "html_api-calls-test-page.html";
 const SIMPLE_URL = EXAMPLE_URL + "html_simple-test-page.html";
 const NAVIGATE_URL = EXAMPLE_URL + "html_navigate-test-page.html";
diff --git a/devtools/client/netmonitor/test/html_ws-test-page.html b/devtools/client/netmonitor/test/html_ws-test-page.html
new file mode 100644
index 000000000000..c2a664f39bab
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_ws-test-page.html
@@ -0,0 +1,43 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype HTML>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>WebSocket Inspection Test Page</title>
+  </head>
+  <body>
+    <h1>WebSocket Inspection Test Page</h1>
+    <script type="text/javascript">
+      /* exported openConnection, closeConnection */
+      "use strict";
+
+      let ws;
+      function openConnection(numFramesToSend) {
+        return new Promise(resolve => {
+          ws = new WebSocket(
+            "ws://mochi.test:8888/browser/devtools/client/netmonitor/test/file_ws_backend");
+
+          ws.onopen = e => {
+            for (let i = 0; i < numFramesToSend; i++) {
+              ws.send("Payload " + i);
+            }
+            resolve();
+          };
+        });
+      }
+
+      function closeConnection() {
+        return new Promise(resolve => {
+          ws.onclose = e => {
+            resolve();
+          }
+          ws.close();
+        })
+      }
+    </script>
+  </body>
+</html>