mac safari ipad debug

• The Best Tech Deals Right Now
• Is Spotify Premium Worth It?

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
• How to Change the Default Search Engine in Chrome for iOS
• How to Activate and Use Responsive Design Mode in Safari
• How to Inspect an Element on a Mac
• How to Use Web Browser Developer Tools
• 4 Ways to Play Fortnite on iPhone
• What Is Safari?
• How to Disable JavaScript in Safari for iPhone
• How to View HTML Source in Safari
• How to Manage History and Browsing Data on iPhone
• How to Change Your Homepage in Safari
• How to Manage Cookies in the Safari Browser
• How to Reset Safari to Default Settings
• How to Clear Private Data, Caches, and Cookies on Mac
• How to Clear Search History on iPhone
• How to Manage Your Browsing History in Safari

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)
• Use Microsoft Forms to collect data right into your Excel file
• Saving data from Microsoft Forms into Excel using Power Automate (Flow)
• 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
• Customize the SharePoint Calendar Colors
• Best practices for working with data in Microsoft PowerApps
• npm install and the package-lock.json file
• Stack Overflow

• 2,091,062 hits

Discover more from David Lozzi

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

Type your email…

Continue reading

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

How to remote debug on Safari on iOS from Windows, Mac and Linux with Inspect?

Inspect helps you debug the mobile web in Safari on iOS by giving you an all-in-one developer tool for macOS, Windows, and Linux.

To get you started we have put together this step-by-step guide that outlines how you get going debugging Safari on iOS with Inspect.

To get you started we have put together this step-by-step guide that outlines how you get going debugging the mobile with Inspect.

Prerequisites

• macOS, Windows, or Linux
• iPhone or iPad with iOS 11 or later
• USB cable or Wi-Fi (on macOS)
• Download Inspect by going to our download page .
• Connect your iOS device to your PC via USB cable or Wi-Fi.
• Start Inspect and follow the instructions on how to setup your computer.
• You are now ready to Inspect!
• Open Safari on your iOS device and start debugging.

More ways to debug

Debugging safari and webviews running within the ios simulator.

Inspect can connect to the iOS Simulator running on MacOS. Read more in our iOS Simulator debugging docs

Debugging WebViews on iOS devices

Inspect also makes it easy to inspect and debug content within WebViews on iOS. Read more in our dedicated WebViews docs .

Happy Inspecting!

How To Inspect In Safari On IPad

• Software & Applications
• Browsers & Extensions

Introduction

Safari Inspector is a powerful tool that allows you to inspect, debug, and modify webpages directly from your iPad. Whether you're a web developer, designer, or simply curious about how websites are built, Safari Inspector provides a window into the inner workings of the web.

With the increasing use of iPads for web browsing and content creation, having the ability to inspect and modify webpages directly on the device is invaluable. Safari Inspector empowers users to delve into the structure and behavior of web content, making it an essential tool for anyone involved in web development or design.

In this article, we will explore the ins and outs of using Safari Inspector on iPad. From opening the Inspector to utilizing its powerful tools for inspecting and modifying elements, we will guide you through the process of harnessing the full potential of this feature. Whether you're a seasoned developer or a novice enthusiast, understanding how to leverage Safari Inspector on iPad can enhance your web experience and deepen your understanding of web technologies.

So, grab your iPad, launch Safari, and let's embark on a journey to uncover the hidden layers of the web with Safari Inspector.

Opening Safari Inspector on iPad

To begin our exploration of Safari Inspector on iPad, let's first uncover how to open this powerful tool. Safari Inspector is seamlessly integrated into the Safari browser , allowing users to access it with just a few taps. Here's how to open Safari Inspector on your iPad:

Launch Safari : Start by opening the Safari browser on your iPad. Safari Inspector is a built-in feature, so there's no need to download or install anything extra.

Navigate to the Webpage : Once Safari is open, navigate to the webpage you want to inspect. Whether it's a personal blog, a news site, or an e-commerce platform, Safari Inspector allows you to peek behind the curtain of any webpage.

Access the Inspector : With the webpage loaded, tap the address bar at the top of the Safari browser. Next, select the "Share" icon, which resembles a square with an arrow pointing upwards. This action will reveal a menu of options.

Select "Inspect" : From the menu, scroll to the right until you see the "Inspect" option. Tap on "Inspect," and voila! Safari Inspector will open, presenting you with a wealth of tools and information to delve into the webpage's structure and functionality.

By following these simple steps, you can easily open Safari Inspector on your iPad and begin your journey into the world of web development and design. The ability to inspect and modify webpages directly on your iPad empowers you to gain a deeper understanding of how websites are built and how they function. Now that we've opened Safari Inspector, let's dive into the array of tools and features it offers for inspecting and modifying elements on a webpage.

Using Safari Inspector Tools

Safari Inspector equips you with a robust set of tools designed to facilitate the inspection, debugging, and modification of web content directly from your iPad. Let's delve into the diverse array of tools at your disposal and explore how each one empowers you to gain insights into the inner workings of webpages.

Elements Tab

The Elements tab serves as your window into the structure of the webpage. It presents a hierarchical view of the HTML elements that compose the page, allowing you to inspect and manipulate individual elements. By tapping on specific elements within the Elements tab, you can view and modify their attributes, styles, and content, providing a comprehensive understanding of the webpage's structure.

Console Tab

The Console tab is a powerful tool for debugging JavaScript, logging messages, and executing JavaScript commands directly within the context of the webpage. It enables you to identify errors, test scripts, and interact with the webpage's functionality in real time. The Console tab serves as a valuable resource for diagnosing and resolving issues related to JavaScript execution and behavior.

Sources Tab

The Sources tab provides access to the underlying sources of the webpage, including HTML, CSS, and JavaScript files. It allows you to inspect, debug, and modify these sources, providing a comprehensive view of the webpage's codebase. With the ability to set breakpoints, step through code, and analyze network activity, the Sources tab empowers you to gain deep insights into the inner workings of the webpage's code.

Network Tab

The Network tab offers visibility into the network activity associated with the webpage, including requests, responses, and loading times for various resources. It enables you to analyze network performance, identify potential bottlenecks, and optimize the loading speed of the webpage. By examining network requests and responses, you can gain a comprehensive understanding of the webpage's resource utilization and enhance its overall performance.

Application Tab

The Application tab provides access to various aspects of the webpage's application functionality, including local storage, session storage, cookies, and cache data. It allows you to inspect and modify these application resources, providing insights into how the webpage manages and stores data locally. The Application tab is instrumental in understanding and manipulating the application-specific aspects of the webpage.

By leveraging these powerful tools within Safari Inspector, you can gain a comprehensive understanding of the structure, behavior, and performance of webpages directly from your iPad. Whether you're debugging JavaScript, optimizing network performance, or inspecting the underlying codebase, Safari Inspector equips you with the tools needed to unravel the intricacies of web development and design.

Inspecting Elements on a Webpage

Inspecting elements on a webpage is a fundamental aspect of web development and design, and Safari Inspector on iPad provides a seamless and intuitive interface for this essential task. By delving into the Elements tab within Safari Inspector, you gain the ability to explore the underlying structure of a webpage, inspect individual elements, and modify their attributes and styles. This process not only facilitates debugging and troubleshooting but also offers valuable insights into the composition and layout of web content.

Upon accessing the Elements tab, you are presented with a hierarchical view of the HTML elements that constitute the webpage. Each element, such as headings, paragraphs, images, and buttons, is displayed within a structured tree, reflecting its position and relationships within the document object model (DOM). By tapping on specific elements within this tree, you can inspect a wealth of information, including the element's attributes, styles, dimensions, and content.

Inspecting individual elements unveils a treasure trove of details that empower you to understand how the webpage is constructed. You can view and modify attributes such as IDs, classes, data attributes, and event listeners, providing the flexibility to manipulate the behavior and appearance of elements. Additionally, the Styles pane within the Elements tab allows you to explore the CSS styles applied to each element, including properties such as color, font size, margins, and positioning. This insight into the styling of elements enables you to diagnose layout issues, experiment with design modifications, and ensure visual consistency across the webpage.

Furthermore, Safari Inspector facilitates the inspection of the box model, which illustrates the dimensions and spacing of elements within the layout. By examining the content, padding, borders, and margins of elements, you can gain a comprehensive understanding of their spatial relationships and fine-tune the visual presentation of the webpage.

In essence, inspecting elements on a webpage using Safari Inspector empowers you to unravel the intricacies of web content, from its structural composition to its visual styling. Whether you're troubleshooting layout inconsistencies, experimenting with design variations, or gaining insights into the underlying HTML and CSS, Safari Inspector provides a user-friendly and powerful platform for inspecting and modifying elements directly from your iPad. This capability not only enhances your proficiency in web development and design but also fosters a deeper appreciation for the craftsmanship behind every webpage you encounter.

Modifying and Debugging CSS and JavaScript

Modifying and debugging CSS and JavaScript directly from your iPad is a game-changer, and Safari Inspector empowers you to seamlessly delve into the styles and scripts that shape the visual and interactive aspects of webpages. By leveraging the powerful tools within Safari Inspector, you can not only inspect but also modify and debug CSS and JavaScript, providing a comprehensive platform for refining the visual presentation and functionality of web content.

Modifying CSS

The Styles pane within the Elements tab of Safari Inspector allows you to directly modify CSS styles applied to individual elements. By tapping on specific style properties, such as color, font size, margins, or positioning, you can experiment with real-time modifications and witness their immediate impact on the webpage's appearance. This dynamic approach to modifying CSS empowers you to fine-tune the visual presentation, troubleshoot layout issues, and iterate on design variations directly from your iPad.

Debugging JavaScript

The Console tab within Safari Inspector serves as a robust environment for debugging JavaScript directly within the context of the webpage. By logging messages, executing JavaScript commands, and identifying errors, you can gain insights into the behavior and execution of JavaScript scripts. Additionally, the ability to set breakpoints, step through code, and inspect variables provides a comprehensive toolkit for diagnosing and resolving JavaScript-related issues. Whether you're troubleshooting interactive features, testing script functionality, or analyzing runtime behavior, Safari Inspector equips you with the tools needed to debug JavaScript with precision and efficiency.

Real-time Experimentation

One of the most compelling aspects of modifying and debugging CSS and JavaScript within Safari Inspector is the real-time nature of the process. As you make adjustments to CSS styles or diagnose JavaScript behavior, the changes are immediately reflected on the webpage, allowing you to experiment, iterate, and refine with unparalleled immediacy. This real-time experimentation fosters a dynamic and iterative approach to web development and design, enabling you to fine-tune the visual and interactive aspects of web content with agility and precision.

In essence, Safari Inspector on iPad provides a comprehensive platform for modifying and debugging CSS and JavaScript, empowering you to refine the visual presentation and interactive behavior of webpages directly from your device. Whether you're fine-tuning styles, diagnosing script errors, or experimenting with design enhancements, Safari Inspector offers a seamless and powerful environment for shaping the digital experiences that define the web.

In conclusion, Safari Inspector on iPad serves as a gateway to the inner workings of the web, offering a wealth of tools and features that empower users to inspect, debug, and modify web content with precision and agility. By seamlessly integrating into the Safari browser, Safari Inspector provides a user-friendly and intuitive platform for delving into the structure, behavior, and performance of webpages directly from the iPad.

The ability to open Safari Inspector with just a few taps, navigate through the Elements, Console, Sources, Network, and Application tabs, and leverage the diverse array of tools within each tab underscores the accessibility and power of this feature. Whether you're a seasoned web developer, a budding designer, or simply curious about the mechanics of the web, Safari Inspector offers a window into the craftsmanship and complexity that underpin every webpage.

Inspecting elements on a webpage using Safari Inspector unveils the hierarchical structure of HTML elements, the intricacies of CSS styling, and the spatial relationships defined by the box model. This process not only facilitates troubleshooting and debugging but also fosters a deeper understanding of how web content is constructed and presented.

Furthermore, the ability to modify and debug CSS and JavaScript directly from the iPad elevates the Safari Inspector experience to a dynamic and iterative endeavor. Real-time experimentation with CSS styles and JavaScript behavior empowers users to refine the visual presentation and interactive features of web content with unparalleled immediacy and precision.

In essence, Safari Inspector on iPad transcends the traditional boundaries of web development and design, bringing the power of inspection, debugging, and modification to the fingertips of users. Whether you're refining the layout of a personal blog, diagnosing JavaScript errors on an e-commerce platform, or optimizing the performance of a news site, Safari Inspector equips you with the tools and insights needed to unravel the intricacies of web content.

As the landscape of web technologies continues to evolve, Safari Inspector remains a steadfast companion for those seeking to gain a deeper understanding of the web. By embracing the capabilities of Safari Inspector on iPad, users can embark on a journey of exploration, experimentation, and refinement, shaping the digital experiences that define the modern web.

In the ever-evolving ecosystem of web development and design, Safari Inspector stands as a testament to the power of accessibility, innovation, and empowerment, offering a glimpse into the boundless possibilities that await those who dare to inspect, modify, and create on the canvas of the web.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

• Crowdfunding
• Cryptocurrency
• Digital Banking
• Digital Payments
• Investments
• Console Gaming
• Mobile Gaming
• VR/AR Gaming
• Gadget Usage
• Gaming Tips
• Online Safety
• Software Tutorials
• Tech Setup & Troubleshooting
• Buyer’s Guides
• Comparative Analysis
• Gadget Reviews
• Service Reviews
• Software Reviews
• Mobile Devices
• PCs & Laptops
• Smart Home Gadgets
• Content Creation Tools
• Digital Photography
• Video & Music Streaming
• Online Security
• Online Services
• Web Hosting
• WiFi & Ethernet
• Browsers & Extensions
• Communication Platforms
• Operating Systems
• Productivity Tools
• AI & Machine Learning
• Cybersecurity
• Emerging Tech
• IoT & Smart Devices
• Virtual & Augmented Reality
• Latest News
• AI Developments
• Fintech Updates
• Gaming News
• New Product Launches

5 Ways to Improve IT Automation

• What is Building Information Modelling

Related Post

Sla network: benefits, advantages, satisfaction of both parties to the contract, what is minecraft coded in, how much hp does a diablo tuner add, what is halo-fi, what is halo lock iphone, related posts.

How To Open Developer Tools In Safari

How To View Page Source On Tablet

How To Hard Reload Safari

How To Exit Safari On IPad

How To Get Rid Of Split Screen In Safari On IPad

How To Unlink Safari From IPhone To IPad

What Version Of Safari Do I Have

Where Is My Safari App

