Get Screenshot + Console Logs + HAR log using Capture Page State Chrome Extension

What Problem do I want to solve?

As a developer whenever a bug is reported you want to have as much context as possible to be able to solve the issue in the most efficient manner. Depending on the technical level of the reporter, you can get a screenshot with reproduction steps, or maybe just a screenshot with no context. If the error happens on a web app it can be caused by many things...logic from the front-end may have failed, the network may have gone down, the back-end did not respond in time, or there was a server error. Many things could have gone wrong which is why providing as much context as possible is important when trying to squash a bug. As developers, we check the console logs in the Developer Tools to look for errors or look at the Network tab to check if any of the requests returned an error or timed out. If there was a tool that allowed you to get all three: Screenshot, Network requests aka HAR log, and Console Logs at once, it would make all developers' lives easier by providing as much context as possible.

Why do I care about this?

As a developer, when an issue is reported I find myself asking many questions that the reporter does not always have the answer to. Many of these questions can be solved by providing HAR log, Console Logs, and a Screenshot. This will allow me to narrow down in which part of the application needs to be fixed and not spend much time trying to replicate the issue.

Why create an extension to gather all of these if you can do it manually?

Because it is time-consuming! and no one wants to read instructions when they're mad because the web app is not working properly and you're trying to report an issue.

How to get each item individually

If you are curious as to how to get each of the three items I will explain them below

Taking Screenshot (using Snipping Tool)

1. Open Snipping Tool

2. Click on New

3. Draw rectangle on capture region

4. Click on Save Snip

5. Give it a name and click OK

Getting Console logs(On Google Chrome)

1. Open Chrome Dev Tools (F12)

2. Click on Console Tab

3. Right Click inside of panel

4. Click on Save as...

5. Give it a name and click Save

Getting HAR log (On Google Chrome)

1. Open Chrome Dev Tools (F12)

2. Click on Network Tab

3. Click on Export HAR...

4. Give it a name and click Save

How to get Screenshot + Console Logs + HAR log using Capture Page State

1. Click on Extension Icon

   1. 

2. Select what you want to capture

   1. Screenshot
   2. Console Logs
   3. HAR log
      1. Chrome Dev Tools needs to be open to get HAR log

3. Click on Get Snapshot

   1. The items selected will now be downloaded, 1 file per item

Demo

Thank you for your time, if you want to install or read more about Capture Page State Chrome Extension you can visit the repository.

Comments

[Nuno Faria]

Cool extension, any reason why it is not published in Chrome Web Store?

[Salvador Hernandez]

There's a few things that I would like to fix before that is done:

1. Remove unnecessary permissions
2. Be able to name each file accordingly when downloading (.har, .png, .json)

I also don't have the time to actively maintain it.