Simple built in JS error console


#1

I teach middle school coding, and my school has blocked access to Chromes developer tools. Thimble.Mozilla’s editor has a built in console. You click on a button in the bottom right corner and you see only JS errors. If something like that could be added to glitch it would make glitch a lot more useful in school systems that block webpage inspect options.


#2

Is it blocked from the Chromebook they gave you?


#3

Ah, that’s good to know. I’ll create a feature request for this and we’ll see what we can do. Thanks.


#4

Its a windows laptop. But yes. If I right click on a webpage the inspect option is greyed out and unclickable. Ctl shift i does nothing. They have blocked it at the windows administrative level. And it is a corporate charter school so it is above our local tech guy by several layers of beuacracy in a city far away. Apparently some students were changing websites, and it was freaking out teachers who don’t know how the internet works.


#5

Not an easy fix but we can hope your school - besides being dump for deactivating a learning tool - have a less strict policy to apply this restriction.

If you have access to regedit, try doing this https://stackoverflow.com/a/19726786 or this https://deepinthecode.com/2017/02/22/chrome-developer-tools-not-working/

If that doesn’t work, try to create a god mode folder in your desktop to gain more access.

I’m very interested about this, let me know how it goes.


#6

I went all through regedit chrome section and couldn’t see it. It looks like a lot of stuff is hidden. I’m locked out of Cmd Prompt too. Someone in admin knows what they are doing.

I’m having my students draw shapes to a canvas and teaching them loops and conditionals on the canvas, rather than logging variables to the console. So that is working for me for now as far as teaching goes.


#7

Here’s an example project I created very quicky to show you how your students can debug and see errors while using Glitch without the native Developer Tools.

https://js-errors-in-frontend.glitch.me/

I commented part of the code in case you want to run your own version:

  • Everytime an error happens in the script, the sidebar will display the message and the file that is raising the error.
  • I also overrided the console.log function to allow your students to log messages normally.

You can view the source and remix the project here https://glitch.com/edit/#!/js-errors-in-frontend

Hope this helps!


#8

That is really helpful. I changed the flex direction to column, and the background color of the console, to make it stand out along the bottom of the page. This will be an awesome feature to show them how to keep track of variables.

Thank you very much.

Nathan


#9

I’m glad you customize it! Would love to see what you did.

Wanna collaborate and turn this a tool/template for other teachers to use the Glitch platform.


#10

Sure. I will be working on it this week and then send you the lesson I made. I am not a very experienced programmer but I can give you insight into how the students interact with glitch. I think it is difficult for experts to think back to the time they were beginners. I am constantly having to correct my lessons and simplify code as I realize, oh yea they don’t know how to do that yet.


#11

I know what you’re saying. I’m a self-taught developer, I started when I was around 12. It’s very easy to forget how you learned something and while learning, is hard to document or keep track of these small lessons that make you a stronger programmer.

The things that puts my feet on the ground is to write tutorials, help out in forums or teach someone personally. When you try to explain a concept to someone, that’s where you really check your knowledge. And sometimes you learn more trying to condense this knowledge into a lesson, that just coding stuff and apps.

That’s why I’m always helping in forums, besides that I love to solve stuff - keeps my mind active with new problems.

Let’s collaborate, I think we can help each other a lot.


#12

I incorporated the console into a lesson I was already working on, so I don’t explicitly use it this time. But I do point it out to students in class and explain how it will be useful.

This is the project students are working on

This is the guide they follow to complete the project
https://mrmanjsunit2.glitch.me/scriptkiddie.html