browser console safari on ipad

• I Tried Both: Apple Watch 9 vs Fitbit Charge 6
• Best Places to Print Photos Online

How to Activate the iPhone Debug Console or Web Inspector

Use Safari's web developer tools to study problematic websites

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

What to Know

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

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

Activate Web Inspector on Your iPhone or Other iOS Device

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

Open the iPhone  Settings  menu.

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

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

Scroll to the bottom of the page and select Advanced .

Move the Web Inspector toggle switch to the On position.

Connect Your iOS Device to Safari on a Mac

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

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

Select the  Advanced  tab.

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

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

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

What Is Web Inspector?

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

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

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

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

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

Get the Latest Tech News Delivered Every Day

• Add More Features by Turning on Safari's Develop Menu
• 4 Ways to Play Fortnite on iPhone
• How to Activate and Use Responsive Design Mode in Safari
• How to Change the Default Search Engine in Chrome for iOS
• What Is Safari?
• How to Inspect an Element on a Mac
• How to Use Web Browser Developer Tools
• 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 Clear Search History on iPhone
• How to Reset Safari to Default Settings
• How to Change Your Homepage in Safari
• The Top 10 Internet Browsers for 2024
• 10 Hidden Features in macOS Sonoma
• How to Manage Cookies in the Safari Browser

David Lozzi

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

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

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

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

All steps below are all running on my:

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

What are we debugging

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

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

Debugging in Chrome on iOS

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

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

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

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

Debugging in Safari on iOS

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

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

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

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

Good enough for now

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

One other option, for a cost: inspect.dev

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

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

‘Til next time, happy debugging!

Please share the love!

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

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

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

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

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

Thanks for the fix! will update

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

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

Leave a Reply Cancel reply

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

Top Posts & Pages

• Sending a beautifully formatted email from Power Automate (Flow)
• Saving data from Microsoft Forms into Excel using Power Automate (Flow)
• Use Microsoft Forms to collect data right into your Excel file
• Best practices for working with data in Microsoft PowerApps
• Style up your console.logs
• Understanding Power Automate's Outlook Send Email Actions
• When Power Automate (Flow) can't find your Microsoft Form
• Squeezing a little more formatting out of Microsoft Forms
• Color Code SharePoint Calendar
• Stack Overflow

• 2,087,207 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 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

Where Is My Safari App

Why Does My IPad Keep Shutting Down 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

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.

View in English

Web development tools

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

Web Inspector

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

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

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

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

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

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

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

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

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

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

Responsive Design Mode

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

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

Tips & Tricks

Troubleshooting, enable the safari debug console on iphone & ipad.

Safari for iOS includes an optional debug console to help web developers track down and resolve issues with webpages on iPhone and iPad.

Even better, with the latest versions of iOS it actually uses the same Web Inspector that Safari on desktop does too, meaning if you connect the iPhone or iPad to the computer you can use the Safari debugging tools directly with your iOS or iPadOS device

Older versions of iOS have this capability too, and while not as in inclusive as the desktop Safari debug and developer tools , it’s still useful and is easy to enable or disable on the iPhone and iPad.

Let’s learn how to enable this feature on both new and old versions of iOS, and learn what’s different between the versions as well.

How to Enable & Use Web Inspector in Safari for iPhone & iPad

On modern iOS and iPadOS versions, here’s how Safari web inspector works:

• Open Settings > Safari > Advanced then tap to enable “Web Inspector”
• Connect the iPhone or iPad to a Mac, then go to Safari and enable the developer menu if you haven’t done so by going to Safari > Preferences > Advanced > Show Develop menu bar
• Pull down the “Develop” menu bar and find the iPhone or iPad, and then open the web page you wish to debug
• Safari Web Inspector will open where you can debug and inspect web elements from the iOS or IPadOS device directly in Safari on the Mac

Now as you navigate on the iPhone or iPad you will find the Web Inspector in Safari on the Mac will update.

You can access the debug Console through the Console tab in the web inspector, and you can access the debugger through the Debugger tab. And of course the usual web inspector tools for elements, resources, network, etc, are available to use as well.

