Web Inspector provides the tools for you to understand and debug your web pages on macOS, iOS, and iPadOS. We'll take you through the latest features and improvements to Web Inspector, including a new overlay for inspecting CSS Grid containers on your pages, even more configurable breakpoints to make debugging simpler, and the ability to create and edit Audits.
I’ll return to the Audit tab and run the same test group again. And this time, I see that I pass all the tests. Another great use for audits is checking to make sure my web page meets my own design standards. One of my rules while working on this project was to make sure I was consistently using a small set of font families for all of my elements. Let’s use the new Audit Edit Mode, added to Web Inspector this year, to do just that. I’ll begin editing by clicking on the Edit button at the bottom of the Navigation Sidebar. Now I’m in Edit Mode. Here I can create a new test case using the Create button at the top of the sidebar. I’ll keep the default option of Test Case, and name my test case "Fonts." I can now edit the rest of my test case. I’ll start by adding a description to help me remember what this test case does. Now let’s insert my actual test code I’ve prepared.
My test will have three main steps. First, I’ll create an array of expected font families. Next, I’ll collect all the elements on my page with a font family that isn’t listed in my expected font families. Lastly, I’ll return my result object, including any elements that failed my test. When I’m done writing my audit, I just click Done at the bottom of the Navigation Sidebar. I can now run my audit by clicking the Run button next to its name. It looks like I have an issue with one of the nodes on my page, so let’s take a look at what's wrong. I can again use the Reveal in Elements Tab button to go to the element and look at its style. Well, this is embarrassing. Comic Sans! I really don't want to use this font, so let's change this to the ui-rounded font family instead.
Looking for something specific? Enter a topic above and jump straight to the good stuff.
An error occurred when submitting your query. Please check your Internet connection and try again.