Moving on from inspectors, let’s now look at some of the actual tools on offer. You’ll also see a little element picker to the left of the tab names–click this and hover over any of the elements on the page to reveal an accessibility tooltip: Once turned on, this inspector allows you to drill down into the accessibility of your page’s elements, making sure the markup is correct and the appropriate properties have been set. Turn them on by visiting the Accessibility tab in the inspector–Mozilla recommend you turn them off again once you’re done using them as they can affect performance. Chrome also has accessibility inspection features, though those from Firefox differ slightly. The next inspector offered by Firefox developer tools is the accessibility inspector. Use the rules panel to control all aspects of Grid and see your changes emphasized by the highlighter. Click that, and you’ll turn on the highlighter, showing the rows and columns, the grid gap, and the line numbers. Take a look at this pen to see it in action.Īgain, in the rules section, you’ll see a grid icon next to elements which use Grid. You’ll see that the inspector flags any elements which use either flexbox or Grid. CSS Grid Inspectorįirefox also has a brilliant inspector for CSS Grid–something you might have realised if you’ve inspected any layout which used Grid: The highlighter alters as we change the flexbox property values in the inspector, helping us visualize what flexbox is actually doing. That purple dot allows us to change the color of the highlighter–and highlighting the container in the example gives us a dotted area like so: This tool will be more useful as we see more and more variable fonts used on the web.įirefox developer tools also feature a Flexbox inspector, whose highlighter can be toggled on and off in a couple of different places:
The parameters available will depend on the font, but just take a look at some of the many editable options from AmstelvarAlpha Default:
Variable fonts have additional parameters beyond those of normal fonts–open the inspector and look at the Fonts tab (try inspecting a website like to play with a range of variable fonts). One such example is fairly new and gives us the ability to inspect variable fonts. If that’s the case you’ll be able to switch it on by going to settings ( F1) and checking the tool in question: 1. InspectorsĪll browser tools feature a handful of inspectors, such as an HTML inspector and a CSS inspector, but Firefox has some others too. Note: during this roundup you may notice that your Firefox inspector doesn’t feature a tool that we mention. This helps you move it to one side, out of the way whilst your inspector sits somewhere else. So too the Responsive Design Mode settings which allow you to inspect a web page through different simulated viewports.Ī nice extra in Firefox, however, is the ability to align the viewport to the left or right of your screen. If you’ve ever used an inspector in any browser this will all be familiar so far. Hit F12 to open it up and you’ll see a standard inspector layout, with three panes (browser window, HTML source, and properties editor), and you can change the docking configuration to suit your development environment. I’ll begin by listing a couple of things the inspector has going for it. They’ve been building really cool stuff ever since, and we’re going to check out some of the most noteworthy tools in this roundup. 14 Firefox Developer Tools You Might Not Know AboutĪbout a year ago Firefox tasked a dedicated team with adding web-development-specific tools to the browser.
0 kommentar(er)
