Introduction
One of the essential skills a developer needs is bug-fixing. It’s unlikely that your code will work as you expect it to every time, and being able to diagnose and fix it is a vital part of the process of development.
Don’t feel disheartened if your code needs debugging; it is just a natural part of development. Sometimes we can feel a bit overwhelmed with the errors we’re getting back, and often it’s a good idea to take a step back for a while and come back to the code with a fresh pair of eyes.
A technique called ‘rubber duck debugging’ is the idea that you should have a rubber duck with you as you develop to help you if you get stuck. When you get stuck, talk to the rubber duck and explain your code to this duck. We can get so caught up in our code that taking a step back and explaining it to a person (or a duck) can give us a bit of perspective.
Over-complicating solutions are one common issue you will get better at as you become more experienced. We try to write CSS in such a way that we don’t repeat ourselves and don’t write too much code, and thus we end up with spaghetti code, unable to tell what is affecting what.
Developer Tools
Most major browsers have built-in Developer Tools to help you work on your projects. Here you can add and remove HTML elements and CSS styling to eventually find where the issues are and what is causing them.
In this lesson, we’ll look at Firefox’s developer tools, but Chrome has similar ones.
To open your developer tools, press: Ctrl + Shift + I on PC, and Cmd + Opt + i on macOS.
You can also open it by right-clicking an element and then clicking ‘Inspect Element’.
Click on the tabs below to discover more about Firefox’s developer tools.
Delete Node
When debugging a site, especially if there is a horizontal scrollbar and you can’t find what is causing it, it’s a good idea to find out which element is causing the issue.
Slowly remove elements from the page until you see which element is causing the issue.
To remove elements from the page, right-click and select ‘delete node’.
You can also create a new node or duplicate a node.
Edit as HTML
To change the HTML displayed on the page by directly editing from the console, choose ‘Edit As HTML’.
Select the parent element you want to edit, and then add/change/remove any HTML inside your browser window.
Style Rules
You can see what styles are applied to an element by selecting it in the inspector and then viewing the styles applied under ‘Rules’.
In this example, we are looking at the <h1>.
We can see the following:
- it has a
font-sizeof3em, which is applied in amedia queryon line 18. - its colour is set on line 12.
- the sizing of
2emis overridden by themedia queryand is crossed out. - it inherits its font from the body element set on line 1.
WCAG Checker
Another useful tool is the WCAG checker, which allows you to see if the colour of your text is WCAG compliant. Simply click the colour circle under ‘Rules’, and it’ll open up an option to adjust the colour. At the bottom, it compares the text colour with the background colour and tells you whether it is compliant. In this case, the colours are not WCAG compliant.
Layout
The ’ Layout’ tab is a handy tool when working with Flexbox and CSS Grids, as well as for spotting any issues with the CSS Box Model.
The example below shows that the main is set to flex, and we can see which items are flex items. We can also see that the header is using CSS Grid.
Below, we can see that the selected element has a margin of 10px, a border of 0px, and a padding of 5px. These values can be edited directly in the developer tools.
Responsive Design Mode
The Responsive Design Mode allows you to test your site at various screen sizes. To toggle it on, you can click the icon, which looks like a phone and tablet or press Ctrl + Shift + M on PC or Cmd + Opt + M on macOS.
From here, you can choose a preset screen to view. You can update and choose which device screen size you’d like it to mimic. You can also update the orientation to see how a user might see the screen in landscape on a tablet, for example.
A great feature of Firefox is that it allows you to close the inspector and still have the responsive design mode on.
DOCUMENTATIONMDN docs on browser developer tools: What are browser developer tools?
More to Explore
There is plenty more to explore on the developer tools. Experiment with different features to see what helps your development process. As we work with JavaScript later in the course, you’ll get even more out of the developer tools.
NOTEIf you right-click and choose ‘View Page Source’, any issues, such as typos or unclosed elements, will be highlighted in red to show you where you went wrong.
Testing and Validation
A key part of development is validating your code to ensure there aren’t simple errors. You might not spot a basic typo or error if you’ve worked with the same code for a long time. Using external tools to validate and test your site is key to creating bug-free code.
Validator.w3.org
One tool you can use to validate your HTML is validator.w3.org. Simply paste your web page’s URL into the address bar, and it will point out any basic errors or mistakes. It will usually also make recommendations on how to fix each error.
WAVE Web Accessibility Evaluation Tools
The WAVE tools allows you to test whether your website follows best practices for accessibility. It’s great for conducting audits of your site. You can post the url on the website, or download the browser extension to test as you work.
Google Lighthouse
Another popular tool for auditing your website is Google Lighthouse, which is available through Chrome’s Developer Tools. Google Lighthouse runs a series of checks on your website to tell you how the page has scored on aspects like performance, accessibility, best practices, and SEO. It also gives you suggestions for improving these different aspects.
Cross-Device Testing
A very useful way of testing your website is to use it on a variety of devices. The more devices, operating systems, and browsers you can use to test your site, the better. Catching things like fonts not loading correctly is easy to spot. Occasionally a browser will fix an error in the code to present a page that looks correct but isn’t; another browser might not fix that same mistake.
It’s worth noting that for your studies, we do not expect you to support Internet Explorer.
DOCUMENTATIONFor further learning, please check out the docs: Debugging HTML
Activities
Activity 1
WATCHThe below tutorial video is on Debugging and Firefox Developer Tools. (38m 44s)
Activity 2
READReference guide: Firefox Developer Tools