Recent stories.

What is Building Information Modelling?

How to Use Email Blasts Marketing To Take Control of Your Market

Learn To Convert Scanned Documents Into Editable Text With OCR

Top Mini Split Air Conditioner For Summer

Comfortable and Luxurious Family Life | Zero Gravity Massage Chair

Fintechs and Traditional Banks: Navigating the Future of Financial Services

AI Writing: How It’s Changing the Way We Create Content

• Privacy Overview
• Strictly Necessary Cookies

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

When we were testing our implementation of Apple Pay on our iPhones, we found a few issues where we needed a proper debugger. This post describes how to set one up, connected to your phone so you can figure out what went wrong.

On recent versions of iOS (v6 and up), Apple offers a remote debugger for your iPhone, iPod or iPad’s Safari web browser.

Here’s how you set it up

• On your iPad, iPhone or iPod, go to Settings > Safari > Advanced and toggle on Web Inspector .
• On your Mac, open Safari and go to Safari > Preferences > Advanced then check Show Develop menu in menu bar .
• Connect your iOS device to your Mac with the USB cable.
• On your Mac, restart Safari .
• On your iOS device, open the web site that you want to debug.
• On your Mac, open Safari and go to the Develop menu. You will now see the iOS device you connected to your Mac.

NOTE: If you do not have any web page open on your iOS device, you will see a message saying “No Inspectable Applications”.

Connecting the debugger

Once connected to your iOS device from your Mac, you can easily debug your web site just as you would if you were testing a web site locally.

NOTE: The following instructions describe working with an iPhone, but they work just as well with an iPad or iPod.

• On your iPhone, open up the website you want to debug; in our case, www.busbud.com

• On your iPhone, interact with your website, and on your Mac’s Safari Web Inspector window, resume script execution and inspect variables until you find the bit of buggy code you were seeking. Then fix it ⚡️.

Happy debugging!

Mike Gradek Busbud CTO and Co-Founder

Source: Busbud engineering

This is super helpful, thanks!

Eric Clapton – “Edge of Darkness” > Old Song > Download With Text And 320 & 128 Links In Musico

Download Old Music BY : Ahmad Shafie | Ye Del Mige Beram With Text And 2 Quality 320 And 128 On Music-fa

Thank you so much! Needed this information!

Leave a Reply

Your email address will not be published. Required fields are marked *

Notes from Node.js Interactive 2017

Automatically index your heroku postgres database with dexter, going further docker multi-stage builds, introducing docker multi-stage builds.

A Step-by-Step Guide Debug Mode on iPad

The iPad is a powerful device that can be used for a variety of tasks, from multimedia consumption to gaming to business applications. But sometimes, things don’t work as expected and you need to debug your iPad. That’s where debug mode comes in.

Debug mode allows developers and advanced users to access the inner workings of the iPad and troubleshoot problems. It provides access to system logs, application logs, and other diagnostic information that can help identify what is causing a problem. Debug mode also enables logging to the Xcode console so developers can view detailed information about their applications and track down bugs quickly.

To enable debug mode on an iPad, go to Settings > Security & Privacy and scroll down to the bottom of the page. There you will find Developer Mode which can be enabled by turning on the toggle switch. After you have done that, restart your device so that the changes take effect.

Once debug mode is enabled on your iPad, you will be able to use various tools such as Xcode console logging or web inspector on Safari browser for debugging purposes. With these tools, you will be able to locate exactly where a particular problem is occurring in your application or system logs so that it can be corrected quickly and efficiently.

Debugging an iPad requires some technical knowledge but it is not impossible for those who are willing to learn the basics of how this process works. With debug mode enabled, you can take full control over your device and identify any problems that may arise quickly and easily without having to call in professional help every time something isn’t working as expected.

Enabling Debug Mode on an iPad

In order to enable debug mode on an iPad, you will need to access the device’s Security & Privacy settings. To do so, go to Settings > Security & Privacy and scroll to the bottom of the section. You will see a toggle labeled “Developer Mode” – switch this toggle on. A security warning will appear prompting for confirmation – select “OK” and then restart your device. Once your iPad has restarted, debug mode will be enabled and you can begin debugging your apps.

Debugging Mode in iOS

Debug mode in iOS allows developers to see detailed logs of various Tapjoy actions, such as sessions, placements, purchases, custom events, etc., that appear in the Tapjoy Developer Console. This setting also enables logging into the Xcode console to help developers better debug their apps and troubleshoot any issues they may be having. Enabling this setting, it allows developers to investigate potential issues more quickly and with more accuracy.

Opening Debug in iOS

To open debug in iOS, you will need to connect your iOS device to a Mac machine. Then, enable the Web Inspector option in your device’s Settings > Safari menu. After that, open the desired web page in your mobile Safari browser. Finally, enable the Develop menu on your Mac machine. Once this is done, you will be able to debug and preview your web page on the iOS device.

Activating Developer Mode on an iPad

Yes, there is a Developer Mode available on iPads. To access it, go to Settings > Privacy & Security and scroll down to the Developer Mode list item. You can then toggle the “Developer Mode” switch to enable it. With Developer Mode enabled, developers can access additional features and settings that are not normally available on iPads.

Using Debug Mode for Troubleshooting

Debug mode is an important feature for software developers and testers, as it allows them to identify errors in the code that could be causing unexpected behavior in the application. Debug mode enables developers to set breakpoints within the code, which allows them to pause the execution of the program at a certain point and inspect its state. This helps them identify mistakes in logic or syntax and get insights into how the program works. Debugging also allows users to monitor variables and track down memory leaks that are slowing down applications. Overall, debug mode helps developers quickly find and fix bugs so they can create better software.

Inspecting an iPad

To inspect an element on an iPad, you need to first enable the Web Inspector in the Settings app. To do this, open the Settings app and select Safari from the list of apps. Then check the “Enable Web Inspector” box and close out of Settings.

Once you have enabled the Web Inspector, open Safari and navigate to the webpage that you want to inspect. When you are on the page, press and hold down on any element for a few seconds until a menu appears. Select “Inspect Element” from this menu and it will open up a Web Inspector window with all of the HTML code for that element. You can then edit or make changes to this code as needed.

Opening Developer Tools in Safari on iPad

In order to open developer tools in Safari on an iPad, you will first need to go into the Settings app and select the Safari tab. From there, you will need to scroll down and select the Advanced option. On this page, you will need to toggle the Web Inspector switch so that it is green and active.

Once this is done, you will need to connect your iPad to your computer using a USB cable. On your computer, open Safari and then access the settings menu. In here, you should be able to find an option for ‘Developer’ which can be used to enable the developer tools feature. Once enabled, you should find your iPad listed under this tab.

By following these steps, you should be able to open developer tools in Safari on an iPad with ease!

Enabling Debugging in Safari

In order to open debugging in Safari, you will need to use the Terminal application. First, open the Terminal application and enter the following command: defaults write com.apple.Safari IncludeInternalDebugMenu 1. This will enable the debug menu in Safari. Once this is done, you will need to relaunch Safari for the changes to take effect. To disable debugging in Safari, use the same command but with a 0 as opposed to a 1 at the end (e.g., defaults write com.apple.Safari IncludeInternalDebugMenu 0). Again, make sure you relaunch Safari afterward for the changes to take effect.

In conclusion, iPad debug mode is a powerful tool that can be used to test and debug native apps on physical iPads. It enables developers to observe Tapjoy actions such as sessions, placements, purchases, and custom events in the Tapjoy Developer Console. Additionally, USB Debugging can be enabled on an Android device in order to view logs in the Xcode console. By utilizing this feature, developers can identify any issues with other applications and ensure they are running optimally.

Related posts:

James Walker

Try out your website in the spatial web

Jun 12, 2024

by Ada Rose Canon, Jon Davis and Jen Simmons

Develop with the visionOS simulator

Develop with apple vision pro.

Now that visionOS 2 is announced, it’s a great time to ensure your website works in Safari in visionOS. For the most part, there’s nothing special you need to do for the spatial web. It’s truly Safari, with the same WebKit engine and its extensive support for web standards.

You can see how Safari in visionOS works by watching the Apple Vision Pro introduction at the WWDC23 Keynote or the session Meet Safari for spatial computing . If you don’t have your own Apple Vision Pro, and you want to experience what it’s like in person, you can book a free demo of Apple Vision Pro at your local Apple Store (in available regions).

Let’s take a look at how to use Safari’s suite of developer tools to test, inspect, and debug your site. First, you’ll learn how to use Safari developer tools with the visionOS simulator. Then, you’ll get a walkthrough of pairing Safari and Web Inspector on your Mac with Apple Vision Pro. These instructions work with for visionOS 1.2 and visionOS 2 so you can debug even if you do not have an Apple developer account.

The Mac is a powerful machine — powerful enough to run macOS, iOS, watchOS, tvOS, visionOS, and iPadOS at the same time. It’s here where app developers work on their apps, write code, and test their code in the appropriate Simulator.

You can test the website you are building in Safari inside Simulator on macOS. This lets you develop the site on your Mac, using your full development environment, with your favorite IDE, Terminal, and more. When you’re ready to test, use Web Inspector on Mac to inspect web pages running in its simulator.

At WWDC24, Apple announced visionOS 2 beta available now to developers with an Apple Developer Program membership . Xcode 16 beta includes the visionOS 2 beta simulator with Safari 18 beta . Or test in visionOS 1.2 with Safari 17.5 by downloading Xcode 15 and installing its simulator.

Here’s how to get started using the visionOS simulator:

• Download Xcode 15 from the Mac App Store. (It’s free.) Or download Xcode 15 or Xcode 16 beta from the Xcode website .