You can also use a View Source trick for iOS and iPadOS while you’re on the go, if needed too.

How to Enable Debug Console on Older iOS Versions

If you have an older version of iOS on an older iPhone or iPad, the whole debug experience is on the device and you don’t have the ability to connect it to Safari on a Mac. Nonetheless it’s still quite useful, here’s how it works:

• Launch “Settings” and tap on “Safari”
• Tap on “Advanced”
• Slide “Debug Console” to ON

Once enabled, tap on the Debug Console at the top of any Safari screen to see web page errors.

The default list shows all errors, but you can drill down to more specific HTML, JavaScript, and CSS errors by tapping them individually.

Another useful tool for mobile web developers is Firebug Lite for iOS , which utilizes a javascript bookmarklet to load a simpler version of the popular Firebug development tool. That functionality is probably most useful for the older iOS versions as well, since newer releases have new capabilities.

Do you use any web developer tools for iPhone or iPad? Share with us any tips, tricks, apps, or techniques in the comments below.

Enjoy this tip? Subscribe to our newsletter!

Get more of our great Apple tips, tricks, and important news delivered to your inbox with the OSXDaily newsletter. 

You have successfully joined our subscriber list.

Related articles:

• Enable Safari Hidden Debug Menu in Mac OS X
• Make Console Easier to Read in Mac OS X with PID, Icons, & Bold View Options
• Enable Mac App Store Hidden Debug Menu
• How to Enable a Hidden Debug Menu in Photo Booth for Mac OS X

» Comments RSS Feed

out dated — no longer accurate

The topmost section is accurate for new iOS versions using Web Inspector, the lower portion is for older versions with Debug Console. Hope that helps!

Leave a Reply

Name (required)

Mail (will not be published) (required)

Subscribe to OSXDaily

• - How to Change the Voice of ChatGPT on iPhone, Mac, iPad
• - How to Confirm Before Closing Windows with Multiple Tabs in Chrome, Edge, Brave
• - How to Search the Web (Minus AI Junk & Clutter) with Google on Safari for Mac
• - How to Use ChatGPT for Mac Right Now, Bypassing the Waitlist
• - How to Search Google Without AI Rubbish & Clutter
• - iOS 17.5.1 & iPadOS 17.5.1 Update Released to Fix Reappearing Deleted Photos Bug
• - MacOS Ventura 13.6.7 & macOS Monterey 12.7.5 Updates Available
• - iOS 16.7.8 & iPadOS 16.7.8 Updates for Older iPhones & iPads Available
• - iOS 17.5 & iPadOS 17.5 Updates Released with Bug Fixes
• - MacOS Sonoma 14.5 Update Released with Security Fixes

iPhone / iPad

• - 3 Great Photo App Tips for iPhone, iPad, & Mac That You May Have Overlooked
• - Play Apple Music in Retro Mac OS X Fashion with QuickTune
• - How to Factory Reset Mac (MacOS Sonoma & Ventura)
• - How to Fix the Apple Watch Squiggly Line Screen
• - What Does the Number Badge Mean on Microsoft Edge Icon?
• - How to Hide iPhone Keyboard When It’s Covering Buttons & Won’t Go Away
• - What’s a PXM File & How Do You Open It?

About OSXDaily | Contact Us | Privacy Policy | Sitemap

This website is unrelated to Apple Inc

All trademarks and copyrights on this website are property of their respective owners.

© 2024 OS X Daily. All Rights Reserved. Reproduction without explicit permission is prohibited.

iPhone Safari debugging console (iPhone/iPad web app debugging)

iPhone HTML web app debugging - I'm trying to optimize my HTML/web application to look and feel like a native iPhone app; how can I debug my web app on an iPhone or iPad (presumably using Safari)?

I was going to write about how to debug an HTML iPhone web application, but Apple has this covered very well in their Safari debugging tip , so I'll generally just refer you to that tip.

For developers that like their information fast, here's the abridged version of that iPhone Safari debugging tip:

