How to beat WORDLE in 30 seconds or less

How to beat WORDLE in 30 seconds or less

·

2 min read

Even if you've never played the game, you've probably heard about it. I recently decided to give it a spin, and it turns out I'm so good at it that I can win all sessions in 30 seconds or less. Let me show you my secret sauce.

DevTools

Instead of trying to come up with a bunch of mind hacks, I think this is a great opportunity to learn more about browser DevTools and how to deal with applications that you're unfamiliar with, even if the codebase is obfuscated.

Find the event

To figure out if a correct word has been entered - the application has to compare it to the actual word. So it has to be somewhere in there. And look - there's a convenient "Enter" button and a keyboard with an event attached to the DOM directly:

Screen Shot 2022-01-27 at 21.06.21.png

Click the "Event" bubble next to the Keyboard element and click "Open in Debugger"

Screen Shot 2022-01-27 at 21.11.11.png

Step through breakpoints

In the debugger, you'll see something like this:

          this.$keyboard.addEventListener('click', (function (a) {
            var s = a.target.closest('button');
            s && e.$keyboard.contains(s) && e.dispatchKeyPressEvent(s.dataset.key)
          })),

We're not interested in how the event is added, but rather what it does. It seems that another function called e.dispatchKeyPressEvent is triggered.

Doing a quick search in the file reveals that it's going to dispatch a custom event called game-key-press.

Add a breakpoint there by clicking on the line number and click enter to trigger the breakpoint:

Screen Shot 2022-01-27 at 21.15.28.png

By pressing enter the game is going to try to validate my input and to do so - it's going to have to compare my result to the actual result.

At this point, we don't know what exactly we're looking for, so just cruise the debugger up and down and inspect the values as the script is executed. Until you see this:

Screen Shot 2022-01-27 at 21.29.53.png

Who's this? A solution to the game?

Start paying attention to the this scope and look for solution.

Easy Winning

It turns out that the solution key lives directly on the <game-app> web component. All this time it was hiding in plain sight:

document.querySelector('game-app').solution

Enjoy your easy winnings. Just remember me when you're Twitter famous.