• The visionOS simulator will start downloading.
• Open the Simulator app on macOS. Xcode doesn’t need to be running to use Simulator.
• You will see a visionOS simulator named “Apple Vision Pro”.
• You can use the File menu anytime to create a new simulator or open existing simulators.
• Click on the Safari icon in the visionOS Home View to open Safari. Enter a URL in the navigation bar to go to a website.

Here’s how to get started using Safari’s developer tools on macOS:

• Open Safari on macOS.
• If you don’t see a Develop menu in the Menu Bar, you’ll need to enable Safari’s developer tools.
• Go to Safari > Settings > Advanced, and enable “Show features for web developers”.
• Now you can see “Apple Vision Pro (Simulator)” listed in the Develop menu.

Once you’ve completed this setup, you won’t need to repeat these steps again.

Open a web page in Safari in a visionOS simulator

You can use Safari in visionOS to navigate to a web page, but it’s likely you already have the page open in Safari on macOS. So instead, use this tip to quickly send web pages from macOS to the visionOS simulator:

• In Safari on macOS, go to the web page you’d like to test in the visionOS simulator.
• In the Safari menu bar, go to Develop > Open Page With > Apple Vision Pro.

The visionOS simulator comes to the front, and the web page opens in Safari. This also works for any number of other simulators for iPhone and iPad, which you can always install later .

Learn more about using the visionOS simulator .

Inspect a visionOS simulator with Web Inspector

Web Inspector is instrumental when developing or troubleshooting web content in a simulator. To use it for a web page open in Safari in Apple Vision Pro Simulator. Click the Develop menu, select Apple Vision Pro (Simulator), and select the web page you want to inspect.

Web Inspector opens connected to the page loaded in Safari in the visionOS simulator. This brings all of the powerful inspection and debugging tools of Web Inspector to your web content loaded in Safari in any simulator. It also works for connecting to web pages loaded in Safari on iPhone, or iPad simulators.

Preview WebXR and with Feature Flags

Apple announced WebXR support with visionOS 2. If you’re using visionOS 1.2 in Apple Vision Pro or in the visionOS simulator on your Mac, you can still experience WebXR by turning on support for the testable version. You can also preview other new features like the <model> element.

To enable support for WebXR or the <model> element, from the the Home View , go to Settings > Apps > Safari > Advanced > Feature Flags and enable the feature flags for “HTML element” or “WebXR”.

Apple Vision Pro is a great place to work on a website. Use Mac Virtual Display to bring your Mac web development workflows into Apple Vision Pro. Test your site in Safari in visionOS, while debugging in Safari’s Web Inspector on macOS.

Start a Mac Virtual Display session

Use Apple Vision Pro as a private, portable 4K display for your Mac with Mac Virtual Display. Learn how in Use your Mac with Apple Vision Pro .

Enable Web Inspector for Apple Vision Pro

To get started connecting Safari in Apple Vision Pro with Web Inspector on macOS, you’ll need to go through a one-time set-up process that ensures only your Mac and your Apple Vision Pro have this kind of access to each other.

• In Safari on macOS, if the Develop menu is missing, enable features for web developers .
• Make sure both Apple Vision Pro and your Mac are connected to the same network.
• On Apple Vision Pro, open Settings > Apps > Safari > Advanced, and enable Web Inspector. Then open Settings > General > Remote Devices, and choose your Mac to prepare visionOS for pairing.
• On Mac, open the Develop menu. You should see your Apple Vision Pro listed. Choose “Use for Development…”
• A six-digit PIN code will appear in visionOS. Type it into the form on macOS.

Now your devices are paired. You can reconnect anytime. In Safari on macOS, Apple Vision Pro will now appear in the Develop menu anytime your Apple Vision Pro is on and unlocked.

Alternatively, you can pair with Xcode .

Inspect content from macOS Safari

Now you can inspect a web page that’s running in Safari in Apple Vision Pro using Web Inspector in Safari on macOS:

• In Safari in visionOS, go to the web page you want to inspect.
• On macOS, go to the Develop menu . You’ll see your Apple Vision Pro listed.
• Select the page you want to inspect from the submenu.

A Web Inspector window will open on macOS. Any changes you make will appear in Safari in visionOS.

For more information, read Inspecting visionOS .

Learn more about how to download Simulator, pair Apple Vision Pro with Mac, or use Web Inspector while creating content for visionOS by watching Rediscover Safari developer features or by reading Inspecting visionOS .

Safari Support

Update Safari

Get the latest version of Safari for your Mac, iPhone,  iPad, or Apple Vision Pro.

• Learn how to update Safari

Clear your browsing history

Remove all records that Safari keeps of where you've browsed during a period of time you choose.

• Learn how to clear your browsing history

Block pop-ups

Block pop-up windows and handle persistent ads on your iPhone, iPad, or Mac.

• Learn how to block pop-ups

Clear Cookies

See the websites that have stored cookies and website data, and remove some or all of it.

• Learn about cookies on iPhone and iPad
• Learn about cookies on Mac

Websites aren't loading

