Previewing HTML and JS together on Atom


How is it possible to write code within Atom and check that HTML and JS are operational together.

In the “Getting User Input - Text” mini assignment, Ivan uses a package that both can preview HTML and JS at the same time.

I can’t get the text box to appear on the screen. Without seeing it work in real time, it’s difficult to know whether any of the assignments are truly successful.

Transferring the code to the console developer within Google doesn’t work either…

How to track changes to a page as well as the console developer (console.log):

  1. Download ‘Chrome Preview’ from the Atom installer.
  2. Then, click on ‘Packages’ in the menu above, then ‘Preview in Chrome’ and then ‘Preview’. The screen will spilt.
  3. Note: All your documents must be first saved in an .html file. Once saved, refresh the url in your Chrome browser to see changes in the page and /or console log.

This journey to get my screen looking like Ivan’s on his teaching videos - no word of a lie - has cost me at least 20 hours of searching - although not consecutively, I may add!?!

Nothing like posting answers to your own post.

I hope this has saved some of you some time.