how to open developer tools in safari mobile

• 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 Clear Search History on iPhone
• 10 Hidden Features in macOS Sonoma
• 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 Open Safari Developer Tools & Enable Mobile View Mode

John on May 12, 2021

In this tutorial, we will learn how to open the Safari developer console and enable mobile view for responsive web development.

How to Enable Safari Developer Tools

If you don't have developer tools enabled in Safari, you will need to do this before the console can be opened by using the following steps:

• From the main menu go to Safari > Preferences (or use the CMD + , keyboard shortcut.)
• Go to the Advanced tab.
• Check "Show Developer menu in menu bar"

Open the Safari Developer Console

Now open the developer console in responsive mode by going to the menu and selecting Develop > Enter Responsive Design Mode :

Alternatively, use the keyboard shortcut CTRL + CMD + R to enter responsive developer mode.

Now you can work on your website in a variety of different mobile device screen sizes by selecting them at the top of the page:

Related Tutorials

How to Stop DDOS Attacks & Prevent Future Downtime

How to Enable Night Light Mode on Windows 10

How to View Desktop Site on iPhone with Safari

How to Use Grep Command to Search Files in Linux

How to Find Words on a Page using Safari on iPhone

How to Clear & Save Disk Storage Space on a Mac

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

How To Open Developer Tools In Safari

• Software & Applications
• Browsers & Extensions

Introduction

When it comes to web browsing, Safari stands out as a popular choice for Mac and iOS users. Whether you're a web developer, a tech enthusiast, or simply someone curious about the inner workings of the websites you visit, Safari's Developer Tools can provide valuable insights and functionalities. These tools empower users to inspect, debug, and optimize web content, making them indispensable for anyone involved in web development or simply interested in understanding the technical aspects of the internet.

In this article, we'll delve into the process of opening Developer Tools in Safari on both Mac and iOS devices. By the end, you'll have a comprehensive understanding of how to access these powerful tools, enabling you to explore the underlying structure of web pages, analyze network activity, and experiment with various web development features.

Let's embark on this journey to uncover the hidden capabilities of Safari's Developer Tools, empowering you to gain a deeper understanding of the web and its intricate design. Whether you're a seasoned developer or a curious individual eager to peek behind the digital curtain, the following sections will equip you with the knowledge to harness the full potential of Safari's Developer Tools.

Opening Developer Tools in Safari on Mac

Opening Developer Tools in Safari on a Mac is a straightforward process that provides access to a wealth of powerful features for web development and debugging. Whether you're a seasoned developer or a curious individual eager to explore the inner workings of websites, Safari's Developer Tools offer a comprehensive suite of functionalities to aid in understanding and optimizing web content.

To initiate the process of opening Developer Tools in Safari on a Mac, you can follow these simple steps:

Using the Menu Bar:

• Launch Safari on your Mac and navigate to the menu bar located at the top of the screen.
• Click on "Safari" in the menu bar to reveal a dropdown menu.
• From the dropdown menu, select "Preferences" to access Safari's settings.

Accessing the Advanced Settings:

• Within the Preferences window, click on the "Advanced" tab located at the far right.
• Check the box next to "Show Develop menu in menu bar" to enable the Develop menu within Safari.

Opening Developer Tools:

• Once the Develop menu is enabled, navigate back to the menu bar at the top of the screen.
• Click on "Develop" to reveal a dropdown menu containing various web development tools and options.
• From the dropdown menu, select "Show Web Inspector" to open the Developer Tools panel.

Upon completing these steps, the Developer Tools panel will appear, providing access to a wide array of functionalities such as inspecting elements, analyzing network activity, debugging JavaScript, and much more. This powerful suite of tools empowers users to delve into the underlying structure of web pages, identify and rectify issues, and optimize the performance of web content.

By familiarizing yourself with the process of opening Developer Tools in Safari on a Mac, you gain the ability to harness the full potential of these tools, enabling you to explore, analyze, and enhance the web browsing experience. Whether you're a web developer seeking to fine-tune a website's performance or simply intrigued by the technical aspects of the internet, Safari's Developer Tools on Mac provide a gateway to a deeper understanding of web development and design.

