Developer Tools for the Canvas User

robotcars
Community Champion
3
7715

While collaborating recently, I’ve found myself referring to the Javascript Console, or is it Developer Tools, maybe Web Inspector; what about adding Browser before, do I provide a link? Sometimes, I don’t know whether to provide a link to an article that discusses the particulars of opening, inspecting or getting to the tab I want to reference; or if I’m insulting someone. So, I've decided to create a series of short tutorials that will hopefully walk new developers through some basic tooling around on Canvas with a Browser and JavaScript. I will also try to use these as references in future posts and discussions. I hope they are helpful, feedback is welcome. Enjoy!

 

Before we get started, let me point out that I won’t be getting lengthy on how to open the tools in each browser since everyone can do that with Google, and the easiest way is to right click the web page and select Inspect Element or Inspect, if you're using Chrome.

 

The following is a brief, but detailed, and rapidly escalating tutorial of things any Canvas User can do with Developer Tools. Along the way, I will share some community resources that will help guide you with additional information.

tutoriallevelfocus (tab in developer tools)
#1 - Delete and modify elements, and Refreshfreshmanelements
#2 - Update a course nickname with the APIsophomorenetwork, console
#3 - Updating the DOM and Handling Responsesjuniorconsole, elements
#4 - JavaScript XHR for Canvasseniorconsole, network
#5 - Mutation Observers & Reactmutant

// indexing a few related resources

guidelevelfocus
API Testing: Postman by  @garth ‌advancedapi requests, json

 While searching around the community for this series, I stumbled upon this comment by  @James .

  hiding-content-from-certain-roles#comment-86823 

The problem with JavaScript resources is that, for the basic stuff, you're not trying to learn JavaScript, you're trying to accomplish a specific task. There's no book or website that I want to sit through the whole thing to learn how to program in JavaScript. I don't want to start with "Hello world." I don't have time to start with "Hello world." I want to solve the problem that needs solved and get back to life.

 

My primary resources are the encyclopedia (Mozilla Developer Network documentation) and the commentary on it (Stack Overflow), using Google to get me to the content I need. I often start with a solution from Stack Overflow and then go look up the right way to do it using MDN.

I'll also add that W3 and W3Schools are great resources for what we're doing.

If you have questions or need assistance, please ask in a comment, it will help others.

If you work through these tutorials and find any issues (or Canvas breaking changes) please let me know and I will get it fixed right away.

Please let me know if you would like to contribute, I would be happy to add new tutorials and information. Contribute new tutorials with API endpoints that work for user/student roles, no advanced permissions.

3 Comments
ProfessorBeyrer
Community Coach
Community Coach

carroll-ccsd Thank You for this awesome resource! Your organization of the tutorial steps is perfect. I have bookmarked this page and look forward to trying out the various things. I especially appreciate the quote from  @James  on what most of us likely want to do with JavaScript. At some point we all need a "Hello, world" moment, but that can happen with HTML or JavaScript or any other scripting language.

ken_cooper
Community Participant

Thanks for this carroll-ccsd. (and thanks for the heads up @ProfessorBeyrer ).  I use a good deal of Canvancements right now, but trying to explain to users can sometimes make them feel overwhelmed as soon as I mention downloading Tampermonkey.

The way you have this laid out really makes it simple for users to begin looking at modifying their Canvas environment (without having to download and run scripts).  Looking forward to you continuing to add to this resource.

robotcars
Community Champion

Thank you both! I hope we can all make this a useful resource.

I think what I found was a lot of repetition going over ideas and concepts about the browser. Maybe this will help keep discussions focused on what we're doing with Canvas rather than providing resources on web development. Most of our curious colleagues simply need to know that...

This is JavasScript, for some Page within Canvas, if you trust the author; open your browser, paste, evaluate, tinker.

I'm glad the organization and layout works. I'm hoping to cleanup the individual tutorials a bit and make the steps easier to follow. I had originally been drafting this as single document with comments for each tutorial. Mr. Jones, convinced me it would be better to break them up into separate posts so I didn't end up with another Hello World, and commenting and referencing topics would be easier. :smileygrin:

 @ProfessorBeyrer ,

For me that comment was a reminder that my 20 year career in web development and programming, started with a Google search and cgi/perl script for a guestbook (old school), which I then hacked up to allow a gaming community to share and index custom files.