iphone debug safari

• Great Tech Gifts for Any Occasion
• The Best Gadgets for The Beach or Pool

How to Activate the iPhone Debug Console or Web Inspector

Use Safari's web developer tools to study problematic websites

• Saint Mary-of-the-Woods College
• Switching from Android

What to Know

• Activate Web Inspector on iOS: Go to Settings > Safari > Advanced and move the Web Inspector toggle switch to the On position.
• Use Web Inspector on macOS: Connect your iOS device to a Mac and choose the URL to inspect from the Develop menu.

If you run into a bug or another issue with a website on Safari mobile, use the Web Inspector tool to investigate. This article explains how to use the Safari console for iPhone to debug errors with the help of your Mac computer. Instructions apply to iPhones with iOS 14, iOS 12, or iOS 11, and well as Macs with macOS Big Sur (11.0), macOS Catalina (10.15), or macOS Mojave (10.14).

Activate Web Inspector on Your iPhone or Other iOS Device

The Web Inspector is disabled by default since most iPhone users have no use for it. However, if you're a developer or you're curious, you can activate it in a few short steps. Here's how:

Open the iPhone  Settings  menu.

On an iPhone with an early version of iOS, access the Debug Console through Settings > Safari > Developer > Debug Console . When Safari on the iPhone detects CSS, HTML, and JavaScript errors, details of each display in the debugger.

Scroll down and tap  Safari  to open the screen that contains everything related to the Safari web browser on your iPhone, iPad, or iPod touch.

Scroll to the bottom of the page and select Advanced .

Move the Web Inspector toggle switch to the On position.

Connect Your iOS Device to Safari on a Mac

To use the Web Inspector, connect your iPhone or another iOS device to a Mac that has the Safari web browser and enable the Develop menu .

With Safari open, select Safari from the menu bar and choose  Preferences .

Select the  Advanced  tab.

Select the Show Develop menu in menu bar check box and close the settings window.

From the Safari menu bar, select Develop and choose the name of your attached iOS device, then select the URL that appears under Safari to open the debug console for that site.

After you connect your device, use your Mac to inspect the website you want to debug and have it open in the Safari mobile browser.

What Is Web Inspector?

Web developers use Web Inspector to modify, debug, and optimize websites on Macs and iOS devices. With Web Inspector open, developers can inspect the resources on a web page. The Web Inspector window contains editable HTML and notes regarding the styles and layers of the web page in a separate panel.

Before iOS 6, the iPhone Safari web browser had a built-in Debug Console that developers used to find web page defects. Recent versions of iOS use Web Inspector instead.

With Safari 9 and OS X Mavericks (10.9), Apple introduced Responsive Design Mode in Web Inspector. Developers use this built-in simulator to preview how web pages scale to different screen sizes, resolutions, and orientations.

To set up Web Inspector on your iPad, open your iPad's Settings and select Safari > Advanced , then turn Web Inspector On . Connect the iPad to a Mac computer, then open Safari on the Mac and select Safari > Preferences > Advanced , then turn on Show Develop menu in menu bar .

You cannot just connect your iPhone to a Windows PC and start using Web Inspector through Chrome like you can with a Mac. Installing package manager software can provide you a sort of workaround, but it's not recommended unless you're familiar with the package management app you intend to use.

Get the Latest Tech News Delivered Every Day

• Add More Features by Turning on Safari's Develop Menu
• 4 Ways to Play Fortnite on iPhone
• How to Activate and Use Responsive Design Mode in Safari
• How to Inspect an Element on a Mac
• What Is Safari?
• How to Clear Search History on iPhone
• How to Use Web Browser Developer Tools
• How to Disable JavaScript in Safari for iPhone
• 10 Hidden Features in macOS Sonoma
• How to Manage History and Browsing Data on iPhone
• How to View HTML Source in Safari
• How to Manage Cookies in the Safari Browser
• How to Change Your Homepage in Safari
• How to Clear Private Data, Caches, and Cookies on Mac
• How to Reset Safari to Default Settings
• How to Manage Your Browsing History in Safari

• PRO Courses Guides New Tech Help Pro Expert Videos About wikiHow Pro Upgrade Sign In
• EDIT Edit this Article
• EXPLORE Tech Help Pro About Us Random Article Quizzes Request a New Article Community Dashboard This Or That Game Popular Categories Arts and Entertainment Artwork Books Movies Computers and Electronics Computers Phone Skills Technology Hacks Health Men's Health Mental Health Women's Health Relationships Dating Love Relationship Issues Hobbies and Crafts Crafts Drawing Games Education & Communication Communication Skills Personal Development Studying Personal Care and Style Fashion Hair Care Personal Hygiene Youth Personal Care School Stuff Dating All Categories Arts and Entertainment Finance and Business Home and Garden Relationship Quizzes Cars & Other Vehicles Food and Entertaining Personal Care and Style Sports and Fitness Computers and Electronics Health Pets and Animals Travel Education & Communication Hobbies and Crafts Philosophy and Religion Work World Family Life Holidays and Traditions Relationships Youth
• Browse Articles
• Learn Something New
• Quizzes Hot
• This Or That Game New
• Train Your Brain
• Explore More
• Support wikiHow
• About wikiHow
• Log in / Sign up
• Computers and Electronics
• File Manipulation

4 Easy Ways to Inspect Element on an iPhone

Last Updated: August 8, 2023 Fact Checked

• Safari Developer Tools
• Web Inspector
• JavaScript Bookmark
• Edit Webpage Shortcut

This article was written by Luigi Oppido and by wikiHow staff writer, Nicole Levine, MFA . Luigi Oppido is the Owner and Operator of Pleasure Point Computers in Santa Cruz, California. Luigi has over 25 years of experience in general computer repair, data recovery, virus removal, and upgrades. He is also the host of the Computer Man Show! broadcasted on KSQD covering central California for over two years. This article has been fact-checked, ensuring the accuracy of any cited facts and confirming the authority of its sources. This article has been viewed 38,849 times.

Need to debug a website on your iPhone but can't find "Inspect Element?" While this common browser feature isn't built into Safari on your iPhone, there are still ways you can inspect website elements without paying for an app. The official way is to use Safari Developer Tools, which requires you to connect your iPhone to a Mac. If you're not near a computer, you can install a free app called Web Inspector, or create a JavaScript bookmark (which also works on Chrome). Or, if you're not debugging a web app and just want to change the way a website looks, you can use an iPhone shortcut called Edit Webpage.

Things You Should Know

• Use Safari Developer Tools to inspect elements by connecting your iPhone to your Mac.
• To inspect an element without a computer, install the Web Inspector app, or use a JavaScript bookmark.
• To edit text or remove images from a website, try the Edit Webpage shortcut in the Shortcuts app.

Using Safari Developer Tools

• You will need to use a USB cable to connect , as connecting with Wi-Fi won't allow you to inspect an element.

• Open your iPhone's Settings .
• Scroll down and tap Safari .
• Scroll down and tap Advanced .
• Tap the "Web Inspector" switch to turn it on (green).

• Click the Safari menu.
• Click Settings .
• Click Advanced .
• Select "Show Develop menu in menu bar." [1] X Research source

• As you select items in the Elements tab on your Mac, you'll see the selected element highlighted on your iPhone. [2] X Research source
• If you want to continue using Inspect Element without leaving your iPhone plugged in to your Mac, click the Develop menu again and select Connect via Network .

Using the Web Inspector Extension

• Web Inspector is useful for inspecting elements in Safari as it doesn't require you to connect your iPhone to a Mac. If you want to debug in Chrome, you'll need to use a JavaScript bookmark instead.
• While this extension does have the same name as Safari's "Web Inspector," it's not an official Apple tool.

• Open Safari and go to any website.
• Tap Aa in the address bar.
• Tap Manage Extensions . [3] X Research source
• Tap the switch next to "Web Inspector" to enable it.

• To allow Web Inspector to inspect elements on this website for one day only, select Allow for One Day .
• If you choose the latter option, you won't have to give Web Inspector permission to access websites again in the future.

• When you're finished, double-tap Aa to close Web Inspector.

Using a JavaScript Bookmark

• 1 Go to the website you want to inspect. This trick involves creating a bookmark that contains a string of JavaScript code to bring Inspect Element to any iPhone web browser. This trick will work in both Safari and Chrome, though the process of creating the bookmark will be a little different.

• Chrome: Tap the three-dot menu and select Add to Bookmarks .
• Safari: Tap the Sharing icon at the bottom, then tap Add to Favorites .

• Chrome: Tap the three-dot menu and select Bookmarks at the top. Tap and hold the new bookmark, then tap Edit Bookmark.
• Safari: Tap the open book icon at the bottom, then tap Favorites . Tap and hold the bookmark you just created, then tap Edit .

Using the Edit Webpage Shortcut

• You'll find the Shortcuts app in your App Library.
• This is helpful if you want to edit text or remove images and other objects from a website you're viewing.

• Scroll down and tap Shortcuts .
• Tap Advanced .
• Toggle on "Allow Running Scripts."

• Tap any element to edit it. Now you can edit text and images on the website without having an official Inspect Element feature built into Safari.

Expert Q&A

• Adobe Edge Inspect was a popular tool for inspecting elements on websites, but the tool is no longer in development or receiving updates. [4] X Research source Thanks Helpful 1 Not Helpful 0
• There are also several paid apps that will allow you to inspect web elements on your iPhone, including Achoo HTML Viewer & Inspector and Inspect Browser. Thanks Helpful 2 Not Helpful 0

You Might Also Like

• ↑ https://support.apple.com/guide/safari/use-the-developer-tools-in-the-develop-menu-sfri20948/mac
• ↑ https://support.apple.com/guide/safari-developer/inspecting-overview-dev1a8227029/mac
• ↑ https://support.apple.com/guide/iphone/get-extensions-iphab0432bf6/ios
• ↑ https://helpx.adobe.com/edge-inspect/system-requirements.html

About This Article

• Send fan mail to authors

Is this article up to date?

Featured Articles

Trending Articles

Watch Articles

• Terms of Use
• Privacy Policy
• Do Not Sell or Share My Info
• Not Selling Info

wikiHow Tech Help Pro:

Level up your tech skills and stay ahead of the curve

How to debug mobile websites on iOS devices with Inspect

Inspect allows you to debug Safari on iOS devices from macOS, Linux, and Windows

Here are the simple steps to follow whether you're testing or debugging an iOS Safari web page or app with Inspect:

• Connect your iOS device to your PC via USB cable or Wi-Fi . You can use any device with a macOS, Linux, or Windows operating system.
• Start Inspect and follow the instructions on how to setup your computer.
• You are good to go!

Happy Inspecting!

How to use Safari Web Inspector on Mac, iPad, and iPhone

If you’re a web developer, then you likely already know about Safari’s Web Inspector. But if you’re just starting to use Safari for development or have just begun your Web Development career, this guide will show you the basics for getting started with the Safari Web Inspector on iOS and Mac.

What is the Safari Web Inspector?

For those not yet familiar with the tool, you can use the Safari Web Inspector for help with your web development. It allows you to review page elements, make changes, troubleshoot problems, and review page performance. Apple sums it up with:

Web Inspector is the primary web development tool in Safari. Web Inspector allows you to inspect, tweak, debug, and analyze the performance of your web content in a Safari tab.

Enable and open Safari Web Inspector

You can use the Safari Web Inspector for development on your iPhone, iPad, or Mac. Here’s how to enable and open it on iOS and macOS so you’re ready to use it when you need it.

If you’re going to use the Web Inspector frequently, whether for iOS or Mac, you might as well add the Develop tab to your menu bar so you can access it easily.

• Open Safari on your computer and click Safari > Settings or Preferences from the menu bar.
• Choose the Advanced tab.
• Check the box at the bottom for “ Show features for web developers ” or Show Develop menu in menu bar .

Now when you want to enable the Web Inspector, click Develop > Show Web Inspector from your menu bar.

If you prefer to forgo adding the Develop button to your menu bar, you can access the Web Inspector on Mac with a shortcut. Navigate to the page you want to inspect, right-click on it, and pick Inspect Element from the context menu.

Just keep in mind that if you plan to use Web Inspector for Safari on your iOS device, you’ll need the Develop button in the menu bar on your Mac.

For iPhone and iPad

To use the Web Inspector for iOS on your Mac, grab your USB cable and connect your iPhone or iPad to your computer. Then, follow these steps to enable the tool:

• Open the Settings app on your iPhone or iPad and tap Safari .
• Scroll to the bottom and tap Advanced .
• Enable the toggle for Web Inspector .

Next, make sure Safari is open on your iOS device and your Mac. After that, follow these steps:

1) Click Develop from the Safari menu bar on Mac, and you’ll see your iPhone or iPad listed here.

2) Mouse over the device, and you’ll then see the websites open in Safari on your mobile device.

3) Select the one you want, and the Web Inspector will pop open in a new window for you to use.

Note: If this is the first time you’re using your iPhone or iPad for this work, take your mouse cursor over that iPhone or iPad and click Use for Development . Next, tap Trust on your iPhone or iPad and enter the device passcode. Now, this iOS or iPadOS device is ready to be used for web inspection. If it still shows a correction error, simply unplug the USB cable and plug it in again.

Position the Safari Web Inspector

If you’re using the Web Inspector for iOS, it will remain in its own floating window.

If you’re using it for Safari on your Mac, you can change its position. By default, Web Inspector displays at the bottom of your Safari window. To detach it and place it in a separate window or dock it to the left or right side of Safari, select one of the buttons from the top left of the Inspector window.

Get to know the Web Inspector

The Safari Web Inspector has a handy toolbar and tabs with some options that you can adjust to fit your needs.

Web Inspector toolbar

• “X” to close the Inspector
• Positioning buttons
• Reload button
• Download web archive button
• Activity viewer (resource count, resource size, load time, logs, errors, warnings)
• Element selector button

Web Inspector tabs

You can use all tabs or just a few. You can right-click or hold Control and click the tabs and then check and uncheck those you want to see. Rearrange the tabs by holding and dragging them to their new positions. And all the way to the right of the tabs bar, you’ll see a Settings button. This lets you adjust settings for tabs, indents, source maps, zoom, and more.

• Elements : Current state of the page’s Document Object Model
• Network : Resources loaded by the current page
• Debugger : View the JavaScript execution, variables, and control flow
• Resources : Resources being used by the current page’s content
• Timelines : A view of what the page’s content is doing
• Storage : State that is available to the page’s content
• Canvas : Contexts created from CSS
• Console : Shows logged messages and lets you evaluate JavaScript code

For in-depth help on a specific tab, you can head to the Apple Developer Support site . Select Table of Contents > Get started in Safari Developer Tools > Web Inspector .

Good luck with your inspection!

Hopefully, this guide will help you as you start working with the Safari Web Inspector for your iPhone, iPad, or Mac web development.

If you currently use the Web Inspector and have tips and tricks you’d like to share with others who are just starting, please feel free to comment below!

Check out next: How to view the source code of a webpage in Safari

How to Use Web Inspector to Debug iOS device

Prerequisites:.

• Please note that a Mac computer is required for this process as Safari's Web Developer is only compatible with Macs
• Make sure Safari on your Mac is the same version as Safari on your iDevice. You may need to update your iOS version or your version of Safari running on your Mac.

Use Web Inspector to debug mobile Safari

• On your iPad, iPhone or iPod touch, tap  Settings | Safari | Advanced  and toggle on  Web Inspector.  And enable JavaScript if it isn’t already enabled.
• On your Mac, launch Safari and go to  Safari menu | Preferences | Advanced  then check 'Show Develop menu in menu bar' if not already enabled.
• Connect your iOS device to your Mac with the USB cable. This is critical, you must connect the devices manually, using a cable. This does not work via WiFi.
• On your iOS device, open the website that you want to debug. Then, on your Mac, open Safari and go to the 'Develop' menu. You should now see your iOS device that is connected to your Mac. (Note: If you do not have any page open on your iDevice, you see a message saying “No Inspectable Applications.”)
• Now debug the page that is open on your mobile Safari using the same methods you would for debugging on Mac.
• Within the developer tools window, navigate to the 'Network' tab and export the .har file if requested.
• https://support.apple.com/guide/safari-developer/welcome/mac
• https://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/
• https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html 

Cookie Consent Manager

General information, required cookies, functional cookies, advertising cookies.

We use three kinds of cookies on our websites: required, functional, and advertising. You can choose whether functional and advertising cookies apply. Click on the different cookie categories to find out more about each category and to change the default settings. Privacy Statement

Required cookies are necessary for basic website functionality. Some examples include: session cookies needed to transmit the website, authentication cookies, and security cookies.

Functional cookies enhance functions, performance, and services on the website. Some examples include: cookies used to analyze site traffic, cookies used for market research, and cookies used to display advertising that is not directed to a particular individual.

Advertising cookies track activity across websites in order to understand a viewer’s interests, and direct them specific marketing. Some examples include: cookies used for remarketing, or interest-based advertising.

Cookie List

David Lozzi

• Debugging Safari/Chrome on your iPhone/iPad/iOS device

In the world of modern web development, Web 2.0 (or is it 3.0?), with HTML5, CSS3, ES6, and frameworks and libraries up the wazoo, our web apps and sites always work seamlessly and flawlessly across all the browsers and devices… hahaha, I know…

The reality is, web development, as great and modern as it is, can have little caveats and nuances across the different browsers: Chrome, Safari, FireFox, Edge, and the Mac/Windows/Linux/iOS/Android versions of each. Thankfully, the big contenders like Netscape (those were the days) and Internet Explorer have finally been deprecated and are no longer expected to be supported in the wild. Even with the great modern web, we still have issues once in a while.

In my recent efforts in troubleshooting one small “nuance” between Chrome on Mac and Chrome and Safari on iOS (yes, all three were acting differently), I needed to debug my browser on my iPad and/or iPhone. I won’t get into what the issue is here, instead, I’ll get into how we can debug the browsers on our iOS devices. I’ve searched for many options, some worked, some didn’t, so below is what worked for me.

All steps below are all running on my:

• MacBook Pro 16-inc, M1 Pro, running macOS Ventura 13.6
• iPad Air (4th) v15.3.1
• iPhone 14 Pro Max iOS v17.0.3

What are we debugging

Before we get started in debugging, we should cover what we’re debugging. In the following debugging methods, we can debug anything our browser can get to: netflix.com, google.com, or our public website. With CI/CD in place, I can make code changes and get them into my dev environment in under 5 minutes, and that suffices at times. I can then hit the site directly on my iPhone and debug as needed.

Sometimes, if I’m really diving into a granular issue and don’t want to wait, I like to use ngrok. Ngrok spins up a gateway from a public address to your local dev machine. This allows me to troubleshoot realtime on my mobile browser while writing the code on my laptop. It’s pretty slick and has saved me a lot of time. I can even share the ngrok address with my colleagues and they can access it on my local machine too! Another option would be to set up DNS for your iPhone to navigate to your laptop while on the same wifi network, and that’s not worth the effort in my book.

