apple safari developer tools

How-To Geek

How to turn on the develop menu in safari on mac.

The Develop menu lets you view page source in Safari on Mac.

Quick Links

How to enable the develop menu in safari on mac, how to view page source in safari on mac.

When you right-click on any web page in Safari on Mac, it doesn't reveal the Show Page Source and Inspect Element buttons. To see these, you need to enable the Develop menu---we'll show you how to do that.

Once you've enabled the Develop menu, right-clicking a blank space on any website will reveal the Inspect Element and Show Page Source buttons. These allow you to take a look at the source code of any website, which is useful for things like downloading images from websites and debugging code or finding out what it looks like behind any site (for website designers).

You can easily turn on the Develop menu in Safari by following a couple of steps. Open Safari on your Mac and click the "Safari" button in the menu bar.

Next, select "Preferences." Alternatively, you can use the keyboard shortcut Command+, (comma). This will also open up Safari preferences.

Go to the "Advanced" tab.

Check the box for "Show Develop Menu in Menu Bar."

Now the Develop menu will appear between Bookmarks and Window at the top.

Apart from being able to view the page source, this will allow you to access developer-focused features, such as disabling JavaScript on any website.

Once you've enabled the Develop menu, there are a couple of ways to view the page source in Safari.

Open any website in Safari and right-click the blank space on the page. Now, select "Show Page Source." You can also get to this menu by using the keyboard shortcut Option+Command+u.

If you're looking for images or other media elements from any web page, Safari makes it easy to find these. In the left-hand pane, you will see various folders such as Images, Fonts, etc. Click the "Images" folder to quickly find the photos that you need.

After selecting an image, you can view its details easily by opening up the details sidebar. The button to open this is located at the top-right of the console, just below the gear icon. You can also open this with the shortcut Option+Command+0.

Click "Resource" at the top of the details sidebar to view details, such as the size of the image and its full URL.

You can change the position of the page source console easily, too. There are two buttons at the top-left of this console, right next to the X button. Click the rectangle icon to move the console to a different side within the browser window.

If you'd like to open the page source console in a separate window, you can click the two-rectangles icon. This will detach the console and open it in a separate window.

To check out the code for any specific element on the page, you can right-click that element and select "Inspect Element." This will take you directly to the code for the element that you selected.

Whenever you're done looking at the code, click the X button to close the page source console and return to browsing on Safari. You can also check out how to view a website's page source in Google Chrome  here.

Related: How to View the HTML Source in Google Chrome

Apple introduces new developer tools and technologies to create even better apps

Xcode cloud.

Augmented Reality

Graphics and games.

Additional Developer Tools and APIs

• Xcode 13 adds powerful new team development features that are perfect for working with Xcode Cloud, as well as with GitHub, Bitbucket, and GitLab collaboration features.
• With SharePlay , popular apps like Disney+, ESPN+, HBO Max, Hulu, MasterClass, Paramount+, TikTok, and Twitch are building new types of shared experiences for users on iPhone, iPad, and Mac. 1
• Third-party video-calling apps can take advantage of the latest FaceTime enhancements, including Voice Isolation, Wide Spectrum Audio, and Portrait mode.
• Messaging apps including Slack and WeChat can now share user status in conversations; apps like Uber Eats can have Siri announce incoming messages; and new Notification APIs enable high-priority and communication notifications from apps like Chase Mobile and Zomato to break through Do Not Disturb or a Focus.
• New camera APIs allow for better fused images and add the ability to capture high-quality stills and 1080p video in the same session.
• Apple Watch developers like Breakpoint Studio, Pandora, Qardio, and more are now creating new app experiences that offer a deeper level of customization, and are more responsive to their users’ environment.
• With TestFlight on the Mac, developers can test in-app purchases and other great Mac app features.
• StoreKit 2 , which ensures in-app purchases are safe and secure for customers, now features new APIs for handling product entitlements and subscriber status, and testing support in both Xcode and the Apple sandbox environment.
• Web developers including Grammarly and Honey are now building extensions in Safari that are available across iPhone, iPad, and Mac. Developers can even create new, powerful extensions in the Mail app.
• Third-party navigation apps will be able to show a map view in a vehicle’s instrument cluster display, and a new CarPlay simulator for Mac will vastly improve testing efficiency.
• Apps can offer the theater-like experience of spatial audio and place sounds all around to bring their content to life. And Physical Audio Spatialization Engine makes it easy for game developers to render true-to-life audio across all of Apple’s platforms.
• ShazamKit enables developers to integrate audio recognition technology directly from Shazam into their apps, making it possible not only to match music to Shazam's vast catalog of songs, but also to match any prerecorded audio to custom results developers create.

Images of Apple’s New Developer Tools and Technologies

• Some shared content may require a subscription to view.

Press Contacts

Apple Media Helpline

[email protected]

• Irresistible Tech Gifts for That Special Dad
• Killer Smartphone Deals We Love

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

Safari Developer Tools

Inspect, edit, debug, and check the performance of your web content using Safari developer tools.

Safari Developer Tools Documentation

Posts under Safari Developer Tools tag

• Last updated

PWA Push Notification Rate Limit? I'm curious if there is a limit to number of PWA push notifications that can be sent. We estimate roughly 10,000 pushes a day. If anyone has any insight it would be greatly appreciated. Safari & Web General Safari Safari Developer Tools Safari Services Safari and Web 0 0 613 Aug ’23

Using file:// scheme to access local files on SafariForWebKitDevelopment I am currently utilizing local servers to facilitate interactions with local resources. However, I am exploring if there are solutions that would enable direct file access through the file:// protocol. I cannot access the developer tools and feature flags. Specifically, the option "Show features for web developers" seems to be deactivated. This is happening within the ASan WebKit build. I am running this using Tools/Scripts/run-safari. Any insights or potential solutions to these issues would be greatly appreciated. Safari & Web General Safari Safari Developer Tools Safari Extensions Safari Services 2 1 558 Jul ’23

SFSafariViewController not showing location permission pop-up but showing camera permission pop-up Hey, I am loading a link on my app using SFSafariViewController and that link asking camera and location permission. Camera permission pop-up showing and accessible but for location permission it is not doing anything even not showing location permission pop-up. I need to know is there any way to get location permission pop-up on SFSafariViewController. App & System Services Core OS iOS Safari Developer Tools Safari Services Safari and Web 1 0 897 Jul ’23

