JWS Docs / Browser Dev Tools

Intro to Browser DevTools

No matter your chosen browser platform all modern web browser's have built-in Developer tools, more often referred to as DevTools.

Using these tools allows us to do a whole range of things from inspecting and error checking our HTML, CSS or JavaScript, checking Accessability issues and Device Emulation, to viewing page asset requests and their loading times plus much more besides.

But we are just going to look into a couple of these areas while introducing you to the power and usefulness of Dev Tools.

Please note - All the areas we are showing you to make changes to only change what you see in its browser window and will NOT effect or make lasting changes to your live website or its files.

So to start we need to open our newly built webpage or choose any page if you have already made a multipage website in a browser tab. We use Microsoft Edge and have created this tutorial around its chromium browser, so depending on what browser you use you may find some slight differences to our screenshots and instructions.

Opening DevTools

There are several ways to open dev tools but we are just going to tell you some of the main ways.

• Browser Settings - if you click the settings ... icon in the top right corner of your browser window, then from the dropdown options select > More Tools then > Developer Tools.
• Inspect - a quick way to open the tools or to directly choose an item you want to inspect - right click on the the item or generally on the page, then from the pop up box options select Inspect.
• F12 Key - Press the F12 key, then in the pop up box select Open DevTools button.
• Keyboard shortcut - Press Ctrl + Shift + C (Windows, Linux) or Command + Option + C (macOS).

Once you have the DevTools open you can change the layout of the panels from across the bottom of the browser window to side by side or even in a separate window. Just click on the Customize and control DevTools ... icon in the top right of the DevTool panel and choose from the Dock side icon options.

Now you have the DevTools docked to your preference lets take a look at the what we can see.

Elements Panel

DevTools will open by default on the Elements panel, this is just one of the tabbed tool panels we can access via the main toolbar and is split into two sections the Dom explorer and the CSS editor.

Dom Explorer

The Dom explorer is the larger section on the left hand side of the Elements Panel interface, this section shows you the HTML of your webpage, which hopefully you should recognise from your web editor. Though to see the whole HTML page you may have to expand some of the elements by clicking on the triangles at the beginning of each closed element.

Here we can make real time changes to the HTML seeing them instantly appear in the live page without making any actual changes to the file. This a great way to test new ideas to see if they'll work before making changes to your live site and possibly breaking it.

Looking at the Elements Panel picture you can see that our <h1> line is highlighted by two light thin lines and a paler background colour, this is because we have selected this element to inspect.

Now we have it selected we can actually edit the text or change it from a <h1> to a <p> or even delete it all together.

To start editing this line click on the ... icon at the beginning of the selected row, then from the pop-up options select Edit as HTML you should now see the curser flashing at the beginning of the line, indicating you are now able to change any part of code on that line.

You can also use this method to edit multi line elements like a <div>, or try moving whole div's and other elements around by selecting the different sections of the page <header>, <main> or <footer>.

Just remember whatever changes you make will change back as soon as you refresh the browser window, so if you like what you've done why not copy, paste & save it into notepad or somewhere you can access it when you go back to your github.dev Web Editor.

CSS Editor

The CSS editor is found on the right hand side of the Elements Panel interface, it has a secondary lower-level set of tabbed panes and by default it opens on the Styles pane. Here we can see the CSS styling and attributes of any HTML element that is specified in our CSS file or set by the browsers "user agent stylesheet".

We can do this by selecting any part of the HTML page and it will then display the styling for that element. We know from the Elements Panel picture that the <h1> has already been selected.

So now in the Styles Panel picture we can see the style attributes we have given to the <h1> e.g it's font size has been set to font-size: 2rem; it also says next to this where we can find this line of code in the CSS file, style.css:85 which is very useful as reading through lines and lines of code can be rather time consuming just to find that one little thing you want to change!

Colour Picker

If we now look below this you will see all the headers grouped together from h1 to h6 and that they share some of the same styling attributes, such as margin size and font colour (spelt the american way color). After making your webpage you may want to change some of the colours that are preset in the template CSS file and devtools has a great way for you to play around testing and changing the colours of different elements.

Where you see the headings colour specified in the style panel you can see a small coloured square, if you left click on this square the colour picker pop-up box will appear like this

The colour picker has a number of features that help us choose and test colours

