Tip: Taking full WhatsApp conversation screenshot from Desktop

The tactic works on WhatsApp Web Version 2.2037.5

I had a WhatsApp conversation with one of my clients that I had to take a screenshot for backup (I don’t keep WhatsApp backup in Google Drive). I found many other solutions like the “LongShot” app on Android devices. But I found an easy solution that I liked personally being in a Software development profession.

The technique is simple:

• Open a WhatsApp conversation in Web Browser
• Remove the contact list sidebar
• Capture the full-page of the screen

Avail Full-page Screen Capture Tool

Install any working Full Page screen capture browser extension. For Edge Chromium and Google Chrome I use:

GoFullPage — Full Page Screen Capture — Chrome Extension

For Firefox you can grab any working solution from here. Firefox now has an in-built screen capture feature available with the right click of the mouse.

ALERT:
With a Full Page screen capture, you cannot capture the entire conversation because of the left sidebar.

Step #1: Developer Console in Browser

Connect your WhatsApp to the web browser. Open the Developer Console from your browser. Keyboard Shortcuts are:

• Ctrl + I (Google Chrome or Edge Chromium)
• Ctrl + Shift + K (Firefox)

Step #2: Open conversation and load all

• Now click on the conversation you want to take the full page screenshot.
• On the right panel, scroll up/down to load all the conversations on that specific thread.

Step #3: Remove sidebar

In the Browser’s Developer Console, type the following code, and hit enter:

document.getElementById(‘side’).remove();

This will remove the sidebar from the view (DOM). It’s a working piece of code (#side) as of WhatsApp Web Version 2.2037.5

Update 05-FEB-2021

After the comment from celtichero44, I found an issue with Medium’s code formatting and font. The above code is showing SyntaxError because of the wrong quote sign copied from this Medium article.

1. You can either type the code on your own, or
2. You can copy-paste and then replace the quote signs

Instead of copy-paste, better type the code in Developer Console

Thanks to celtichero44 for pointing the issue.

Step #4: Take full page screenshot

Now use the Full Page screen capture browser extension (or, browser feature) to take the screenshot of the full page. You will get the complete discussion as a screenshot.

Done. 😊