Event Loop and Source Panels

Client and Worker Files

Replay one JavaScript execution where a client module calls a worker module and prints the response.

source-panel When an example has more than one source file, the replay UI keeps each file in its own panel while preserving one ordered trace stream. The Variables panel follows the actual `require` call into the worker module and the return back to the client.
boundary The client module owns the selected command and visible output. The worker module owns the response rule for that command.

Project Entry

command
request_client.js
Replay: real traced execution (multi-file project)
const command = "status";
let label = command;

if (command === "refresh") {
  label = "cache";
} else if (command === "archive") {
  label = "records";
}

const response = require("./request_worker").handleRequest(command);
const ticket = 40 + command.length;

console.log("label=" + label);
console.log("ticket=" + ticket);
console.log(response);

const command = "refresh";
let label = command;

if (command === "refresh") {
  label = "cache";
} else if (command === "archive") {
  label = "records";
}

const response = require("./request_worker").handleRequest(command);
const ticket = 40 + command.length;

console.log("label=" + label);
console.log("ticket=" + ticket);
console.log(response);

const command = "archive";
let label = command;

if (command === "refresh") {
  label = "cache";
} else if (command === "archive") {
  label = "records";
}

const response = require("./request_worker").handleRequest(command);
const ticket = 40 + command.length;

console.log("label=" + label);
console.log("ticket=" + ticket);
console.log(response);

  1. command ← status, label ← status, module.exports ← [object Object]

    1const command→ status = "status"; //@command="refresh", "archive"2let label→ status = command→ status;34if (command === "refresh") {5  label = "cache";6} else if (command === "archive") {7  label = "records";8}910const response = require("./request_worker").handleRequest(commandstatus);11const ticket = 40 + command.length;1213console.log("label=" + label);14console.log("ticket=" + ticket);15console.log(response);16
    values this step[object Object]module.exports

  2. function handleRequest(command)

    values this stepstatuscommand

  3. function checkAccess(command)

    1const command = "status"; //@command="refresh", "archive"2let label = command;34if (command === "refresh") {5  label = "cache";6} else if (command === "archive") {
    values this stepstatuscommand

  4. access ← ok

    values this stepokaccessstatuscommand

  5. response ← service ready

    5  label = "cache";6} else if (command === "archive") {7  label = "records";8}910const response = require("./request_worker").handleRequest(command);11const ticket = 40 + command.length;1213console.log("label=" + label);14console.log("ticket=" + ticket);15console.log(response);16
    values this stepservice readyresponsestatuscommand

  6. response ← service ready

    values this stepservice readyresponsestatuscommand

  7. response ← ok:service ready, ticket ← 46

    7  label = "records";8}910const response→ ok:service ready = require("./request_worker").handleRequest(commandstatus);11const ticket→ 46 = 40 + command.length6;1213console.log("label=" + labelstatus);14console.log("ticket=" + ticket46);15console.log(responseok:service ready);
    outputlabel=status
ticket=46
ok:service ready