• Shades Panel - in the large box at the top the circle indicates the current colour we can move it around to pick a different shade of the current colour.
• Eyedropper - allows us to sample a colour direct from the webpage.
• Copy to Clipboard - the checkered circle allows you to copy your new colour value ready to paste into your code or other element in the devtools.
• Hue Slider - moving the curser along the slider changes the colour displayed in the shades panel.
• Opacity Slider - moving this curser along the slider changes the opacity of the current colour selected.
• Display Value - shows the colour value as its written in the stylesheet here it is RGBA, you can also type in another colour here if you know its value.
• Display Value Switcher - with the up/down icon next to the colour value you can change colour format from RGBA to another format e.g HLSA or Hex.
• Colour Palette - the bottom part of the panel you can see a palette of colours, by default it should be showing the colour palette of the webpage based on the colours it finds in the stylesheet.
• Colour Palette Switcher - you can preview other palettes by clicking on the up/down icon at the top right of the palette. Which even includes your own defined CSS Variables palette.
• Contrast Ratio - this shows the contrast ratio of a text element against the background colour, the ✓ tick/check icon gives a visual indication to whether it passes current accessibility recommendations or not.
  • No ticks - does not pass
  • ✓ - meets minimum recommendations
  • ✓✓ - meets enhanced recommendations
  It also has a "Show More" down arrow icon with further contrast ratio features.

You can also use this colour picker for any element that has either a font or background colour.

Why not have a play around with the colour picker features mentioned above to change the <h1> and see how the contrast ratio and colour value changes, before we look at the further contrast ratio features.

Remember any changes made in the devtools are not permenant and will disappear when you refresh the browser, so make note of any changes you want to permenantly add to your website later.

Command Palette - show changes

DevTools are so useful for tweaking and make changes to your design using the Styles Panel, but by the time you're satisfied with your choices it can difficult to keep track of what and where you've made those changes. Luckily theres the Show Changes panel to help with that problem.

Here I've made changes to the <h1> making its font-size: 3rem; and it's color: rgb(237, 126, 36);

To see these changes we need to open the Command Palette by typing Ctrl + Shift + P (Windows, Linux) or Command + Shift + P (macOS).

You can now either type changes or scroll down to the Show Changes and then press Enter.

This will open up the Console panel with the Changes tab which is split into two panels the left handside shows the file name where you have made your changes. The right handside shows the line number of the properties you have changed. Next to this the changes will be highlighted in Red for removed items with a - symbol, and added items in Green with a + symbol.

Also along the bottom of the Changes tab you can see a tally of the changes made, here we can see I made 2 insertions (+) & 2 deletions (-). Theres also a useful copy function which copies the changed lines of code and a undo function that resets the page to how it was before your changes.

Contrast Ratio

You maybe wondering whats the point of checking the contrast ratio of our textual elements as you can see it fine!

But there are many people who have low vision for one reason or another and they might not see areas that are either very bright or very dark. So contrast ratio measures the brightness between the foreground and background of our text, and if it has a low contrast score those with low vision may struggle to see or may just see a blank screen, which we want to avoid happening.

So if you now expand the contrast ratio "Show More" arrow you should see the colour picker changes to look like this

You can see that as well as new features under the contrast ratio value the Shades Panel has changed also. It now has two white lines across it, these lines correspond with the AA: colour value that meets minimum recommendations and AAA: colour value that meets enhanced recommendations, shown under the contrast ratio value. These lines will move around the shades panel depending on the colours and shades being measured.

We can see that the green colour of the <h1> has a high contrast ratio of 8.97 which meets enhanced recommendations, this tells us that the shades area where we see the indication circle also meets the same recommendations all the way to the first white line.

But if we move the circle towards the first line you can see the ratio value will steadily become lower, and if we continue to move it anywhere between the two lines it will loose the AAA: rating and only meet AA: minimum recommendations instead.

Though if we choose a shade on the other side of the second line you will loose the AA: and be below the minimum recommendations, causing your website to have serious accessibility issues.

Toggling Dark Mode

Using DevTools we can force a webpage into dark mode even if a website does not have any predefined colour variables set for it by using the Toggle common rendering emulations tool, the paint brush icon at the top of styles pane.

To activate dark mode click on the Toggle common rendering emulations paint brush icon and an options box will appear with these options:

• prefers-color-scheme:light - To return to light mode we click on the paint brush icon again and select this option.
• prefers-color-scheme:dark - To see our webpage using its preset dark mode colour variables we need to select this option, we can then select and test new colours using the colour picker tool for accessibility in the same way we did before.
• Automatic dark mode - If there isn't any dark mode set colours we can force the browser into dark mode by selecting this option, it will then render the page with a dark background but also make its own choice of contrasting colour for all the elements on the page.

Inspect Tool

The last tool we are going to look at is the Inspect tool the square icon with a arrow which we find in the top left side of the top tool & menu bar.

If you click on the icon it will change colour to indicate that its selected, then when you move the curser across your webpage it will highlight each element it moves over and a pop-up box will appear with information about that particular element.

This makes it a great tool for inspecting elements on the page quickly and it will offer you different information depending on the element you are inspecting. For example our <h1> in the image below it shows us that its the h1 selected then its colour, font-size, margin size and accessibility information.

But if you inspect one of the images on your page it should show you its added class names, image sizes and accessibility information. This is ideal when we need to check an images size if you don't yet know them so you can fill in the <img> width and height tags, or to use as a quick method of checking that you have remembered all the necessary and recommended tags to comply with accessibility standards.