How To Use Developer Tools

If you lot are non notwithstanding familiar with browser developer tools, they are one of the most useful things for anyone tinkering with websites – be it as an owner, enthusiast, ongoing developer, or else.

Developer tools or dev tools can tell y'all a lot nigh any website, such equally CSS markup and JavaScript errors. In addition, they permit you to examination drive front-end changes, check you site's responsive design, and even optimize its operation.

Furthermore, they are completely free and built correct into all major browsers. If you are prepare to learn virtually their usefulness, this browser developer tools tutorial is the right place for you.

How to Open Browser Developer Tools

In order to take advantage of what the tool suite has to offer, you first need to know how to access it. Hither is to practice that in different browsers and operating systems:

Chrome — Inside the menu, click More Tools > Developer Tools. You can as well right click on the page and choose Inspect. Finally, there are the keyboard shortcuts Cmd+Opt+I on Mac and Ctrl+Shift+I on Windows systems.
Safari — Enable web development tools in Preferences > Advanced > Testify develop carte in menu bar. So become to Develop > Show Spider web Inspector or printing Cmd+Opt+I.
Firefox — In the carte du jour, access Web Developer > Toogle Tools. Yous can also inspect elements via right click, or Ctrl+Shift+I/Cmd+Opt+I.

In all cases, they will open a prepare of menus within the browser window. They are unremarkably at the bottom, but can as well show up on the side, depending on your configuration. You are besides able to move them to a new window.

What Practise the Dev Tools Contain?

Hither's what y'all can look to notice every bit office of your browser development tools:

An HTML tree with DOM elements and their properties similar CSS styling
A fashion to monitor incoming and approachable HTTP requests of a web page
The power to inspect and debug files and scripts running on the page or resources it saves to the computer
A way to view JavaScript logs and endeavour out commands on the page
Tools to monitor the performance of your website in lodge to increase loading speed
The ability to switch to a mobile view of your website to examination the responsive pattern

Note that not all programmer tools are exactly the same, then some functions might be located elsewhere or missing.

How to Use Browser Programmer Tools

Ok, now that you know the basics of how to go to your browser's dev tools and what to wait, how does that help you? In the following, we will requite y'all an in-depth wait into what the different tool functions can do for you.

For this example, we will use the Chrome dev tools, since that is the browser with the largest market share. However, your feel should be similar using some other browser.

1. Inspect the Folio HTML

The first matter y'all will see when opening any dev tools is ordinarily a representation of the page structure in HTML.

This allows yous to run across the elements of the page, their classes and ids, how they are nested into each other as well as scripts, style sheets, and other resource loaded in the caput and footer section.

When you hover over whatever element, the browser volition also highlight information technology on the page plus any CSS layout properties like margin or padding.

If information technology's not currently visible, right-click any element and cull Scroll into view. You are likewise able to use the selector tool (in the upper left corner of the dev tools window or Ctrl+Shift+C) to pick any element on the folio and see it in the site code. Correct click > Inspect has the same effect.

You lot can also navigate the HTML tree with your keyboard. Motility up and downwardly and employ left and right to collapse/uncollapse elements. Finally, a search field at the top lets you filter for strings, classes, and everything else.

2. Manipulate HTML Elements

In addition to looking at the folio HTML, you are besides able to make changes to it. Only double click virtually any part of the code to modify information technology.

manipulate html via browser developer tools

That way, y'all can modify heading tags from H3 to H2, remove or modify form names, add inline styling, change text on the page, or hide and delete entire elements from the DOM. You may besides drag and drop elements from 1 place to another with your mouse.

In improver, correct-click > Forcefulness State allows you to permanently set elements to hover, focus, agile, visited, etc. Your browser window volition show y'all what it does to the page.

3. Experiment With CSS

The adjacent thing yous will observe is that the associated CSS of every chemical element appears to the right of the HTML.

That way, y'all tin can sympathise their styling and layout markup. This is a peachy way to learn how a design that you may similar on some other website is achieved.

Furthermore, you can change it in real time in order to debug CSS that isn't working or examination bulldoze design ideas you have. Simply click on the CSS property of any class or id on the right to change it.

In the example beneath, we increase the font-size holding. Here'southward the effect on the page:

change css properties in the developer tools

In the same mode, yous can remove CSS properties, add together completely new ones, and modify or add selectors. Like HTML, information technology has a search bar at the elevation to aid you await for anything specific.

You lot tin can also add new style rules via the plus icon on the summit right (or right-click > New rule in some browsers). Y'all are fifty-fifty able to add classes from here without messing with the HTML tree via .cls in the upper correct corner. Enter a class proper noun and information technology will automatically exist applied to the element.

Finally, under :hov in the same place you are able to force different states on an element in order to make changes to their wait. Note that all of this is but visible to you, not the public at large. To make changes permanent, simply mark and copy your modified CSS rules and paste them into your theme'due south manner sheet.

iv. Use the Box Model

One last thing nigh CSS: As part of the Style section you find a representation of the box model.

