Safari iphone dev tools

How to Debug Websites on iPhone Safari

By Jash Unadkat, Technical Content Writer at BrowserStack — May 15, 2021

• 
• 
• 
• 

With iOS holding 26.47% of the global mobile OS market share, its popularity speaks for itself. Safari holds 18.43% of the global browser market share. Therefore, it is safe to assume that millions of users across the world expect to access websites and web apps via the Safari browsers on their iOS devices, most commonly iPhones.

Consequently, testers will have to test websites on iPhone-Safari combinations to ensure flawless functionality. This forms a crucial part of a project’s cross browser testing mandate.

This article will highlight two methods by which developers or QAs can debug websites and web apps on iPhone via the Safari browser.

Note: For developers or QA engineers seeking to debug errors on specific iOS devices (For example iPhone X, iPhone 11Pro) the second method will be more effective.

Method 1: Debug using the Web Inspector feature on iPhones or iPads

Debugging issues for mobile web pages can be difficult at times. However, starting from iOS 6, Apple provides a web-inspector which makes debugging web pages much easier on iPhones or iPads. Follow the steps below to use it:

• Connect the iOS device to the machine.
• Enable the Web-Inspector option. To do so:
  Go to Settings >Safari > Scroll down to the bottom > Open Advanced Menu>
  Turn on Web Inspector
• Open the desired web page to debug or preview on your mobile Safari browser. Once done, enable the Develop menu on the Mac device.

To enable the Develop menu, follow the steps below:

1. Launch Safari browser
2. Click on Safari at the top >Open Preferences >Advanced
3. Mark the checkbox – Show Develop menu in the menu bar to enable it
4. Now, you’ll be able to view the Develop menu in the top bar. Click on it and it will show the connected iPhone or iPad along with the URL that is active on Safari.
5. By Clicking on that URL, a new inspector window will open that allows the developer to inspect, preview, or debug the page on a mobile browser from their Mac. Just click on the Resources section, and then all interactions with the web elements will be highlighted in real-time on that iPhone.
   Image source

Method 2: Debugging on Real iPhones or iPads on BrowserStack’s Real Device Cloud

Developers or QAs often have to deal with rendering bugs for a specific device or a platform (Android, iOS). In such cases, they need to use specific mobile devices for testing, debugging, and optimizing websites for mobile devices to ensure the consistent cross-device user experience

Here’s where BrowserStack empowers teams by offering them a real device cloud for manual and automated testing of websites and apps on real devices.

Teams can instantly choose from a range of Android or iOS devices installed with popular browsers like Chrome, Safari, Firefox, and much more. Team members also receive upfront access to Devtools of specific browsers for both platforms during live testing. This simplifies the debugging process on the desired device by letting users test on any iOS device like iPhone X, iPhone 11 pro, etc.

The image below displays a BrowserStack Live test session on iPhone XS:

As developers and QAs get the flexibility to preview and inspect elements on any iPhone, debugging on those iPhones becomes an effortless task. They can also choose to switch between multiple device-browser combinations from the dashboard.

UI bugs can range from being annoying to being majorly disruptive for user experience. Thorough testing on real devices is the most effective way to discover and deal with these bugs. Debugging on iPhones is mandatory for iOS app developers and testers so as to create apps that work perfectly in real user conditions. Instead of wondering how to debug iOS apps in Safari, just follow the steps in this article, and start releasing highly functioning web apps on iOS.

Источник

How to Use Safari DevTools to View Mobile Versions of Web Pages

By Jash Unadkat, Technical Content Writer at BrowserStack — October 25, 2021

• 
• 
• 
• 

Web developers often need to validate the appearance of their websites across various screen sizes to ensure cross browser compatibility. This helps them ensure web pages render correctly across unique mobile browsers and provide consistently superior user experiences.

A previous article discussed how to view mobile version of web pages on Chrome using device simulation and a real device cloud. This article illustrates how to use Safari DevTools to view the mobile version of a particular web page.

Why test mobile view of a website on Safari Browsers?

As of October 2021, Safari occupies 19.06% of the global market share. Given that a significant number of users leverage Safari to access the internet, any website or web app must be compatible with this browser in order to adequately serve those users. Additionally, there are multiple versions of Safari in usage, and a website must be able to render and operate flawlessly on each. There is also the question of how a particular Safari version may interact with the hardware specifications of a particular device, adding another layer of verification required in the website development pipeline.

Needless to say, emulators and simulators are unable to replicate all the specifications required for accurate testing. They may not contain and utilize all the features of every Safari version, which means that any test run on emulators and simulators will be able to provide only inconclusive results.

It is much easier and far more effective to view and test websites on real Safari browsers. Not only does it guarantee 100% accurate results, but it also reduces a step in the testing process. No website can be released without being tested on real browsers and devices. Therefore, it is best to do away with emulators and simulators completely, and just test on a real device cloud.

Now, let’s explore how to use Safari DevTools to view mobile versions of websites.

Method 1: Responsive Design Mode in Safari DevTools for Mobile view

To start with, bear in mind that the Developer menu is, by default, disabled for the Safari browser. In order to access the Responsive Design Mode, enable the Safari Develop menu.

Follow the steps below to enable the Develop menu:

1. Launch Safari browser
2. Click on Safari -> Preferences -> Advanced
3. Select the checkbox ->Show Develop menu in menu bar