• On your iPhone, tap Settings, then Safari, scroll down and tap Developer.
• On the next screen, turn on the Developer Console.

After you've changed this setting, a banner will appear above your web pages in the iPhone Safari browser when messages are in the console. Just click the Message banner to see the message content.

iPhone Safari console debugging messages

You can place your own debug messages in the Safari debugging console with JavaScript code like this:

These Safari debugging message examples use the console attribute of the JavaScript window object.

Again, for detailed information and screenshots, please see that Apple documentation page .

Help keep this website running!

• iPhone user agent - Use JavaScript to detect the user agent
• iPhone and iPad JavaScript dialogs (alert, confirm, prompt)
• Setting an iPhone HTML/web app icon | iPhone app home screen icon
• iPhone HTML apps - Status bar control (color control)
• iPhone HTML apps - Using an app startup image (app splash screen)

books by alvin

• Buy a Scala Cookbook, signed by Alvin Alexander
• Book: Learn Functional Programming The Fast Way! (FP for OOP developers)
• Functional Programming, Simplified (a best-selling FP book)
• Dive Deeper, Faster: 12 Techniques to Quicken and Deepen Your Meditation Practice
• On not being the body, and spiritual beings having a human experience

Console For Browsers 4+

Browser inspector panel, shanghai dazhuo information technology co., ltd., screenshots, description.

"Console For Browsers" is a web inspector designed for the Safari browser. "Console For Browsers" is a web inspector designed for the Safari browser. It operates in a similar manner to the browser's integrated web inspector and empowers users to engage in a variety of actions involving the source code of web pages. Here's an overview of the primary functionalities supported by this extension: Features: 1. Console: Display JavaScript logs, including information, warnings, and errors. 2. Elements: Inspect the state of the Document Object Model (DOM), and easily retrieve the position and attributes of elements through simulated clicks. 3. Network: Monitor the status of requests made by the page. 4. Resources: View details of various resources, including localStorage, Session Storage, Cookies, Scripts, Stylesheets, iframes, and images. Save these elements effortlessly. 5. Sources: View the source code of HTML, JavaScript, and CSS. 6. Info: Display URL and user agent information. 7. Plugins: Incorporates common tools like displaying element borders, refreshing the page, highlighting text content, and editing the page. 8. Code: Facilitate code injection for testing purposes. 9. Timing: Provide insights into the loading times of different page components. 10. Settings: Configure panel themes, height, transparency, the number of visible code lines, and other preferences.

Version 1.1

The debugging capability has been enhanced, allowing for the capture of resource requests on the current page, including resources such as stylesheets, scripts, images, videos, and audio. This improvement facilitates a more convenient examination of the network request status. Now, you can view additional request details in the "Network" panel.

App Privacy

The developer, Shanghai Dazhuo Information Technology Co., Ltd. , indicated that the app’s privacy practices may include handling of data as described below. For more information, see the developer’s privacy policy .

Data Not Collected

The developer does not collect any data from this app.

Privacy practices may vary, for example, based on the features you use or your age. Learn More

Information

English, Simplified Chinese

• App Support
• Privacy Policy

Family Sharing

Up to six family members can use this app with family sharing enabled., more by this developer.

CodeMaster - Mobile Coding IDE

Blood Sugar - Diabetes Tracker

My ID photo & passport photo

WebDebug - Web debugging tool

HelloPDF-PDF Converter&Scanner

Unzip Or Zip Any Files

You Might Also Like

Inspect Browser

SSH Term Pro

Libraried: UI Components

Safari User Guide

• Get started
• Go to a website
• Bookmark webpages to revisit
• See your favorite websites
• Use tabs for webpages
• 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 webpage
• Download items from the web
• Add passes to Wallet
• Save part or all of a webpage
• Print or create a PDF of a webpage
• Interact with text in a picture
• Change your homepage
• Customize 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

I gave Google Chrome on iPad Pro a second chance but I still prefer browsing the web on my MacBook — here's why

Google Chrome on iPad isn't as bad as I thought, though it's not perfect.

