オンラインシリアルポートデバッガー

コア API：Web Serial API

このツールは Web Serial API 上に構築されており、ブラウザを通じてシリアルポートにアクセスするための JavaScript インターフェースを提供します。

主な機能：

• ドライバやプラグインのインストールなしで、ブラウザがネイティブにシリアルポートアクセスをサポート
• 複数のシリアルポート設定（ボーレート、データビット、パリティ、ストップビット、フロー制御）をサポート
• Readable/Writable Streams を使用した双方向データ通信
• Promise と async/await に基づく非同期操作

実装手順

const port = await navigator.serial.requestPort();

await port.open({
  baudRate: 9600,
  dataBits: 8,
  parity: 'none',
  stopBits: 1,
  flowControl: 'none'
});

const reader = port.readable.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  // 受信データの処理（Uint8Array）
  const text = new TextDecoder().decode(value);
}

const writer = port.writable.getWriter();
const encoder = new TextEncoder();
const data = encoder.encode('Hello Serial!');
await writer.write(data);

await reader.cancel();
await reader.releaseLock();
await writer.releaseLock();
await port.close();

使用される主要 API

• navigator.serial.requestPort() - ユーザーにシリアルポートの選択を要求
• port.open(options) - 設定でシリアルポートを開く
• port.readable.getReader() - 読み取りストリームの reader を取得
• port.writable.getWriter() - 書き込みストリームの writer を取得
• reader.read() - シリアルポートからデータを読み取る
• writer.write(data) - シリアルポートにデータを書き込む
• TextDecoder / TextEncoder - 文字列とバイト配列の変換
• port.addEventListener('disconnect') - デバイス切断イベントをリッスン