Developer Tools Tutorials

If you have experience designing for the web or writing JavaScript, you are probably familiar with the Developer Tools, a suite of tools that allows you to look under the hood of a website to see all of the parts that make it function the way it does. (In WebKit browsers, like Safari, it's known as the "Web Inspector.") If you've never heard of Developer Tools, that's okay! I'm going to walk you through using them because even if you never write a lick of JavaScript, Developer Tools are great for evaluating your library's web tools. (Plus, they let you look at other people's websites, too. It's like getting to see how magicians do things!)

Developer Tools will enable us not only to poke around in the guts of our vendor tools, but it will also allow us to test out sample JavaScript through the Web Console, a sort of terminal that gives you real-time feedback about the website as well as allowing us to enter commands to modify the current web page.

Articles on uing the Developer Tools

Here is a quick (~8 minute) video I made for a course I taught on modifying vendor tools. Sometimes it's easier to see someone use the Developer Tools to understand how it works.