Cookies in SFSafariviewcontroller I am using appauth pods for authentication (https://github.com/openid/AppAuth-iOS) and was wondering how Safari webkit is managing the application context for the cookies saved while authentication. I made sure I have a successful authentication then I tried few combinations to understand failed authentication behavior and tried to compare with my mac safari developer tools. What caught me off guard was that the safari webkit cookies were not visible to me programmatically. I am using below code to get the cookies. HTTPCookieStorage.shared.cookies(for: URL(string: "https://(targetDomain)")!) I also tried using developer console for mobile safari kit but as soon as the authentication flow gets completed the view is destroyed and information gets lost. So has anyone have come across this situation and figured how safari web kit isolates the cookies visibility. Developer Tools & Services Xcode WebKit Xcode Safari Developer Tools 0 0 919 Jul ’23

Not showing console logs from iPhone I am trying to get console logs from iPhone safari on my MacBook safari. I have connected iPhone to MacBook via USB. It doesn't display logs, it just displays errors. Few days back, both logs and errors were showing up... App & System Services Hardware iPhone Safari Safari Developer Tools 0 0 540 Jul ’23

Useful WWDC Videos Missing from Previous Years (For example: "Customized Loading in WKWebView from WWDC 2017") It appears a lot of useful WWDC session videos from previous years have been scrubbed from the developer.apple.com? I cannot find the WWDC session "Customized Loading in WKWebView" from 2017 in the Developer app nor on the developer website. There are lots of other videos that would be useful to watch, even from years ago. Am I just not looking in the right place? Safari & Web General WebKit Safari Developer Tools 0 0 398 Jul ’23

Tomcat servlet HttpServletRequest not found Is it because file cannot be opened because it is from an unidentified developer. I have a MacBook Air I have installed TomCat My application will be using servlets I can not get the simplest servlet to compile and execute. I downloaded javax and was not sure where to put it. Thought it should go into Library/Java/Extensions I suspect that Mac will not allow opening the file When is compile in terminal stephenghebert@Stephens-MacBook-Air myapp % javac HelloWorld.java HelloWorld.java:10: error: cannot find symbol public class HelloWorld extends HttpServlet { ^ symbol: class HttpServlet HelloWorld.java:11: error: cannot find symbol public void doGet(HttpServletRequest request, Safari & Web General Safari Developer Tools 0 0 507 Jun ’23

Safari 17 Release Notes In the Release Notes of Safari 17 Beta it is mentioned that it is already available for certain macOS versions. Where do I find the link to macOS Ventura? https://developer.apple.com/documentation/safari-release-notes/safari-17-release-notes Safari & Web General Safari Safari Developer Tools Safari Extensions Safari Services 0 0 978 Jun ’23

Where can I download Safari 17 beta? In the notes it is stated that "Safari 17 beta is available for macOS Monterey, macOS Ventura, macOS Sonoma beta, iPadOS 17 beta, and iOS 17 beta." Where do I find the download link for macOS Ventura? Safari & Web General Safari Safari Developer Tools 0 2 1.1k Jun ’23

Glitch with safari inspect element Hello, I noticed there's a glitch with inspect element. Under elements, when I try to uncheck a style property, the whole element's CSS gets removed, sometime's the whole webpage's. I was wondering if there was anything I could do to fix this issue. Thanks Safari & Web General Safari Developer Tools Web Inspector 2 0 840 Oct ’23

iOS 16.4 ASWebAuthenticationSession's webview can not debug in safari web inspector I'm using Xcode 14.2 to build an app that runs on iOS 16.4. There is no webView.isInspectable property in this version. When my app presents a webview, it is inspectable in Safari -> develop, which is nice. However, when starting a ASWebAuthenticationSession, Safari -> develop shows "no inspectable applications". It was inspectable on iOS 16.1 but not iOS 16.4. How to solve this? App & System Services Core OS iOS Safari Safari Developer Tools Authentication Services 5 2 1.6k Sep ’23

iOS 16.4 webview can not debug in safari web inspector version: iOS 16.4(20E5239a) both on my iphone and Simulator，Safari -> develop shows "no inspectable applications" Safari & Web General Safari Safari Developer Tools 8 11 16k Oct ’23

OffscreenCanvas in Safari Technology Preview According to the release notes of STP, OffscreenCanvas has been implemented for a while. However, when I run JavaScript code, it fails because OffscreenCanvas is not a recognized command. I feel I’m missing something obvious here. Any help? Safari & Web General Safari Developer Tools Safari Safari and Web 6 2 3.1k Jul ’23

Browser.permissions.request not working as expected Hi there - I am trying to port over Chrome extension over to Safari Web extension. Looks like Safari has a very aggressive permissions flow which isn't a great user experience but I get the privacy benefits. I am trying to move some of my permissions like <all_urls> or tabs as optional permissions and build a flow where I can request the user for them in hopes that i can educate them as to why I need them similar to how Chrome/FF have it. However when i use browser.permissions.request - i always end up getting true without invoking the prompt. The prompt seems to come up regardless when i start visiting a website. Can someone help with this? Sounds more like a defect in Safari. Safari & Web General Safari Developer Tools Safari Safari Extensions 2 0 1k 1w

Unable to view Safari Mobile console logs Hi all, As of a few days ago, I can no longer capture the console logs from my iPhone onto macOS. Is anyone else experiencing the same issue? Safari & Web General Safari Safari Developer Tools 2 1 1.1k Jul ’23

browser.downloads API for Safari Web Extensions Hello, I am in the process of converting a Web Extension to a Safari Extension. I need to use browser.downloads.onCreated.addListener in my extension but the browser.downloads API is not supported yet. Do I have another way to do that? Safari & Web General Safari Developer Tools Safari Services Safari Safari Extensions 13 3 4.3k Oct ’23

Simulate Device On Safari Hey Developers! I love web design and am trying to test out some CSS, I am currently using a MacBook Pro 13" (2020 Version), I only use Safari and I want to know if I'm able to simulate other devices like a Windows 10 PC, an Android phone, an iPhone, or an iPad. I do own an iPhone and iPad but wanted to do it all on my Mac, I've tried searching for Safari extensions to do this but so far I haven't found one. If you could give me some suggestions or a link to what I should use it would be appreciated. Thanks, Mateo App & System Services Core OS macOS Safari and Web Safari Developer Tools 3 0 17k Sep ’23

SafariDriver click on a button not working with safari 13.0.1 I am using Selenium 3.141 with SafariDriver included with Safari 13.0.1 (14608.2.11.1.11).I have problems with interacting with elements, in this case clinking on a button.1) Create a new SafariDriver 2) Navigate to a page with a button element3) Find the button element4) Click on the button elementRESULT: The click is not performed on the button element but any element below the button element.This is not working from the recent update to safari 13.0.1. Safari & Web General Safari Developer Tools 10 0 5.8k Jun ’23

How to debug service worker/pwa in ios11.3 mobile device? My environment: * Safari Technology Preview Release 51 (Safari 11.2, WebKit 13606.1.6) * iPad with ios11.3 (15e5216a) * mac os 10.13.3I can debug service worker in mac desktop.I can debug service worker in Android mobile device.But I could not found out how to debug service worker in ios11.3 mobile device?I wonder if it should belong to "Safari Developer Tools " or "iOS Web Apps" Safari & Web General Safari Developer Tools 4 1 6.1k Jun ’23

How To Get Developer Tools In Safari

• Software & Applications
• Browsers & Extensions

Introduction

Safari, the sleek and innovative web browser developed by Apple, is known for its user-friendly interface and seamless integration with Apple devices. While Safari offers a smooth browsing experience for users, it also provides powerful tools for web developers to create and optimize websites and web applications. One of the key features that sets Safari apart is its built-in Developer Tools, which offer a comprehensive set of resources for web development and debugging.

Whether you are a seasoned web developer or just starting out, having access to Safari's Developer Tools can significantly enhance your workflow and productivity. These tools enable you to inspect and modify web page elements, debug JavaScript, analyze network activity, and optimize website performance, among other capabilities. By leveraging Safari's Developer Tools, you can gain valuable insights into the structure and behavior of web pages, identify and troubleshoot issues, and fine-tune the performance of your web projects.

In this article, we will delve into the process of enabling and utilizing Safari's Developer Tools for web development. We will explore the various features and functionalities offered by these tools, providing practical insights and tips for leveraging them effectively. Whether you are a web developer, designer, or simply curious about the inner workings of websites, this guide will equip you with the knowledge and skills to harness the full potential of Safari's Developer Tools.

Let's embark on a journey to uncover the hidden gems of Safari's Developer Tools and unlock the power of web development within the confines of this innovative browser . Whether you're seeking to enhance your web development skills or gain a deeper understanding of web technologies, Safari's Developer Tools are your gateway to a world of possibilities. So, without further ado, let's dive into the realm of web development with Safari as our trusted companion.

Enabling Developer Tools in Safari

Enabling Safari's Developer Tools is a straightforward process that unlocks a treasure trove of functionalities for web development. Whether you're a seasoned developer or a curious enthusiast, accessing these tools can significantly enhance your web development experience within the Safari browser .

To enable Developer Tools in Safari, follow these simple steps:

Open Safari Preferences : Launch Safari and navigate to the "Safari" menu located in the top-left corner of the screen. From the drop-down menu, select "Preferences."

Access Advanced Settings : In the Preferences window, click on the "Advanced" tab. This will reveal a set of advanced settings for Safari.

Enable Develop Menu : Within the Advanced tab, locate the option labeled "Show Develop menu in menu bar" and ensure that it is checked. This action activates the Develop menu, which houses a plethora of web development tools and features.

Verify the Development Menu : After enabling the Develop menu, you should see it appear in the menu bar at the top of the screen, alongside other Safari menu options.

Once you have completed these steps, Safari's Developer Tools will be readily accessible, empowering you to delve into the intricacies of web development and gain valuable insights into the structure and behavior of web pages.

By enabling Developer Tools in Safari, you gain access to a suite of powerful resources that can elevate your web development capabilities. From inspecting and modifying web page elements to analyzing network activity and optimizing website performance, Safari's Developer Tools provide a comprehensive toolkit for enhancing your web projects.

With Developer Tools at your fingertips, you are poised to embark on an enriching journey through the realms of web development, armed with the tools and insights needed to create, optimize, and fine-tune captivating web experiences within the Safari browser.

Using Developer Tools for Web Development

Safari's Developer Tools offer a robust set of features and functionalities that empower web developers to streamline their workflows, troubleshoot issues, and optimize web projects. By leveraging these tools, developers can gain valuable insights into the inner workings of web pages and applications, ultimately enhancing the user experience and performance of their creations.

Inspecting and Modifying Web Page Elements

One of the fundamental capabilities of Safari's Developer Tools is the ability to inspect and modify web page elements in real time. By right-clicking on any element within a web page and selecting "Inspect Element," developers can access a detailed view of the HTML and CSS properties associated with that element. This feature is invaluable for understanding the structure and styling of web pages, allowing developers to make on-the-fly adjustments and see the immediate impact on the page layout.

Debugging JavaScript and Analyzing Console Output

Safari's Developer Tools include a robust JavaScript debugger, enabling developers to identify and resolve issues within their JavaScript code. By setting breakpoints, stepping through code, and examining variable values, developers can pinpoint and troubleshoot errors, ultimately improving the functionality and reliability of their web applications. Additionally, the console within Developer Tools provides a space for logging messages, errors, and warnings, offering valuable insights into the runtime behavior of JavaScript code.

Network Analysis and Performance Testing

Another powerful aspect of Safari's Developer Tools is the network panel, which allows developers to analyze network activity and optimize the performance of web pages. By monitoring network requests, loading times, and resource sizes, developers can identify opportunities for optimization, such as minimizing file sizes, leveraging caching strategies, and reducing unnecessary network requests. This capability is instrumental in creating fast and efficient web experiences for users across various devices and network conditions.

Modifying and Testing CSS in Real Time

Safari's Developer Tools provide a seamless environment for modifying and testing CSS styles directly within the browser. Developers can experiment with different styles, colors, and layouts, observing the immediate effects on web page elements. This real-time feedback accelerates the design and development process, allowing developers to fine-tune the visual presentation of their websites with precision and agility.

Leveraging Additional Tools and Resources

In addition to the aforementioned features, Safari's Developer Tools offer a wide array of resources, including the Elements panel for inspecting and editing the DOM, the Application panel for managing web storage and service workers, and the Security panel for identifying potential security vulnerabilities within web applications. These tools collectively provide a comprehensive toolkit for web developers, empowering them to create secure, performant, and visually compelling web experiences.

By harnessing the power of Safari's Developer Tools, web developers can elevate their skills, optimize their workflows, and deliver exceptional web experiences to users. Whether you are fine-tuning the layout of a responsive website, debugging complex JavaScript interactions, or optimizing the performance of a web application, Safari's Developer Tools are your indispensable companions in the journey of web development.

Inspecting and Debugging Web Pages

Inspecting and debugging web pages is a fundamental aspect of web development, and Safari's Developer Tools provide a robust set of features for this purpose. When it comes to understanding the structure and behavior of web pages, as well as identifying and resolving issues, the inspection and debugging capabilities within Safari's Developer Tools are indispensable.

Inspecting Web Page Elements

The ability to inspect web page elements is a cornerstone of Safari's Developer Tools. By right-clicking on any element within a web page and selecting "Inspect Element," developers can access a detailed view of the HTML and CSS properties associated with that element. This feature provides a comprehensive breakdown of the selected element, including its position, dimensions, styling, and any associated event listeners. This level of insight allows developers to gain a deep understanding of the composition and layout of web page elements, facilitating precise modifications and optimizations.

Modifying Web Page Elements in Real Time

In addition to inspecting web page elements, Safari's Developer Tools enable developers to modify elements in real time. By directly editing the HTML and CSS properties of elements within the Elements panel, developers can experiment with different styles, content, and layouts, observing the immediate impact on the web page. This real-time editing capability is invaluable for fine-tuning the visual presentation of web pages and rapidly iterating on design and layout changes.

Safari's Developer Tools include a powerful JavaScript debugger, which allows developers to identify and resolve issues within their JavaScript code. By setting breakpoints, stepping through code, and examining variable values, developers can pinpoint and troubleshoot errors, ultimately improving the functionality and reliability of their web applications. Additionally, the console within Developer Tools provides a space for logging messages, errors, and warnings, offering valuable insights into the runtime behavior of JavaScript code. This feature is instrumental in diagnosing and addressing JavaScript-related issues, ensuring the smooth execution of interactive and dynamic web elements.

In essence, Safari's Developer Tools provide a comprehensive suite of capabilities for inspecting and debugging web pages. From gaining insights into the structure and styling of web page elements to identifying and resolving JavaScript-related issues, these tools empower developers to create, optimize, and fine-tune web experiences with precision and efficiency. By leveraging the inspection and debugging features within Safari's Developer Tools, developers can elevate their skills, streamline their workflows, and deliver exceptional web experiences to users.

Modifying and Testing CSS and JavaScript

Modifying and testing CSS and JavaScript is a crucial aspect of web development, and Safari's Developer Tools offer a seamless environment for making real-time adjustments and testing code changes. Whether you're refining the visual presentation of a website or fine-tuning the functionality of interactive elements, Safari's Developer Tools provide a comprehensive toolkit for working with CSS and JavaScript.

Real-time CSS Modifications

Safari's Developer Tools allow developers to modify CSS styles directly within the browser, providing immediate feedback on the visual appearance of web page elements. By accessing the Styles panel, developers can experiment with different styles, colors, and layouts, observing the instant effects on the web page. This real-time editing capability accelerates the design and development process, enabling developers to iterate on visual enhancements with agility and precision.

Testing JavaScript Code

In addition to CSS modifications, Safari's Developer Tools facilitate the testing and debugging of JavaScript code. The JavaScript debugger within Developer Tools empowers developers to set breakpoints, step through code, and inspect variable values, facilitating the identification and resolution of JavaScript-related issues. By leveraging the debugging capabilities, developers can ensure the reliability and functionality of interactive elements, such as dynamic user interfaces and client-side interactions.

Performance Optimization

Furthermore, Safari's Developer Tools provide insights into the performance of CSS and JavaScript code. Developers can analyze the impact of CSS styles and JavaScript functions on web page loading times and responsiveness, identifying opportunities for optimization. By monitoring the execution of CSS and JavaScript, developers can fine-tune code to enhance the overall performance and user experience of web applications.

In summary, Safari's Developer Tools offer a comprehensive suite of features for modifying and testing CSS and JavaScript. From real-time CSS adjustments to JavaScript debugging and performance optimization, these tools empower developers to create visually compelling and functionally robust web experiences. By harnessing the capabilities within Safari's Developer Tools, developers can refine the presentation and behavior of web pages with precision, ensuring an exceptional user experience across various devices and platforms.

Network analysis and performance testing are critical components of web development, and Safari's Developer Tools provide a robust set of features for evaluating the network activity and optimizing the performance of web pages and applications.

Monitoring Network Activity

Safari's Developer Tools offer a comprehensive Network panel, which allows developers to monitor and analyze the network activity associated with a web page. This includes tracking network requests, such as HTTP requests for resources like HTML, CSS, JavaScript, images, and other assets. By examining the network waterfall, developers can gain insights into the timing and sequence of network requests, identifying potential bottlenecks and optimizing the loading process.

Resource Size and Loading Times

The Network panel within Safari's Developer Tools provides detailed information about the size and loading times of individual resources. Developers can assess the impact of resource sizes on web page performance, identifying opportunities to optimize assets for faster loading. By analyzing the loading times of resources, developers can prioritize critical content and streamline the delivery of essential assets, ultimately enhancing the overall user experience.

Safari's Developer Tools empower developers to optimize the performance of web pages by identifying and addressing potential performance bottlenecks. By leveraging the insights from the Network panel, developers can implement strategies to minimize file sizes, leverage browser caching, and reduce unnecessary network requests. Additionally, developers can assess the efficiency of third-party integrations and external resources, ensuring that web pages load quickly and responsively across various devices and network conditions.

Network Throttling

One of the standout features of Safari's Developer Tools is the ability to simulate different network conditions using network throttling. Developers can emulate various network environments, such as 3G , 4G, or slower connections, to assess the performance of web pages under different bandwidth constraints. This capability enables developers to optimize web pages for a wide range of network conditions, ensuring a consistent and reliable user experience for diverse audiences.

In essence, Safari's Developer Tools provide a comprehensive suite of capabilities for network analysis and performance testing. By monitoring network activity, assessing resource sizes and loading times, optimizing web page performance, and simulating network conditions, developers can create fast, efficient, and responsive web experiences. Leveraging the insights and tools within Safari's Developer Tools, developers can fine-tune the performance of web pages, ultimately delivering exceptional user experiences in the ever-evolving landscape of the web.

In conclusion, Safari's Developer Tools serve as a gateway to the intricate world of web development, offering a rich array of features and functionalities that empower developers to create, optimize, and fine-tune web experiences with precision and efficiency. By enabling and leveraging these tools, developers gain valuable insights into the structure, behavior, and performance of web pages, ultimately enhancing the user experience and functionality of their web projects.

From inspecting and modifying web page elements to debugging JavaScript, analyzing network activity, and optimizing performance, Safari's Developer Tools provide a comprehensive toolkit for addressing the diverse challenges of web development. The seamless integration of real-time editing, debugging, and performance analysis within the browser environment streamlines the development process, allowing developers to iterate on design and functionality with agility and precision.

Furthermore, the ability to simulate network conditions and assess the impact of resource sizes on web page performance equips developers with the tools needed to create fast, efficient, and responsive web experiences across various devices and network environments. This capability is instrumental in ensuring a consistent and reliable user experience, regardless of the user's location or network conditions.

By harnessing the power of Safari's Developer Tools, developers can elevate their skills, optimize their workflows, and deliver exceptional web experiences to users. Whether it's refining the visual presentation of a website, debugging complex JavaScript interactions, or optimizing the performance of a web application, Safari's Developer Tools are indispensable companions in the journey of web development.

In essence, Safari's Developer Tools not only provide a window into the inner workings of web pages but also empower developers to craft immersive, performant, and visually compelling web experiences. As the web continues to evolve, Safari's Developer Tools stand as a testament to Apple's commitment to providing developers with the resources and capabilities needed to thrive in the dynamic landscape of web development.

In the ever-expanding digital ecosystem, Safari's Developer Tools remain a steadfast ally for developers, offering a robust platform for innovation, creativity, and excellence in web development. Whether you're a seasoned developer or an aspiring enthusiast, Safari's Developer Tools invite you to embark on a journey of discovery and mastery, shaping the future of the web one line of code at a time.

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 Inspect On IPhone Safari

How To Install Safari On Apple TV 4

How To Test Website On Safari On Windows

How To Enable Inspect In Safari

How To Open Developer Tools On Safari

How To Inspect Page On Safari

How To Download Video On Safari

How To Get Safari Back To Normal

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.

Safari Dev Tools: The Complete 2023 Guide

Introduction to safari developer tools.

Safari is Apple's proprietary web browser that comes pre-installed on all Mac and iOS devices. Its integrated developer tools provide everything web developers need to build, debug and optimize websites for Apple's ecosystem.

In this comprehensive tutorial, we'll cover key capabilities of Safari's dev tools including:

• The Web Inspector for inspecting page structure and CSS
• The Debugger for stepping through JavaScript code
• The Resources panel for auditing page assets
• The Audits panel for testing web standards compliance
• Device Mode for simulating mobile screens
• Advanced debugging features like conditional breakpoints
• Network throttling to simulate real-world conditions
• Experimental features for early access

By the end, you'll have master expertise using Safari dev tools to squash bugs faster, improve site performance, and deliver exceptional web experiences across Apple devices. You'll also discover resources like DevHunt to continue exploring the latest Safari developer tools.

A Brief History of Safari

Safari originated within Apple in 2003, based on the open source KHTML rendering engine. It was first released for Mac OS X Panther and quickly became Apple's default browser.

In 2007, Apple launched the first Windows version of Safari to expand its userbase. That same year, Safari made its mobile debut on the first iPhone.

Over the years, Safari has gone through many major version updates adding new features and support for emerging web standards. It remains the pre-installed browser on all Apple operating systems and devices including Macs, iPhones and iPads.

Why Learn Safari Developer Tools?

Here are some key reasons web developers should learn Safari dev tools:

• Pre-installed on all Mac and iOS devices, used by millions globally
• Allows direct debugging on iOS devices
• Can emulate mobile devices in desktop browser
• Essential for targeting Apple's ecosystem
• Identify optimizations for Safari to improve site experience
• Learn how your sites perform on Safari and make improvements
• Fix rendering issues specific to WebKit browser engine
• Utilize experimental features to build cutting-edge websites
• Discover new Safari dev tools on platforms like DevHunt

With Safari holding significant browser market share, especially in the mobile space, having expertise in its developer tools is vital for crafting high-quality cross-browser experiences.

Core Safari Developer Tools

Now let's dive into the core developer tools available within Safari on both desktop and mobile.

The Web Inspector

The Web Inspector is the main hub for visually inspecting and modifying a web page. Key functions include:

• View and edit the live DOM tree
• Inspect and modify CSS styles
• Audit accessibility information
• Analyze network requests and performance
• Identify layout issues or style problems
• Live edit code changes right in the browser

For front-end developers, the Inspector is indispensable for debugging HTML, CSS and accessibility issues. You can instantly see how changes to markup and styles affect rendering.

The Debugger

Safari's JavaScript Debugger allows pausing code execution to step through scripts line-by-line. You can:

• Set breakpoints to isolate issues
• Inspect stack traces and variable scopes
• Profile memory usage and CPU utilization
• Emulate device throttling conditions
• Blackbox third-party scripts

The Debugger equips you to tackle even the most complex JavaScript bugs. From tracking down logic errors to profiling performance, it's an essential tool for front-end logic and optimization.

The Resources Panel

This panel displays all resources loaded by the page like scripts, stylesheets, fonts, images and media. For each resource you can:

• View request URLs, status codes and timings
• Filter by type, folder location or domain
• Check dependencies and redundancy
• Audit performance and bottlenecks
• Download resources to your machine

Knowing exactly what resources a page loads is invaluable for optimizing performance. The Resources panel helps you eliminate unnecessary requests and prioritize critical assets.

Storage Inspector

The Storage Inspector lets you view and edit browser storage like cookies, LocalStorage, SessionStorage and IndexedDB. You can:

• Add, modify or delete stored keys and values
• Export storage data as JSON
• Emulate different browser states for testing
• Clear storage entirely to test initial experience

Being able to inspect persistence mechanisms is vital for debugging issues related to state management in modern web apps.

The Audits Panel

Safari's Audits panel runs diagnostics on pages to surface optimization opportunities and standards compliance issues. Audits include:

• Performance analysis and scoring
• Accessibility checks following WCAG guidelines
• Best practices for progressive web apps
• SEO enhancements
• Modern web platform usage

Running audits before launching any website can help you catch critical problems early and compare against industry benchmarks.

Advanced Safari Developer Tools

Beyond the basics, Safari offers powerful advanced tools for seasoned developers.

Device Mode

Device Mode accurately emulates mobile screens and conditions right in desktop Safari:

• Simulate precise device dimensions and resolution
• Throttle CPU and network to mimic real devices
• Essential for building mobile-friendly, responsive sites
• Test touch events and gestures during development

With Device Mode, you can build fully optimized mobile experiences without constantly switching devices.

Advanced Debugging

Safari provides next-level JavaScript debugging capabilities:

• Set conditional breakpoints using expressions
• Group breakpoints for easy management
• Step through async code with async stack traces
• Profile memory heap allocations over time
• Blackbox scripts to hide library code
• Break on caught or uncaught exceptions

These advanced features help you tackle difficult bugs in even the most complex single-page apps and frameworks like Vue.js.

Network Throttling

Network Throttling allows simulating slow network connections, like 3G and LTE. You can:

• Rate limit bandwidth and latency
• Identify assets blocking page load
• Debug loading behavior in emerging markets
• Optimize performance for offline/low-bandwidth
• Throttle cache usage and response compression

Testing how your site performs under real-world network conditions is crucial to providing good user experiences for all.

Experimental Features

Safari lets developers try out experimental tools before they are formally released:

• Get early access to new capabilities
• Provide feedback to help shape future features
• Use at your own risk as they are still in development
• Currently includes CSS Flexbox debugging tools

Tapping into experimental features allows you to build cutting-edge experiences and directly influence the browser platform's evolution.

Debugging JavaScript Issues

Now let's explore strategies for debugging JavaScript using Safari's advanced capabilities.

Breakpoint Usage

Effective breakpoint usage is key for isolating issues:

• Set breakpoints directly within the source code
• Organize breakpoints into groups by context
• Use conditional breakpoints to pause on specific criteria
• Disable breakpoints without deleting to toggle behavior
• Manage breakpoints efficiently even in complex codebases

Mastering breakpoints gives you precise control over pausing execution to inspect logic flow and data.

Scope Inspection

Understanding scope is vital for tracking down variable issues:

• Inspect variable values in different call frames
• Detect scope pollution across closures and modules
• Ensure code executes in the intended lexical scope
• Fix bugs caused by accessing stale variable references
• Avoid global namespace pollution

With Safari's scoping tools, you can confidently debug even complex nested closures and callback contexts.

Async Debugging

Safari provides multiple approaches for debugging asynchronous code:

• Step through promise resolutions and rejections
• Inspect async operation call stacks and task queues
• Profile async code performance with CPU profiler
• Set breakpoints within async callbacks and timers
• Visually trace async code flows

Smooth async debugging helps you tackle race conditions, timing issues, and callback hell.

Error Handling

The key to debugging runtime errors is Safari's break on exception feature:

• Break on any caught or uncaught exceptions
• Inspect error call stacks to trace where issues originate
• Log values with console.log() to debug logic flow
• Validate edge cases and fix crashes
• Handle errors gracefully to improve user experience

With robust error handling, you can isolate bugs quicker and build more resilient apps.

Optimizing Page Speed

Next let's explore some common techniques for optimizing page speed using Safari developer tools.

Image Optimization

Safari provides multiple ways to optimize images:

• Audit image sizes and formats using the Resources panel
• Compress and resize images as needed
• Lazy load offscreen images to improve TTI
• Serve next-gen formats like WebP to Safari users
• Remove unnecessary decorative images

With Safari's insight into image resources, you can significantly cut page weight and load times.

Script Loading

Optimizing script loading is key for performance:

• Minimize parser-blocking JavaScript
• Load non-critical scripts asynchronously
• Dynamically create and load scripts
• Code split bundles into logical chunks
• Tree shake and minify code to reduce payload

Safari shows you exactly how scripts impact loading behavior so you can optimize delivery.

Caching Assets

Effective caching can boost repeat visit performance:

• Set optimal cache lifetimes for static assets
• Cache assets locally using service workers
• Version assets linked to app release cycles
• Avoid cache-busting query strings
• Maximize cache reuse for returning users

The Resources panel helps you dial in caching for faster loads without staleness.

Layout Thrashing

Diagnosing layout thrashing is key for smooth UX:

• Identify forced synchronous layouts
• Defer non-critical DOM updates with requestAnimationFrame()
• Avoid reading styles after writes during rendering
• Batch DOM reads/writes together
• Profile with Debugger to pinpoint problems

With Safari's performance tools, you can isolate and fix sources of jank and lag.

Wrap Up and Key Takeaways

Safari developer tools provide everything needed to build high-quality websites targeting Apple's ecosystem.

Key highlights include:

• Debugging directly on iOS devices with Web Inspector
• Stepping through JavaScript with advanced Debugger features
• Auditing pages for standards compliance
• Simulating mobile devices and networks during development
• Optimizing performance using Network Throttling
• Trying out experimental capabilities early
• Discovering new Safari dev tools on platforms like DevHunt

Learning Safari developer tools allows you to find and fix cross-browser issues faster. You can optimize sites specifically for Safari and deliver stellar experiences to millions of Apple users worldwide.

With a comprehensive understanding of Safari's robust toolset, you can confidently build, debug and enhance modern progressive web apps. Safari developer tools help web developers succeed across platforms.

Related posts

• Safari Developer Tools: The Complete Guide for Web Developers
• Discover the Top Web Developer Tools for 2023
• Unlock Safari's Powerful Developer Tools
• Dev Tools iOS Developers Need in 2023

Apple's Rumored AI Plans: iOS 18, Siri Upgrades and What Else to Expect

Apple's Worldwide Developers Conference  is right around the corner, and artificial intelligence is likely to be front and center.

Generative AI, or AI models trained on large volumes of data that create content in response to prompts, has exploded in popularity following the success of ChatGPT . Tech giants such as Microsoft, Google, Samsung and Amazon, among many others, have introduced gen AI into their biggest products over the past year. Apple, however, has been quiet about its plans for gen AI, although CEO Tim Cook teased updates for 2024. 

"But we've got some things that we are incredibly excited about that we'll be talking about later this year," Cook said in response to a question about gen AI on an  earnings call . 

Between Cook's comments , new research papers and the acquisition of AI startups , Apple is clearly on to something. Here's what Apple's AI plans for the iPhone might look like based on reports that have circulated in recent months. 

Read more: Why the iPhone's Home Screen Is in Need of a Shakeup

iOS 18 will likely be full of AI features

Apple's next major iPhone operating system, which will probably be called iOS 18 , is expected to introduce a ton of new AI features to the iPhone. It could be the most significant update since the original iPhone in Apple's eyes, according to Bloomberg . 

Craig Federighi, Apple's senior vice president of software engineering, has been tasked with implementing a bunch of new tools into iOS fueled by the company's large language model,  Bloomberg reports . 

New AI features coming to the iPhone could include providing summaries of news stories and notifications, voice memo transcriptions, photo editing tools and improvements to app recommendations and the way events automatically appear on your calendar, according to a separate Bloomberg report . 

AI will also be implemented into a variety of Apple apps including Safari, Photos and Notes as part of an initiative  the company is calling Project Greymatter, Bloomberg also reports. Both Safari and Spotlight search are expected to get an AI-powered boost, and suggested replies to emails and texts will also be part of upcoming updates, the report says. 

These features generally sound similar to what we've seen from Google and Samsung so far. But one highlight could be the ability to automatically generate unique emojis based on text messages, reports Bloomberg. 

The company is planning to deliver a mix of features that are processed on-device and in the cloud, the report says. Simpler features will be executed on-device, while more complex ones will require extra power from the cloud. On-device AI is generally considered to be more secure and private since data doesn't have to leave your device but typically requires more powerful processors. That's why Siri is only capable of  answering health-related questions  on the  Apple Watch Series 9 and  Apple Watch Ultra 2,  which run on the company's newest smartwatch chips.

It's also possible that Apple will wait until September to announce new AI features alongside its next-generation iPhone, expected to be called the iPhone 16. That's what Bernstein analysts Toni Sacconaghi and Daniel Zhu predict, according to a research note reported by the financial news website Seeking Alpha . 

"We expect most AI features to be unveiled with the iPhone in September, as opposed to at WWDC, consistent with other key software features like Dynamic Island, Siri and FaceTime, all of which were introduced at the time of phone launch," the note said, per Seeking Alpha. "We see the timeline for AI features such as a multimodal Siri and an AI wellness coach as less clear."

Samsung and Google have already provided a glimpse into how generative AI is changing smartphones. Both companies offer features that can rewrite text messages in a different tone before hitting the send button and photo editing tools that can refill blank spaces in a photo after moving an object. During its I/O developers conference in May, Google also showcased how its Gemini AI assistant is playing a bigger role in Android phones . It's possible Apple could take a similar approach, although we won't know for sure until iOS 18 arrives. 

Apple may be partnering with OpenAI

Apple is said to be working with OpenAI to integrate the ChatGPT-maker's tech into iOS 18, Bloomberg reported. It's unclear exactly how OpenAI's tech would appear in iOS, but Bloomberg said the deal could result in an AI-powered chatbot arriving on the iPhone. The two companies are reportedly planning to announce the collaboration at WWDC. A more recent report from Bloomberg reiterates that Apple and OpenAI may have an announcement planned for the iPhone-maker's upcoming developer conference. 

Apple has also held similar talks with Google regarding its Gemini AI system, according to reports from  Bloomberg ,  The New York Times  and  The Wall Street Journal , although Bloomberg's more recent report says those discussions haven't resulted in a partnership. 

Based on those earlier reports, it sounds like Apple is focusing its efforts on new AI models designed to run locally, while seeking a partner for cloud-based AI. That wouldn't come as too much of a surprise; Apple prides itself on creating new features and technologies that take full advantage of how hardware and software work together. It's much easier to do that when you don't have to rely on a third-party for data processing. But Bloomberg has since reported that Apple's AI cloud features will be carried out in data centers running on its own processors. The new AI features would be opt-in, Bloomberg also reports , meaning users wouldn't be required to adopt them. 

It also wouldn't be the first time Apple has partnered with another company on certain technologies and components. Google already pays Apple billions of dollars to be the default search engine on iPhones, for example, and Qualcomm supplies Apple with 5G modems for the iPhone. 

Read more : Dreaming Big: Our Experts iOS 18 Wish List for Apple's WWDC 2024

A smarter Siri

Siri seems like a natural area for Apple to apply any AI advancements, and reports from The Information and Bloomberg suggest it may do just that. 

The Information reported last year that Apple has doubled down on efforts to make Siri better at automating tasks. The report cites the ability to ask Siri to create GIFs from your last five photos and then share it as an example of the types of use cases Apple has in mind. A newer Bloomberg report also suggests Siri will sound more natural, thanks to Apple's large language models.

However, there could also be bigger changes in store for Siri. Bloomberg also says Siri will gain the ability to control features within apps using their voice. 

We won't know what Apple's plans are until it announces them. But automation features like those mentioned above would feel like a fitting evolution for Siri that builds on its existing Shortcuts functionality.

An AI App Store

Apple may launch a new AI App Store, according to Ben Reitzes, head of technology research at Melius Research, who spoke with CNBC . 

"In June we should start to see them lay the groundwork for this new app store, for how it's going to work with AI, how you can buy AI apps through the App Store, " he said during the CNBC interview.

Read more: Best iPhone to Buy in 2024

There are a lot of unanswered questions, such as whether this supposed AI app store would be for the iPhone, the Mac or all of Apple's products. It's also unclear if Reitzes is referring to a separate App Store entirely, or a new section in the current App Store focused on AI apps. The latter seems more in line with Apple's usual approach. Either way, emphasizing AI in the App Store would be a testament to the technology's importance from Apple's perspective. 

A new chip with more AI processing power

Apple's next iPhone processor, presumably called the A18, is expected to offer better AI performance for the iPhone 16 lineup, according to Taiwanese news outlet Economic Daily News and analyst Jeff Pu, as MacRumors reported. AI has been a big area of focus for years, with Apple increasingly expanding the capabilities of the neural engine inside its A-series chips. But given that Apple is expected to develop new AI-powered iPhone features that rely on local processing, it wouldn't be surprising to see more significant upgrades.

Apple isn't usually first to market with new product categories. Instead, it's known for popularizing technologies, as it did with smartphones, smartwatches and tablets. Regardless of Apple's approach, all eyes will be on the company to do the same with AI and generative AI.

Editors' note: CNET used an AI engine to help create several dozen stories, which are labeled accordingly. The note you're reading is attached to articles that deal substantively with the topic of AI but are created entirely by our expert editors and writers. For more, see our  AI policy .

I Took 600+ Photos With the iPhone 15 Pro and Pro Max. Look at My Favorites

What to expect from Apple’s AI-powered iOS 18 at WWDC 2024

Apple’s Worldwide Developers Conference next week promises to be a pivotal moment in the iPhone maker’s history. Though the Vision Pro debuted at last year’s event, don’t expect hardware to be the main attraction at WWDC 2024 , which kicks off Monday at 10 a.m. PT.

WWDC is for developers, and much of the focus will be on iOS 18. The Cupertino tech giant will showcase how it’s chosen to integrate AI technology into its devices and software, including through a historic partnership with OpenAI . As the big event nears, all sorts of leaks have emerged about what iOS 18 and its rumored AI-powered apps and features have in store.

Among the changes, Apple is said to be powering some of its new AI features with its Ajax LLM . Other reports indicate that Apple plans to process data from AI in a way that even employees won’t be able to access , which would help Apple continue to deliver on its promise of data privacy for its users.

Below, we’ll take a look at how Apple is said to be adding AI to its apps and services in the next big update for the iPhone, alongside other improvements and changes coming to iOS 18.

Siri’s AI-enabled future

• Apple’s digital assistant is prepared to get an AI revamp . The digital assistant will leverage Apple’s own large language models and will allow Siri to control individual features inside applications. This will work without any necessary setup by developers or users, like App Intents or Siri Shortcuts currently require. Instead, users will be able to ask Siri to do things like delete an email or edit a photo.
• Some of Siri’s upgraded AI capabilities won’t be ready until next year. For example, the ability for Siri to handle tasks with multiple steps is likely delayed.
• A more advanced Siri will also come to Apple Watch for on-the-go use. You could use Siri on your Watch to play music on another device, one report said.
• Siri will receive more natural-sounding voices.
• Siri will be able to summarize notifications that include people, companies, calendar events, locations, dates and more.
• Could Siri’s new look be hinted at in the animations below?

Get ready for an action packed #WWDC24 next week! pic.twitter.com/8ttYkFJdQI — Greg Joswiak (@gregjoz) June 3, 2024

Apple Photos’ new look

• A new interface is being teased.
• People will have the ability to retouch photos with AI, perhaps challenging Google Photos in this area.
• A “Clean Up” feature would, for instance, let you remove objects from your photos using generative AI technology, similar to Google’s Magic Eraser.
• One report noted that Apple made an internal-only application called Generative Playground that uses GenAI to create and edit images. It’s unclear how this functionality will be presented to end users, though iMessage integration was spotted in the form of an app extension.

Safari with more AI

• AI recaps of Safari web pages and news articles will be available through a new Intelligent Search feature. ( Watch out, Arc ?)

Is Apple planning to ‘sherlock’ Arc?

Notes injected with AI

• Users will be able to ask for AI recaps of Notes.
• GenAI will also help to transcribe audio in Notes.
• In-app audio recording will be supported alongside audio transcription and AI summarization.
• Math Notes will help users create graphs and solve equations through AI by recognizing the text of mathematical equations and then helping you to solve them.
• Notes users may also have the option to auto-complete their mathematical equations when typing.
• Project Greymatter is the code name for a set of AI tools that are being integrated into core like Safari, Photos and Notes, Bloomberg reported.

Voice Memos transcriptions

• Real-time transcription for voice memos is also coming.

iMessages’ gets an AI makeover

• Generative AI emojis will be supported, letting users create their own emojis with technology.
• AI recaps of missed texts will also be available.
• Overall deeper Siri integration is expected.
• Tapbacks will get new icons.
• Message effects for individual words will be supported in addition to effects for the message itself.
• Messages will offer suggested replies generated by Apple’s on-device Ajax LLM to make texting back easier.
• RCS support is also expected to arrive this year to bring read recipes, typing indicators and high-quality video and images when texting with Android users via iMessage.

Calendar refresh

• Apple’s LLM will be able to communicate with the Calendar app to check for events when composing responses to messages.

Mail with support for AI

• Mail will also get suggested email replies generated by Ajax.
• Project BlackPearl is the code name for the AI upgrade that’s enhancing Apple Mail.
• Search within Apple Mail will include information from Contacts, locations, and locally stored documents.
• Users may be able to ask Siri to make their emails “sound more professional” among other things.

New Settings interface

• Settings will hopefully get less confusing with a revamped interface and updates that include better organization and improved search.

Control Center updates

• A new Music widget will be available — possibly to feature larger artwork?
• Improvements to HomeKit for smart home integrations.

Notifications

• AI recaps of missed notifications will be available.
• Apple is working on something called “Enhanced” notifications.
• Spotlight is expected to get faster, more reliable search.

Home Screen updates

• iOS 18 will bring the ability to place app icons wherever you want, instead of having to align them to the grid without spaces in between them.
• Users will also be able to change the color of app icons , perhaps as Apple’s answer to Google’s Material You.

Maps with route creation

• Maps will support custom route creation in iOS 18 , which lets users design their own routes for a trip.

Music with AI-powered playlists

• Apple Music may take on Spotify with its own AI-powered auto-generated playlists .

More improvements

Other apps with planned updates include Freeform, Xcode and Apple’s productivity apps, like Keynote and Pages, which may get GenAI features.

We’re launching an AI newsletter! Sign up here to start receiving it in your inboxes on June 5.

More TechCrunch

Get the industry’s biggest tech news, techcrunch daily news.

Every weekday and Sunday, you can get the best of TechCrunch’s coverage.

Startups Weekly

Startups are the core of TechCrunch, so get our best coverage delivered weekly.

TechCrunch Fintech

The latest Fintech news and analysis, delivered every Tuesday.

TechCrunch Mobility

TechCrunch Mobility is your destination for transportation news and insight.

Meta rolls out Meta Verified for WhatsApp Business users in Brazil, India, Indonesia and Colombia

Meta launched its Meta Verified program today along with other features, such as the ability to call large businesses and custom messages.

Meta adds AI-powered features to WhatsApp Business app

Last year, during the Q3 2023 earnings call, Mark Zuckerberg talked about leveraging AI to have business accounts respond to customers for purchase and support queries. Today, Meta announced AI-powered…

TikTok is testing Snapchat-like streaks

TikTok is testing streaks that are similar to Snapchat’s in order to boost engagement, including how long people stay on the app.

Inside Fisker’s collapse and robotaxis come to more US cities

Welcome back to TechCrunch Mobility — your central hub for news and insights on the future of transportation. Sign up here for free — just click TechCrunch Mobility! Your usual…

Revel to lay off 1,000 staff ride-hail drivers, saying they’d rather be contractors anyway

New York-based Revel has made a lot of pivots since initially launching in 2018 as a dockless e-moped sharing service. The BlackRock-backed startup briefly stepped into the e-bike subscription business.…

Google Play cracks down on AI apps after circulation of apps for making deepfake nudes

Google says apps offering AI features will have to prevent the generation of restricted content.

UK retailers file a £1.1B collective action against Amazon over claims of data misuse

The British retailers association also takes aim at Amazon’s “Buy Box,” claiming that Amazon manipulated which retailers were selected for the coveted placement.

Featured Article

Rivian overhauled the R1S and R1T to entice new buyers ahead of cheaper R2 launch

Rivian has changed 600 parts on its R1S SUV and R1T pickup truck in a bid to drive down manufacturing costs, while improving performance of its flagship vehicles.  The end goal, which will play out over the coming year, is an existential one. Rivian lost about $38,784 on every vehicle…

Twitch DJs will now have to pay music labels to play songs in livestreams

Twitch has come up with a solution for the ongoing copyright issues that DJs encounter on the platform. The company announced Thursday a new program that enables DJs to stream…

Google partners with RapidSOS to enable 911 contact through RCS

Google said today it is partnering with RapidSOS, a platform for emergency first responders, to enable users to contact 911 through RCS (Rich Messaging Service).

Atlassian now gives startups a year of free access

Long before product-led growth became a buzzword, Atlassian offered free tiers for virtually all of its productivity and developer tools. Today, that mostly means free access for up to ten…

A social app for creatives, Cara grew from 40k to 650k users in a week because artists are fed up with Meta’s AI policies

Artists have finally had enough with Meta’s predatory AI policies, but Meta’s loss is Cara’s gain. An artist-run, anti-AI social platform, Cara has grown from 40,000 to 650,000 users within the last week, catapulting it to the top of the App Store charts. Instagram is a necessity for many artists,…

Google looks to AI to help save the coral reefs

Google has developed a new AI tool to help marine biologists better understand coral reef ecosystems and their health, which can aid in conversation efforts. The tool, SurfPerch, created with…

Tektonic AI raises $10M to build GenAI agents for automating business operations

Only a few years ago, one of the hottest topics in enterprise software was ‘robotic process automation’ (RPA). It doesn’t feel like those services, which tried to automate a lot…

SpaceX launches mammoth Starship rocket and brings it back for the first time

SpaceX achieved a key milestone in its Starship flight test campaign: returning the booster and the upper stage back to Earth.

Sirion, now valued around $1B, acquires Eigen as consolidation comes to enterprise AI tooling

There’s a lot of buzz about generative AI and what impact it might have on businesses. But look beyond the hype and high-profile deals like the one between OpenAI and…

Kleiner Perkins leads $14.4M seed round into Fizz, a credit-building debit card aimed at Gen Z college students