Hither, you are able to meet the meridian and width, padding, border thickness, and margin of the element at one glance. Hovering over any of the properties will also prove them in the DOM.

In addition, you lot are able to change any of the properties by just double clicking any part and typing in a number. So, if y'all wanted to modify the bottom margin, y'all can simply do that and meet the furnishings on the page.

five. Debug JavaScript

Besides HTML and CSS, JavaScript is some other of import programming language for site design. Luckily, the browser developer tools besides have tools for that, the first of which you can observe in the Sources console.

Here, you can scan site files, read and edit code, besides as use built-in debugging tools. Even so, ane of the most important things you can practise here is insert breakpoints. This, for example, allows you to suspension the lawmaking execution during certain events to see if an error occurs.

set breakpoints in browser developer tools

Y'all can then stride through the code one line at a time via the icons in the upper right corner until you detect the effect. Yous are as well able to change the code right inside the browser tools and so resume and/or reload the script to run into if that stock-still information technology. More on all of that here.

6. Log and Execute JavaScript

Some other important tool for working with JavaScript is the console.

Here, you lot will find all the letters sent to the log with JavaScript on your site (via console.log). This enables you to see if the code is executing in the correct order or throwing errors.

Also, similar to CSS, you are able to experiment with JavaScript inside the panel. For example, you run statements to see how they work on your page. Make them permanent via re-create and folio if information technology makes sense.

In addition, the console also works as a playground to experiment with JavaScript that has nothing to do with your page and allows you lot to discover unused JS and CSS.

vii. Analyze Site Performance

Some other thing y'all can do with Chrome browser tools is analyze website speed. We actually have a whole tutorial on speed testing that is all about third-party tools, yet, you lot are likewise able to practice this inside the browser tools. For that, become to the Audit tab.

Here, yous are can run all kinds of audits on your site. For now, we are just interested in the operation, so uncheck everything else.

Later on that, choose whether to measure site functioning for mobile or desktop devices. Then, hitting Generate written report and wait until you see something similar to beneath.

Veterans volition know that this is the same data that yous go when using Google PageSpeed Insights. It gives you lots of information on what is and isn't optimized on your folio as well equally how to improve it. If you want to get details on how to piece of work with these results, check our speed testing post mentioned higher up.

The cool thing is that, with the developer tools, you can also experiment with changes to your site such as finding and disabling render-blocking scripts to run across what will make the biggest difference. Nevertheless, that's too much for this 1 tutorial so check the documentation for that.

eight. Simulate Mobile Devices

I probably don't take to tell you that mobile traffic has become hugely important and that more people surf the Internet on their phone than on desktop computers.

For that reason, it's immensely important that you know how to brand your website mobile friendly. This is some other area that browser developer tools can help yous with by allowing y'all to simulate the experience of looking at your site with a mobile device – right inside your browser.

You can access this via Ctrl+Shift+M with the dev tools open up or the piddling mobile device icon in the upper left corner. Information technology will go out your page looking like this:

Elevate and drop the sides of the frame to see what your site looks like on smaller screens. Alternatively, input dimensions numerically in the peak bar. In the same place, Y'all can also use the drop-downward menu to choose particular devices to get their exact screen dimensions. Add more than or input your own devices via the Edit button.

Employ the icon on the right to switch between portrait and landscape manner. The percent allows you lot to adjust the zoom level.

When you lot click the push button with 3 dots, you can switch on Testify media queries.

This will enable the breakpoints included in your CSS (more than on that in our guide on making WordPress themes responsive). Click on them to automatically resize the viewport to that size.

Finally, the drop-downwardly that says Online lets yous simulate different connection speeds (since cellphones don't always have wifi). This fashion, yous get a ameliorate idea about what the experience is like for people on fast and slow 3G networks.

If location is important to your site, y'all tin also override the geolocation if you switch information technology on in the settings. More information here.

x. Other Options

Above nosotros have listed the nigh important things y'all can do in the browser developer tools, nonetheless, in that location'due south more stuff for which nosotros will requite yous a quick overview:

Network — See if and how resources are being up- or downloaded. Check backdrop of individual resources and files, view a waterfall diagram, and simulate unlike network connexion speeds.
Inspect animations — If you accept animations on your page, yous tin can slow them down, inspect the source code, and more.
Accessibility — Only like page speed, y'all can run an audit on accessibility. See how y'all fare similar to a DOM tre, see ARIA attributes, and examine the screen contrast.

For more tips on your favorite browser developer tools, cheque their documentation!

Last Thoughts on Browser Developer Tools

In the above browser developer tools tutorial, you lot take gotten a detailed glimpse at how they tin can assist you better your site and learn more about websites in full general.

Yous at present know the almost basic applications such equally how to audit and manipulate HTML, CSS, and JavaScript, clarify site performance and bank check your mobile friendliness. Plus, at that place is more to discover.

While non everything in this guide will apply to your browser of pick, the basic functionality is always the same so take advantage of information technology!

What's your favorite feature of browser developer tools? Annihilation to add to the above? Allow us know in the comments section below!