Resolve issues if websites aren't loading or Safari quits unexpectedly.

• Resolve issues on iPhone or iPad
• Resolve issues on Mac

Increase your online security

Avoid phishing and other scams , and get warnings about suspected phishing websites.

• Change security settings on iPhone and iPad
• Change security settings on Mac

Privacy Report

See a list of known trackers Safari has blocked from tracking you across the websites you’ve visited.

• View your Privacy Report
• Manage your privacy

Safari User Guide

Learn about all the features and settings in Safari for iPhone , iPad , and Mac .

Search for more topics

Apple Communities

Find answers, ask questions, and connect with other Apple users.

• Ask or search now

Get Support

We can help you find the best support options.

Support app

Get personalized access to solutions for your Apple products.

• Download the Apple Support app

• a. Send us an email
• b. Anonymous form
• Buyer's Guide
• Upcoming Products
• Tips / Contact Us
• Podcast Instagram Facebook Twitter Mastodon YouTube Notifications RSS Newsletter

Safari 18 Features: Highlights, New Reader Mode, and Video Viewer

In macOS Sequoia , Apple has some additional features in Safari 18 that are likely to be welcomed by Mac users. Here's a quick rundown of what's new.

Highlights can be accessed via a new site menu icon that appears in the address bar, from which you can quickly pull up relevant information about a site, such as directions, summaries, or quick links to learn more about people, music, movies, and TV shows.

As of writing this, Highlights does not appear to work outside of the United States, so it is likely to be region-specific at this early state. However, there are other changes to Safari that are live wherever you are located.

If you click the button again, a dropdown menu lets you change the theme (white, off-white, gray, black) and choose your preferred font (Athelas, Charter, Georgia, Iowan, New York, Palatino, San Fransisco, Seravek, and Times New Roman).

In this menu, you can also find text size options by percentage (from 50% to 300%), as well as a "Find..." option to find a word or phrase on a page, and a button to Hide Reader mode.

Apple says that Reader can also provide a summary of an article, along with a table of contents in a sidebar, but we could not get this to work, likely because it is an aspect of Apple Intelligence , which will not be introduced until later in the year.

In other Safari-related changes, ‌macOS Sequoia‌ beta adds support for opening links directly in web apps. Now, when you click a link, that link should open in the web app instead of your default web browser. You can also now personalize web apps on Mac with Safari Web Extensions and Content Blockers.

Lastly, Safari 18 beta for iOS, iPadOS, visionOS , ‌macOS Sequoia‌ and macOS Sonoma brings inline predictive text to the web, and you can now set which Safari profile should be used to open particular websites.

Get weekly top MacRumors stories in your inbox.

Popular Stories

Revealed: iOS 18 Works With These iPhone Models

Apple Announces iOS 18 With New Customization Features, Redesigned Photos App, and More

WWDC 2024 Apple Event Live Keynote Coverage: iOS 18, Apple's AI Push, and More

Massive iPhone Upgrade Coming This Week But These Devices Will Miss Out

iOS 18 Adds Pop-Out Bezel Animation When Pressing iPhone Buttons

Apple Provides Updated Look at Next-Generation CarPlay at WWDC 2024

New: iPadOS 18 Drops Support for These iPad Models

Top rated comments.

People still use Safari? I tried it when i first had my Mac, but I could nto get on with it, then I tried it again a few weeks ago, but had problems with some sites not working, so I have gone back to Firefox.

Safari is still the second-most used browser. Far behind Chrome but also far ahead of Firefox. Of course, most of that is iOS/iPadOS. But even on the desktop, Safari is ahead of Firefox and Safari is not even available on Windows & Linux, unlike Firefox. So yeah... People still use FireFox? :D

No fixes to the messy interface? I have no idea where to find stuff anymore. Scattered around the share sheet, under the A button, the refresh button, the extensions menu, third party buttons, … And there are iCloud tabs, tab groups, profiles, tab group favorites, ….

Next Article

Our comprehensive guide highlighting every major new addition in iOS 17, plus how-tos that walk you through using the new features.

Apple News+ improvements, cross-platform tracker alerts, website app downloads for the EU, and more.

Get the most out your iPhone 15 with our complete guide to all the new features.

A deep dive into new features in macOS Sonoma, big and small.

Updates to Mail, Photos, Messages, and more, with Apple Intelligence features throughout.

iPhone Mirroring, Safari improvements, new Passwords app, and Apple Intelligence features throughout.

Action button expands to all models, new Capture button, camera improvements, and more.

Larger displays, new Capture button, camera improvements, and more.

Other Stories

1 day ago by Tim Hardwick

2 days ago by Tim Hardwick

3 days ago by Tim Hardwick

4 days ago by Tim Hardwick

1 week ago by Tim Hardwick

This page requires JavaScript.

Please turn on JavaScript in your browser and refresh the page to view its content.

WWDC24 Highlights

Apple Reveals Apple Intelligence

iOS 18 Makes iPhone More Personal and Intelligent Than Ever

