Google Chrome Developer

Google Chrome Developer Tools are designed to provide feedback to programmers and help with the debugging process. You can access it within the settings of the desktop version of Chrome, as well as with the keyboard shortcut Use Ctrl+Shift+I (or Cmd+Opt+I on Mac). Going beyond applications like Built With, which provide insight into the parts of a website, the Developer Tools provide insight into the code and the way it is put together. It provides a side-by-side view which provides into different parts of the page. Beyond the design process, it is useful when trying to lift the bonnet to see the code inside. Doug Belshaw shares how he uses the tools to get links to photos that are baked into the site.

Mozilla X-Ray Goggles

Along with Thimble and the Web Literacy Framework, X-Ray Goggles allows users to explore the building blocks of the web. It runs via a bookmarklet that you add to the bookmark bar. Like the Developer Tools, the Goggles allow you to peek into the code that makes up the web. However, where it differs is its intent to provide the means to tinker with the code. Some examples of how this could be used include remixing the news to appreciate how information is presented (see Kevin Hodgson post on fake news) or changing names and details for privacy reasons. These makes can be published, which gives them a unique address or you can just screenshot the page. It must be noted that unlike the Developer Tools, which is built into the Chrome browser, you need to create an account to use X-Ray Goggles. For more ideas and information, check out the following teaching kit as well as this introduction.

Whether coding is or is not the literacy of the 21st century, it is important to appreciate that coding is not always about starting from nothing. Sites like GitHub and Scratch provide the means of repurposing code. However, applications like the Developer Tools and X-Ray Goggles allow you a different means of borrowing. At the end of the day, maybe copying is who we are.

Mozilla Thimble is a part of a suite of tools, including Webmaker and X-Ray Googles, designed to help teach the web by (re)making the web. It allows you to easily create, remix and share webpages. Using HTML and CSS language, putting in the code on the left and then seeing it come to life on the right. What is great are the hints and errors that pop up as you work.