INTRODUCTION
Until aspiring, self taught web developers stray away from tutorials and towards building their own projects, there is a lack of appreciation for solving real problems. Learning by following tutorials is a great start, but actual growth comes from trying, failing, and solving. Web developers are blessed with developer tools. These tools are built into the browser and require minimal effort to access. It is easy to view the source of a page. More importantly, it is easy to inspect aspects of an element. On top of all that, browsers give web developers access to even more tools that can be used in the debugging process. Under the hood, modern day web browsers are playgrounds for both new and experienced developers. These developer tools are excellent in aiding the development process by presenting data and spotting bugs.
VIEW PAGE SOURCE
While there may be varying opinions, chromium based browsers have excellent tools for developers. Other browsers may work differently, but the information provided in this post will be related to chromium browsers. With a single click, it is possible to view the source code for a website. While this may not be useful all the time, it can help to see html structure. Right clicking on an area of a website that is empty will allow developer to click on ‘View Page Source’. On windows the shortcut is Ctrl + U. Viewing the source code for YouTube may not be very useful:
Viewing the page source for Twitter may present as slightly more coherent but still not very useful for the inexperienced developer:
While it may take more advanced knowledge to make sense of code on these pages, it is a good habit for inexperienced developers to start looking at page sources.
INSPECT
A much more useful tool is using the inspect option. Right clicking the page and choosing ‘Inspect’ or pressing ‘F12’ on windows machines will open the developer tools. Alternatively, developer tools can be found in the menu.
Inspecting something such as an image will go directly to the ‘Elements’ tab of the developer tools. Other methods are also available to reach the elements tab.
As shown above, ‘Inspect’ presents the ‘Elements’ tab. The ‘Elements’ tab has useful information related to a website’s HTML structure and CSS styling.
The ‘Element’ tab offers a look at all the different html tags that are used to compose the website. Clicking on an html element will show the CSS styling applied to the element as well as the box model. When creating a website, using the ‘Elements’ tab can help a developer understand why a website may not be presenting the way the developer expects.
DEVELOPER TOOLS INTERFACE
Looking deeper into the Developer Tools interface, ‘Console’, ‘Snippets’ and ‘Network’ are helpful tabs that can help diagnose problems. The console can be used as a medium for applications to relay information or diagnose problems. The console can also be used as a playground to run pieces of code.
Taking that idea further, the ‘Snippets’ section found in the ‘Sources’ tab allows developers to save pieces of code. This code can be executed and viewed on the console. In the image below, makeDeck and drawCard functions are saved to the snippets tab. Pressing ‘Ctrl + Enter’ or clicking ‘Run snippet’ will execute the code. The console shows that code that has been executed.
Another great tab for developers is the ‘Network’ tab. This tab can help diagnose problems with the back-end.
Developers can view the status resolutions of various scripts. If console.log or debugger can’t help narrow down the problem, the network tab can offer more clues.
While there are other tabs that exist in the Developer Tools interface, and there is much more depth to each of these tabs presented thus far; the basics of these three tabs should get beginners started on the path of confidently diagnosing problems. Developers that familiarize themselves with these tabs will gain a better understanding of web applications.
CONSOLE.LOG
An extremely helpful tool for developers is the console object. While there are more advanced uses of the console object, console.log is a beginner’s best friend. Using console.log allows developers to create helpful hints.
In the example of above, data is being pulled from PokeAPI. The data retrieved is passed into console.log as an argument. This dynamic creates breadcrumbs on the console that the developer can follow. Whenever a button is clicked, the data should be shown on the console.
When the ‘Click Me’ button is pressed, the console relays all of the data fetched from the PokeAPI website. With this information, a developer can target specific parts of the data and render it to the user interface.
DEBUGGER
Another helpful method is the debugger keyword. Using the debugger in tandem with iterations is especially useful. Placing the debugger keyword within a code block before an iteration such as a loop allows the developer to view each step of the code.
In the function above, a string is entered as an argument and is returned reversed. The debugger keyword is placed just before the loop that reverses the input string. The developer is able to see how the function executes each iteration. Using this method, it is very easy to find where code may be taking missteps.
CONCLUSION
Leaving the world of tutorials and entering the uncharted domain of building projects from scratch can seem like a daunting task. To set up an environment for success, it is important for aspiring web developers to be familiar with developer tools that are easily accessible. Developer tools exist on browsers, and these tools are a quick way for anyone to jump in and experiment. As developers gain more experience, using browser developer tools will become second nature. With increased familiarity, the developer can start looking into more advanced functionality of the developer tools.
To get started, developers should view page sources and inspect elements. The console can be used to quickly test code, or snippets can be used to save code for future reference. Glancing at the network tab to view various status resolutions can be beneficial for the developers interested in the back-end. More importantly, learning to use the console object will save developers time in the long run. Utilizing the debugger to view code execution each step of the way gives developers a better perspective on how their code actually functions. Mastering these tools will give developers the confidence to avoid hiding from bugs and errors.