Allow capturing network traffic and loading it in wireshark

debug.html

@@ -265,6 +265,7 @@ function load_next()
         <input type="button" value="Save State" id="save_state">
         <input type="button" value="Load State" id="load_state"> <input type="file" style="display: none" id="load_state_input">
         <input type="button" value="Memory Dump" id="memory_dump">
+        <input type="button" value="Capture network traffic" id="capture_network_traffic">
         <input type="button" value="Disable mouse" id="toggle_mouse">
         <input type="button" value="Lock mouse" id="lock_mouse">
         <input type="button" value="Go fullscreen" id="fullscreen">

index.html

@@ -185,6 +185,7 @@
         <input type="button" value="Save State" id="save_state">
         <input type="button" value="Load State" id="load_state"> <input type="file" style="display: none" id="load_state_input">
         <input type="button" value="Memory Dump" id="memory_dump">
+        <input type="button" value="Capture network traffic" id="capture_network_traffic" title="In wireshark: file -> import from hex -> tick direction indication, timestamp %s.%f">
         <input type="button" value="Disable mouse" id="toggle_mouse">
         <input type="button" value="Lock mouse" id="lock_mouse">
         <input type="button" value="Go fullscreen" id="fullscreen">

src/browser/main.js

@@ -1632,6 +1632,35 @@
         //    $("memory_dump_dmp").blur();
         //};
 
+        $("capture_network_traffic").onclick = function()
+        {
+            this.value = "0 packets";
+
+            let capture = [];
+
+            function do_capture(direction, data)
+            {
+                capture.push({ direction, time: performance.now() / 1000, hex_dump: hex_dump(data) });
+                $("capture_network_traffic").value = capture.length + " packets";
+            }
+
+            emulator.emulator_bus.register("net0-receive", do_capture.bind(this, "I"));
+            emulator.add_listener("net0-send", do_capture.bind(this, "O"));
+
+            this.onclick = function()
+            {
+                const capture_raw = capture.map(({ direction, time, hex_dump }) => {
+                    // https://www.wireshark.org/docs/wsug_html_chunked/ChIOImportSection.html
+                    // In wireshark: file -> import from hex -> tick direction indication, timestamp %s.%f
+                    return direction + " " + time.toFixed(6) + hex_dump + "\n";
+                }).join("");
+                dump_file(capture_raw, "traffic.hex");
+                capture = [];
+                this.value = "0 packets";
+            };
+        };
+
+
         $("save_state").onclick = async function()
         {
             const result = await emulator.save_state();