The Gift of Developer Tools, or, 'Don't Be Intimidated' by Deciphering Site Code
Hi. It's Shannon again, and I’m the Möbius Social Media intern here to learn just about anything in 15 minutes from my coworkers. We have dubbed this gift of gifting "The Twelve Days of Möjoy", and I am happy to re-gift these gems with you. Follow along from the beginning.
Let’s Meet Ryan
Name: Ryan Miller
Official Title: Web Developer
Unofficial Title: Miller Lite
What’s your middle name: Evan - the story continues...
First song you play on our office radio: "Luv [Sic] Pt3" by Nujabes
Best habit: Running most days of the week...at the crack of dawn
Favorite website to binge: reddit.com/r/aww/
Time at Möbius: Four months
On the 7th day of Möjoy I wanted to learn more about the world of coding websites. I had gotten the gist of communication and functionality of a site from our Front-End Designer, and I was introduced the basic "language" of how a site is coded via our Director of Web Development, but as I mentioned, I wanted to learn more.
Ryan, another web developer at Möbius, took 15 minutes and showed me a way to learn more about how to use and ABUSE! respectfully manipulate the code on the websites that I use every day, without ever logging into their administrative access.
Ryan introduced me to the Chrome Developer Tools or “DevTools” if you’re cool enough to use the abbreviation (I am not). I liked this tool because it's accessible to anyone—for free and without download—that uses Chrome as a browser.
*Of note: For the purpose of this article and the fact that we only had 15 minutes, we used a Chrome application, but Firefox, Safari, and every browser available has a version of Developer Tools.
Follow along with our three-step process for insta Developer-Vision!
Step One: Click the three vertical dots on the top right of the browser
Step Two: Click “More Tools” (11th item down)
Step Three: Select the last item, “Developer Tools.”
As soon as you click this, a separate window opens where you can see almost all of the code (save PHP files, ya pro) for the web page under the “Elements” tab. As a newb, I was amazed that you could see all of this so easily, on any website you stumble upon. For some reason I figured that developers would keep this hidden in a place that only they could find it. But no, you have immediate gratification on how the page was assembled just by three mouse-clicks, and I’m sure once I understand more about coding, I think it will show me why the developer made the decisions that he or she did.
I automatically noticed the cascading code that I learned a few days ago which was really cool. Another great feature is that when you hover the mouse over the code in DevTools at the bottom, the part of the web page that is manipulated from that code is highlighted on the actual site page you're investigating. This is great for someone like me, just learning code, because I can see exactly how the code was done. I’m going to use this as a tool to learn even more code on my own.
Apart from the HTML, JS, and CSS views, there are other features of the Chrome Developer that piqued my interest. The “Network” tab shows the things that are being downloaded by the page in real time. The developer will tell you if something is taking too long to download and can point you into the direction of why. The “Console” tab will also spit out any errors that are found inside of your site.
Another way to check how your page is doing is with the “Audit” tab. The Audit tab analyzes the page while it is loading, and then it will tell you what should be optimized in order to make sure that it is loading as quickly as possible. This is something that could definitely be used when doing a quick homepage audit like the one I learned about yesterday.
The Developer has another great tool to analyze your page under the “Security” tab. This tab, as I’m sure common sense told you, informs you of how secure your page is. It makes sure that your HTTPS, which I mentioned yesterday, is secure. In other words, it checks how secure your page is with users’ information. It also will tell you if your server certificate is secure, your connection is secure, and that all of the resources are secure.
It truly is fascinating to integrate myself in this world, and to slowly—but progressively—understand what goes on behind the scenes of a website. There are so many lessons to learn and so many aspects of web design that I could probably make the 365 Days of Möjoy…though that hasn't made its way on my assignment sheet just yet (?!?!?!).
I have to say, the most fun item that Ryan showed me was that you can "edit" the code when you have any site open with the developer tool. You can manipulate the appearance of text, height, width, and other stylistic aspects of the page. Of course, your changes are only a you-facing test, meaning you can manipulate the look only in your browser, and a simple refresh deletes all your changes, and the changes never actually rearrange the code that is sent out to millions; it's for you to mess around with for testing purposes. Though, it still made me feel like a really cool pro-coder to be able to put my name all over the Google homepage (I’m a 12 year old at heart—and brain) even if only I could see it.
Check out my work!
Here is Google before:
And here is Google post-Shannon: