How to run the browser's web developer tool?
First thing first. The method to use the developer tool varies from browser to browser. Here we start with Google Chrome.
- For Chrome, click Menu > More Tools > Developer Tools or use the equivalent keyboard shortcut, or
- With an element selected: Right-click an element on a web page and select "Inspect"
The Inspector will appear at the bottom of the browser window, like the screenshot below.
When opened, it pops up and gets docked to the bottom of the current browser window or in separate window (it depends on the settings and the browser).
View and inspect the elements that make up the DOM of a webpage. The rendered site HTML is visible and fully editable on the left and details about the webpage’s nodes, styles, and layers are available in the sidebar on the right. Below is a video regarding Firefox dev tools.
For Chrome, you can follow the official documentation. Keep reading this article to learn the core stuff faster.
How to use the web developer tools?
You can edit any HTML element and edit CSS rules, both with CSS blocks and visually.
If you click on a declaration or a selector in the Rules view, you can edit it and see the results immediately. You can also choose the different existing properties and values, and start editing them by pressing Enter or Mouse click. To add a new declaration to a rule, click on the last line of the rule (the line occupied by the closing brace). As you start typing a property name, you'll see a list of autocomplete suggestions.
You can accept the current suggestion or move through the list. The default choice is the most common property that starts with the letters you've typed. For example, here the user has typed "c" and the default choice is "color" (screenshot above). If you enter an invalid value for a property while editing it, or an unknown property name or value, a yellow alert icon will appear in that line. The web inspector also includes a number of specialized tools for working with particular CSS features, such as colors, fonts, and animations.
Any changes you make are temporary: reloading the page will restore the original styling.
Warning! Changes made in the developer tool are NOT saved inside your template, component, module CSS/JS files. You have to copy changed lines of code and use inside your custom code file(s).
Most browsers have also built-in options to emulate mobile devices (views) in your browser. The Responsive Design Mode provides a simple interface for quickly previewing your webpage across various screen sizes, orientations, and resolutions. Very handy tool for mobile developments.
I know what I need to change, what's now?
If you know what CSS lines you should override to implement the desired change, you have to use custom code inside your template. If you have installed, and set as default Helix3 or Helix Ultimate template, we recommend to use custom.css file to insert all major changes and add new lines:
Yes, first you have to create that new file from Joomla administrator or via FTP. More detailed information you will find in Helix Manual section.
Using this method, you can control the design of your whole site from one place. For an example, if all module titles should be red, you can change it from a single place, not in each module setting separately. The same you can do for addon styles from SP Page Builder and for any other component. The main rule is common.
Alternative dev browser
Mozilla has created Firefox Developer Edition, a browser with built-in development tools, a version tailored for developers, featuring the latest Firefox features and experimental developer tools. It includes tools built specifically for building and designing with CSS Grid. These tools allow you to visualize the grid, display associated area names, preview transformations on the grid and much more.
I am not magician (or not yet), since the beginning I use that tool every single day. Regardless if you are a new or even experienced Joomla user, you’ll greatly benefit from making use of the web developer tools built in your browser. They are free, really powerful, and provide a playground to learn, speculate, and experiment with new styles. Almost all of them provide a wide array of tools for creating, debugging and performance monitoring. Explaining all the features is beyond the scope of this article. However, we hope that the introduction to the above mentioned tools help you in your daily Joomla development chores.