view console safari mobile

• Get One: Tornado Alert Apps
• The Best Tech Gifts Under $100

How to Activate the iPhone Debug Console or Web Inspector

Use Safari's web developer tools to study problematic websites

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

What to Know

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

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

Activate Web Inspector on Your iPhone or Other iOS Device

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

Open the iPhone  Settings  menu.

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

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

Scroll to the bottom of the page and select Advanced .

Move the Web Inspector toggle switch to the On position.

Connect Your iOS Device to Safari on a Mac

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

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

Select the  Advanced  tab.

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

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

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

What Is Web Inspector?

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

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

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

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

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

Get the Latest Tech News Delivered Every Day

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

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

David Lozzi

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

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

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

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

All steps below are all running on my:

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

What are we debugging

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

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

Debugging in Chrome on iOS

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

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

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

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

Debugging in Safari on iOS

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

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

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

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

Good enough for now

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

One other option, for a cost: inspect.dev

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

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

‘Til next time, happy debugging!

Please share the love!

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

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

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

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

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

Thanks for the fix! will update

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

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

Leave a Reply Cancel reply

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

Top Posts & Pages

• Sending a beautifully formatted email from Power Automate (Flow)
• Use Microsoft Forms to collect data right into your Excel file
• Saving data from Microsoft Forms into Excel using Power Automate (Flow)
• When Power Automate (Flow) can't find your Microsoft Form
• Understanding Power Automate's Outlook Send Email Actions
• Customize the SharePoint Calendar Colors
• Embedding your JavaScript into a SharePoint page
• SharePoint: Hiding Ribbon and More with IsDlg
• Squeezing a little more formatting out of Microsoft Forms
• Stack Overflow

• 2,081,151 hits

Discover more from David Lozzi

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

Type your email…

Continue reading

• Web Browser
• Google Chrome Browser
• Mozilla Firefox Browser
• Microsoft Edge Browser
• Apple Safari Browser
• Tor Browser
• Opera Browser
• DuckDuckGo Browser
• Brave Browser
• Basic and advance shortcut keys in Apple Safari Browser
• Hidden tricks inside Apple Safari Browser
• Bookmark in Apple Safari Browser
• Architecture of Apple Safari Browser
• Apple to Launch Search Engine to Rival Google

Safari for Developement

• DevTools in Apple Safari Browser
• Developer Mode in Safari Browser
• Debugger In Apple Safari Browser

Safari Tabs

Console tab in safari browser.

• Sources Tab in Apple Safari Browser
• Storage Tab in Apple Safari Browser
• Elements Tab in Apple Safari Browser
• Network Tab in Apple Safari Browser
• Web Capture Tabs in Apple Safari Browser

How to .. in Safari

• How to enable or disable split view in Apple Safari Browser ?
• How to disable or enable auto-play videos in Apple Safari Browser ?
• How to Allow Pop-Ups in Safari?
• How to use Safari for web development
• How to use inspect element in Chrome, Firefox and Safari ?
• How to Browse in Apple Safari Browser ?

The developed Console Tab of Safari can be categorized as a crucial element that allows developers and end users engagement, troubleshooting, and performance tuning. It is part of the Web Inspector, a group of development and debugging tools built into the Safari browser. The console acts both as a command line as well as a logging system enabling you to learn what is happening on your web page such as its structure, javascript errors, network activities, etc.

Table of Content

Types of Console in Safari

Uses of console tab., benefits of safari’s console tab.

• How & When to – Console Tab in Safari

Steps to Use Console Tab in Safari

Various options available in the tool.

• Usage Safari’s Console Tab

The Console in Safari primarily encompasses two types:

• JavaScript Console
• Web Inspector Console

Errors, warnings, and other informational messages pertaining to the running of Java Script on a particular page are presented in the console. On the other hand, the Web Inspector Console provides more comprehensive debugging tools and features for an entire page.