Opening Developer Tools in Safari on iPhone or iPad

Accessing Developer Tools in Safari on an iPhone or iPad allows users to gain valuable insights into the technical aspects of web content and perform various web development tasks directly from their mobile devices. Whether you're a web developer on the go or simply curious about the inner workings of websites, Safari's Developer Tools provide a convenient way to inspect, debug, and optimize web content on iOS devices.

To initiate the process of opening Developer Tools in Safari on an iPhone or iPad, follow these simple steps:

Launching Safari: Begin by unlocking your iPhone or iPad and locating the Safari icon on the home screen. Tap the Safari icon to open the Safari browser .

Enabling Developer Tools: With Safari open, navigate to the website or web page you wish to inspect and debug. Once on the desired web page, tap the address bar at the top of the screen to reveal the URL and other options.

Accessing Developer Tools: In the address bar, enter "inspect://" followed by the URL of the web page you are currently viewing. For example, if you are on the website "example.com," you would enter "inspect://example.com" in the address bar and tap "Go" or the "Enter" key on the on-screen keyboard .

Upon completing these steps, Safari's Developer Tools will be activated, providing access to a range of functionalities such as inspecting elements, analyzing network activity, debugging JavaScript, and more. This powerful suite of tools empowers users to delve into the underlying structure of web pages, identify and rectify issues, and optimize the performance of web content directly from their iPhone or iPad.

By familiarizing yourself with the process of opening Developer Tools in Safari on an iPhone or iPad, you gain the ability to harness the full potential of these tools, enabling you to explore, analyze, and enhance the web browsing experience while on the go. Whether you're a web developer seeking to troubleshoot a website's functionality or simply intrigued by the technical aspects of the internet, Safari's Developer Tools on iOS devices provide a convenient gateway to a deeper understanding of web development and design.

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 Enable Inspect In Safari

How To Open Developer Tools On Safari

How To Inspect On IPhone Safari

How To Inspect On Safari IPhone

How To Inspect Page On Safari

How To Change Location In Safari

How To Inspect In Safari On IPad

How To Reset Safari In Mac

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.

How to Use Inspect Element in Chrome, Safari, & Firefox

Published: May 20, 2024

When I started my coding journey, I couldn’t always pinpoint what made a web page great — all of the code underneath that craft a well-designed experience. So, I would use the inspect element on my browser to peel back the curtain. Here, I could see how pages were coded so I could understand how to recreate elements for my own projects.

The inspect element feature lets us view and even modify any website’s front end. This simple trick can help you understand how websites work and even help you build your own.

In this post, I’ll discuss what it means to “inspect” page elements and how to do so on three common web browsers. If you’re in a pinch, jump ahead to what you’re looking for.

Table of Contents

How to Inspect Elements in Chrome

How to inspect elements in safari, how to inspect elements in firefox, get a closer look with inspect, what does “inspect element” mean.

Inspect element is a feature of modern web browsers that enables anyone to view and edit a website’s source code, including its HTML, CSS, JavaScript, and media files. When the source code is modified with the inspect tool, the changes are shown live inside the browser window.

Inspect is a web professional’s scout team. Developers, designers, and marketers frequently use it to peek inside any website (including their own) to preview content and style changes, fix bugs, or learn how a particular website is built. For instance, if I find an intriguing interface on a competing website, the inspect element lets me see the HTML and CSS that make it up.

I also think of my browser’s inspect feature as a “sandbox” of sorts. I can play around with a web page as much as I want by changing content, colors, fonts, layouts, etc. When finished, I just refresh the page to revert everything to normal.

Inspect doesn’t change the website itself — only how it appears in your browser. You can then experiment without worry!

Inspect is also an incredibly valuable tool for those learning web development. Instead of viewing plain source code, I can use the inspect element to interact with the page and see how each line of code maps to an element or style.