Debugging in Chrome on iOS

This is great quick way to check out your console messages without using your Mac.

• In Chrome on your iPad or iPhone, go to chrome://inspect and then press Start Logging .
• Now go do your thing in another tab, keeping this tab open.
• Come back anytime to see any and all console outputs!

See, no laptop/desktop needed, just do it on the mobile device.

This is as far as we can get with Chrome on iPhone/iPad. From my limited understanding, Chrome for iOS uses a WKWebView which gets difficult to actually attach to and debug. If the JavaScript console output isn’t enough, try Safari…

Debugging in Safari on iOS

This is a great method of debugging your iOS devices as it gives you the closest thing to actually debugging on your computer. With this method you can use the dev tools on your Mac to connect to your iOS Safari browser. It’s pretty sweet.

• On your Mac , open Safari, then go to Safari > Settings.
• Click Advanced and click Show Develop menu in menu bar at the bottom of the window. Close the window.
• On your iPad or iPhone , go to Settings > Safari > Advanced.
• Scroll to the bottom and enable Web Inspector .

For this next part, I recommend using a USB cable to attach your iOS device to your Mac. You might get away with doing this over Wifi, as I have in the past, but it’s not reliable .

• Connect your device to your Mac using a USB cable, or try the following over Wifi.
• On your Mac, in Safari, click the Develop menu.
• Near the top of the menu you should see your iPad or iPhone listed.
• Hover over your device in the menu and you’ll see Safari with each tab listed below. Click the one you want to debug.
• The Web Inspector should then appear, now debug it: Elements, Console, Sources, Network, all of it should work!

Good enough for now

Between these two techniques, I’ve been able to troubleshoot my issues quite successfully. Generally, iOS Safari and Chrome act relatively the same, so debugging in Safari helps me clear my Chrome issue. And if it doesn’t I can always throw in more console.log s and see what Chrome is actually doing. Ideally, we should be able to debug the code directly on Chrome, like we can do with Safari, but at this time it’s just not possible.

One other option, for a cost: inspect.dev

There’s a product called inspect.dev that boasts it can debug Safari, Webviews, and Chrome from macOS, Windows, and Linux. Learn more at https://inspect.dev/why . I have not tried them out, I don’t want to pay for something that should be free for developers (hence this blog post).

Let me know if you know other ways to debug your mobile browsers! Leave a comment below or let’s connect on Twitter .

‘Til next time, happy debugging!

Please share the love!