• Efficient Debugging: This makes it easy to find errors while at the same time giving detailed information on what went wrong and also to step through the code line-by-line.
• Real-Time Modifications : This enables developers to test code, CSS, and HTML elements, and see what changes will be observed immediately.
• Performance Optimization: Network traffic and resource load time provide insights into how to improve web page performance.
• Error Identification: It allows you to track down and fix specific situations like JavaScript bugs, resource loading issues, and so on.
• Error Reporting: The console tab on Safari captures diverse categories of messages that could help trace bugs in the code base during the running of a web page. There exist three types of messages known to include errors, warnings, and information that act as vital indicators to developers. Errors indicate significant problems that can prevent the operation of a program. Warnings show less important issues worth noticing during processing. Beyond the behavior of a page, informational messages provide more information. Detailed logs help the programmers trace back these issues to their source hence easy debugging and problem solving.
• Live Interaction: The console tab is not just a reporting feature; instead, it is a place of interaction where one can act on the code and the web page directly. This is a live interaction platform for developers, which they can use to write, run, and test JavaScript commands in real-time. Moreover, it enables one to make minor changes in the code blocks and see how they affect the website. The presence of such an instantaneous feedback loop allows for quick alterations with an opportunity to monitor resulting changes and therefore shorten the process of developing as well as debugging.
• Network Monitoring: The Console tab on Safari has additional features that comprise of other network monitoring tools apart from its roles with Java-Script and code-level debugging. Therefore, this enables the developer to trace and monitor any kind of network activities which include the time duration for every request and response. It gives a thorough understanding of resources loaded and network behaviour giving the developer an idea about the possible page bottlenecks during loading. As such, understanding how networks are busy is critical in order to minimize page load times, while the Console tab provides insights into on-page behavior.

How and When to Use the Console Tab in Safari

• Debugging : In case you encounter a problem while browsing an issue, you should try first checking the Console Tab of safari which will help you find an issue quickly and take care of it faster than any other available solution. It logically tracks errors, warning and info messages, in the way that all possible problems will be clearly identified along with their sources. In this aspect, it simplifies the debugging thereby making the debugging faster and quicker as compared to the earlier methods.
• Code Testing and Development: Developer’s tool, it is essentially like a sandbox that is alive. They can try out some javascripts and also adjust some CSS or HTML in real-time. Through this mechanism, any changes can be immediately tested before being embedded in the real codebase thus guaranteeing a smoother and more approved development.
• Performance Optimization: The Console Tab gives information on various aspects such as network activity, loading resource times, etc., which can help in optimizing webpage performance. Developers will use this technique for monitoring network requests in order to establish loading time as a measure of performance problems which then leads to an improved user experience.

Accessing the Console:

• Navigate to the Webpage: Start with Safari and enter the required web page.
• Access Web Inspector: Click with another button, somewhere in the page. Alternatively, either select “Inspect Element” from the dropdown menu or press Option + Command + I on a Mac computer or Ctrl + Shift + I on a Windows machine to activate the Web Inspector.

Inspect any element on the webpage

Opening console

Interface Exploration:

• Input and Output Sections: Enter and run JS commands here. Output shows logs, errors, and the network data.
• Console Features: Discover all possible devices like logs, events, and messaging screening.

Debugging and Execution:

• Error Troubleshooting: Identify and resolve your errors efficiently via error logs.
• Live Code Modification: Test JavaScript commands, modify HTML/CSS elements, and observe immediate changes on the webpage for quicker code validation.

Resolviing erorrs efficiently

1. Command Line Interface (CLI):

The command line interface enables direct access of the Java script console. It’s one of the most efficient means of running JavaScript operations and debugging programs in real-time. Type your javascript code and hit enter.

Command line interface

2. Error Messages:

Among others, the Console tab is an error center from which such messages are displayed. In case of any error associated with your web page’s JavaScript, this section will provide a list of errors. Error clicking often takes you directly to the offending section of the source code.

Error Messages

3. Console Logs:

Console.log is a method that developers often use for displaying messages in order to diagnose problems. Developers can follow the flow of their code by reading these messages on console tab.

console.logs

4. Event Listeners:

The “Event listeners” tab shows the event listeners to different elements of a page. With this data, you will know which regions react whenever the user taps or clicks on them.

Event listeners

5.Clear console button:

Users can clear the editor tab by clicking this button.

Clear console button

Example Showing Usage in Safari’s Console Tab

What happens when a web page has a JavaScript error? In order to see the error details, trace the source, and correct it, the developers open the Console Tab. The image below illustrates the process of discovering and fixing problem utilizing Console Tab in Safari.

Error detected in console tab

This should give a thorough overview of the Console Tab in Safari, its functionalities, and how developers can effectively leverage it for debugging and optimizing web pages.

The Console Tab in Safari turns out to be a vital companion of developers who are walking through the complicated web development path. It is an important piece of the Web Inspector tool bag that includes error reporting in real time, live interchanging, network watching performance investigation. However, as a means of more than just debugger, Console Tab rises above its status of mere identification and rectification of errors.

Please Login to comment...

Similar reads.

• Apple Safari
• Web Browsers

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

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

• - Fixing Apple Watch False Touch & Ghost Touch Issues
• - How to Connect AirPods to a Smart TV
• - How to Customize the Finder Sidebar on Mac
• - How to Uninstall Apps on MacOS Sonoma & Ventura via System Settings
• - How to Mute a Call on Apple Watch
• - Beta 3 of iOS 17.5, macOS Sonoma 14.5, iPadOS 17.5, Available for Testing
• - Apple Event Set for May 7, New iPads Expected
• - Beta 2 of iOS 17.5, iPadOS 17.5, macOS Sonoma 14.5, Available for Testing
• - Opinion: Shiny Keys on MacBook Air & Pro Are Ugly and Shouldn’t Happen
• - MacOS Ventura 13.6.6 & Safari 17.4.1 Update Available

iPhone / iPad

• - How to Use the Latest GPT 4 & DALL-E 3 Free on iPhone & iPad with Copilot
• - How to Bulk Image Edit on iPhone & iPad wth Copy & Paste Edits to Photos
• - What Does the Bell with Line Through It Mean in Messages? Bell Icon on iPhone, iPad, & Mac Explained
• - iOS 16.7.7 & iPadOS 16.7.7 Released for Older iPhone & iPad Models
• - Fix a Repeating “Trust This Computer” Alert on iPhone & iPad
• - Make a Website Your Mac Wallpaper with Plash
• - 15 Mail Keyboard Shortcuts for Mac
• - How to Use Hover Text on Mac to Magnify On-Screen Text
• - What’s a PXM File & How Do You Open It?
• - Fix “warning: unable to access /Users/Name/.config/git/attributes Permission Denied” Errors

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.

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

How To Change Safari To Mobile View

• Software & Applications
• Browsers & Extensions

Introduction

When browsing the web, it's essential to have a seamless and user-friendly experience, especially when accessing websites on mobile devices. However, there are instances where websites may not automatically display in mobile view, leading to a less optimized browsing experience. Fortunately, Safari, the default web browser for Apple devices, offers a simple solution to this issue. By changing the view to mobile mode, users can enjoy a more responsive and visually appealing layout that is tailored to smaller screens.

In this guide, we will explore the step-by-step process of changing Safari to mobile view, allowing you to effortlessly access websites in a format optimized for mobile devices. Whether you're using an iPhone, iPad, or any other Apple device, this feature ensures that you can enjoy a seamless browsing experience, regardless of the website you're visiting.

By following the instructions outlined in this guide, you will gain valuable insights into leveraging Safari's mobile view feature, empowering you to navigate websites with ease and efficiency. Let's dive into the simple yet impactful steps that will enable you to unlock the full potential of Safari's mobile browsing capabilities.

Step 1: Open Safari on your device

To begin the process of changing Safari to mobile view, the first step is to open the Safari web browser on your Apple device. Whether you're using an iPhone, iPad, or any other Apple product, Safari is the default browser, offering a seamless and intuitive browsing experience. You can easily locate the Safari icon on your device's home screen, typically featuring a compass-like design with blue and white colors.

Upon tapping the Safari icon, the browser will launch, presenting you with a familiar interface that embodies Apple's signature clean and minimalist design. The address bar, located at the top of the screen, allows you to enter website URLs or conduct web searches directly from the browser's home screen. Additionally, Safari offers a range of features and functionalities, including tabbed browsing, bookmarking, and seamless integration with other Apple services.

As Safari opens, you'll notice the familiar layout that provides easy access to essential browsing tools and settings. The user-friendly nature of Safari makes it an ideal choice for navigating the web on Apple devices, offering a cohesive and streamlined experience across various platforms. Whether you're accessing your favorite websites, conducting research, or simply exploring the vast expanse of the internet, Safari serves as a reliable gateway to the digital world.

By opening Safari on your device, you are one step closer to unlocking the full potential of Safari's mobile view feature. This initial step sets the stage for seamlessly transitioning into the subsequent steps, where you will delve into the process of accessing websites in mobile mode, enhancing your browsing experience with optimized layouts and responsive designs.

With Safari now open on your device, you are ready to embark on the journey of transforming your browsing experience into a more mobile-friendly and visually appealing format. The next steps will guide you through the process of accessing websites in mobile view, ensuring that you can enjoy a tailored and optimized browsing experience on your Apple device.

As you proceed to the next steps, remember that Safari's mobile view feature empowers you to interact with websites in a manner that is optimized for smaller screens, offering enhanced usability and visual coherence. Let's continue on this journey to discover the seamless and user-centric capabilities of Safari's mobile browsing mode.

Step 2: Access the website you want to view in mobile mode

Once Safari is open on your Apple device, the next step involves accessing the specific website you wish to view in mobile mode. Whether it's a news site, an e-commerce platform, a blog, or any other web destination, Safari's mobile view feature allows you to seamlessly transition the website's layout to a format optimized for smaller screens.

To access the desired website, simply tap on the address bar at the top of the Safari browser . This action prompts the on-screen keyboard to appear, enabling you to enter the URL of the website you intend to visit. Alternatively, if you have previously bookmarked the website or it appears in your browsing history, you can access it by tapping the corresponding bookmark or history entry.

As you enter the website's URL or select it from your bookmarks or history, Safari initiates the process of loading the web page. The loading indicator, typically represented by a spinning wheel or progress bar, signifies that Safari is retrieving the content of the website and preparing it for display on your device's screen.

Upon successful loading, the website's content becomes visible within the Safari browser, presenting you with the familiar layout and visual elements that define the site. At this stage, you have effectively accessed the website and are poised to proceed with the next steps to enable mobile view.

It's important to note that Safari's mobile view feature is particularly beneficial when accessing websites that may not automatically display in a mobile-optimized format. By taking control of the viewing mode, you can ensure that the website's layout is tailored to the dimensions and capabilities of your Apple device, offering improved readability, navigation, and overall user experience.

As you move forward in the process, the ability to access the website of your choice in preparation for enabling mobile view sets the stage for a seamless transition into the subsequent steps. With the website now accessible within Safari, you are ready to delve into the next phase of activating the mobile view feature, ultimately enhancing your browsing experience and interaction with the website's content.

By accessing the website you wish to view in mobile mode, you are taking a proactive step towards optimizing your browsing experience on your Apple device. The upcoming steps will guide you through the process of activating mobile view, allowing you to witness the transformative impact it has on the website's layout and usability. Let's proceed to the next steps and unlock the full potential of Safari's mobile browsing capabilities.

Step 3: Tap on the "AA" icon in the address bar

Upon accessing the website you wish to view in mobile mode, the next crucial step involves tapping on the "AA" icon located within the address bar of the Safari browser. This seemingly simple yet powerful action serves as the gateway to activating the mobile view feature, enabling you to transform the website's layout into a format optimized for smaller screens.

The "AA" icon, symbolizing the customization and viewing options within Safari, is strategically positioned within the address bar, offering convenient access to a range of display settings and functionalities. By tapping on this icon, you initiate a pivotal interaction that sets in motion the process of tailoring the website's layout to suit the dimensions and capabilities of your Apple device.

Upon tapping the "AA" icon, Safari unveils a dropdown menu that presents a selection of viewing options and site-specific settings. This menu serves as a versatile control center, empowering you to customize the website's display, adjust text size, enable reader mode, and crucially, request the mobile version of the website. The intuitive design and accessibility of this menu reflect Apple's commitment to user-centric experiences, ensuring that users can effortlessly navigate and personalize their browsing environment.

As the dropdown menu appears, you will notice the "Request Mobile Website" option among the available choices. This option holds the key to seamlessly transitioning the website's layout into a mobile-optimized format, enhancing its visual coherence and usability on your Apple device. By selecting "Request Mobile Website," you signal to Safari that you prefer to view the website in a mode tailored for mobile devices, prompting the browser to initiate the transformation process.

The act of tapping on the "AA" icon and selecting "Request Mobile Website" represents a pivotal moment where you exercise control over your browsing experience, harnessing Safari's adaptive capabilities to align the website's presentation with the unique attributes of your device. This deliberate action underscores the user empowerment embedded within Safari's design, allowing you to curate your browsing environment to suit your preferences and needs.

By tapping on the "AA" icon and navigating the dropdown menu to request the mobile version of the website, you are actively shaping your browsing experience, ensuring that the website's layout aligns with the mobile-friendly standards that enhance readability, navigation, and overall user engagement. This proactive step sets the stage for the final phase of the process, where you will witness the seamless transition of the website into a visually optimized and responsive mobile view.

As you proceed to the next steps, the impact of tapping on the "AA" icon and selecting "Request Mobile Website" will become evident, as Safari seamlessly adapts the website's layout to suit the dimensions and capabilities of your Apple device. This transformative process underscores the user-centric ethos of Safari's mobile browsing capabilities, offering a compelling demonstration of its adaptability and responsiveness to user preferences.

The upcoming steps will guide you through the final phase of the process, culminating in the seamless transition to the mobile view of the website. By tapping on the "AA" icon and selecting "Request Mobile Website," you have initiated a significant shift in the website's presentation, setting the stage for an enhanced and tailored browsing experience on your Apple device. Let's proceed to the next steps and witness the culmination of Safari's mobile browsing capabilities as the website seamlessly transitions into a visually optimized mobile view.

Step 4: Select "Request Mobile Website"

