Debug Websites Using the Safari Developer Tools

Apple ’ s Safari is a wide utilize web browser across meg of iPhones, iPads, and Mac device worldwide. Ensuring that your website performs reliably on Safari is essential for deliver a seamless user experience. Safari Developer Tools provide built-in capabilities to inspect, debug, and optimize web covering on Apple devices. Testing across different Safari edition helps identify browser-specific number before release.

This guide explain how to debug websites habituate Safari Developer Tools and alternative solutions like BrowserStack Live.

What is Safari Developer Tools?

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

SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

It has several components as follow:

1. Inspector:It allow developers to audit 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 codification scarper on the page, as good 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 sizing of each request.
5. Resources:The Resources tab allow developers to view and modify the resources loaded by the web page, such as persona, scripts, and stylesheets.
6. Timeline:The Timeline tab grant developer to record and canvass the performance of the web page over time, including the clip it takes to load and interpret the page.

Before moving on to the debugging procedure, let & # 8217; s understand what bugs are and what the process of debugging encompasses.

Random bug are commonly see in web applications. It can be in the descriptor of an app clank, screen frost, or former functionality topic. These glitches or errors arise mainly due to ‘ bugs ’ in the website & # 8217; s source code. The debugging process involves the detection and rectification of the faulty component of the rootage code or bugs.

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

Debug Websites utilize 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 website using the Dev tools in Safari.

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

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

• Enable the Developer Menu. To do that, launch the Safari Browser on your Mac computer. Go toPreferences & gt; Advancedand assure theShow Develop carte in the menu bar.

• Navigate to the website you want to debug. Go toDevelop & gt; Enter Responsive Design Modefrom the Develop menu.

• View the peregrine variant of a site by selecting the exceptional model from the blind.
• Now, if you need to debug a website with a specific fault for a particular blind sizing or review a particular webpage ingredient, you need to use the Web Inspector on the Safari Developer Tools.
• To enable Web Inspector, go toDevelop & gt; Show Web Inspector
• Then, chinkView & gt; Customise Toolbar. In the duologue box, drag the Web Inspector image and place it in the toolbar. You will see that the Web Inspector picture appears on the toolbar.

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

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

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 & # 8211;Safari & gt; Preferences & gt; Advanced & gt; Develop & gt; Show Error Console.
2. Close the tab.
3. Next, open the console by selectingDevelop & gt; Show JavaScript Console.
4. Select the Console tab. Alternatively, you can also open the Safari debug console utilize the shortcut option + command + C on Mac.

Method 2: Debug Websites utilize BrowserStack Live

BrowserStack offers a real device cloud with more than 3000+ real browsers and device. Testers can seamlessly log in and behavior and of websites and applications. The vantage of using BrowserStack is that you don ’ t need to purchase a new twist or install different browsers or operating system for screen.

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

• on BrowserStack ’ s Live platform.
• Go to the Live Dashboard and select iOS from the Operating System

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

• As soon as you do that, you can catch 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 see any site on the Safari browser fascia. Let & # 8217; s assume we desire to debug the Google homepage.

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

.

Related Guides