Apple's new iPad Pro 2024 has become my favorite tablet. Its stunning 13-inch OLED panel is arguably its best feature, but I’m also a fan of its updated lightweight design. The Apple M4 processor under the hood ensures everything runs smoothly, but the processor is somewhat overkill for my day-to-day. Even if I don’t take as full advantage of the iPad Pro’s features, it’s won me over.

As I do every time I review a new iPad Pro, I tried using Apple's latest premium slate as a laptop . While the M4 has plenty of power to handle my everyday workflow and the new Magic Keyboard is more pleasant to type on, I didn’t find the iPad Pro a suitable replacement for the best MacBooks or best Windows laptop s. The main reason is that iPadOS isn’t great for productivity.

I use Google’s various applications both for work and for personal use. I thought you had to download discrete apps for Google Drive, Gmail , Calendar and such. Juggling all these apps, even with iPad’s Stage Manager , was a chore. Thanks to one of our awesome readers, I learned I can have these apps open as tabs within iPad’s version of Google Chrome. Knowing that, I decided to give Google Chrome on iPad Pro another try.

While the experience wasn’t terrible, I still prefer Google Chrome on Macs and Windows PCs. Here’s why.

Using Google apps on the iPadOS version of Chrome

Like I said in my previous article, Google apps (and most apps in general) on iPad can be quite different than their desktop counterparts — sometimes dramatically so. Thankfully, the iPadOS versions of the apps I use, such as Chrome, GMail, Drive, Maps, and Calendar are more or less the same as on desktop.

One thing that tripped me up when using Chrome on iPad is that there’s no list of Google apps on the right-hand side beside your profile picture. Because of that, I thought you couldn’t use Google applications on the browser. Thankfully, I was wrong. And while you can have tabs containing Google apps, things aren’t as straightforward as on desktop.

For example, you have to type the Google app’s name into the search bar to then be sent to search results. After clicking on a link (usually the first one on the list of results), you can either continue on the browser or download the discrete app. In some cases, such as with Google Calendar, it not-so-subtly encourages you to use the downloadable app. As you can see, you have to go through a few extra steps to get to your apps on iPad than on desktop.

I should note that, if you have the corresponding Google app already downloaded on your iPad, it will always pop up even if you select it from the Chrome browser. I had to delete apps like Drive and Gmail so that I could use their browser-based counterparts on Chrome for iPad.

As for the apps themselves, most function as they do on desktop, albeit with a different layout that’s better suited for an iPad’s touchscreen. In some cases, such as Gmail, the apps appear identical to their iOS17 counterparts. That makes the apps easy to use since I'm accustomed to them on my iPhone 13 Pro . But as I said, I don't like cycling through various apps. Having them all in a single Chrome browser is much easier, even if they can be a bit clunky to use.

Bottom line

I’m glad I was wrong about Google Chrome on iPad Pro. Even if the experience isn’t as seamless as on desktop, using Google’s apps on the iPadOS’ Chrome browser is much easier than trying to juggle multiple discrete apps.

I still don’t think iPadOS is good for productivity, so I won’t be ditching MacBooks or Windows laptops for the iPad Pro any time soon. That said, if I’m ever on the road and need to use the iPad Pro as a computer in a pinch, I now know it won’t be a daunting task.

More from Tom's Guide

• MacBook Air M3 vs MacBook Air M1: Should you upgrade?
• Apple’s first foldable could be an iPad or even a MacBook
• iPad Air 2024 vs iPad Pro 2024: Biggest differences explained

Sign up to get the BEST of Tom’s Guide direct to your inbox.

Upgrade your life with a daily dose of the biggest tech news, lifestyle hacks and our curated analysis. Be the first to know about cutting-edge gadgets and the hottest deals.

Tony is a computing writer at Tom’s Guide covering laptops, tablets, Windows, and iOS. During his off-hours, Tony enjoys reading comic books, playing video games, reading speculative fiction novels, and spending too much time on X/Twitter. His non-nerdy pursuits involve attending Hard Rock/Heavy Metal concerts and going to NYC bars with friends and colleagues. His work has appeared in publications such as Laptop Mag, PC Mag, and various independent gaming sites.