• Click to share on Twitter (Opens in new window)
• Click to share on Facebook (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to email a link to a friend (Opens in new window)
• Click to print (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on Pocket (Opens in new window)
• Click to share on WhatsApp (Opens in new window)

7 thoughts on “ Debugging Safari/Chrome on your iPhone/iPad/iOS device ”

You should also check out using x-code’s simulator. Safari Dev Tools can attach to the Safari session on the simulator and you’re off to the races!

Oh yea, i just found that and then forgot that… thanks I’ll check it out closer and share my findings!

Thanks for article. One small correction Chrome for iOS uses WKWebView.

Thanks for the fix! will update

• Pingback: [FIXED] The image is taking the original dimentions of it on the phone after deployment - Learn How to FIX your angular code

Thanks bro! I’ll follow yours steps, wish me luck.

Leave a Reply Cancel reply

• Collaboration
• Microsoft Forms
• Microsoft Planner
• Microsoft Power Apps
• Microsoft Power Automate (Flow)
• Microsoft Teams
• Microsoft To-Do
• Office 365 Hybrid
• Office 365 SharePoint Online
• Productivity
• SharePoint 2013 Administration
• SharePoint 2013 Apps
• SharePoint 2013 Development
• SP2010 Administration
• SP2010 Authentication
• SP2010 Customization
• SP2010 Infrastructure
• SP2010 User
• SP2010 Workaround
• Uncategorized
• Users Don't Like SharePoint

Top Posts & Pages

• Sending a beautifully formatted email from Power Automate (Flow)
• Saving data from Microsoft Forms into Excel using Power Automate (Flow)
• Use Microsoft Forms to collect data right into your Excel file
• When Power Automate (Flow) can't find your Microsoft Form
• Squeezing a little more formatting out of Microsoft Forms
• Understanding Power Automate's Outlook Send Email Actions
• Best practices for working with data in Microsoft PowerApps
• Tracking usage analytics within your Power Apps
• Use Microsoft Flow to remind the Team of due dates from Planner
• Stack Overflow

• 2,079,751 hits

Discover more from David Lozzi

Subscribe now to keep reading and get access to the full archive.

Type your email…

Continue reading

View in English

Web development tools

Apple has brought its expertise in development tools to the web. Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize websites for peak performance and compatibility on both platforms. And with Responsive Design Mode, you can preview your web pages in various screen sizes, orientations, and resolutions. Access these tools by enabling the Develop menu in Safari’s Advanced preferences.

Web Inspector

Web Inspector is your command center, giving you quick and easy access to the richest set of development tools ever included in a web browser. It helps you inspect all of the resources and activity on a web page, making development more efficient across Apple platforms. The clean, unified design puts each core function in a separate tab, which you can rearrange to fit your workflow. You can even debug memory using Timelines and tweak styles using widgets for over 150 of the most common CSS properties.

Elements. View and inspect the elements that make up the DOM of a web page. Clicking elements from the fully editable markup tree on the left reveals the node’s styles in the middle sidebar, with more details in the right sidebar.

Console. Type JavaScript commands in the console to interactively debug, modify, and get information about your webpage. View logs, errors, and warnings emitted from a webpage, so you can identify issues fast and resolve them right away.

Sources. Find every resource of a webpage, including documents, images, scripts, stylesheets, and more. Use the built-in debugger with data type and code highlights to troubleshoot and understand the script execution flow.

Network. See a detailed list of all network requests made to load every web page resource, so you can quickly evaluate the response, status, timing, and more.

Timelines. Understand all the activity that occurs on an open web page, such as network requests, layout and rendering, JavaScript events, memory, and CPU impact. Everything is neatly plotted on a timeline or recored by frame, helping you discover ways to optimize your site.

Storage. Find details about the data stored by a web page, such as application cache, cookies, databases, indexed databases, local storage, and session storage.

Graphics. Preview animation keyframes and their classes from HTML5 canvas, JavaScript animations, CSS animations, and CSS transitions. Dial in the motion and the visual design of web pages.

Layers. Visualize compositing layers in 3D to understand where layers are generated and in what order they'll render. Use layers to help find unexpected memory consumption or excessive repaints on a web page.

Audit. Preform audits against a web page to certify that common code and accessibility errors are addressed. Confirm that a web page follows design guidelines and specifications of modern web pages.

Responsive Design Mode

Safari has a powerful new interface for designing responsive web experiences. Responsive Design Mode provides a simple interface for quickly previewing your web page across various screen sizes, orientations, and resolutions, as well as custom viewports and user agents. You can drag the edges of any window to resize it. And you can click on a device to toggle its orientation, taking it from portrait to landscape — and even into Split View on iPad.

Debugging iOS Safari

How do I debug Safari on iOS?

These are my general steps, starting with not even using iOS Safari.

1. Is this just a small-screen problem?

Lemme just use the device mode in Chrome quick.

Note that this does a smidge more than just display your site in a smaller area: it sends the correct User Agent String and Client Hints for that device.

2. Does it seem actually specific to Safari? Lemme check Desktop Safari first since that’s just a few clicks away.

Now you’re actually using Safari, which is way closer to iOS Safari than desktop Chrome is.

3. Problem not showing here? Then the problem is actually unique to iOS Safari. Try emulation.

I happen to have a Mac, so I can have XCode installed and thus have an iOS simulator that is pretty easy to pop open. And if you can run the iOS simulator, that means you can run desktop Safari as well, and thus even have access to DevTools that can reach into the simulator.

4. I’ve seen real-device-only bugs. Sometimes you need a real device.

If you have a Mac, doing this is pretty similar to what we just did. You have to have the phone plugged in via USB (no wireless charging connection or whatever) and then you’ll see the device in that same Develop menu. Select the real device (which must have Safari open on some website) and you’ll get a DevTools instance of that website.

5. No Mac? Use an online emulator.

I have heard of people running over to Best Buy or an Apple Store to quick debug something on a display machine. But that’s — uhhhh — not super practical. You can use something like CrossBrowserTesting to do this right on the web.

They even jack Chrome DevTools in there somehow. I just did a little testing and I found the Chrome DevTools a little janky to use (a giant left panel renders, the click-to-select element feature didn’t work, and I kept losing WebSocket connection). But hey, it’s cool that it’s possible.

6. No Mac and still need to test on a real device?

I didn’t think this was really possible, but then I saw Inspect . (This is not an ad, I’m just shouting this out as a very cool tool.) With Inspect, I can plug in my real iOS device via USB and get a Chrome DevTools instance for it.

I’m running Inspect on my Mac there. I guess the only real reason I would do that is to use Chrome DevTools instead of Safari DevTools (which, fair play, I might). And it looks like there will be more reasons soon enough. For example, it will bundle React, Vue, and Angular DevTools so you even have those for on-device testing, plus Wi-Fi testing, meaning you don’t have to plug in at all.

But I feel like the real clutch feature here is that it runs on Windows . So now there is a really clear answer for web developers on Windows who need to test on a real iOS device.

I solved some issue earlier today on safari by installing Chrome User agent switching on windows pc:

https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg

The issue was webp not being supported on older safari browsers.

Almost forgot the extension thing existed, definitely saved me writing sniffing code.

Tip #6 is also great, we have an ios phone lying around in the office.

Hiya, unfortunately the issues didn’t happen with this one, so I must get an iPhone.. :(

The real solution (that doesn’t yet exist) is on-device developer tools. Will iOS 15 Safari finally offer Inspect Element?

Earlier versions of iOS (for iPad, before it was called iPad OS) actually had on-device developer tools, but it was removed (I believe in iOS 6, but I could be wrong) in favor of the current connect-to-safari-on-macos solution. So it seems unlikely that it’ll come back.

The Tech Edvocate

• Advertisement
• Home Page Five (No Sidebar)
• Home Page Four
• Home Page Three
• Home Page Two
• Icons [No Sidebar]
• Left Sidbear Page
• Lynch Educational Consulting
• My Speaking Page
• Newsletter Sign Up Confirmation
• Newsletter Unsubscription
• Page Example
• Privacy Policy
• Protected Content
• Request a Product Review
• Shortcodes Examples
• Terms and Conditions
• The Edvocate
• The Tech Edvocate Product Guide
• Write For Us
• Dr. Lynch’s Personal Website
• The Edvocate Podcast
• Assistive Technology
• Child Development Tech
• Early Childhood & K-12 EdTech
• EdTech Futures
• EdTech News
• EdTech Policy & Reform
• EdTech Startups & Businesses
• Higher Education EdTech
• Online Learning & eLearning
• Parent & Family Tech
• Personalized Learning
• Product Reviews
• Tech Edvocate Awards
• School Ratings

Reading Groups: Everything You Need to Know

Product review of the ultenic p30 grooming kit, reading anxiety in children: everything you need to know, iep meetings and parent-teacher conferences: everything you need to know, college disability services and accommodations: everything you need to know, spam vs. phishing: how are these unwanted messages different, how to charge your iphone properly, encouraging your teenager to read: everything you need to know, 8 ways to service an air conditioner, 3 ways to stop a baby from vomiting, how to activate the iphone debug console or web inspector.

As an iPhone user, there are times when you may run into issues or encounter bugs while using your device. In such cases, it may be necessary to activate the iPhone debug console or web inspector to get more information about the issue and troubleshoot it effectively.

The iPhone debug console and web inspector are powerful tools that allow you to inspect and debug web pages, apps, and other content on your iPhone. They are essential for developers and advanced users who want to delve deeper into the functionalities of their device.

Here’s how to activate the iPhone debug console or web inspector:

1. Connect your iPhone to your computer using a lightning cable.

2. Launch Safari on your computer.

3. In Safari’s preferences, click on the Advanced tab.

4. Check the “Show Develop menu in menu bar” option to enable it.

5. On your iPhone, open the Settings app, go to Safari, and then select Advanced.

6. Turn on the “Web Inspector” and “JavaScript Console” options.

7. Open the app or web page that you want to inspect on your iPhone.

8. On your computer, click on the Develop menu in Safari, and then select your iPhone’s name.

9. You should now see a list of open tabs and windows on your iPhone.

10. Click on the tab or window you want to inspect, and the Safari web inspector will open.

With the web inspector open, you can inspect the HTML, CSS, and JavaScript code of the web page or app. You can also see the network requests, resources, and console logs.

To access the JavaScript console, click on the “Console” button in the web inspector. This will open a console where you can enter JavaScript commands and see the output.

Similarly, to access the iPhone debug console, click on the “Debug” button in the web inspector. This will open a console where you can see debug information and errors.

In conclusion, activating the iPhone debug console or web inspector is easy and can be helpful in troubleshooting issues with your device. With these powerful tools at your disposal, you can inspect and debug web pages and apps like a pro.

How to Hide Specific Facebook Posts From ...

A short guide to mms picture messaging.

Matthew Lynch

Related articles more from author.

How to Change Facebook to Dark Mode

How to Fix Corrupted Files in Windows 11

How to Cancel Audible

How to Use the Yahoo App on Android

How to Fix a Dell Laptop That Won’t Turn On

How to Unlock an HP Laptop

How To Activate The IPhone Debug Console Or Web Inspector

Published: July 30, 2023

What is the iPhone Debug Console or Web Inspector?

The iPhone Debug Console and Web Inspector are powerful tools that allow developers to inspect and debug web pages on the Safari browser or websites viewed through other apps on the iPhone. These tools provide valuable insights into the structure, behavior, and performance of web pages, helping developers identify and fix issues that affect the user experience.

The Debug Console is a built-in feature in Safari that enables developers to view and interact with error messages, log messages, and JavaScript code execution. It provides a real-time look into the underlying code of a web page, offering developers a better understanding of how everything is functioning. This is especially helpful when trying to identify errors or issues that may be affecting the functionality of a website or web app.

The Web Inspector, on the other hand, provides a more advanced set of debugging tools. It allows developers to analyze and modify various aspects of a web page, such as HTML elements, CSS styles, and JavaScript behavior. Developers can use the Web Inspector to inspect network requests, examine the document structure, measure performance metrics, debug JavaScript code, and more.

Both the Debug Console and Web Inspector are indispensable tools for web developers who want to ensure their websites or web apps are running smoothly on iOS devices. The ability to inspect and debug web pages directly on the iPhone provides a convenient and efficient way to identify and resolve issues without the need for additional hardware or software.

Now that we have a basic understanding of what the iPhone Debug Console and Web Inspector are, let’s explore how to enable and use them on your iPhone.

Enabling Debug Console on iPhone

The Debug Console on iPhone is a handy feature that allows you to view error messages, log messages, and execute JavaScript code. Enabling the Debug Console is relatively straightforward, and you can do it through the Safari browser. Here’s how:

• Open the Settings app on your iPhone.
• Scroll down and tap on “Safari”.
• Scroll down again and tap on “Advanced”.
• Toggle the “Web Inspector” switch to enable it. This will enable the Debug Console as well.

Once you have enabled the Debug Console, you can access it by opening Safari on your iPhone and navigating to the web page or web app you want to debug. To open the Debug Console, follow these steps:

• Open Safari on your iPhone.
• Navigate to the web page or web app you want to debug.
• Long-press the “Refresh” button on the Safari toolbar.
• A menu will appear – tap on “Show Web Inspector”.

The Debug Console will appear at the bottom of the screen, displaying any error messages or log messages generated by the web page. You can also execute JavaScript code directly in the console to test and debug specific functionalities.

With the Debug Console enabled on your iPhone, you have a powerful tool at your disposal to identify and resolve any issues or errors affecting the performance of your web pages or web apps.

Steps to Enable Debug Console on iPhone through Safari

If you prefer to use the Safari browser on your iPhone to enable the Debug Console, you can follow these steps:

• Open the Safari app on your iPhone.
• Tap the “Tabs” icon located at the bottom-right corner of the screen to view your open tabs.
• Tap the “Private” button at the bottom-left corner of the screen to switch to private browsing mode. This step is essential for enabling the Debug Console in Safari.
• In the private browsing mode, tap the “plus” button at the bottom-center of the screen to open a new tab.
• Enter “about:config” in the address bar and tap “Go”.
• A warning message will appear, informing you that you are about to enter a configuration page. Tap “Continue” to proceed.
• In the configuration page, tap the search bar at the top and type “debug”.
• Locate the “debug console.enabled” option and tap the toggle switch to enable it. This will activate the Debug Console in Safari.
• Close the tab with the configuration page by tapping the “x” icon at the top-left corner of the screen.
• You can now exit private browsing mode by tapping the “Private” button at the bottom-left corner once again.

Once you have completed these steps, the Debug Console will be enabled in Safari on your iPhone. You can access it by opening a web page or web app and following the instructions mentioned in the previous section.

Enabling the Debug Console through Safari provides an alternative method to access this powerful debugging tool on your iPhone, giving you even more flexibility and convenience in your web development workflow.

Steps to Enable Debug Console on iPhone through Chrome

If you prefer to use the Chrome browser on your iPhone to enable the Debug Console, you can follow these steps:

• Open the Chrome app on your iPhone.
• Tap the three dots menu icon located at the bottom-right corner of the screen to open the menu.
• Scroll down and tap “Settings” to access the Chrome settings.
• Tap “Privacy” in the settings menu.
• Tap “Clear Browsing Data”.
• In the next screen, make sure the “Cookies, Site Data” option is enabled and tap “Clear Browsing Data” again.
• Tap the back arrow to return to the Privacy settings.
• Tap “Content Settings”.
• Tap “JavaScript” to access JavaScript settings.
• Toggle the “Blocked” switch to disable JavaScript blocking. This step is necessary to enable the Debug Console in Chrome.
• Exit the Chrome settings by tapping the back arrow to return to the browser.

Once you have completed these steps, the Debug Console will be enabled in Chrome on your iPhone. You can access it by opening a web page or web app and following the instructions mentioned earlier in this article under the section “Using Debug Console on iPhone”.

Enabling the Debug Console through Chrome provides an alternative option for developers who prefer using Chrome as their primary browser. It offers similar functionality and debugging capabilities as the Debug Console in Safari, allowing you to effectively diagnose and debug any issues in your web pages or web apps.

Using Debug Console on iPhone

The Debug Console on iPhone provides valuable insights into the behavior and performance of web pages, allowing developers to diagnose and fix issues. Once you have enabled the Debug Console on your iPhone, you can follow these guidelines to make the most of its capabilities:

• Open Safari on your iPhone and navigate to the web page or web app you want to debug.
• The Debug Console will appear at the bottom of the screen, displaying any error messages or log messages generated by the web page.
• You can use the console to execute JavaScript code directly. Simply type your code in the console and press Enter to see the results.
• Inspect the network requests made by the web page by navigating to the “Network” tab in the Debug Console. Here, you can view details such as request/response headers, status codes, and timing information.
• Examine the document structure of the web page by navigating to the “Elements” tab. Here, you can inspect and modify HTML elements, CSS styles, and DOM properties.
• Debug JavaScript code using the “Sources” tab. You can set breakpoints, step through code execution, and view variable values to identify and resolve any issues.
• Utilize other features in the Debug Console, such as the “Console” tab for logging messages or the “Storage” tab for inspecting cookies and other storage data.

The Debug Console provides a comprehensive set of tools that can help you diagnose and troubleshoot any issues with your web pages or web apps directly on your iPhone. By effectively utilizing these debugging capabilities, you can ensure a smooth and optimized user experience.

Understanding the Web Inspector on iPhone

The Web Inspector is a powerful tool available on the iPhone that offers advanced debugging capabilities for web pages and web apps. By gaining a clearer understanding of how the Web Inspector works, developers can effectively analyze and optimize the performance of their websites. Here’s what you need to know:

The Web Inspector provides a comprehensive view of the structure and behavior of a web page, allowing developers to inspect and modify various elements such as HTML, CSS, and JavaScript in real-time. It offers a range of features and panels that provide insights into the different aspects of a web page, including network traffic, DOM structure, JavaScript execution, and more.

With the Web Inspector, developers can analyze and optimize the network performance of their web pages. They can inspect network requests, examine request and response headers, analyze loading times, and identify any bottlenecks or issues affecting the overall performance.

In addition, the Web Inspector allows developers to debug and troubleshoot JavaScript code on a web page. They can set breakpoints, step through code, monitor variable values, and detect errors or issues that may affect the functionality.

Inspecting and modifying the DOM structure and CSS styles is another key functionality of the Web Inspector. Developers can interactively explore and manipulate the HTML elements, adjust CSS properties, and see the changes in real-time. This provides a powerful way to experiment with different designs and layouts.

The Web Inspector also includes a timeline panel that records and visualizes performance metrics, such as CPU usage, memory usage, paint times, and more. This allows developers to identify any performance bottlenecks and make optimizations to enhance the overall user experience.

By utilizing the various features and panels offered by the Web Inspector, developers can gain deeper insights into the inner workings of their web pages and troubleshoot any issues that may arise. It provides an invaluable toolset to optimize and improve the performance of websites and web apps on the iPhone.

Enabling Web Inspector on iPhone

The Web Inspector is a powerful tool that allows developers to debug and optimize web pages on the iPhone. Enabling the Web Inspector is a straightforward process, and it can be done through the Safari browser. Here are the steps to enable the Web Inspector on your iPhone:

• Toggle the “Web Inspector” switch to enable it. This will activate the Web Inspector feature in Safari.

Once you have enabled the Web Inspector, you can access it by opening Safari on your iPhone and navigating to the web page or web app you want to inspect and debug.

It’s important to note that the Web Inspector can also be enabled for other browsers on the iPhone, such as Chrome. However, the steps to enable it may vary depending on the browser you are using. Ensure that you have the latest version of the browser installed and explore the browser settings to find the option to enable the Web Inspector if it is not readily visible.

Enabling the Web Inspector provides developers with a powerful toolset to analyze and optimize the structure, behavior, and performance of web pages on their iPhone. By utilizing this feature, developers can identify and fix issues, enhance the user experience, and ensure their websites or web apps are running smoothly on iOS devices.

Steps to Enable Web Inspector on iPhone through Safari

If you prefer to use the Safari browser on your iPhone to enable the Web Inspector, you can follow these steps:

Once you have enabled the Web Inspector, you can access it by following these steps:

• Navigate to the web page or web app you want to inspect and debug.
• Connect your iPhone to a Mac computer using a USB cable.
• Launch Safari on your Mac computer.
• In the Safari menu, click on “Develop”.
• You should see your iPhone listed in the dropdown menu. Hover over it.
• A submenu will appear – click on the name of your iPhone.
• The Web Inspector window will open on your Mac computer, displaying the web page or web app running on your iPhone.

Now, you have successfully enabled the Web Inspector on your iPhone and connected it to Safari on your Mac computer. You can use the powerful debugging tools offered by the Web Inspector to analyze and optimize the web page or web app.

It’s worth noting that this method requires a Mac computer with Safari installed. If you don’t have access to a Mac, you can use alternative methods like the one mentioned earlier in enabling the Web Inspector through the Safari settings directly on your iPhone.

By enabling the Web Inspector through Safari, developers have a convenient way to inspect and debug their web pages or web apps directly on the iPhone, offering more comprehensive control and optimization options.

Steps to Enable Web Inspector on iPhone through Chrome

If you prefer to use the Chrome browser on your iPhone to enable the Web Inspector, you can follow these steps:

• Scroll down again and tap “Developer Tools”.
• Toggle the “Enable Developer Tools” switch to enable it. This will activate the Web Inspector feature in Chrome.

With the Web Inspector enabled in Chrome, you can now access it by following these steps:

• Open Chrome on your iPhone.
• Tap the address bar at the top of the screen and enter “chrome://inspect” as the URL.
• Tap the “Enter” or “Go” button on the keyboard.
• You will see a list of devices and web pages that are available for inspection. Tap on the desired web page to open the Web Inspector.

Now, you have successfully enabled the Web Inspector in Chrome on your iPhone and opened it for the web page or web app you want to inspect and debug. You can utilize the various tools and features provided by the Web Inspector to analyze and optimize the performance of the web page.

Enabling the Web Inspector through Chrome provides developers with an alternative option for inspecting and debugging web pages or web apps on their iPhone. It offers a set of powerful tools to assist in identifying and fixing potential issues, enhancing the user experience, and ensuring optimal performance on iOS devices.

Using Web Inspector on iPhone

The Web Inspector on iPhone is a powerful tool that allows developers to analyze and optimize web pages and web apps. Once you have enabled the Web Inspector, you can follow these guidelines to make the most of its capabilities:

• Open Safari or Chrome on your iPhone and navigate to the web page or web app you want to inspect and debug.
• If using Safari, connect your iPhone to a Mac computer using a USB cable and open Safari on your Mac.
• If using Chrome, ensure that you have enabled the Web Inspector in Chrome settings on your iPhone.
• In Safari on your Mac or Chrome on your iPhone, launch the Web Inspector by following the steps mentioned in the previous section.
• Once the Web Inspector opens, you will have access to various panels and features that allow you to analyze different aspects of the web page or web app.
• Use the Elements panel to inspect and modify the HTML structure of the page. You can select and highlight elements, add or remove attributes, and experiment with CSS styles.
• Utilize the Network panel to monitor and evaluate network requests made by the web page. You can view request and response details, analyze loading times, and identify any performance issues.
• Use the Console panel to test and debug JavaScript code. You can execute JavaScript commands, log messages, and view any error or warning messages generated by the web page.
• The Sources panel allows you to debug JavaScript code further. You can set breakpoints, step through code execution, inspect variables, and analyze the flow of your code.
• Take advantage of other panels such as Timeline, Performance, and Storage, depending on your specific debugging and optimization needs.
• Experiment with the available features and tools to identify and resolve any issues or bottlenecks affecting the performance and functionality of the web page or web app.

By effectively using the Web Inspector on your iPhone, you can gain deeper insights into the inner workings of your web pages and web apps. This provides an invaluable toolset for debugging, optimizing, and enhancing the overall user experience.

Troubleshooting Tips for Debug Console or Web Inspector

While the Debug Console and Web Inspector are powerful tools for web development on the iPhone, there may be occasions when you encounter issues or face challenges. Here are some troubleshooting tips to help you overcome common problems and make the most of these debugging tools:

• Verify Compatibility: Ensure that your iPhone is using a compatible version of the operating system and that you have the latest updates installed. Some features of the Debug Console or Web Inspector may require specific iOS versions.
• Clear Cache and Cookies: Clearing the cache and cookies in the browser can help resolve issues related to loading or displaying web pages. Go to the settings of your browser (Safari or Chrome) and find the option to clear browsing data.
• Check Connection: When using the Web Inspector on Safari, make sure your iPhone is properly connected to your Mac computer via a USB cable. Ensure that the necessary permissions are granted and that the connection is stable.
• Restart Devices: Sometimes, a simple restart of your iPhone or Mac can resolve temporary glitches or conflicts that may be impacting the functionality of the Debug Console or Web Inspector.
• Disable Browser Extensions: If you are experiencing issues with the Web Inspector, try disabling any browser extensions or plugins that could potentially interfere with its functionality.
• Use Browser Compatibility: While the Debug Console and Web Inspector are primarily designed for Safari, it’s worth noting that certain debugging features may not be fully supported in other browsers like Chrome. Switch to Safari if you encounter specific compatibility issues.
• Review Console Messages: Take the time to carefully read and analyze any error messages or log messages displayed in the Debug Console. Often, they can provide valuable clues about the source of the problem.
• Inspect Code and Network Requests: Use the Web Inspector to examine the code, network requests, and console output of your web page or web app. Look for any errors, warnings, or unusual behavior that may indicate the root cause of the issue.
• Debug in Segments: When troubleshooting complex issues, consider breaking down the problem into smaller segments and testing each component individually. This approach can help isolate and identify specific areas that require attention.
• Consult Documentation and Resources: Don’t hesitate to consult official documentation, online forums, or developer communities for assistance. Chances are that others have encountered similar issues and may have shared their solutions.

By employing these troubleshooting tips, you can overcome common challenges and effectively utilize the Debug Console and Web Inspector to resolve issues, optimize performance, and ensure a seamless user experience for your web pages or web apps on the iPhone.

Related Stories

Add More Features By Turning On Safari’s Develop Menu

How To Inspect An Element On A Mac

Viewing The HTML Source Code In Safari

Apple Safari Vs. Mozilla Firefox

How To Activate And Use Responsive Design Mode In Safari

How To View The Source Code Of A Web Page

Chrome Journeys Might Be Enough To Tempt You Away From Safari

Microsoft Edge Vs. Google Chrome

How Do Workers’ Compensation Lawyers Maximize Your Benefits?

The Brilliance of Smart Lighting: Residential to Commercial Benefits

Enhancing Employee Integration for Efficiency

Understanding SA Interest Rates

Revolutionizing Lead Generation: How Software Solutions Are Redefining Sales Strategies

Top 100 Christmas Songs for the Best Christmas Music

The Life and Career of Dean Haglund: A Journey from Canada to the Paranormal and Beyond

16 Best Ad Blocker For Every Browser and Device

Different Types of Aesthetics: 30 Outfit Ideas to Step Up Your OOTD Game

Monopoly Man Monocle and 10 Other Popular Examples of the Mandela Effect

Apple touts major 60% leap in Safari and WebKit performance

Apple’s WebKit team has published a new blog post this week detailing how they’ve made significant upgrades to Safari’s performance over the last several months. The improvements come following the debut of Speedometer 3.0 in March, described as a “major step forward in making the web faster for all.”

Back in March, Apple, Google, and Mozilla teamed up to launch the new Speedometer 3 browser benchmark. The goal of Speedometer 3 is to “create a shared understanding of web performance so that improvements can be made to enhance the user experience.”

The results provided by Speedometer 3 offer more details on how the test “captures and calculates scores, show more detailed results and introduce an even wider variety of workloads.” Apple says:

The introduction of Speedometer 3.0 is a major step forward in making the web faster for all, and allowing Web developers to make websites and web apps that were not previously possible.

Apple’s WebKit team says that it has successfully improved Safari’s Speedometer 3.0 score by ~60% between the release of Safari 17.0 in September and Safari 17.4’s release in March. These improvements, Apple says, mean that developers can build websites and web apps that are faster than ever before:

With all these optimizations and dozens more, we were able to improve the overall Speedometer 3.0 score by ~60% between Safari 17.0 and Safari 17.4. Even though individual progressions were often less than 1%, over time, they all stacked up together to make a big difference. Because some of these optimizations also benefited Speedometer 2.1, Safari 17.4 is also ~13% faster than Safari 17.0 on Speedometer 2.1. We’re thrilled to deliver these performance improvements to our users allowing web developers to build websites and web apps that are more responsive and snappier than ever.

The full blog post has a ton of technical details on the work that has been done to optimize WebKit and Safari for Speedometer 3.0.

Follow Chance :  Threads ,  Twitter ,  Instagram , and  Mastodon . 

FTC: We use income earning auto affiliate links. More.

Check out 9to5Mac on YouTube for more Apple news:

Chance is an editor for the entire 9to5 network and covers the latest Apple news for 9to5Mac.

Tips, questions, typos to [email protected]