About Dom inspector
Ben Dodson Freelance iOS, macOS, Apple Watch, and Apple TV Developer HomeBlogAboutPortfolioMy AppsProjectsContact April 13, 2022 Want to keep up to date? Sign up to my free newsletter which will give you exclusive updates on all of my projects along with early access to future apps. Over the past few weeks I’ve worked on a number of projects that have necessitated me working with HTML and JavaScript be that via Safari on iOS, an SFSafariViewController, or in an embedded WKWebView. In all of these cases, I’ve needed to dive into the DOM to see what styles are being applied to certain elements or dig into a JavaScript Console to work out why some code isn’t working. On desktop, this is trivial as Safari has a Web Inspector panel built in similar to other browsers. It turns out it is also trivial on mobile as the exact same tool can be used with both iOS simulators and physical devices. Activating the Web Inspector for Safari in an iOS Simulator. Note that it is also possible to look at the "Extension Background Page" for the Browser Note Safari Extension that is also installed and running.If you select the ‘Develop’ tab from the menu bar of Safari on macOS, you’ll see a list of all of your connected devices and actively running simulators1. Drilling into this will then show all of the active web instances you can interact with; notice how the content within Safari has highlighted blue within the Simulator as I’ve moused over the twitter.com web instance above. When you click, a web inspector panel is then produced which allows you to make all the usual interrogations and changes you can within desktop Safari such as interacting with the console or changing CSS values of elements to see how they would look in realtime.Here’s an example using a WKWebView within one of my client projects, Yabla Spanish: As I hover over the DOM in the web inspector, the same highlighting that appears in desktop Safari appears within the WKWebView on my physical device (note the green box showing the 24px padding within that div).Discovering that simulators and devices could be interacted with in this way has been a huge timesaver for me. Whilst developing Browser Note, I was constantly needing to tweak CSS values and investigate the current state of the DOM as websites have various tricks to try and make
Key features of the Dom inspector that are enabled through these drivers include:
- DOM inspector - uBlock - Git.je (Gitea)
- CSS DOM inspector in JavaScript - YouTube
- Web Inspector Topics DOM - WebKit
- dom-inspector GitHub Topics GitHub
- snake, the game, but in the dom inspector - GitHub
- Is there a DOM Inspector like Chromes for Firefox?
- DOM inspector gorhill/uBlock Wiki - GitHub
This topic describes how to define which CSS rules are applied to HTML elements.Chromium-Based BrowsersGoogle Chrome, Microsoft Edge, and Opera browsers allow you to inspect CSS rules as follows:Right-click a web page and select Inspect (in Chrome or Edge) or Inspect Element (in Opera) to open DevTools.Click the inspect icon at the top-left corner of DevTools and select an element. The Elements tab highlights the selected element in the DOM Tree. The Styles tab lists all styles applied to this element and allows you to inspect them. You can enable and disable styles, filter them by name, value, or selector.Apple SafariFollow the steps below to inspect CSS rules in Apple Safari:In the menu bar, select Safari → Settings… to open the Settings window.Switch to the Advanced pane and enable the following option: Show Develop menu in menu bar.Close the Settings window.Select Develop → Show Web Inspector in the menu bar to open the inspector panel.Click the element selection icon at the top of the panel and select an element. The Elements tab highlights the selected element in the DOM Tree. The Style section lists all styles applied to this element and allows you to inspect them. You can enable and disable styles, filter them by name, value, or selector.Mozilla FirefoxUse the following methods to inspect CSS rules in Mozilla Firefox:Right-click a web page and select Inspect (Q) to open Page Inspector.Click the select element button at the top-left corner of Page Inspector and select an element. The HTML pane highlights the selected element in the HTML tree. The Rules view lists all styles applied to this element and allows you to inspect them. You can enable and disable styles, filter them by name, value, or selector. See Also
