Follow

How To Get a Screenshot of Errors in the Console

This is a "ready, set, go" task. There are several steps to take to get ready, then you will record the results. The steps may seem a bit long, but it is not difficult.

You can watch a three-minute video of the steps here:

https://www.screencast.com/t/sTWF5gYb

Let's get READY:

1. Completely clear your cache and cookies. This step is VERY IMPORTANT, so please do not skip it. You must clear out everything, for all time. This will not damage your browser in any way, but it will log you out of most websites. After you do this, do not visit any other websites until you are done recording your screenshot/cast.

How to do it: See https://refreshyourcache.com for instructions for your browser. Please be sure you select "for all time" or similar setting. Be sure to clear out all cookies as well. Do not clear your browsing history, passwords, or any other saved data.

2. Log in to EdReady as you normally do. Navigate to the place where you are having difficulty, but do not start the activity or click the button that triggers it yet.

3. Prepare to take a screenshot or screencast. Do not take a screenshot yet, but get ready to. Ideally, we would like to see this problem "in action" so if you have a way to take a screencast, that would be ideal. Try Loom.com or have a friend take a video of your screen with your phone while you are reproducing the problem. The next best option is to take a screenshot (or take a picture of your screen with your phone) of the error message in the console after it happens. Be sure the picture is high resolution and all text is completely legible or you will have to repeat this process.

4. Open your browser's JavaScript console. This will open a window at the bottom or side of your screen, so you have a split window. The specific steps to do this will vary with each browser. You can google "how to open javascript console in __________ " (fill in the name of your browser).

Below is a screenshot in Chrome when the javascript console is open at the bottom of the screen. The console tab MUST be selected. See the note in blue on the screenshot below. Other browsers will be similar, but the controls might vary a bit.

 

​​​

 

 

 

Good job, now let's get SET:

Double-check that everything is set up. You should have a clear cache, the developer console open, and you are ready to take a screenshot/picture (or a screencast/video).

Check the screenshot above for an example and notes on how things should look before you start recreating the problem. You want the console to be blank (no lines of text or code). Click on the clear button (see the screenshot above) so your console screen is empty.

The screen should show both EdReady AND the browser console window, either side-by-side or top-and-bottom. You are logged in and poised to recreate the problem with one or two clicks.

Now, it's time to GO:

Start taking the steps to REPRODUCE the problem. Enter your username and password, then CLICK the button. At this point, you should see your console window fill up with messages. 

NOW you can take a screenshot of the messages. If the messages fill the screen, you may need to scroll the console screen down to get a second screenshot of the rest of the messages.

Send your screenshots back to us so we can see the errors. THANK YOU!
 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments