WebHIDでInputReportをReportID別に眺めるやつ

hid-inputs-viewer.html

<!-- inspired by https://nondebug.github.io/webhid-explorer/ -->
<!-- license: CC0 -->

<button>Connect HID device</button>

<script>
const t = (e,p) => Object.assign(document.createElement(e), p);
const addSection = (title) => {
  const header = t("h3", {textContent: title});
  const textarea = t("textarea", {
      style: "width: 100%; height: 10em",
      readonly: true
  });
  document.body.append(header, textarea);
  return textarea;
};
const nowText = () => new Date().toLocaleTimeString(undefined, {hour: "2-digit", minute: "2-digit", second:"2-digit", fractionalSecondDigits: 3});
const log = (textarea, msg) => {
  const line = `${nowText()}: ${msg}`;
  const lines = textarea.value.split("\n");
  const newLines = [line, ...lines].slice(0, 10);
  textarea.value = newLines.join("\n");
};

const elems = {
  idHistory: addSection("ReportID history")
};

document.querySelector('button').onclick = async () => {
  const device = (await navigator.hid.requestDevice({filters:[]}))[0];
  device.oninputreport = (e) => {
    const reportIdStr = `0x${e.reportId.toString(16)}`;
    log(elems.idHistory, reportIdStr);
    elems[reportIdStr] ||= addSection(reportIdStr);
    log(elems[reportIdStr], [...new Uint8Array(e.data.buffer)].map(x => x.toString(16).padStart(2,0)).join(" "));
  };
  device.open();
};
</script>