iPad mini and Air to get OLED panels… but you’ll have to wait

Hurry! The iPad Air 2022 just hit an all-time price low at Amazon

I’m a pro mattress tester — why the Saatva Classic is still the No. 1 bed I’d buy in Memorial Day sales

• KalMadda I noticed you said that you’re having to search the names of the Google apps every time you want to use them, and I thought you might find this helpful. I don’t use Chrome, so I don’t know how this shows up in Chrome, but in Safari, I have Google set as my default search engine. And if I go to the Google search home page, the Google apps menu is at the top right. I hope this helps you out, also, you also could potentially use bookmarks to make it faster, though I don’t know how bookmarks work in the Chrome browser. Also, I noticed that using the Google Calendar web app in Safari, I didn’t get that full screen pop-up advertising the native app. 👍🏻. I don’t know if that was just because I didn’t have it open long enough, but the app adds may just be a Chrome thing. And I compared the app UI of Calendar and GMail on my Mac’s browser vs Safari on my iPad, and they were the same, so that may also be helpful for you as well! 👍🏻 Thanks for your review, it was a fun read! 👍🏻 Reply
• View All 1 Comment

Most Popular

• 2 Gigantic Nike Memorial Day sale — here are 7 deals you can't miss
• 3 The 15 best Memorial Day mattress sales 2024 — up to 50% off
• 4 Prices from just $160! 4 best Memorial Day firm memory foam mattress sales
• 5 Best Target Memorial Day sales — 11 deals I recommend
• 2 Prices from just $160! 4 best Memorial Day firm memory foam mattress sales
• 3 Best Target Memorial Day sales — 11 deals I recommend
• 4 Casper's cheapest mattress has dropped to $610 in Memorial Day Sale – why I'd buy it
• 5 I've been covering Memorial Day sales for 15 years — here are the deals I'd shop this weekend

WebKit Features in Safari 17.5

May 13, 2024

by Jen Simmons

Happy May! It’s time for another release of Safari — our third significant update of 2024. With just a month until WWDC24 and the unveiling of what’s coming later this year, we are happy to get these 7 features and 22 bug fixes into the hands of your users today.

There are several exciting new CSS features in Safari 17.5, including text-wrap: balance , the light-dark() color function, and @starting-style , plus the ability to use feature queries with @import rules. Let’s look at how you can put each one to use.

Text wrap balance

On the web, with its flexible container widths, inconsistent lengths of content, and variation between browsers, it can feel impossible to avoid having text wrap in such a way that too few words end up all by themselves on a very short last line.

When type was set by hand, typographers would painstakingly avoid this undesirable result by manually moving content around. Over the decades, web developers have tried a series of different tricks to avoid orphans in CSS, in HTML, in JavaScript, and in content management systems. None work very well. The attempts usually feel hacky, laborious, and fragile.

To solve this and other frustrations, the CSS Working Group has defined three new options that you can use to change how text will wrap. You can switch from default wrapping to another style with text-wrap . WebKit for Safari 17.5 adds support for the first of these new options — balancing.

The text-wrap: balance rule asks the browser to “balance” the lines of text and make them all about the same length.

You can see how now the text no longer fills the containing block — there’s a large amount of space on the right of the words. This is expected, and something you’ll want to think about as you decide when to use text-wrap: balance .

Where exactly each line of text will break when using text-wrap: balance may be slightly different in each browser. The CSS Text level 4 web standard leaves it up to each browser engine team to decide which algorithm they want to use in determining how exactly to wrap balanced text.

It can be computationally expensive for the browser to count characters and balance multiple lines of text, so the standard allows browsers to limit the number of lines that are balanced. Chromium browsers balance 6 or fewer lines, Firefox balances 10 or fewer, while Safari/WebKit balances an unlimited numbers of lines.

For now, Safari does not balance text if it’s surrounding a float or initial letter. And Safari disables the balancer if the content contains preserved tabs or soft hyphens.

Text wrap shorthands and longhands

The text-wrap property is actually a shorthand for two longhand properties: text-wrap-style and text-wrap-mode .