iPadOS 18 Takes iPad to the Next Level

macOS Sequoia Brings New Ways of Working and Transformative Intelligence to Mac

watchOS 11 Offers Powerful Health and Fitness Insights, and More Personalization

visionOS 2 Brings New Spatial Computing Experiences to Apple Vision Pro

Home and Audio Updates Elevate Entertainment and Bring More Convenience

Text of this article

June 10, 2024

Relive the biggest moments from WWDC24

Today Apple kicked off its 2024 Worldwide Developers Conference, revealing groundbreaking new technologies and features during a keynote that was live-streamed from Apple Park to millions around the world. During the weeklong event, developers and students will have unique access to Apple experts, as well as insight into new tools, frameworks, and features to help elevate their apps and games.

This year’s keynote revealed Apple Intelligence , the personal intelligence system that combines the power of generative models with users’ personal context — at the core of iPhone, iPad, and Mac to deliver intelligence that’s incredibly useful and relevant. Major updates also come to iOS 18 , iPadOS 18 , macOS Sequoia , and watchOS 11 , including the biggest-ever redesign of the Photos app, game-changing productivity tools, and new ways for users to express themselves and customize their devices. visionOS 2 brings powerful new ways to interact with Apple Vision Pro and exciting updates to spatial photos and Mac Virtual Display, and tvOS 18 infuses useful information in Apple TV+ films and shows on users’ biggest screen in the home.

Beginning this month, Apple Vision Pro is also coming to more countries and regions, including China mainland, Hong Kong, Japan, Singapore, and next month will come to Australia, Canada, France, Germany, and the U.K.

Apple Intelligence harnesses the power of Apple silicon to understand and create language and images, take action across apps, and draw from users’ personal context to simplify and accelerate everyday tasks. A cornerstone of Apple Intelligence is on-device processing, which delivers personal intelligence without collecting users’ data. Private Cloud Compute sets a new standard for privacy in AI, with the ability to flex and scale computational capacity between on-device processing, and larger, server-based models that run on dedicated Apple silicon servers.

With iOS 18 , users will now be able to arrange apps and widgets in any open space on the Home Screen, customize the buttons at the bottom of the Lock Screen, and quickly access more controls in Control Center. With the biggest redesign ever of the Photos app, photo libraries are automatically organized in a new single view in Photos, and helpful new collections keep favorites easily accessible. All-new text effects come to iMessage, amplifying any letter, word, phrase, or emoji with dynamic, animated appearances to bring conversations to life. Users can also now communicate over satellite in the Messages app, even when a cellular or Wi-Fi connection isn’t available.

With iPadOS 18 , the iPad experience is more versatile and intelligent than ever with new features and apps designed for Apple Pencil. The Calculator app comes to iPad with Math Notes, which allows users to type or write out mathematical expressions and see them instantly solved in their own handwriting. New handwriting tools in Notes including Smart Script make handwritten notes more fluid, flexible, and easier to read.

With macOS Sequoia , Continuity between iPhone and Mac gets better than ever with iPhone Mirroring, enabling full access to and control of iPhone directly from Mac. Safari gets another big update with the new Highlights feature for effortless information discovery on webpages while browsing. Gaming is even more immersive with Personalized Spatial Audio that puts players in the middle of the action like never before. And Apple Intelligence unlocks new ways for Mac users to enhance their writing and communicate more effectively, create playful images in seconds, and more. Apple Intelligence takes full advantage of the power of Apple silicon and its Neural Engine, and will be supported by every Mac with an M-series chip.

watchOS 11 offers breakthrough insights into users’ health and fitness, and more personalization than ever. The new Vitals app surfaces key health metrics and context, the ability to measure training load offers a game-changing new experience when working out, and the popular Activity rings are even more customizable. The Smart Stack and Photos face use intelligence to feature more individualization, and Apple Watch and the Health app on iPhone and iPad offer additional support for users who are pregnant. Check In, the Translate app, and new capabilities for the double tap gesture come to Apple Watch for added connectivity and convenience.

Just months after its initial release, visionOS 2 brings powerful spatial computing experiences to Apple Vision Pro, including new ways for users to create spatial photos with the images already in their library, intuitive hand gestures to easily access important information at a glance, and new features for Mac Virtual Display, Travel Mode, and Guest User. visionOS 2 also introduces exciting new capabilities like Follow Your Breathing in the Mindfulness app, SharePlay for Photos, and multiview in the TV app.

With tvOS 18 , intelligent new features like InSight — and updates to Enhance Dialogue and subtitles — level up cinematic experiences, while new Apple Fitness+, Apple Music, and FaceTime capabilities get even better on users’ biggest screen. The Home app gains new features with iOS 18, like guest access and hands-free unlock with home keys, delivering effortless and secure access to the home. AirPods software updates will transform the way users respond to Siri with new gestures, take calls with friends and loved ones, and immerse themselves in their favorite games.

Press Contacts

Apple Media Helpline

[email protected]

Images in this article