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)
Open Snipping Tool
Click on New
Draw rectangle on capture region
Click on Save Snip
Give it a name and click OK
Getting Console logs(On Google Chrome)
Open Chrome Dev Tools (F12)
Click on Console Tab
Right Click inside of panel
Click on Save as...
Give it a name and click Save
Getting HAR log (On Google Chrome)
Open Chrome Dev Tools (F12)
Click on Network Tab
Click on Export HAR...
Give it a name and click Save
How to get Screenshot + Console Logs + HAR log using Capture Page State
-
Click on Extension Icon
-
Select what you want to capture
- Screenshot
- Console Logs
- HAR log
- Chrome Dev Tools needs to be open to get HAR log
-
Click on Get Snapshot
- 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.
Top comments (2)
Cool extension, any reason why it is not published in Chrome Web Store?
There's a few things that I would like to fix before that is done:
I also don't have the time to actively maintain it.