Once the Develop menu is enabled, it’ll show up in the menu bar as shown in the image below:

Note: Fundamentally, this feature is built to check responsive design in Safari. When it comes to actually verifying the features, functions, and offerings of a website, it is best to utilize the second method – a real device cloud. Try Testing for Free.

Now follow the steps below to view the mobile version of a web page using Safari DevTools:

1. Launch Safari and navigate to the desired URL that needs to be loaded in mobile view.
2. Click on the Develop menu and select Enter Responsive Design Mode.
3. Now the target URL (Wikipedia in this example) can be viewed in the desired iPhone or iPad.

Refer to the image below for clarity:

Furthermore, developers can leverage the Web Inspector in case they need to inspect any particular element and debug a certain issue for specific screen size. One can find the web inspector in the Develop menu. Once the web inspector is active, inspect a particular element using the element selector.

Refer to the image below:

Note: This approach just allows the simulation of different viewports on a desktop browser. However, this is not the most accurate way to test the mobile version of a website on Safari, as it is just a device simulation. It cannot simulate all aspects of a real mobile device.

Method 2: BrowserStack’s Real Device Cloud for Live Safari Testing across Devices

A key benefit this method offers is that it also allows Windows users to test websites on real mobile Safari browsers directly from their web browsers.

Testing a website on real devices is the most effective way to validate its appearance and performance. This also allows team members to identify UI bugs that end users may face in the real world.

However, it is not feasible for every organization to set up on-premise device labs.

Teams or individuals can opt for cloud-based testing platforms like BrowserStack. Its real device cloud offers 2000+ real devices and browsers to test websites and apps across real devices.

At a high level the real device cloud offers:

1. Latest iOS devices like iPhone X, iPhone 11 Pro, and more.
2. Latest Android devices from Samsung, Oneplus, Google and Motorola.
3. Multiple versions of leading browsers like Safari, Chrome, Firefox, Opera installed on real devices.

Testers can instantly test their web pages on the desired iPhone or iPad Safari directly from their web browser. Sign up for free, select an iPhone or iPad and Select the Safari browser. The image below is an exact representation of a live testing session (Safari Browser Testing on iPhone 12 pro max) on BrowserStack.

Users also get access to key features beneficial for overall web development. Listed below are a few:

1. Users can easily access the – inspect mobile view feature for Safari with DevTools.
2. Geo-location testing enables users to simulate traffic from different geographies for localization testing.
3. Integrations with popular bug reporting tools like Jira, Trello, and Slack for easier testing.
4. Testing of mobile device features like pinch to zoom and device rotation.

Note: It is quite common for devs and testers to look for answers to “how to check responsive in Safari in Windows” or something along those lines. With BrowserStack, it is possible to run tests on certain versions of Safari installed on Windows devices. Try for Free.

The methods explained above will help testers use Safari DevTools to retrieve the mobile view of web pages on Safari running on Mac devices. The second method, in particular, will also help cross-platform users view and test web pages on Safari browsers with DevTools for real iPhones or iPads.

Источник

Safari Extensions

Enhance and customize the web browsing experience on Mac, iPhone, and iPad with Safari Extensions. Using powerful native APIs and frameworks, as well as familiar web technologies such as HTML, CSS, and JavaScript, you can easily create Safari Extensions in Xcode and distribute them on the App Store in the Extensions category or get them notarized for distribution outside the Mac App Store. Xcode 12 and later supports the popular WebExtension API and includes a porting tool to make it easy to bring your extensions to Safari.

Blocking Content

Give users the ability to block certain content types on Safari on macOS and iOS. Built with Xcode, these app extensions are designed for speed and don’t slow down browsing. And because extensions never see what webpages users visit, user data is protected.

Extending Apps

Extend the web-browsing experience by allowing Safari to read and modify webpage content on macOS. With iOS and iPadOS 15, Safari Web Extensions are available on all Apple devices that support Safari. These extensions are built with Xcode and can communicate and share data with native apps — so you can integrate app content into Safari or send web data back to your app to create a unified experience.

Distributing Extensions

App Store

The Extensions category on the Mac App Store showcases Safari extensions, with editorial spotlights and top charts to help users discover and download great extensions from the developer community. When your Safari Extension is ready to be released, upload it to App Store Connect for distribution on the App Store . Apple reviews all extensions and updates to ensure they work reliably. Before submitting for review, make sure to read the guidelines for extensions.

Converting Legacy Safari Extensions

Legacy Safari Extensions (.safariextz files) built with Safari Extension Builder are not supported in Safari 13 on macOS Catalina , macOS Mojave , or macOS High Sierra . The Safari Extensions Gallery for legacy extensions will no longer be available in September, 2019. Users on macOS High Sierra or later can easily find extensions on the Mac App Store by choosing Safari Extensions from the Safari menu

If you distribute legacy extensions built with Safari Extension Builder, we recommend converting them to the new Safari App Extension format, test on the latest version of Safari 13, and submit them to the Mac App Store or notarize them for distribution outside the Mac App Store.

Xcode Developer Tools

Download the latest version of Xcode that includes SDKs for all Apple platforms

Session Videos

Learn more about Safari app extension technologies from sessions at WWDC.

Documentation

Browse documentation including API reference, articles, and sample code.

Developer Forums

Ask questions and discuss development topics with Apple engineers and other developers.

Источник