New user, lots of Violation notices

I’m trying to learn JSON and Javascript in order to acquire data from remote sources for a project, following along with a video by Brad Traversy, and after downloading and installing Atom I keep getting errors. I imagine there’s some basic config that I haven’t done but thought I would ask to learn more. Here are some of the errors I’m getting in the console pane (I’m not seeing any data), once I open it (View->Developer->Toggle Developer Tools) in MacOS 10.14.3:

[Violation] ‘keydown’ handler took 481ms
VM22 :14 [Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
updateEventListeners @ VM22 :14

handleDocumentKeyEvent @ VM22 :11

Here’s my source:

JSON sandbox

Here’s my version info:
$ atom --version
Atom : 1.34.0
Electron: 2.0.16
Chrome : 61.0.3163.100
Node : 8.9.3

I would also like to know how Mr. Traversy gets that reload button up (I’m typing Cmd-R).

Hmmm … my HTML got filtered out, displaying just the Title. The rest is about as simple as simple gets, with the Script in the Body consisting of just this:
var person = { name: “Jack”, age: 37 }
console.log(person.age) ;

Here are some of the errors I’m getting in the console pane (I’m not seeing any data), once I open it (View->Developer->Toggle Developer Tools) in MacOS 10.14.3:

[Violation] ‘keydown’ handler took 481ms

Those aren’t errors; they’re just warnings. They can be disabled by unchecking ‘verbose’ in the drop down that likely says ‘All levels’, to the right of the ‘filter’ bar.

For automatic refreshing, try the atom-live-server package.

1 Like

Thanks very much, Aerijo … that helps. I’m still trying to puzzle out how the atom-live-server works … it brings up a browser tab outside the Atom window, but that tab never gets populated.

It runs an HTTP server around the folder you have open in Atom, so if you don’t have an index.html it won’t have anything to show.

The file I’m attempting to edit & execute is: /Users/me/Documents/Developer/JSON/index.html

Please post a screenshot of your Atom window with the folder structure visible.

That should appear as a blank page, since you don’t have any body content.

This is progress, thanks very much … if I add “

Hello Hurld!

” inside the Body but before the Script and then refresh the browser window, I see “Hello Hurld!” displayed. But:
  1. How do I display the contents of the variable I’ve defined inside the Script, as Mr. Traversy does in his video (at 8:08) in my Atom console?
  2. I’m also still curious where the “Reload button” he refers to that populates his Console pane is located … I can save the file and then refresh it in my browser outside Atom, but not in Atom’s console as he appears to.

When I use Firefox rather than Safari to display the atom-live-server result and enable its own Tools->Web Developer->Web Console, I also get an error: 36%20PM

The error tells you what’s wrong, but not very clearly. You copied and pasted your text from somewhere, so instead of typing "Jack", you pasted “Jack”. See how the quotes are different? A computer has no sense of visual pattern recognition, so when it sees two characters that aren’t the same, close doesn’t matter. The only valid quotes for strings are ", ', and `.

I can’t look at the video right now, but I’ll check it later.

1 Like

Bingo with “Jack” and the error I was seeing in the Firefox Web Console even though the correct info was showing in the browser … thank you!

I checked the video and at no point does Brad use a console inside Atom. That’s a Chrome window set up alongside the Atom window.

1 Like

Thank you again … I think I’ve got it now … will leave further questions (if any for another thread). Blessings.