How to view and save the console log in a browser
When you interact with a website, there’s a lot going on behind the UI that you see. For everything that you click on, the website communicates with a server to show you the information that you want. When a website doesn’t respond the way it should, you need to examine what went wrong and one of the things you’ll look at is the messages/requests that were sent and received. You can do this through a web console that is a feature on some browsers. Specifically, you can do this in Chrome and all other Chromium-based browsers like Edge or Opera. The process will be the same so we’re going to show you how to do it in Chrome.
View and save console log
Open the browser and navigate to the website you’d like to view all sent/received requests for. Use the website until it throws an error or it reacts in a way it shouldn’t e.g. you click on ‘Sign in’ and it takes you to its home page.
Tap the F12 key, or tap the Ctrl+Shift+I keyboard shortcut, or go to the browser’s settings menu and look for Developer Tools. In Chrome, you have to click the more options button and go to More tools>Developer Tools.
The tools will open at the bottom, or the side, splitting the current tab. The developer tools have lots of little tabs. Look for the Console tab and select it.
The log will already be populated with every request that was sent between the website and the server it communicates with. You just have to save it all. Right-click inside the console, and select the ‘Save as’ option. A save file dialog box will open. Select where you want to save the file, and you’re done.
The file will have the LOG file extension but it is a text file so you can view it with Notepad, or any other text editor of your choice. If you’re experiencing trouble on a website, this file can help troubleshoot it. In the event the problem is specific to a browser, e.g., a website fails to respond in Firefox but works fine in Chrome, you’re going to need a different way to get the log. A lot of people use a paid tool called Charles Proxy. It’s been around a while and has become the go-to tool for viewing network traffic. You can look for a free alternative; there’s Fiddler that is free. These tools tend to be a little complicated to set up which is why browser consoles are so much better.