Carlo Kobe and Scott Smith believed so strongly in the need for a debit card product designed specifically for Gen Zers that they dropped out of Harvard and Cornell at…

How many Earths does your lifestyle require?

A new app called MyGlimpact is intended not only to help people understand their environmental footprint, but why they shouldn’t feel guilty about it.

Prolific Machines, with a $55M Series B, shines ‘light’ on a better way to grow lab proteins for food and medicine

Prolific Machines believes it has a way of transitioning away from molecules to something better: light.

Punk singer Shira Yevin pushes for fair pay with InPink, a women-focused job marketplace

It’s been 20 years since Shira Yevin, the lead singer of punk band Shiragirl drove a pink RV into the Vans Warped Tour grounds, the now-defunct punk rock festival notorious…

Qargo raises $14M to digitize and decarbonize the trucking industry

While the transport industry does use legacy software, many of these platforms are from an earlier era. Qargo hopes its newer technologies can help it leapfrog the competition.

Greptile raises $4M to build an AI-fueled code base expert

When you look at how generative AI is being implemented across developer tools, the focus for the most part has been on generating code, as with Github Copilot. Greptile, an…

Study finds that AI models hold opposing views on controversial topics

The models tended to answer questions inconsistently, which reflects biases embedded in the data used to train the models.

Cube is building a ‘semantic layer’ for company data

A growing number of businesses are embracing data models — abstract models that organize elements of data and standardize how they relate to one another. But as the data analytics…

Robinhood acquires global crypto exchange Bitstamp for $200M

Stock-trading app Robinhood is diving deeper into the cryptocurrency realm with the acquisition of crypto exchange Bitstamp.

Fintech Torpago has a unique way to compete with Brex and Ramp: turning banks into customers

Torpago’s Powered By product is geared for regional and community banks, with under $20 billion in assets, to launch their own branded cards and spend management programs.

Eyebot raised $6M for AI-powered kiosks that provide 90-second vision exams without an optometrist

Over half of Americans wear corrective glasses or contact lenses. While there isn’t a shortage of low-cost and luxury frames available online or in stores, consumers can only buy them…

Google’s updated AI-powered NotebookLM expands to India, UK and over 200 other countries

Google on Thursday said it is rolling out NotebookLM, its AI-powered note-taking assistant, to over 200 new countries, nearly six months after opening its access in the U.S. The platform,…

Starting in war-torn Sudan, YC-backed Elevate now provides fintech to freelancers globally

Inflation and currency devaluation have always been a growing concern for Africans with bank accounts.

Amazon buys Indian video streaming service MX Player

Amazon has agreed to acquire key assets of Indian video streaming service MX Player from the local media powerhouse Times Internet, the latest step by the e-commerce giant to make its services and brand popular in smaller cities and towns in the key overseas market.  The two firms reached a…

• Get Benzinga Pro
• Data & APIs
• Our Services
• News Earnings Guidance Dividends M&A Buybacks Legal Interviews Management Offerings IPOs Insider Trades Biotech/FDA Politics Government Healthcare
• Markets Pre-Market After Hours Movers ETFs Forex Cannabis Commodities Binary Options Bonds Futures CME Group Global Economics Previews Small-Cap Real Estate Cryptocurrency Penny Stocks Digital Securities Volatility
• Ratings Analyst Color Downgrades Upgrades Initiations Price Target
• Ideas Trade Ideas Covey Trade Ideas Long Ideas Short Ideas Technicals From The Press Jim Cramer Rumors Best Stocks & ETFs Best Penny Stocks Best S&P 500 ETFs Best Swing Trade Stocks Best Blue Chip Stocks Best High-Volume Penny Stocks Best Small Cap ETFs Best Stocks to Day Trade Best REITs
• Money Investing Cryptocurrency Mortgage Insurance Yield Personal Finance Forex Startup Investing Real Estate Investing Credit Cards
• Cannabis Cannabis Conference News Earnings Interviews Deals Regulations Psychedelics

Apple's WWDC 2024 Sneak Peek: Generative AI Strategy With Privacy Focus

Zinger key points.

• Apple to unveil AI strategy at WWDC 2024, integrating generative AI tools into core apps like Safari, Photos, and Notes.
• Goldman Sachs sets bullish $226 target, citing Apple's AI advancements and potential boost in product upgrades.

As Apple Inc AAPL gears up for its highly anticipated Worldwide Developers Conference (WWDC) on June 10-14, 2024, investors are buzzing with excitement over what the tech giant has in store .

Goldman Sachs analyst Michael Ng, CFA, has provided a sneak peek into what we can expect, particularly focusing on Apple’s AI strategy.

Ng has set a bullish 12-month price target of $226.00 for Apple stock, representing a 17.6% upside from its current price of $192.25. This optimism is driven by the belief that Apple’s AI features, combined with other ecosystem investments and hardware upgrades, could increase upgrade rates and drive upside to product estimates.

Apple’s Gen AI Strategy

One of the key highlights of WWDC 2024 will be Apple’s showcase of its generative AI strategy. Apple is expected to embed generative AI tools within its core applications like Safari, Photos, and Notes. This move is aimed at providing practical tools for users and leveraging a combination of on-device and cloud processing, Ng says.

While competitors like Galaxy S24 and Pixel 8 offer similar AI features, Apple’s differentiation lies in the availability of AI features across its entire suite of products and its focus on consumer privacy.

Also Read: iPhone 16 Destined To Have The World’s Thinest Bezels? New Leak Reveals It Could Outshine Current Record Holder Samsung Galaxy S24

Apple’s longstanding investment in iOS and other device operating systems is aimed at growing its installed base and minimizing churn.

Partnership with OpenAI

Apple’s collaboration with OpenAI to power an AI chatbot further highlights its commitment to AI innovation. This partnership, while beneficial to both parties, limits the ability of OpenAI to monetize through premium subscriptions or advertising, thereby enhancing Apple’s competitive position in the AI space.

Apple is also ramping up production of its M2 Ultra processors, which will be used in its AI servers, with data center capacity doubling, according to SemiAnalysis.

As Apple continues to innovate and differentiate itself in the AI space, investors can expect exciting developments at WWDC 2024. With a strong focus on generative AI and its impact on user experience, Apple is poised to maintain its position as a leader in the tech industry.

Read Next: Nvidia’s Race With Apple, Ark Invest’s Big Moves And AI’s Future In Smartphones: Top Updates This Week In Artificial Intelligence

Photo: Shutterstock

© 2024 Benzinga.com. Benzinga does not provide investment advice. All rights reserved.

Trade confidently with insights and alerts from analyst ratings, free reports and breaking news that affects the stocks you care about.

Safari User Guide

• Get started
• Go to a website
• Bookmark web pages to revisit
• See your favourite websites
• Use tabs for web pages
• Import bookmarks and passwords
• Pay with Apple Pay
• Autofill credit card info
• View links from friends
• Keep a Reading List
• Hide ads when reading
• Translate a web page
• Download items from the web
• Add passes to Wallet
• Save part or all of a web page
• Print or create a PDF of a web page
• Interact with text in a picture
• Change your home page
• Customise a start page
• Create a profile
• Block pop-ups
• Make Safari your default web browser
• Hide your email address
• Manage cookies
• Clear your browsing history
• Browse privately
• Prevent cross-site tracking
• See who tried to track you
• Change Safari settings
• Keyboard and other shortcuts

Use the developer tools in the Develop menu in Safari on Mac

If you’re a web developer, the Safari Develop menu provides tools you can use to make sure your website works well with all standards-based web browsers.

If you don’t see the Develop menu in the menu bar , choose Safari > Settings, click Advanced, then select “Show features for web developers”.

Open Safari for me