Devtools, every webdeveloper's bestfriend

To test and tweak a website, it is essential that web developers can employ useful tools that are integrated into a browser. That is why Devtools exist. These tools from Google Chrome and Mozilla Firefox are known by every developer, but recently Microsoft Egde (the default browser of Windows 10) also updated its devtools. Are they trying to get into the top league?

This post explains several tips and tricks you might not have known about.

Core tools

Since everyone knows the dev tools of Google Chrome, Mozilla Firefox and Microsoft Edge, we will not go into too much detail here. Below, we will briefly list the core tools that each of these devtools does have; 

• The inspect tool / Elements tab

This tool is used to select elements on the website to manipulate and test the HTML and CSS until you get the desired result. Of course, you then have to adopt it to the code itself.

• The mobile simulation / Device emulation

The mobile simulation makes it possible to view your website on different screen sizes. Does everything fit on mobile, tablet, desktop, custom width & height,...?

• The Console

This core tool is mainly used to see / read JavaScript logs, warnings, errors.

• The Source tab

The source tab shows all scripts and snippets loaded onto the page.

• The Network tab

The Network tab shows each element being loaded, how they are loaded, the type of file, the size of the file, the time that it takes to load and a timeline of when and in which order the page is loaded. This core tool can be used to solve network problems, such as bottlenecks when pages are being loaded and bad requests.

• The devtools settings

Here you can personalise your devtools. Where do you place them on the screen? On the left, on the right, at the bottom... You can customize them according to your own preferences.

According to our opinion, these 6 features are used the most. But of course there are many more.

Shortcuts + Tips & Tricks

General

Listed below are some interesting shortcuts and tips & tricks that apply to some or all three devtools. 

• Opening the Command Menu (Chrome, Microsoft Edge)

Cmd Shift P / Ctrl Shift P : opens a search bar for all tabs, features and pannels on the devtools.

Cmd P / Ctrl P : opens a search bar for all files, such as images, JavaScript etc.

• Opening the Settings:

Google Chrome : Shift ?

Firefox : F1

• Inspect element mode: Cmd Shift C / Ctrl Shift C
• Device mode / Responsive mode / Mobile screen: 

Google Chrome : Cmd Shift M / Ctrl Shift M

Firefox : Cmd Opt M / Ctrl Alt M

• To change the format of the colour code in the css debugger (to HEX, RGBA or HSL): Shift Click on colour box (Chrome - Firefox)

Google Chrome

• These devtools have a built-in "Prettier", tab resources > minified file > click {} at the bottom. This is how the devtools will format your file.
• Search your source code for keywords, with: "Cmd Opt F / Ctrl Shift F".
• A better known tip is to use Breakpoints when debugging the JavaScript. Activate it by clicking on the line where you want to place your breakpoint and then refresh the page. Now it will run until the breakpoint takes place.
• Use "Cmd Click / Ctrl Click" when you want to type the same thing in several places at once.
• Use "Cmd Shift D / Ctrl Shift D" to move your dock around instead of looking in the settings every time.
• Toggle Element State to display hidden styles, such as :hover or :active. After making your choice you will see the properties in the Style tab.
• Network filmstrip feature is used to show screenshots of how your website loads in the network tab. This is useful to check the loading of your fonts.

Mozilla Firefox

• Hot & Cold Profiling can be used to perform a visual performance analysis on your site's HTTP requests. With "Network tab > stopwatch icon >", the Network loads your website twice; once with an empty browser cache (Cold method) and once with a primed browser cache (Hot method). 
• As with Google Chrome, there is a Breakpoint functionality. Mozilla Firefox has expanded this a little, by making it possible to also place a breakpoint on a url.
• When inspecting an element you can press the letter "h" to hide or show the element again.
• To quickly jump to an element that is not yet present on your screen, you can select it in the elements tab and then press the letter "s" to make it visible. 
• "esc" opens the split console tab under the elements tab.
• Write "Ctrl Alt F" in the debugger to search through all scripts.
• When debugging CSS properties, you get hints if the CSS rule is ignored because it depends on the value of another property. For example "width property" has no effect because this element is set to "display inline", try "display inline-block" or "display block" instead.

  Microsoft Edge

• F12 voor het openen van de devtools