After tapping on the "AA" icon within the address bar and unveiling the dropdown menu, the pivotal moment arrives as you select the "Request Mobile Website" option. This deliberate action serves as the catalyst for initiating the seamless transition of the website's layout into a mobile-optimized format, aligning it with the dimensions and capabilities of your Apple device.

By choosing the "Request Mobile Website" option, you communicate your preference for a browsing experience tailored to the mobile environment, signaling to Safari that you seek a visually optimized and responsive layout. This proactive step underscores your control over the browsing experience, leveraging Safari's adaptive capabilities to enhance the website's presentation and usability.

As you select "Request Mobile Website," Safari promptly responds to your preference, triggering a behind-the-scenes process that reconfigures the website's elements to align with mobile-friendly standards. This transformation encompasses various aspects of the website's layout, including text size, image scaling, and overall visual coherence, ensuring that the content is presented in a manner conducive to effortless navigation and enhanced readability on your Apple device.

The selection of "Request Mobile Website" encapsulates the user-centric ethos of Safari's design, empowering you to curate your browsing environment in alignment with your preferences and needs. This feature exemplifies Apple's commitment to delivering a seamless and intuitive browsing experience, where users can effortlessly transition websites into mobile view, fostering a cohesive and visually appealing interaction with online content.

As Safari processes your request for the mobile version of the website, the browser seamlessly orchestrates the transition, culminating in the presentation of the website in a visually optimized and responsive mobile view. This transformative moment underscores the adaptability and responsiveness of Safari's mobile browsing capabilities, showcasing its ability to seamlessly align website layouts with the unique attributes of Apple devices.

With the selection of "Request Mobile Website," you have effectively steered the browsing experience towards a visually optimized and responsive format, ensuring that the website's layout is tailored to the dimensions and capabilities of your Apple device. This proactive step sets the stage for the final phase of the process, where you will witness the culmination of Safari's mobile browsing capabilities as the website seamlessly transitions into a visually optimized mobile view.

Step 5: Refresh the page to see the mobile view

After selecting "Request Mobile Website" and initiating the process of transitioning the website into a mobile-optimized format, the final step involves refreshing the page to witness the seamless transformation into the mobile view. This straightforward yet pivotal action serves as the definitive moment where the website's layout aligns with the dimensions and capabilities of your Apple device, offering an enhanced and tailored browsing experience.

To refresh the page in Safari , simply tap the circular arrow icon located within the address bar or swipe down on the screen to trigger the refresh action. This action prompts Safari to reload the website's content, incorporating the requested mobile view settings into the display. As the page refreshes, the website seamlessly transitions into the visually optimized and responsive mobile view, reflecting the adaptability and user-centric design of Safari's browsing capabilities.

The act of refreshing the page signifies the culmination of the process, where the website's layout is harmoniously tailored to suit the mobile environment, ensuring improved readability, navigation, and overall user engagement. The seamless transition into the mobile view underscores Safari's commitment to delivering a cohesive and visually appealing browsing experience, where websites effortlessly adapt to the unique attributes of Apple devices.

As the page refreshes, you will witness the transformative impact of Safari's mobile view feature, as the website's elements realign to optimize the presentation for smaller screens. Text becomes more legible, images scale appropriately, and the overall layout exudes a cohesive and user-friendly aesthetic, enhancing your interaction with the website's content.

By refreshing the page to see the mobile view, you affirm the proactive steps taken to curate your browsing experience, ensuring that the website's layout seamlessly aligns with the mobile-friendly standards that enhance usability and visual coherence. This final action encapsulates the user empowerment embedded within Safari's design, allowing you to effortlessly transition websites into a visually optimized and responsive mobile view, fostering a seamless and tailored browsing experience on your Apple device.

The culmination of the process, marked by the refreshing of the page, signifies the successful activation of Safari's mobile view feature, showcasing its adaptability and responsiveness to user preferences. As the website seamlessly transitions into the visually optimized mobile view, you are presented with a browsing experience that embodies the seamless integration of user-centric design and technological innovation, elevating your interaction with online content on Apple devices.

In conclusion, the process of changing Safari to mobile view represents a pivotal aspect of enhancing the browsing experience on Apple devices. By following the step-by-step guide outlined in this article, users can seamlessly transition websites into a visually optimized and responsive mobile view, ensuring improved readability, navigation, and overall user engagement.

The journey begins with opening Safari on the device, setting the stage for a seamless transition into the subsequent steps. Accessing the desired website and tapping on the "AA" icon within the address bar signify proactive steps towards curating the browsing experience, culminating in the selection of "Request Mobile Website" to initiate the transformative process.