By better understanding what constitutes the typical web page, I can communicate effectively with developers in the case of an error or if I want to make a change.

Inspect may be a “developer tool,” but you don’t need to write any code or install any additional software to use it. You can do everything I’ve described right inside your browser. Let’s learn how.

How to Inspect Elements

To inspect elements, you have to right-click any part of a web page and click Inspect > Inspect Element. Alternatively, you can press Command+Option+i on your Mac or F12 on your PC to do the same.

Every modern web browser has a native tool for inspecting elements. It can be accessed in any browser, but some browsers like Chrome and Safari have slight differences. Let’s discuss how to use the inspect tool in three desktop web browsers: Google Chrome, Apple’s Safari, and Mozilla Firefox.

Chrome comes with a handy developer tool that allows you to inspect individual elements. This allows you to see the code behind a web page and even edit it on your own browser. (Note that the changes are only visible to you, not to anyone else across the web.)

Here's how to get started.

Free Guide: 25 HTML & CSS Coding Hacks

Tangible tips and coding templates from experts to help you code better and faster.

• Coding to Convention
• Being Browser-Friendly
• Minimizing Bugs
• Optimizing Performance

You're all set!

Click this link to access this resource at any time.

1. Launch Chrome and navigate to the page you want to inspect.

To use the element inspector in Google Chrome, I first navigate to any web page. In these examples, I’ll be using HubSpot.com .

2. Open up the Inspect panel.

Once I arrive at my desired page, I have several ways to open Chrome's Inspect tool.

• Option 1 : I can right-click any part of the page and choose Inspect . Right-clicking a specific page element will open that element in the inspector view.
• Option 2 : In the top menu bar, I can select View > Developer > Developer Tools .
• Option 3: I can click the three-dot icon in the top right corner of the browser window. From there, I can choose More Tools > Developer Tools . Then, I can click the Inspect tab in the popup.
• Option 4 : I can use the shortcut control-shift-C on Windows or command-option-C on macOS.

3. Change the location of the inspect panel.

To better view the code, I can change the position of the inspector window.

The Chrome Developer Tools panel will open at the bottom of the browser window, but sometimes it opens in a separate window altogether.

If I want to change the location of the panel, I can click the three-dots icon in the top right corner of the panel (next to the X icon), and then choose my preferred dock position.

Pro tip: Choosing Dock to right makes it easier to view the rendered page and its source:

Along the top of the inspect panel, I see tabs for Elements , Console , Sources , etc. These are all tools I can use to assess a page’s contents and performance. However, everything I need to inspect is under the Elements tab.

4. Look at the source HTML code of the page.

The biggest area of the panel will contain the source HTML of the current page. I always spend some time exploring this region. Hovering the cursor over the piece of code highlights the corresponding element on the page.

Blue indicates the contents of an element, green corresponds to padding, and areas in orange are margins.

Pro tip: If you’re a beginner and want to learn more about the different elements you’re inspecting, check out this HTML guide for beginners.

5. Select a specific element to inspect.

Rather than trying to read through the code to find an element, I can also do the opposite. I can locate a piece of code by hovering over the page element itself. To do this, I click the Element select icon in the top left corner of the panel.

8. Edit the page's CSS code.

Moving down the Chrome inspect panel, I see the Styles tab. This shows me what CSS styling has been applied to the selected element. I can click on lines of code to rewrite them, or I can activate/deactivate certain declarations by checking/unchecking the boxes next to them. I’ll do this for my <h1> element’s font-weight property:

9. View the page's mobile version.

Finally, let’s cover one more feature of Chrome’s inspect feature: mobile view. When building a site, designers need to consider how its pages appear on desktop, mobile, and tablet screens alike.

Fortunately, Chrome lets me preview the same web page in multiple screen resolutions. Start by clicking the Toggle device icon in the top left corner of the panel:

1. Enable Safari's developer tools.

To use Safari’s inspect tool, Web Inspector, I first need to enable Safari’s developer tools. Here’s how:

• On the top menu, I select Safari → Preferences .
• I then tap Advanced.
• I check the box next to Show Develop in the menu bar.
• Then, I see a Develop option added to the menu above.

2. Go to your desired web page.

Next, I go to the web page I’d like to inspect. For this example, I’ll be using HubSpot.com again.

3. Open up Web Inspector.

There are three ways to open Web Inspector in Safari:

• Option 1 : I can right-click any part of the page and choose Inspect Element . Right-clicking a specific page element will open that element in the inspector view.
• Option 2: I can choose Develop → Show Web Inspector from the top menu bar.
• Option 3: I can use the shortcut command-option-I .

Pro tip: There are many keyboard shortcuts that can be used to navigate the inspector panel. Familiarize yourself with as many as possible to speed up your workflow.

4. Change the location of the inspect panel.

Safari’s inspector opens at the bottom of the window by default. To change this configuration, I can click the icon to dock the display on the right side or pop out in a separate window.

Both are located next to the X icon in the top left corner of the display.

Now, when I click a page element, the Web Inspector reveals the corresponding source code.

7. Edit, add, or delete page elements.

Like Chrome’s inspector, Safari lets me modify, add, and remove page elements. To edit the page, I can right-click an HTML element in the inspect panel. I can then choose an option from the Edit menu.

Web Inspector will prompt me for a new text input and then display my changes in real time:

If I want to delete a page element, I just select some code and delete it. Or, I can right-click and choose Toggle Visibility to hide an element without deleting it.

8. Activate or deactivate the page's CSS code.

To the right, I have the Styles column, where I can change or activate/deactivate CSS declarations for any element, like so:

When testing content and style changes, I want to see the effect on mobile screens as well as desktops. I’ll cover that next.

Pro tip: When seeking inspiration from other web pages, I always take advantage of the Styles tab in my browser’s developer tools to tailor the CSS according to how I envision it on my own page. Try it out. This allows you to refine and adapt design elements to suit your specific preference before moving forward with coding it in your own workspace.

Safari’s Responsive Design Mode allows me to preview a website across common devices.

To view the page in a mobile viewport, I choose Develop → Enter Responsive Design Mode . In this mode, I can use the same inspector tools on pages formatted for Apple devices or set the dimensions myself:

What I like: Safari’s responsive design tab not only lets you test your web page’s responsiveness on devices, but you can also test its behavior across different browsers. Serving as a one-stop-shop for testing responsiveness, the Safari dev tools are a huge time saver.

Firefox is another great option for inspecting a web page in either macOS, Windows, or Linux. Here’s how to get started.

1. Open Firefox's inspect element tool.

To open the Firefox Inspector, I have several options:

• Option 1: I can right-click any part of the page and choose Inspect Element . Right-clicking a specific page element will open that element in the inspector view.
• Option 2: I can select Tools → Browser Tools → Web Developer Tools from the top menu bar.
• Option 3: I can use the shortcut control-shift-I or press f12 in Windows or command-option-I in macOS.

Next, I go to the web page I’d like to inspect. I’ll be using HubSpot.com again.

3. Change the location of the inspector panel.

The Firefox inspector appears along the bottom of the window by default. To change its position, I can select the three-dots icon in the top right corner of the inspector, then choose an alternative display option.

4. Look at the HTML code of the page.

Firefox’s inspector panel is comparable in features to Chrome’s and Safari’s. The HTML source code indicates the corresponding page element with color codes — content is blue, padding is purple, and margins are yellow:

I can also find code by selecting elements on the page. To enter selection mode, I click the cursor icon in the top left corner:

I can then click any page element to reveal its source code in the inspect panel.

6. Modify or delete page elements.

To modify or delete a page element, I select its code in the inspector. Then, I can either double-click to change the text, right-click and choose Edit as HTML, or click Plus Button next to the “Search HTML” bar to add code. Or I can simply delete the code and see the resulting changes on the page.

