This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Always Enabled
We use necessary cookies to ensure our website works properly and provide essential functionalities and security features. These cookies do not collect any personal information and are always enabled. By continuing to use our website, you agree to our use of these cookies.
V:1 - 2024-09-13 07:45:43am
To enhance user experience, we use performance and analytical cookies to understand and analyze the key performance indexes of our website. Performance cookies help us deliver better user experiences by tracking metrics such as load times and response times. Analytical cookies help us understand how visitors interact with our website by providing information on metrics like the number of visitors, bounce rate, traffic source, and more.
V:1 - 2024-09-13 07:45:43am
Ever been building a mobile optimised or responsive site – and been stuck on a rendering issue which only seems to happen on an actual mobile device? This can be rather annoying when you are trying to debug it on your desktop computer – sometimes you simply can’t replicate the problem.
With their web browser Safari, Apple have provided web developers with a quick and easy way to be able to debug and inspect elements on actual mobile devices (only iPhones and iPads currently). This has proved invaluable for us at Adao* when we are developing mobile optimised or responsive sites. Please note this will only work on an actual Apple Mac, and not on Safari on Windows.
First things first, plug in your iPhone!
You will have to have Safari open on your iPhone, with the website open that you want to inspect element on.
Next, open Safari on your Apple Mac. You will have to enable the Developer menu by going to Safari > Preferences > Advanced > Check the checkbox “Show Develop menu in menu bar”
You will now have a “Develop” option in the top menu bar. Click it, and you will see your iPhone there as an option. Hover over it and it’ll show you the page you currently have open on Safari on your iPhone.
Click the page, and you will be presented with a Web Inspector window for the page on your iPhone. Cool eh?
An even cooler feature is if you highlight an element in the web inspector it highlights it on your iPhone in real time. This means you know exactly what you are inspecting as you go through the elements.
You can then go through all the corresponding styles and edit them as you would the usual way to debug in inspect element, and that problem you found a pain to debug should be a doddle to fix!
Adao* are experienced web developers who specialise in mobile development. If you have any requirements at all, please feel free to contact us.