The text-wrap-mode property provides a mechanism for expressing whether or not text should wrap.

The wrap value turns it on, and the nowrap value turns it off, just like the values for white-space . (In fact, text-wrap-mode is the newly introduced longhand of white-space .) WebKit added support for text-wrap-mode: wrap and nowrap in Safari 17.4 .

The text-wrap-style property selects how to wrap. The initial value is auto — asking text to wrap in the way it has for decades. Or, you can choose a value to switch to another “style” of wrapping.

WebKit for Safari 17.5 adds support for text-wrap-style: balance , stable , and auto .

Of course, the text-wrap shorthand is a way to combine text-wrap-mode and text-wrap-style and declare them together. If you write text-wrap: balance it’s the same as text-wrap: wrap balance , meaning: “yes, please wrap, and when you do, please balance the text”.

Full support will eventually include three properties and six values. No browser supports everything yet, so be sure to look up support for the text-wrap , text-wrap-mode , and text-wrap-style properties, as well as the balance , pretty , stable , auto , wrap , and nowrap values.

The balance , pretty , and stable values will simply fall back to auto in browsers without support, so progressive enhancement is easy. You can use these values today, no matter how many of your users don’t yet have a browser with support. They will simply get auto -wrapped text, just like they would if you didn’t use text-wrap . Meanwhile, those users with support will get an extra boost of polish.

Dark mode and the light-dark() color function

More and more, users expect websites and web apps to support dark mode . Since Safari 12.1 , the prefers-color-scheme media query has given you the ability to write code like this:

Or perhaps you’ve used variables to define colors for both light and dark mode at once, making it easier to use them everywhere.

Well, now there’s a new option — the light-dark() function. It makes defining colors for dark mode even easier.

First, inform the browser you are providing a design for both light and dark modes with the color-scheme property. This prompts the browser to switch the default user agent styles when in dark mode, ensuring the form controls appear in dark mode, for example. It’s also required for light-dark() to work correctly.

Then, any time you define a color, you can use the light-dark() function to define the first color for light mode, and the second color for dark mode.

You can still use variables, if you’d like. Perhaps you want to structure your code like this.

An often-asked question when learning about light-dark() is “does this only work for colors?” Yes, this function only works for colors. Use the prefers-color-scheme media query to define the rest of your color-scheme dependent styles.

Starting style

WebKit for Safari 17.5 adds support for @starting-style . It lets you define starting values for a particular element. This is needed to enable a transition when the element’s box is created (or re-created).

In the above example, the background-color will transition from transparent to green when the element is added to the document.

Many developers are excited to use @starting-style along with display: none interpolation. To do so, WebKit also needs to support animation of the display property, which has not yet shipped in Safari. You can test this use case today in Safari Technology Preview .

Features queries for importing CSS

WebKit for Safari 17.5 adds the supports() syntax to @import rules. Now you can conditionally import CSS files based on whether or not there’s support for a certain feature.

For example, you could load different stylesheets based on whether or not CSS Nesting is supported .

Or you could load certain CSS files when a browser does not have support for Cascade Layers . (Note that any @import rules with layer() will automatically be ignored in a browser without layer support.)

Or simply test for a feature. Here, these layout styles will only be loaded if Subgrid is supported .

WebKit for Safari 17.5 adds support for AV1 to WebCodecs when an AV1 hardware decoder is available.

WebKit for Safari 17.5 adds WebGL support for EXT_conservative_depth and NV_shader_noperspective_interpolation .

WKWebView adds support for logging MarketplaceKit errors to the JavaScript console. This will make errors easier to debug.

Bug Fixes and more

In addition to these new features, WebKit for Safari 17.5 includes work polishing existing features.

Accessibility

• Fixed a bug preventing VoiceOver word echoing in some text fields. (122451549) (FB13592798)
• Fixed flickering with multiple accelerated animations and direction changes. (117815004)

Authentication