7. Toggle the page's CSS styles.

To toggle the CSS styling of an element, I use the Filter Styles region at the bottom of the inspect panel. There, I can uncheck the box next to a CSS declaration to deactivate it (or write in new code myself):

8. View the page's mobile version.

Finally, Firefox’s tools also come with a mobile preview option. To use it, I can click the Responsive Design Mode icon in the top right corner of the panel:

Responsive Design Mode lets me choose from several preset screen resolutions or set my own. I can also toggle connection speed and device pixel ratio:

What I like: As a software developer, it is very important that I make web pages that can be easily used by anyone. Firefox’s accessibility tab in its inspector tool allows me to check if my nodes accessibility tree is missing any important properties. I can verify color contrasts too.

The quickest way to access this feature is by right clicking on the page → choose Inspect → select the two arrows next to debugger → select Accessibility .

Once you learn the basics of your browser’s inspect tool, you might realize just how much information about your favorite websites is publicly available. With a few clicks, you can explore how exactly web pages are built, what styles they use, how they optimize for search engines, how they format on mobile screens, and a lot more.

Editor's note: This article was originally published in December 2020 and has been updated for comprehensiveness.

Don't forget to share this post!

Related articles.

The Beginner's Guide to Website Development

Are .io Domains Good? Why Tech Startups Love .io Domains

15 Backend Project Ideas for Your Developer Portfolio

37 Backend Interview Questions and Answers: The Ultimate Guide 2022

How to Build & Run an Effective Website With a Small Team or Budget [Startup Tips]

How to Code a Website for Free in 6 Easy Steps

How Long Does it Take to Build a Website?

Flush DNS: What It Is & How to Easily Clear DNS Cache

How to Make a Website With User Accounts and Profiles [With WordPress, Wix, and More]

Wildcard SSL Certificates: What They Are & How They Work

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

Dive into the Summer ’24 Release

As an admin, you can help your organization succeed by staying up to date with the latest Salesforce releases and getting familiar with product enhancements.

Check out the Summer ’24 release notes for a list of new features and available updates.

Did you find this helpful?

Help us enhance your experience.

Product Area

Feature impact.

• How It Works
• Requirements for Mobile Publisher for Experience Cloud
• LWR Platform (Beta) Limitations
• Prepare Your App’s Information for Android
• Prepare Your App’s Information for iOS
• Create a Mobile Publisher Project
• Get Started with the Playground App
• Enable Cross-Website Tracking for the Publisher Playground App (iOS)
• Show or Hide Login Bar
• Playground App for Android
• Preview Your Experience Site on iOS (Simulator)
• Preview Your Experience Site on Android (Emulator)

Enable Safari Developer Tools

