When I typed console.log to my browser, why does Google Chrome not showing me the result?

Admin 1
Viewed 103

I'm a blind learner. I want to test an expression like

console.log(1 + 2);

function myFunction() {
  var a = 1 + 2;
}
console.log(myFunction());

But it is not showing me anything (not even errors).

I don't know if that is an accessibility issue.

My browser is up-to-date.

Any help will be greatly accepted.

accessibility javascript
2 Answers

Google Chrome does not make it easy for a visually impaired person to see the result of a console.log() statement in their Developer Tools Console.

I used NVDA in my experiments. Your experience in other screen readers may be different.

  1. I entered console.log(1+2) and pressed Enter.

  2. I pressed Shift+Tab.

    This read "undefined", as that is the return value of console.log().

  3. I pressed Left Arrow once.

    This read "three".

I can't imagine the experience of reading anything more complex would be. Good luck.

user_2155520

Navigating and using developer tools is difficult at first with a screen reader, but it doesn't take long to get used to it.

First, have a read of this document from Google on devtools shortcuts you will find there are loads of shortcuts that you can use. This makes it easy to get used to navigating the console.

How to navigate in your example.

What is confusing when you are not used to it is that the text that is logged to the console is attached to the line and character declaration (so for example it may read "VM50:1 3", explained below)

So in your example above you navigate to the previous item (shift + Tab) to get undefined as that is still what console.log(1+2) will return.

Then if you press the Up arrow it will focus a link and announce "link vm50:1 3" where "link vm50:1" is line and character number and "3" is the answer.

An easier way to understand this is to log some words to the console instead, if you log "I like cheese, it is yummy" you will get something like "VM50:1 I like cheese, it is yummy"

One thing that can be confusing is when you get an error that results in a stack trace (as we are reading from the bottom to the top). For that I tend to spam the up arrow until I don't hear "at" and get a script name as that will announce the error as well.

Finally try navigating via links (Shift + K in NVDA) as that can also be a quick way to get to errors (although can be confusing if you get a stack trace as above).

user_27028940
Related