That’s how teams can remotely debug and optimize their sites for Safari (Mac and iOS) without any complicated setup.Īs mentioned earlier, Safari is the second most popular browser globally, and optimizing websites for it is necessary to achieve cross-browser compatibility. Try Safari Remote Debugging on Real Devices
Teams can also leverage the Local testing feature similar to the one in the desktop browser versions to debug websites in development on real mobile devices.(Similar to the web-inspector feature provided by Apple in Safari for macOS) Once the DevTools option is selected, the Safari developer console opens up, to allow QAs and developers to interact with the DOM elements and debug HTML, CSS, and Javascript on a specific webpage.Once the session begins, click on the DevTools from the floating menu, as shown in the image below.Click on the Safari browser, and a new Safari session will be initiated on a real iPhone 11 pro.Choose from two browsers – Safari and Chrome. Hover over the desired iPhone or iPad.Select the iOS platform and choose the desired iPhone or iPad.Similar to the first scenario, once the user is signed in, the Live dashboard will be displayed.To learn more about it, refer to BrowserStack’s local testing documentation. This feature allows teams to test their web-apps in progress at scale on real devices and browsers without hosting them on public staging environments. Now the developers or QAs can easily debug HTML, CSS, and Javascript for specific web elements (Refer to the image above).ĭevelopers or QAs can also test web-apps that are currently in development stages on Safari browsers using the Local Testing feature. When a user clicks on the Inspect element feature on a particular website’s element, the developer console opens up. Directly start debugging by right-clicking the mouse and selecting the Inspect Element option. So one does not have to manually enable the Develop menu. Note: For every session initiated on Safari, the Develop menu is enabled by default. Select the Safari browser (version 13.1: latest for macOS Catalina).From the Live Dashboard, choose the macOS version (e.g., Catalina, Mojave, etc.).Once done, the Live dashboard will appear on the screen. As mentioned earlier, one needs to Sign-up for free.Now follow the steps below for remotely debugging on Safari.
#Chrome webtools debugger mac for free
To get started, one needs to Sign up for free on BrowserStack Live.īrowserStack Live is a platform that allows teams and individuals to carry out interactive manual tests on 2000+ real devices and browsers (mobile and desktop). Getting started with Remote Debugging on Safari using BrowserStack Live This article will quickly explain how users can perform remote debugging on real Safari for macOS and iOS using BrowserStack. BrowserStack’s real device cloud provides users with 2000+ real devices and browsers, including Apple devices.
#Chrome webtools debugger mac mac
It’s a major challenge for Windows users in particular.īrowserStack helps address this issue by providing remote testing on real Apple devices (iPhones, iPads, and Mac OS).
However, given the fragmentation of Apple devices, testing websites on Safari for each iOS or macOS version is a cumbersome task. Naturally, optimizing websites for the Safari browser is absolutely imperative for development and QA teams. This is one of the major reasons making it the second most popular browser in the world after Chrome. Safari is the default browser for all Apple devices.