The final step involves refreshing the page to witness the seamless transition into the mobile view, where the website's layout harmoniously aligns with the dimensions and capabilities of the Apple device. This definitive action underscores Safari's commitment to delivering a cohesive and visually appealing browsing experience, where websites effortlessly adapt to the unique attributes of Apple devices.

By embracing Safari's mobile view feature, users unlock the full potential of their browsing experience, ensuring that websites are presented in a format optimized for smaller screens. The adaptability and responsiveness of Safari's mobile browsing capabilities exemplify Apple's dedication to delivering user-centric design and technological innovation, fostering a seamless and tailored interaction with online content.

Ultimately, the process of changing Safari to mobile view empowers users to curate their browsing environment, ensuring that websites seamlessly align with mobile-friendly standards, enhancing usability and visual coherence. This transformative capability underscores the user empowerment embedded within Safari's design, offering a compelling demonstration of its adaptability and responsiveness to user preferences.

As users navigate the digital landscape on their Apple devices, the ability to effortlessly transition websites into a visually optimized and responsive mobile view underscores the seamless integration of user-centric design and technological innovation, elevating the interaction with online content and fostering a cohesive browsing experience.

In essence, the process of changing Safari to mobile view embodies the seamless fusion of user empowerment, technological adaptability, and visual coherence, ensuring that the browsing experience on Apple devices is tailored to the unique attributes of mobile environments, ultimately enhancing user engagement and interaction with online content.

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

Learn To Convert Scanned Documents Into Editable Text With OCR

Top mini split air conditioner for summer, related post, comfortable and luxurious family life | zero gravity massage chair, when are the halo awards 2024, what is the best halo hair extension, 5 best elegoo mars 3d printer for 2024, 11 amazing flashforge 3d printer creator pro for 2024, 5 amazing formlabs form 2 3d printer for 2024, related posts.

What Is Safari On IPhone

How To Inspect On IPhone Safari

What Happened To Safari Reader In IOS 7

Where Is The Browser On My Phone

How To Open Tiktok Bio Links In Safari

How Do I Refresh The Browser

What Is The Browser On My Phone

How Do I Grant Permission To Use My Webcam

Recent stories.

Fintechs and Traditional Banks: Navigating the Future of Financial Services

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

How to Find the Best Midjourney Alternative in 2024: A Guide to AI Anime Generators

How to Know When it’s the Right Time to Buy Bitcoin

Unleashing Young Geniuses: How Lingokids Makes Learning a Blast!

• 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 Access Console in Safari Browser on Mac

Debugging web pages or working with JavaScript requires access to the browser’s developer tools, often referred to as the “console.” In Safari on a Mac, accessing the console can be slightly different than on other browsers like Chrome or Firefox.

This blog post provides a detailed guide on how to open and use the console in Safari.

Why Access the Console?

Before diving into the steps, let’s look at some reasons you might want to use the console:

• Debugging : It helps in identifying issues with web pages or scripts.
• Monitoring : You can watch network activity and other events in real time.
• Testing : The console lets you run JavaScript commands and see their effects instantly.

Prerequisites

To follow this guide, you’ll need:

• A Mac computer running macOS.
• The Safari browser installed.

Enable Developer Mode

In Safari, the console is a part of the developer tools, which are not visible by default. To enable them:

Step 1: Open Safari Settings

Go to Safari > Settings or press Command + , to open the Preferences panel.

Step 2: Unlock the Advanced Tab

Navigate to the ‘Advanced’ tab.

Step 3: Enable Developer Menu

At the bottom, you’ll find the option “Show Develop menu in menu bar” Check this box.

Access the Console

Once Developer Mode is enabled, you’ll see a new ‘Develop’ option in the Safari menu bar.

Step 1: Open the Web Inspector

Go to Develop > Show Web Inspector or simply press Command + Option + I .

Step 2: Navigate to Console Tab

Inside the Web Inspector, you will see multiple tabs like ‘Elements,’ ‘Console,’ ‘Sources,’ etc. Click on the ‘Console’ tab.

Step 3: Interact with the Console

Here you can type JavaScript commands, check errors, and view logs.

Using the Console

The console in Safari has several useful features:

• Autocomplete : As you type, Safari will suggest possible completions.
• Command History : Use the up and down arrows to navigate through past commands.
• Clear Console : Click the ‘Clear’ button or type clear() to remove existing messages.

Advanced Tips

• Preserve Log : To keep the log when you navigate to a different page, click the ‘Preserve Log upon Navigation’ button (a box icon).
• Filter Messages : Use the filter box to search through existing console messages.

Accessing the console in Safari on a Mac is a simple yet powerful way to interact with web pages and run JavaScript commands. Enabling Developer Mode and familiarizing yourself with the console can offer valuable insights into web development and debugging tasks.

