App & Browser Testing Made Easy

Give your users a seamless experience by testing on 3000+ real devices and browsers. Don't compromise with emulators and simulators

Home Guide Debug Websites Using the Safari Developer Tools

Debug Websites Using the Safari Developer Tools

By Kitakabee, Community Contributor -

Apple is undoubtedly one of the most used brands in the world and accounts for over 1.8 billion active devices worldwide. It offers the in-house web browser Safari to all Apple device users. Safari’s market share accounts for 1B worldwide, after Google Chrome.

Browser Market Share

Source

Now, you can imagine how big is the user base of Safari. And hence it becomes essential to ensure a stable and reliable browsing experience on Safari if you want to grow your user base in the future as well. Hence, it is very important to test the web applications for Safari and its various versions before they are released to the public.

What is Safari Developer Tools?

Safari Developer Tools is a set of web development tools built into Apple’s Safari web browser. It allows developers to inspect, debug, and optimize their web applications.

It has several components as follows:

  1. Inspector: It allows developers to inspect the HTML, CSS, and JavaScript code of a web page, as well as the network traffic and resources loaded by the page.
  2. Console: It enables developers to log messages and errors from JavaScript code running on the page, as well as execute JavaScript commands directly in the browser.
  3. Debugger: It allows developers to set breakpoints in their JavaScript code and step through the code to identify and fix issues.
  4. Network: The Network tab allows developers to monitor the network requests made by the web page, including the timing and size of each request.
  5. Resources: The Resources tab allows developers to view and modify the resources loaded by the web page, such as images, scripts, and stylesheets.
  6. Timeline: The Timeline tab allows developers to record and analyze the performance of the web page over time, including the time it takes to load and render the page.

Before moving on to the debugging process, let’s understand what bugs are and what the process of debugging encompasses. 

Random glitches are commonly experienced in web applications. It can be in the form of an app crash, screen freeze, or other functionality issues. These glitches or errors arise mainly due to ‘bugs’ in the website’s source code. The debugging process involves the detection and rectification of the faulty component of the source code or bugs. 

You can debug the bugs in your website using the iOS Safari Developer Tools or BrowserStack Live. 

Debugging using iOS Safari Developer ToolsDebugging using BrowserStack’s Live [Recommended]
You need to plug in Physical Devices.You just need to Sign up to BrowserStack
You must enable Web Inspector.You can access more than 3000+ real browsers and devices on the cloud.
You must enable the Develop menu to access the dev tools in Safari.You can seamlessly navigate to a website on Safari using a real iPhone or any device.
You need to replicate the bugs and debug them on the device.You can use built-in DevTools to debug the website.
You can easily switch and test websites on multiple real iPhones and Safari browser versions. You do not need any physical devices.

Debug Websites using the Safari Developer Tools

Let us start with the question, What are Safari developer tools?

Safari Developer tools are specific to Apple devices that can be used to debug your websites. Below are some of the methods that can be used to debug websites using the Dev tools in Safari.

Method 1: Debug Websites using the Responsive Design Mode on Safari

Responsive Design mode helps you to debug the mobile version of a website. To debug your website using the Responsive Design mode on Safari, follow the steps mentioned below:

  • Enable the Developer Menu. To do that, launch the Safari Browser on your Mac computer. Go to Preferences > Advanced and check the Show Develop menu in the menu bar.

Develop Menu Mac

  • Navigate to the website you want to debug. Go to Develop > Enter Responsive Design Mode from the Develop menu.

Responsive Design Mode

  • View the mobile version of a website by selecting the particular model from the screen.
  • Now, if you want to debug a website with a specific defect for a particular screen size or review a particular webpage element, you need to use the Web Inspector on the Safari Developer Tools.
  • To enable Web Inspector, go to Develop > Show Web Inspector
  • Then, click View > Customise Toolbar. In the dialog box, drag the Web Inspector icon and place it in the toolbar. You will see that the Web Inspector icon appears on the toolbar.

Customize Toolbar

  • Navigate to the webpage of your choice (say google.com) and select the device type (iPhone 8 Plus).

Website rendered in iPhone8Plus

  • Click the Web Inspector icon to open the inspector. Now, you can inspect, preview, or debug the web pages directly from the Mac computer. You can click on the elements from the Web Inspector toolbar and debug the web page.

Elements section

How to use Safari debug console menu to identify errors?

In order to debug errors using the Safari debug console menu, you must:

  1. Activate the developer mode – Safari > Preferences > Advanced > Develop > Show Error Console.
  2. Close the tab.
  3. Next, open the console by selecting Develop > Show JavaScript Console.
  4. Select the Console tab. Alternatively, you can also open the Safari debug console using the shortcut option + command + C on Mac.

safari console menu

Method 2: Debug Websites using BrowserStack Live

BrowserStack offers a real device cloud with more than 3000+ real browsers and devices. Testers can seamlessly log in and conduct manual and automated tests of websites and applications. The advantage of using BrowserStack is that you don’t need to purchase a new device or install different browsers or operating systems for testing.

To debug the websites on real iPhones and iPads using BrowserStack Live, follow the steps mentioned below:

Live Dashboard

  • Then, hover the cursor over the device you are experiencing issues with. Let’s make the assumptions for the device to be iPhone and the model to be iPhone X. 

Select device and Browser

  • As soon as you do that, you can view the browser options. Select the Safari option.
  • Then, a real Safari browser will start loading on a real iPhone X from our device cloud.
  • Now, you can visit any website on the Safari browser dashboard. Let’s assume we want to debug the Google homepage.

Website in BrowserStack Live Mobile device

  • Using the DevTools from the toolbar, you can explore the specific webpage elements and start debugging under real user conditions

Debug your Website Now.

Tags
Cross browser testing Manual Testing

Featured Articles

How to Debug on iPhone Safari for Windows

How to enable Responsive Design Mode in Safari and Firefox?

Curated for all your Testing Needs

Actionable Insights, Tips, & Tutorials delivered in your Inbox
By subscribing , you agree to our Privacy Policy.
thank you illustration

Thank you for Subscribing!

Expect a curated list of guides shortly.