The Powerful Chrome Development Tools!
A quick history of browsers! The first browser was created by none other than the creator of the internet himself, Tim Berners-Lee. It’s initial release was on December 25, 1990; 28 year ago wow! The browser was originally called WorldWideWeb and was later renamed Nexus to avoid confusion between the web browser software and what the internet was. A screenshot of what the browser looked like can be seen below.
As am a sure you are aware since 1990, there have been many web browsers that have been developed. Today I will specifically be talking about the Chrome browser and giving a high level overview of the amazing developer panels that Chrome has to offer. There is a lot of functionality in the Chrome browser, and I will touch on a few things that I found very useful as an aspiring developer. A very good resource that will go into a deep dive of the Chrome dev tools can be found in the following link via Google. Another amazing resource is the following free course on Udemy. I highly recommend checking it out to get started!
Lets start by opening up our developer tools. You can do this by going to View > Developer > Developer Tools. You can also use the shortcut Command+Option+I on a Mac or F12 or Control+Shift+I for Windows. A full list of shortcuts can be found here!
A useful minor item to note prior to talking about the panels is that you can change the docking style of the dev tools. To change the docking type click the three vertical dots on the right corner of the Chrome Dev tool (see screenshot below). Your options are dock left, dock right, dock bottom, and undock to separate window.
Elements Panel
The first panel in our Chrome dev tool is Elements. This panel will display all of the HTML text on the page, as well as the CSS information on the webpage that your are currently on. I will not go into too much detail here but there is a lot you can do on this panel to temporarily change HTML and CSS.
Console Panel
The second panel in the Chrome dev tool is the console. This a great place to write an play with JavaScript code, console.log(‘Hello, world’) to your hearts content. Shift enter will allow you to continue to write JavaScript code. If you hit the enter key it will submit your code.
Sources Panel
The third panel is my favorite Sources! It is similar to the console but multiply its power by 100! You can utilize the Chrome debugger tool, which is amazing, please read more about it here. You are able to create Snippets, which allow you to write multiple lines of code without having to press shift enter! Simply click on the double right arrow and select Snippets.
Under the Snippets tab you can create a New snippet which will allow for that multi line text! See screenshots.
Once you create a new snippet and write some JavaScript code. To save the Snippet hit CMD + S or right click on the Snippet file and select Save as. You can then execute your code by right clicking on the Snippet and selecting Run. This will execute from the context of the currently open page. You should have access to any saved variables set in the snippet prior to selecting run in the console.
One last cool thing sources can do. If come across some compressed JS or your indentation is not great because you are learning, you can hit the format button { } at the bottom of the Sources panel and this will make your JS readable.
The Sources panel can do a lot more than this, so please checkout the Chrome dev tool links!
Networks Panel
The fourth panel is Networks. This is really cool panel and will give you information how your website performs when your page is loaded. Them good old HTTP GET request.
Performance Panel
The fifth panel is Performance, previously named Timeline. This will provide you information on how your page performs when it is running, as opposed to loading. There is so much to learn about this panel! Please click here!!
Memory Panel
The six panel is Memory and this allows you to find memory issues that affect page performance. The memory it is referring to, is the RAM on your PC.
Application Panel
The seventh panel is Application. This panel allows you to inspect all resources that are loaded. As per the Chrome browser dev page. This includes IndexedDB or Web SQL databases, local and session storage, cookies, Application Cache, images, fonts, and stylesheets.
Security Panel
The eighth panel is Security, which will allow you to view the overall security of your current webpage.
Audits Panel
This is also called Lighthouse, it has audits for performance, accessibility, progressive web apps and more!. There is a 30 plus minute video talking about this panel of the dev tools here. It very cool and can be run on any webpage you visit! A read out looks like the below screenshot!
There is so much to know and learn about the Chrome Development tools. Please checkout the chrome developers site to help you learn as much as you can about how powerful the chrome browser is! https://developers.google.com/web/tools/chrome-devtools/