Professionally, I am a software developer. I am also a tech enthusiast and always curious about operating systems, softwares, internet and apps.

Similar Posts

How to Enable Cookies in Safari Browser on Mac

Cookies are small pieces of data that websites store on your device to remember your preferences, login information, and more. While cookies can be a point of concern for privacy, they’re often essential for a fully functional web experience. If you find that certain websites aren’t working correctly or you can’t log in, it may…

How to Convert Video to Audio on Mac

Extracting audio from a video file can be a helpful way to listen to a movie, speech, or music video without having to watch it. While there are numerous tools available for this purpose, this blog post focuses on various methods to convert video to audio on a Mac. This guide will cover using QuickTime…

How to Create Safari Web Apps on Mac: A Simple Guide

With the introduction of macOS Sonoma, Safari now allows you to save any webpage as a web app. This offers a more app-like experience and easy access right from your Mac’s Dock. In this concise guide, we’ll cover how web apps differ from regular webpages, how to create one and tweak its settings. How Does…

Why is the ‘Clear History’ Button in Safari Greyed Out on Mac

Have you ever wanted to clear your Safari browsing history on your Mac, only to find that the ‘Clear History’ button is greyed out? This can be both confusing and frustrating, especially when you want to ensure your privacy or resolve some website issues. In this blog post, we’ll explore why this happens and how…

How to Close All Tabs in Safari Browser on Mac

Navigating the web often results in accumulating a large number of open tabs in your browser, which can clutter your workspace and slow down your system. If you’re using Safari on a Mac, closing all tabs simultaneously can be a big timesaver and help you declutter. This blog post will guide you through various methods…

How to Manage Safari Browser Autofill on Mac

The Safari browser’s Autofill feature is a time-saver for everyone from online shoppers to research enthusiasts. Yet, despite its conveniences, the feature comes with security implications that can’t be ignored. This comprehensive guide delves into what Safari’s Autofill is, how to set it up, manage it, and what to be cautious about. What is Safari…

One Comment

• Pingback: How to Inspect Element in Safari on Mac - MacLifePro

Leave a Reply Cancel reply

How to View Mobile Websites in Desktop Safari on macOS [Tutorial]

In today's guide we will show you how you can open mobile websites on your Mac in Safari running macOS. Let's dive right into it!

Want to View Mobile Websites in Desktop Safari Just Like How You Would See it on iOS or Any Other Mobile Device? - Here's How

Open up Safari on your Mac, type in a URL, hit Return and you'll see a desktop version of the website, as you should. But what if you want to see the mobile version of the website? Sure, you can do so by resizing Safari by dragging inwards from the corners, which is a trick that works on a very few websites by the way, but I'm talking about the real-deal mobile website as you'd see on your iPhone or an Android device. Well, it's pretty easy. Follow the steps below and you'll know it too.

Related Story How to Fix The Ongoing Wi-Fi Connectivity Issues in iOS 17

1. Open up Safari on your Mac.

2. Now click on 'Safari' in the menu bar.

3. Now click on Preferences , then Advanced .

4. At the very bottom you'll see an option called 'See Develop menu in menu bar.'

5. You'll see a brand new entry in the menu bar called Develop . Click on it to open.

6. Now select User Agent then select 'Safari - iPhone.'

7. Now open up any website in Safari and the mobile version will open up.

If you wish to revert the changes, just open up the Develop menu, hover your mouse over User Agent then select Default at the top. That's it.

Now, at this point you must be wondering: why do I wanna open mobile websites in desktop Safari? Well, first of all, you know how to do it. Secondly, if you are a developer, you can test your website without having to open it up on an iPhone immediately. Last but not the least, it's fun! So why not share your newfound knowledge with the people around you, eh?

Deal of the Day

Further Reading

How To Find Out Wi-Fi Router IP Address Using iPhone, iPad Or Mac

Reset macOS Dock to Original Apps Arrangement and Settings [Tutorial]

Use Siri On AirPods Pro Without Saying Hey Siri [Tutorial]

Force Your Mac To Use IPv6 Only [Tutorial]

