If you are a regular user of inbuilt Developer tools then the word indispensable may come to mind. The tools talked about in this article are those released by major browsers like Chrome and Firefox. These are tools built right into the browser itself and are designed to help a web designer with many tasks from testing out ideas, gathering information and debugging problems in their code.
You can access web developer tools by clicking on almost any element on the page, like a link, and find out information about that item. A link, for instance, will display a panel with information about its attributes. Further information can be found about the different states like active or hover and what CSS styles are applied in these situations.
Many front end developers will already be familiar with the idea of right clicking on an element on the page and then clicking inspect from the menu, but if you’re just getting started then getting to know core techniques listed below will help get you familiarised.
Make edits to a web page in the Elements panel
This can be a lot of fun, click a title, or paragraph on a web page and view it’s attributes then take it one step further and right click again to see a menu of editing options. What you’re doing here is making changes to the Document Object Model (DOM), experimenting with these editing options will allow you to change the text on a page to anything you want. Don’t worry, it won’t be saved. All the same, it can be really useful just trying to work out what controls what so you can edit the correct markup in your code editor.
Another useful feature is figuring out what division an element is positioned in, and even that elements parents, you can infect see the entire tree of where this element originate from right back to the body tag.
Play with CSS styles
The CSS styles panel gives direct access to CSS styles
applied on the web page, from here you can make changes just the same as when working in the elements panel. Again this is really useful to try out ideas in CSS without committing to them and uploading to a live website. What’s more, if you’re happy with any experiments you make you can copy-paste the CSS directly from this panel to use in your code editor.
A tricky thing to work with in CSS is the box model, this is the space that is taken up by each element. The styles panel is home to where this box model of a given element is displayed with its descriptions of its margins and padding. From here you can experiment by changing those value. Do this by clicking on them and seeing how it alters the page. Normally this is used to make an element fit into the correct space. Understanding its box model values can be vital to this.
Once you have familiarity with the essentials its time to get started with more advanced, but not necessarily difficult, techniques:
Something major browsers all have in common is the ability to change the colour of an element from the styles panel, if a colour has already been defined in the original CSS you will see a colour box that you can click on and alter the colour to your pleasing. If no colour has been defined you can define by adding style rules like color or background-color, this will then allow you to see that box and make a selection. Of course, if you know the colour code you can type it in directly.
Back in the elements panel, did you know that you can click and drag any element and position it anywhere in the DOM? give it a try, find a title tag, a paragraph or list on a web page, view this in the elements panel by clicking inspect, Left click the element you want to move and drag, in chrome a blue line will appear allowing you to position it anywhere in the DOM and make your decision without risking the original code.
Checking The Console
The development tool techniques mentioned above will get you quite far with examining your layout in the browser, especially if you are new to this but these are by far not the only uses of inbuilt browser Development tools. You may be interested to know you can use them for anything from inspecting HTTP requests to debugging a CSS animation. You can even check out how your layout will work on multiple screen sizes like mobile and tablet size. It’s well worth getting familiar with browser tools on your favourite browser, the best way is to experiment and introduce them incrementally into your workflow.
Once familiar you will soon be using the word indispensable.
Check out these links for major browsers guides to their own tools