• Fixed excludeCredentials property being ignored during a passkey registration request. (124405037)
• Fixed the proximity calculation for implicit @scope . (124640124)
• Fixed the Grid track sizing algorithm logical height computation avoid unnecessary grid item updates. (124713418)
• Fixed any @scope limit making the element out of scope. (124956673)
• Fixed native text fields becoming invisible in dark mode. (123658326)
• Fixed fallback native <select> rendering in dark mode. (123845293)
• Fixed scrolling for an element when a video element with pointer-events: none is placed over it. (118936715)
• Fixed HTML5 <audio> playback to continue to the next media activity when in the background. (121268089) (FB13551577)
• Fixed AV1 to decode in hardware on iPhone 15 Pro. (121924090)
• Fixed audio distortion over internal speakers when streaming content in web browsers. (122590884)
• Fixed firing loadeddata events for <audio> and <video> on page load. (124079735) (FB13675360)
• Fixed adjusting the size of the scrollable area when changing betwen non-overlay and overlay scrollbars. (117507268)
• Fixed flickering when showing a layer on a painted background for the first time by avoiding async image decoding. (117533495)
• Fixed line breaking before or between ruby sequences. (122663646)
• Fixed mousemove events in an iframe when the mouse is clicked from outside the iframe and then moves into it while the button is held down. (120540148) (FB13517196)
• Fixed several issues that caused Web Push to not show notifications when the web app or Safari was not already running. (124075358)

Web Inspector

• Fixed info and debug buttons not appearing in the Console Tab until new console messages are displayed. (122923625)
• Fixed WebCodecs to correctly use the VP9 hardware decoder. (123475343)
• Fixed no incoming video in Teams VA. (124406255)
• Fixed the camera pausing occasionally when torch is enabled. (124434403)

Updating to Safari 17.5

Safari 17.5 is available on iOS 17.5 , iPadOS 17.5 , macOS Sonoma 14.5 , macOS Ventura, macOS Monterey and in visionOS 1.2.

If you are running macOS Ventura or macOS Monterey, you can update Safari by itself, without updating macOS. On macOS Ventura, go to  > System Settings > General > Software Update and click “More info…” under Updates Available.

To get the latest version of Safari on iPhone, iPad, or Apple Vision Pro, go to Settings > General > Software Update, and tap to update.

We love hearing from you. To share your thoughts on Safari 17.5, find us on Mastodon at @[email protected] and @[email protected] . Or send a reply on X to @webkit . You can also follow WebKit on LinkedIn . If you run into any issues, we welcome your feedback on Safari UI, or your WebKit bug report about web technologies or Web Inspector. Filing issues really does make a difference.

Download the latest Safari Technology Preview on macOS to stay at the forefront of the web platform and to use the latest Web Inspector features.

You can also find this information in the Safari 17.5 release notes .

Special Features

Vendor voice.

Apple says if you want to ship your own iOS browser engine in EU, you need to be there

Rival coders must have euro-based staff to build and test non-webkit surfing.

Exclusive Apple's grudging accommodation of European law – allowing third-party browser engines on its mobile devices – apparently comes with a restriction that makes it difficult to develop and support third-party browser engines for the region.

The Register has learned from those involved in the browser trade that Apple has limited the development and testing of third-party browser engines to devices physically located in the EU. That requirement adds an additional barrier to anyone planning to develop and support a browser with an alternative engine in the EU.

It effectively geofences the development team. Browser-makers whose dev teams are located in the US will only be able to work on simulators. While some testing can be done in a simulator, there's no substitute for testing on device – which means developers will have to work within Apple's prescribed geographical boundary.

Prior to iOS 17.4, Apple required all web browsers on iOS or iPadOS to use Apple's WebKit rendering engine. Alternatives like Gecko (used by Mozilla Firefox) or Blink (used by Google and other Chromium-based browsers) were not permitted. Whatever brand of browser you thought you were using on your iPhone, under the hood it was basically Safari.

Browser makers have objected to this for years, because it limits competitive differentiation and reduces the incentive for Apple owners to use non-Safari browsers.

Apple's designation under Europe's Digital Markets Act (DMA) as a gatekeeper for the App Store, iOS, Safari, and just recently iPadOS forced Cupertino to make concessions.