• Debug a Mobile Component (Safari)
• Enable Developer Mode on Your Emulated Device
• Debug a Mobile Component (Chrome)
• Test How URLs Open in the Playground Publisher App
• How to Check Your Experience Cloud Site URL
• Advantages of Binary Upload Distribution Method
• App Distribution Type Considerations
• Choose Distribution Type
• Create a Placeholder App
• Mobile Publisher Best Practices for App Content Declarations
• Update Test User Credentials
• Create Service Account User and Find Your Google Play Developer ID
• Grant Permission to Distribute Your Branded App
• Register Your Firebase App to Enable Mobile Publisher Android Push...
• Enter Your Information into Your Mobile Publisher Project for Android
• Register Salesforce Bundle ID
• Invite Salesforce to Your App Store Connect Account
• Record Your Apple Developer Team Account Info
• Enter Your Apple Developer Information into Your Mobile Publisher...
• Find Your Managed Google Play Organization Info
• Find Your Apple Deployment Programs Account Info
• Unlisted Option for iOS App Distribution
• Change Distribution Type for iOS
• Change Distribution Types for Android
• Change Distribution Account for iOS
• Change Distribution Account for Android
• Urge or Require Users to Update to the Latest Mobile Publisher App...
• Allow Experience Cloud App Users to Initiate Deletion of Their Data
• Configure App Navigation
• Set Up the Navigation Tab Bar
• Manage How URLs Open from Your App
• Creating a Custom Login Flow
• Set Up Your Android App for Google’s Privacy Policy Requirements
• Create a Privacy Policy Page in Experience Builder
• Create a Custom User Profile Menu Item for Your App’s Privacy Policy
• Add a Privacy Policy for Binary Uploads
• iPad Support Opt In
• Create a Certificate Signing Request
• Create Developer ID Certificate
• Find Your Certificate ID
• Configure Your Branded App with Apple
• Create an Apple Auth. Provider in Salesforce
• Update the Apple Configuration with the Callback URL
• Test the SSO Connection
• Create a Registration Handler
• Enable Advanced Authentication for a Mobile Publisher App
• Create a Support Case to Use Advanced Authentication for a Mobile...
• Test Your Mobile Publisher App’s Single Sign-On with Apple ID
• User Opt-In Biometric Login (Beta)
• Enable User Opt-In Biometric Login (Beta)
• Enable Mandatory Biometric ID App Unlock for iOS and Android
• Set Time Value for Biometric Login
• Pre-Authorize User App Access Through Connected App Policies
• Create Custom Notifications for Your App
• Test Marketing Cloud Push Notifications
• Enable Marketing Cloud Push Notifications for Mobile Publisher Apps
• Mobile Publisher Fields for Enabling Marketing Cloud Push...
• Create a Permission Set and Grant API Enabled Access (Optional)
• Enable Full Content Push Notifications for Experience Cloud App
• Enable App Permissions for Device Capabilities
• App Permissions on Android Devices
• Scan Barcodes with a Mobile Device Camera
• Implement and Use Location-Based Features
• Implement a Contact Import Feature
• Access the Mobile Device Calendar
• Best Practices and Guidelines for App Rating and Feedback Requests
• Identify a User with a Mobile Device’s Biometrics Capabilities
• Set Up URL Schemes
• Use App Links with Mobile Publisher for Experience Cloud (Android)
• Use Universal Links with Mobile Publisher for Experience Cloud (iOS)
• Override Android App Links to Your Mobile Publisher App
• Override iOS Universal Links to Your Mobile Publisher App
• Enable Cross-Website Tracking (iOS)
• App Tracking Transparency (iOS)
• Add a Smart App Banner
• Add a Pass to Apple Wallet (iOS Only)
• Supported Objects for Download
• About Managed Packages
• Request a Managed Package
• Install a Managed Package
• Request a Beta Version of Your App
• Test with the UI Test Automation Model (UTAM) for Your App
• Switch Between Testing Modes in the Experience Cloud App
• Submit the App for Approval
• Types of Maintenance
• Create a New Version of Your Mobile Publisher for Experience Cloud App
• Managed Package Maintenance
• Considerations Before Changing Your Experience Cloud Site URL
• Authentication
• Temporarily Remove Mobile Publisher Apps from Sale
• Decommission a Mobile Publisher App
• Suggestions to Prevent App Store and Play Store Rejections
• Identify the Version of Your Experience Cloud App
• Mobile Publisher for Experience Cloud FAQ
• Known Issues and Limitations for Mobile Publisher

Start the debugging process for your iOS app.

Required Editions

• On your desktop development machine, open Safari.
• Select Safari | Preferences .
• Select Advanced .
• Check the Show Develop menu in menu bar box. The Safari developer tools are now available from the Develop menu in the menu bar.

Cookie Consent Manager

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

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

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

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

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

Cookie List

How-To 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

Get ready for Microsoft Build 2024

James Casey

May 15th, 2024 0 1

Microsoft Build is just around the corner, taking place from May 21-23, 2024. Whether you’re tuning in online (for free) or joining us in person in Seattle, prepare to be immersed in the latest innovations in Microsoft developer tools and technologies. Microsoft Build also offers unparalleled opportunities to network and create valuable connections with industry leaders and like-minded professionals.