Trending stories, snapdragon x elite package power can touch nearly 100w, making it more than twice the amount compared to apple’s m3 pro, gigabyte’s “baseline” gaming stability bios option turns intel 14th & 13th gen core i9 cpus into core i7, -30% multi-thread & -10% gaming performance, china’s domestic zhaoxin kx-7000 8-core cpu matches skylake in single-core, beats it in multi-core tests in stock & oc benchmarks, lofree edge review — an engineering marvel, playstation 5 pro 45% faster gpu should be enough to fix issues in games aggressively using dynamic resolution, popular discussions, amd radeon rx 7000 & nvidia geforce rtx 40 gpus available below msrp across all models in germany, intel battlemage “xe2” gpus might be limited to displayport 2.0 uhbr13.5 support, amd strix point halo “55w” ryzen apu spotted, strix point “28w” benchmark leaks out, nvidia’s monopoly over the ai markets isn’t sustainable, analyst worries about increasing gpu power consumption, amd radeon rx 7000 gpu deals: 7900 xtx for $799, 7900 gre for $510, 7800 xt for $457, 7700 xt for $351, 7600 xt for $299.

View console logs from non-Safari browsers on an iPhone

Using the about:inspect special page you can see your website's logs in Chrome or Edge running on iPhone!

This is important because debugging a webpage that's running in Safari on an iPhone isn't hard, but debugging the same webpage when it's running in Chrome or Edge on an iPhone is impossible, and sometimes there are pages that may work in Safari, but not in Chrome or Edge.

The former requires connecting your iPhone to a Mac via USB, enabling the WebInspector tools on the Mac, and connecting from Safari desktop to Safari mobile (learn more at Enabling Web Inspector ).

The latter, however, is not possible. Even if Chrome and Edge use the webkit webview on iPhone, Apple just doesn't let you connect to these webviews from your Mac. Because the webview-version of webkit is subtly different from the version of webkit that powers Safari, it's possible for your webpage to work in Safari but not in Chrome or Edge, even on the same iPhone.

Thankfully, here is a way to at least see your console logs from these browsers, which is better than nothing:

• In Chrome or Edge on iPhone, open a new tab and go to about:inspect .
• Click Start Logging .
• Keep this tab open and open a new one.
• In the new tab, go to the site that you need to test and run the user scenario that will trigger a the console logs you need to see.
• Return to the previous tab. Your logs are now displayed on the about:inspect page.

Last edit: 2/7/2023 - Edit this page

• ALL MOSCOW TOURS
• Getting Russian Visa
• Top 10 Reasons To Go
• Things To Do In Moscow
• Sheremetyevo Airport
• Domodedovo Airport
• Vnukovo Airport
• Airports Transfer
• Layover in Moscow
• Best Moscow Hotels
• Best Moscow Hostels
• Art in Moscow
• Moscow Theatres
• Moscow Parks
• Free Attractions
• Walking Routes
• Sports in Moscow
• Shopping in Moscow
• The Moscow Metro
• Moscow Public Transport
• Taxi in Moscow
• Driving in Moscow
• Moscow Maps & Traffic
• Facts about Moscow – City Factsheet
• Expat Communities
• Groceries in Moscow
• Healthcare in Moscow
• Blogs about Moscow
• Flat Rentals

People & blogs about Moscow

Impressions of an expat.

This blog written in the form of fascinating novel-in-progress. Marco North immerses the readers into particular situations expats can face daily but in literary processed version. The blog is widely popular and even is called as «the work of a modern Chekhov».

Site: http://impressionsofanexpat.blogspot.com

Kidding Herself

Kidding Herself is written from the point of view of a five year old girl and is a child’s guide to going out in Moscow. Herself moved to Moscow from London in 2015 with her British Mama, her Russian Papa and her AngloRusski Big Brother. Find out what she thinks about the Kremlin, Red Square, the zoo, more art galleries than she thinks are strictly necessary and the giant Central Children’s Store.

Site: http://kiddingherself.com

FunnyNotesBlog

Mostly the funny notes of Iva coping with Russian life and culture!

Site: https://funnynotesblog.blogspot.ru

Potty diares

This is a blog of an expat mother of two sons, living in Moscow. The author shares her experience on bringing up kids in Moscow, some useful tips and impressions of the city.

Site: http://potty-diaries.blogspot.co.uk

Arty Generation

This is a site about artists and creative people in Moscow.

Site: https://www.artygeneration.com

If you have a great blog about Moscow to add, send us a link at  [email protected]

Our Private Tours in Moscow

All-in-one moscow essential private tour, moscow metro & stalin skyscrapers private tour, moscow art & design private tour, soviet moscow historical & heritage private tour, gastronomic moscow private tour, «day two» moscow private tour, layover in moscow tailor-made private tour, whole day in moscow private tour, tour guide jobs →.

Every year we host more and more private tours in English, Russian and other languages for travelers from all over the world. They need best service, amazing stories and deep history knowledge. If you want to become our guide, please write us.

Contact Info

+7 495 166-72-69

[email protected]

119019 Moscow, Russia, Filippovskiy per. 7, 1

Mon - Sun 10.00 - 18.00