One such allowance – realized in iOS 17.4 – was letting iOS (and subsequently iPadOS ) apps in the EU use alternative browser engines.

But rivals have complained that Apple's concessions are designed – as Mozilla put it – to make it "as painful as possible for others to provide competitive alternatives to Safari."

That can be seen in Apple's extensive list of requirements to offer a third-party browser engine on iOS in the EU.

Parisa Tabriz, VP of engineering and general manager of Chrome at Google, dismissed Apple's rule changes earlier this year. "Apple isn't serious about supporting web browser or engine choice on iOS," Tabriz wrote in February. "Their strategy is overly restrictive, and won't meaningfully lead to real choice for browser developers."

Samsung takes bite out of Apple over its mega marketing misstep

• Aghast iOS users report long-deleted photos back from the dead after update

Google, Apple gear to raise tracking tag stalker alarm

As one apple store votes against forming union, another may go on strike.

When Apple announced its plan to make changes in response to DMA in January, developers expressed concern that supporting a separate EU browser might be a problem. And those concerns persist.

"The contract terms are bonkers and almost no vendor I'm aware of will agree to them," lamented one industry veteran familiar with the making of browsers in response to an inquiry from The Register .

"Even folks that may have signed something to be able to prototype can't ship under the constraints Apple's trying to impose. They're so broad and sweeping as to try to duck most of the DMA by contract … which is certainly bold."

In March, the European Commission opened an investigation into Apple based on concerns that Cupertino's "steering" rules and browser choice screen fell short of DMA requirements.

"By blocking browser engineers across the globe from working on their real browsers unless they are physically located in the EU, Apple is preventing them from being able to compete or perhaps even ship on iOS," declared Alex Moore, executive director of Open Web Advocacy, in a note to The Register .

"This is clearly absurd, has no reasonable justification and can only be described as malicious compliance. As a plausible scenario, imagine as a browser vendor you have a security issue but your top expert on that type of vulnerability is in the US. They have to fly to the EU so they can test and fix on a real device?

"At a minimum, Apple should issue guidance that this is a misunderstanding and that browser vendor test devices are exempt."

Asked about Apple's geofencing of devices for development, an Opera spokesperson replied that it hadn't heard about the issue – but that's not surprising given that the organization is headquartered in the EU.

Jon von Tetzchner, CEO of Vivaldi, also admitted he hadn't heard about the requirement. "Our dev team is all based in the EEA – mostly Norway and Iceland – so I presume this would not have applied to us," he explained. "But again, I cannot see how they could have a rule like that.

"I would think that would be seen as another anti-competitive move," he added.

"[Apple's] team is in the US and so are the teams for Microsoft, Google, Mozilla and most of the other larger browser companies."

Google and Mozilla didn't immediately respond to requests for comment. Nor did Apple – which seldom does.

Mozilla and Google have explored versions of Firefox and Chrome for iOS based on non-WebKit engines, but have yet to release anything. Firefox users have requested a Gecko-based version of Firefox for iOS, but are yet to receive any release commitment. ®

• European Commission
• European Union
• Web Browser

Narrower topics

• Czech Republic
• Internet Explorer
• Microsoft Edge
• Netherlands

Broader topics

• Steve Wozniak

Send us news

Other stories you might like

How apple wi-fi positioning system can be abused to track people around the globe, you ok, apple seriously, your silicon lineup is … a mess, prepare your audits: eu commission approves first-of-its-kind ai act, time for a fresh approach to compute architecture.

Apple on track for quarter of all iPhones to be made in India by 2028

Add ai servers to the list of idevices apple silicon could soon power, brit publishers beg apple not to hurt online ad revenue, europe buying more chinese phone brands as market starts to bounce back, apple broke the law with anti-union tactics in nyc, labor watchdog barks.

• Advertise with us

Our Websites

• The Next Platform
• Blocks and Files

Your Privacy

• Cookies Policy
• Privacy Policy
• Ts & Cs

Copyright. All rights reserved © 1998–2024