Join Microsoft CEO Satya Nadella, as well as Rajesh Jha, Mustafa Suleyman, and Kevin Scott at the opening keynote to learn how this era of AI will unlock new opportunities, transform how developers work, and drive business productivity across industries.

This year’s lineup promises an array of engaging sessions. While this blog post focuses on identity related breakout sessions and demos, there will be a lot more to discover at the conference!

Breakout session

Secure your intelligent applications with microsoft entra, speakers: ​ matt gotteiner, pamela fox, den delimarsky.

In this comprehensive session (online & in-person), learn the essentials of how to automatically set up authentication for your intelligent apps and discover how to add access controls to your apps and data. We will guide you through registering your AI applications using the Microsoft Graph API or the new Microsoft Graph Bicep resources which enable repeatable deployment of Microsoft Entra ID resources. We’ll share industry-leading practices for token validation and refresh with the Microsoft Authentication Library (MSAL).

Explore the most effective OAuth flows for different applications, such as server-side or single-page applications (SPAs), leverage Azure App Service’s built-in authentication, and learn to filter output based on the authenticated user.

Demo sessions

Create secure applications in minutes with visual studio code and microsoft entra external id​, speaker: katherine legg​.

Dive into this quick demo (in-person only) where you’ll learn how to use the Microsoft Entra External ID extension for Visual Studio Code to create your first External ID application, completely within your IDE. Bootstrap your development with pre-configured sample applications to get started quickly.

Developer’s guide to combat fraud with real-time identity verification​

Speaker: sydney morton.

In this demo (in-person only), we introduce Face Check using Microsoft Entra Verified ID, which helps to reduce sign-up friction, the risk of fraud, and account takeover.

Face Check enables apps to perform real-time biometric matching against identity documents issued by governments (e.g. driver’s licenses or passports), businesses, or education institutions.​ Learn how to enhance user verification processes in a more secure and user-friendly way.

Create pixel perfect authentication experiences for native mobile apps

​speaker: james casey.

Explore the capabilities of the Authentication API and SDK in Microsoft Entra External ID (in-person only) which allow you to create pixel perfect UX for sign-up and sign-in experiences in your mobile applications . This session will cover how you can use these to create fully custom and secure login experiences on mobile devices, enhancing both the aesthetic and functionality.

Simple and secure app authentication with authentication brokers​

Speakers: medhir bhargava, den delimarsky.

Learn about the integration of Web Account Manager (WAM) on Windows (in-person only) through various MSAL libraries, such as MSAL.NET, MSAL Python, and MSAL Java, and how it can simplify your application’s authentication processes. The session will highlight the seamless authentication experiences enabled by WAM . We’ll also explore how MSAL libraries facilitate public client authentication flows with Microsoft Entra ID and enhance web, mobile, and desktop applications.​

Join us at Build 2024

Embark on your journey to mastery at Microsoft Build. Beyond the sessions outlined above, there will be interactive Q&As, further live demos, and guidance from seasoned experts. You’ll leave ready to tackle development challenges with confidence.

Register now to secure your spot at Microsoft Build and be part of the movement that’s shaping the future of technology. Whether you’re looking to enhance your coding skills, explore new security practices, or streamline your development processes, Build is the place to be. See you there, and don’t forget to follow the hashtag #MSBuild on socials for the latest updates.

Sign me up!

James Casey Principal Product Manager, Identity & Network Access, Developer Experience

Leave a comment Cancel reply

Log in to start the discussion.

Insert/edit link

Enter the destination URL

Or link to existing content

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, time for a fresh approach to compute architecture.

Prepare your audits: EU Commission approves first-of-its-kind AI Act

Add ai servers to the list of idevices apple silicon could soon power, apple on track for quarter of all iphones to be made in india by 2028, apple broke the law with anti-union tactics in nyc, labor watchdog barks, brit publishers beg apple not to hurt online ad revenue, apple unveils m4 chip with neural engine capable of 38 tops, and some other kit.

• 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