<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Attiq Rahman</title>
    <description>The latest articles on DEV Community by Attiq Rahman (@keyandpixel).</description>
    <link>https://dev.to/keyandpixel</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4162291%2Fbcb8debb-0c5a-4cf1-84c4-58f933206eeb.jpg</url>
      <title>DEV Community: Attiq Rahman</title>
      <link>https://dev.to/keyandpixel</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/keyandpixel"/>
    <language>en</language>
    <item>
      <title>I Built a Free Keyboard Tester in the Browser — Here's Exactly How It Works (and How to Use It)</title>
      <dc:creator>Attiq Rahman</dc:creator>
      <pubDate>Sun, 04 Oct 2026 18:39:44 +0000</pubDate>
      <link>https://dev.to/keyandpixel/i-built-a-free-keyboard-tester-in-the-browser-heres-exactly-how-it-works-and-how-to-use-it-49bl</link>
      <guid>https://dev.to/keyandpixel/i-built-a-free-keyboard-tester-in-the-browser-heres-exactly-how-it-works-and-how-to-use-it-49bl</guid>
      <description>&lt;p&gt;&lt;em&gt;Disclosure: I built and run &lt;a href="https://keyandpixel.com/" rel="noopener noreferrer"&gt;Key &amp;amp; Pixel&lt;/a&gt;, a free browser-tools site, and the keyboard tester discussed here is my own tool. Everything below is verified against the live tool — no invented benchmarks, no borrowed screenshots.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;A switch that starts double-registering — one keypress, two letters — is one of the most common ways a keyboard starts dying, and it gets blamed on everything else first: the PC, the game, the connection. I didn't want to install a driver-level diagnostic for a five-second check, so I built a keyboard tester that runs entirely in the browser. This post is both a step-by-step guide to testing your own keyboard online and a breakdown of how the thing actually works, because the browser's keyboard events are weirder than they look.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1: Test every key, systematically
&lt;/h2&gt;

&lt;p&gt;Open the tester, click anywhere on the page so it has focus, and press keys row by row. Each key lights up while held and stays shaded after release, so you always know which keys you've covered. The counter (&lt;code&gt;n / total keys tested&lt;/code&gt;) tells you when you're done.&lt;/p&gt;

&lt;p&gt;First, make the on-screen drawing match your physical board — otherwise you'll "fail" keys that don't exist:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Size:&lt;/strong&gt; Full (104/105), TKL, 75%, 65%, 60%, or Laptop (half-height function row, hatched Fn key)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Standard:&lt;/strong&gt; ANSI (wide one-row Enter) vs ISO (UK, tall Enter)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Platform:&lt;/strong&gt; Windows or Mac modifier placement&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Step 2: Check for the three failure modes that actually matter
&lt;/h2&gt;

&lt;p&gt;Most keyboard problems aren't dead keys. They're:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Chatter&lt;/strong&gt; — one press, two events. The tester counts these as "chatter events." Anything above zero on a key you pressed deliberately means the switch is degrading.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Stuck keys&lt;/strong&gt; — a key held longer than 3 seconds without you holding it gets flagged. That's a physically stuck switch or a driver issue.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Rollover limits&lt;/strong&gt; — hold a handful of keys at once. The tester tracks "max held." Cheap membranes often cap at 2–6 simultaneous keys; if your game needs WASD + Shift + Space and your board drops one, this is how you find out.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Step 3: Measure auto-repeat and typing accuracy
&lt;/h2&gt;

&lt;p&gt;Hold any letter key and the tester measures your system's &lt;strong&gt;repeat delay and rate&lt;/strong&gt; — useful if typing feels sluggish and you suspect an OS setting rather than hardware. There's also a "type check" sentence that catches missed and doubled letters in real typing, matched by physical key position (&lt;code&gt;event.code&lt;/code&gt;), so it works on any language layout — AZERTY and QWERTY produce the same codes.&lt;/p&gt;

&lt;h2&gt;
  
  
  How it works under the hood
&lt;/h2&gt;

&lt;p&gt;The whole tool is built on &lt;code&gt;keydown&lt;/code&gt;/&lt;code&gt;keyup&lt;/code&gt; events, but three event properties do the real work:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;keydown&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;code&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;code&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;       &lt;span class="c1"&gt;// 'KeyA', 'ShiftLeft', 'Numpad7' — physical position&lt;/span&gt;
    &lt;span class="na"&gt;keyCode&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;keyCode&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// 65, 13 — legacy, deprecated, still everywhere&lt;/span&gt;
    &lt;span class="na"&gt;location&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;location&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// 1 = left, 2 = right, 3 = numpad&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;code&lt;/code&gt;&lt;/strong&gt; is position-based, which is why layout-independent matching works.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;keyCode&lt;/code&gt;&lt;/strong&gt; is deprecated but older games and software still read it, so the tester reports it.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;location&lt;/code&gt;&lt;/strong&gt; is the only way to tell left Shift from right Shift.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The tester also suppresses the browser's default reaction to Tab, Space, Backspace and the function keys (&lt;code&gt;preventDefault()&lt;/code&gt;), so pressing them tests the key instead of scrolling the page.&lt;/p&gt;

&lt;h2&gt;
  
  
  The platform quirks that took the most time
&lt;/h2&gt;

&lt;p&gt;Three real-world behaviours needed explicit handling:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Windows AltGr&lt;/strong&gt; sends an invisible Left Ctrl event with the same timestamp. The tester spots the pairing and ignores the phantom, so Left Ctrl only counts when you actually press it.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;macOS Caps Lock&lt;/strong&gt; fires one event when it switches on and another when it switches off. Without correction it looks like a key held for minutes.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;macOS + UK (ISO) keyboards&lt;/strong&gt; report the &lt;code&gt;§&lt;/code&gt; and &lt;code&gt;`&lt;/code&gt; keys (beside left Shift) with each other's codes in most browsers. The Mac ISO drawing accounts for it and self-corrects if a browser reports them the other way.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What a browser-based tester can't do — be honest with yourself
&lt;/h2&gt;

&lt;p&gt;A web page only sees the keys the OS and browser pass along. So &lt;strong&gt;the Fn key, Touch ID, media keys, the power key, and browser-reserved shortcuts (Ctrl+W, Ctrl+T, Cmd+Q) will never register&lt;/strong&gt;, even on a perfect keyboard. Fn is drawn hatched and excluded from the count. Print Screen on Windows only fires on release. If you need to test those, you need a driver-level tool, not a website.&lt;/p&gt;

&lt;p&gt;It's also not a benchmarking lab: it reports what your browser observed, at browser timing precision. For 99% of "is this key dying?" questions, that's exactly enough.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;

&lt;p&gt;The tester is free, needs no signup, stores nothing, and runs at &lt;a href="https://keyandpixel.com/keyboard-tester/" rel="noopener noreferrer"&gt;keyandpixel.com/keyboard-tester&lt;/a&gt;. Press every key once, hold a handful together, and check the chatter counter — if it stays at zero, your board is fine and you can go back to blaming your aim.&lt;/p&gt;

&lt;p&gt;If you find an edge case it misses, there's a "Tell us" link on the page. It goes straight to me.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>productivity</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
