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.
|tutorial||level||focus (tab in developer tools)|
|#1 - Delete and modify elements, and Refresh||freshman||elements|
|#2 - Update a course nickname with the API||sophomore||network, console|
|#3 - Updating the DOM and Handling Responses||junior||console, elements|
|#5 - Mutation Observers & React||mutant|
// indexing a few related resources
While searching around the community for this series, I stumbled upon this comment by James Jones.
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.
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.