toggle device toolbar safari

Stack Exchange Network

Stack Exchange network consists of 183 Q&A communities including Stack Overflow , the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

How can I quickly open a mobile view of a page in a desktop browser?

Since we're now in a mobile-first world, it becomes more and more important to be able to test websites easily on mobile phones, or on emulated mobile phones. I collaborate with people who work on websites and social media offerings, and I would like to encourage them to regularly open websites from their desktop browsers in a mobile view. I'm specifically thinking of the browser's built-in "mobile view" feature, which is often hidden among all the other developer tools a browser provides, but I'm happy to consider anything which is just as quick to set up.

How can you open a mobile view of a website from a desktop browser?

• 23 "Since we're now in a mobile-first world" Woah there a minute... context is for kings. –  Lightness Races in Orbit Feb 6, 2018 at 12:49
• 3 Just a comment - don't know the context really, but if I was asked to be opening webpages from my desktop/laptop in mobile view first ....what's the point of using the desktop? I hope by "encourage", you're not forcing it via some code or other method. Especially since many webpages that do format for mobile are pared down quite a bit and don't have full functionality. –  BruceWayne Feb 6, 2018 at 16:27
• 1 Add a change user agent or similar extension or plug in to your browser, and set a smart phone user agent. –  Salman A Feb 6, 2018 at 17:10
• 1 “I would like to encourage people to regularly open websites from their desktop browsers in a mobile view.” ...That's goofy. And waste all that desktop screen real estate? Desktop and mobile both have their place, and that's why responsive solutions have been developed. Let's deliver the best experience possible for every user, and let people browse on the device that's most comfortable for them. Anyway, valid question, as web designers and developers need to emulate multiple devices when building sites. –  Mentalist Feb 7, 2018 at 2:52
• 2 @Mentalist I meant people who are working on websites and social media offerings. –  Flimm Feb 7, 2018 at 7:28

6 Answers 6

• In Windows/Linux, press Ctrl + Shift + M
• In macOS, press option + command + M

You can also find the menu item under ("Tools"), "Web Developer", "Responsive Design Mode".

Chrome and Edge:

You need to have "Developer Tools" open first:

• In Windows/Linux, press Ctrl + Shift + I or just F12
• In macOS, press option + command + I

Once developer tools is open and focused, you can toggle device emulation:

• In macOS, press command + shift + M

There is a small button in the developer tools toolbar that enables device emulation, if you prefer to click a button rather than press a keyboard shortcut.

It looks like Apple have disabled by default the keyboard shortcut for entering responsive design mode. You can follow this tutorial on configuring a keyboard shortcut for it .

You can find the menu item by clicking "Develop", "Enter Responsive Design Mode". If you can't see the "Develop" menu item, you need to enable it by opening "Preferences", "Advanced", and ticking "Show Develop menu in menu bar".

• 1 Note that ctrl shift M works only if developer tools are already open –  Naramsim Feb 6, 2018 at 10:29
• 3 @Naramsim Thanks. That only applies to Chrome. I've edited my answer. –  Flimm Feb 6, 2018 at 11:19
• 3 For Windows/Chrome, F12 is a potentially easier way to get to Dev Tools... although if the next keystroke is going to be Ctrl-Shift-M, I suppose starting with Ctrl-Shift-I may be more logical. –  sǝɯɐſ Feb 6, 2018 at 13:21
• I believe on previous versions of Safari Cmd+Shift+R would open responsive design mode. Seems to not exist on latest version unless you manually bind it –  Downgoat Feb 6, 2018 at 23:52
• 1 Chrome remembers if you wanted a mobile preview, so once you've enabled it, you can toggle between mobile/desktop simply using F12 –  Pieter De Bie Feb 8, 2018 at 12:26

Flimm’s answer is 100% correct. Just in case remembering the shortcuts is too much of a hassle, it’s this blue button in the Developer Tools to toggle between the web view and mobile/tablet view:

Or with Firefox:

After enabling the device toolbar, you can then choose the make and model of the device you wish to emulate from the dropdown menu.

• 1 What piece of software does the first part refer to? –  Kamil Maciorowski Feb 7, 2018 at 5:22
• @KamilMaciorowski DevTools is the developer tool found in Chrome and Opera. –  OptimusCrime Feb 7, 2018 at 7:46
• @KamilMaciorowski This is not a software, this is available on any of your web browser. Specifically if you're using chrome, right click on any window and click on inspect and you will see this window in your browser docked below or to the right of the browser. These are more commonly known as Dev Tools. –  Shobhit Garg Feb 7, 2018 at 16:13
• @Shobbit Garg Is that the windows, which opens when I press CTRL + Shift + C? –  daniel.heydebreck Feb 8, 2018 at 8:22
• @daniel.neumann Unfortunately I use mac, so I cannot test and see what happens when you press those keys. But referring to the shortcuts listed above, this window should open by pressing "ctrl + shift + I" on chrome, "ctrl + shift + M" on firefox or pressing f12 on IE/Edge. –  Shobhit Garg Feb 8, 2018 at 15:04

For the purpose of testing, i use the following websites :-

• http://www.jamus.co.uk/demos/rwd-demonstrations/
• http://mattkersley.com/responsive/

Both of the above sites allow me to view my web application in multiple device widths.

You can set the user agent and window size from the command line or launch config of a shortcut.

For example:

& "C:\Program Files\Google\Chrome\Application\chrome.exe" --new-window --window-size=375,812 --user-agent="Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.67 Mobile Safari/537.36" --user-data-dir=C:\workspace\tmp\chrome https://google.com

The --user-data flag is mandatory to make this work . Create a folder for it.

Add a "user agent switcher" extension in your browser and specify a mobile user agent. If the website is smart enough it will serve you mobile optimized version.

I will not recommend any specific extension. The ideal one should have presets for mobile browsers built-in and the ability to enable or disable user agent switching on per-website basis.

• 1 This is incorrect. Mobile layouts should work based on device / screen dimensions via CSS media queries, not user agent strings - it's not 2006 any more. –  PiX06 Feb 7, 2018 at 13:51
• Most browsers' tool that allows a mobile view also lets you set a user-agent at the same time. –  Flimm Feb 7, 2018 at 14:33
• 1 @PiX06 then no effort is necessary. Just resize the browser window! –  Salman A Feb 7, 2018 at 15:04
• Unfortunately, I find myself with many questions: If I'm resizing the browser window anyway, why do I need to bother with user agents? To which dimensions should I resize the window? How do I measure the window? –  Mathieu K. Feb 9, 2018 at 5:26

The above answers are great for those who like to stick with a single browser, or have limited desktop "workspace" (eg. single monitor less than 21" at a low res).

There is actually an even more interesting solution I've recently discovered: https://blisk.io/

I will refrain from using the (sort of) "affiliate link" for any personal gain (There is a "token based system" that you can earn credits to get things like free "team cloud space" & "premium features" to use with it), but Blisk is actually pretty snazzy.

This Chromium-based "browser built for development" provides a multitude of ways to demo the page in various devices with a vertical "pane" on the LEFT side, much like you see Chrome Developer Tools default to the right vertical column.

It's work a look. Though there are some limits to its "freemium extended functionality", it still works very well to "preview" both the PC and Mobile versions of your pages / sites in a side-by-side comparison. The paid features seem pretty rad too if you work in remote teams (though I personally think it need a better "test drive" program before hooking people on the monthly cost).

Full disclosure: there is an EXTREMELY annoying "time limit" per day on the mobile preview part (toggles open/closed from the icon to the right of the address bar - change the "device preview" from the tiny link-to-the-menu in the top right corner "Show device list").

BliskDemoScreenshot

Also: I've found a few really nifty tricks with Browser Extensions like the 2 different "User-Agent Switcher"'s from Chrome/Firefox that go a bit further by letting you toggle between browser user-agent strings of various Operating Systems AND the browsers for them.

I prefer the "esolutions.se" flavor because of how easy it is to add custom user-agent strings to the list for as many customizations as you could ever want (runs offline also, which can be handy in certain cases): https://chrome.google.com/webstore/detail/user-agent-switcher/clddifkhlkcojbojppdojfeeikdkgiae

Anyway, that's my 2 cents. :P

• not available for Linux :-( –  david.perez Mar 3, 2020 at 14:52

You must log in to answer this question.

Not the answer you're looking for browse other questions tagged browser ..

• The Overflow Blog
• How to succeed as a data engineer without the burnout
• How do you evaluate an LLM? Try an LLM.
• Featured on Meta
• New Focus Styles & Updated Styling for Button Groups
• Upcoming initiatives on Stack Overflow and across the Stack Exchange network
• Google Cloud will be Sponsoring Super User SE

Hot Network Questions

• How do Biblical inerrantists explain disagreements about the interpretation of the Bible?
• What are some simple problems that calculators get wrong?
• How do Christians address the "Bigfoot" analogy presented by skeptics in relation to the resurrection of Jesus?
• Will SpaceX ever make a Heavy version of Starship Super Heavy
• How to make the numbering non-italic in a theorem environment?
• Finding a nilpotent, infinite, f.g., virtually abelian, irreducible integer matrix group
• Ambiguous stroke order/count for 離?
• Run function at end of pipe
• Ubuntu Jammy (in WSL): adding armhf arch, can't find packages or repositories
• Given gravitational lensing, why would black holes visually appear black?
• Is it possible to have the asymptotics of this function?
• Finding right screws for electrical box
• Quantikz not compatible with tikz-cd?
• Short story; a journalist visits a hospital with patients who are mentally ill. One patient pretends to use invisible tools to build a machine
• Simplest way to create a clickable list in MacOS that will cause selected programs to run
• RAW, how does Full Power Leaps work when you crash into something before the movement ends?
• Is the principle of uniformity of nature an abduction or an analogy?
• Ways to Say "Forcibly Inducted"
• I made a 3-phase power rectifier circuit with "ideal" diodes. Is there anything I should change?
• A visualization for the quotient rule
• Fitting a disk in a non-polygonal region
• What power lets you modify game actions? (Power Profiles are weird)
• How to make a device to randomly choose one of three possibilities, with caveat that sometimes one of them is not available?
• Prepositions after, before etc. as temporal determiners

Simulate different devices and screen sizes

All browser DevTools have a built-in mode that you can use to test a webpage under different screen sizes and device capabilities.

As a web developer, it is very important to realize that your website won't only be used on one type of device. People browse the web with many different device types, from small phones, to large desktop monitors, and everything in between.

Not only do the devices people use have different screen sizes, but they can also have different pixel densities, support for touch input, network speeds, and more.

Browser DevTools make it easy to simulate how a webpage might render under different screen sizes and device capabilities. However, note that this is only a simulation , and you should always test your webpage on the real device too. For example, even if the device mode in Chrome DevTools lets you simulate an iPhone screen, it doesn't actually render the webpage with the same rendering engine as the iPhone would. So, always test on the real device too.

Available features #

This simulation mode comes with the following features (more might be available depending on the browser you're using):

• Resize the simulated viewport size by hand.
• Choose one of the pre-defined devices to simulate.
• Create your own simulated devices .
• Capture screenshots .
• Throttle the network speed to test your website on slower connections .

Start simulating #

In chrome #.

To enable the device mode in Chrome DevTools, click the Toggle Device Toolbar button or press Ctrl+Shift+M (or Cmd+Shift+M on macOS).

To enable the device mode in Edge DevTools, click the Toggle device emulation button or press Ctrl+Shift+M (or Cmd+Shift+M on macOS).

In Firefox #

In Firefox, you don't need DevTools to be opened to simulate devices. Click Open application menu > More tools > Responsive design mode , or press Ctrl+Shift+M (or Cmd+Shift+M on macOS).

Or, if you're in DevTools, click the Responsive Design Mode button, or press Ctrl+Shift+M (or Cmd+Shift+M on macOS).

In Safari #

In Safari, you don't need DevTools to be opened to simulate devices. Click Develop in Safari's menu bar, and then click Enter Responsive Design Mode , or press Ctrl+Command+R .

If you aren't seeing the Develop menu item, enable it first (this only needs to be done once):

• In Safari, in the menu bar, go to Safari > Settings .
• Select the Advanced tab.
• Click Show features for web developers .

In Polypane #

Simulating different screen sizes is Polypane's default behavior. Polypane is the only browser DevTools that allows you to see multiple screen sizes side by side too. To learn more, see Simulate multiple devices that are kept in sync .

Last edit: 10/19/2022 - Edit this page

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

Apple’s net browser Safari, isn’t only for browsing the internet. It’s additionally absolutely top for growing web sites. Safari has specialised equipment that assist humans developing web sites to maintain, troubleshoot, and enhance overall performance. In this complete guide, we’ll take a more in-depth look at those Safari tools, discussing what they could do, why they’re beneficial, and the way you may use them to make your website perform even better.

Table of Content

Types of safari development tools, features of safari development tools, benefits of safari development tools, when to use safari development tools, steps to use safari development tools.

There are primary varieties of equipment for Safari net development:

1. Web Inspector:

This is the principle device for internet improvement in Safari. It enables you appearance intently at net pages and find and fasten issues. You can test elements, styles, performance, and community pastime.

2. Safari Technology Preview:

This is like a special web browser from Apple for builders. It has the most recent web stuff and matters which might be still being examined. It’s now not precisely a tool for constructing web sites, however it we could builders strive out the cutting-edge web ideas.

Let’s explore the basics of the Safari development tool:

1. Features of the web monitor:

• Element Inspection: You can inspect HTML elements, view their properties, and see what CSS styles have been applied to them.
• JavaScript Debugger: Find and fix problems in your JavaScript code using tools like breakpoints, watch lists, and call stack information.
• Console: File messages, errors, and warnings from JavaScript or other web technologies.
• Network tab: View network requests, analyze their details, and study response data.
• Resources: Look for attachments such as images, text, and style sheets.
• Storage: Manage cookies, local storage, and session storage for testing and troubleshooting purposes.
• Performance Profiler : Analyze how well your web application is performing and look for areas that can be improved.
• Timeline: Record and study timeline data to improve the efficiency of the translation and scripting process.
• Audits: Conduct tests to find common network performance and access problems.

2. Safari Technology Preview Highlights:

• Discover web updates: Get a sneak peek at the latest web technologies and cool features that haven’t been available in regular Safari yet.
• Try new ideas: Try the test kits and tell Apple what you think. Your feedback can influence how web development proceeds.

Now that we know what Safari’s development tools are capable of, let’s take a look at why they’re so helpful:

• Works on Apple devices: The Safari development tool works best on Apple computers and iPhones/iPads. This means that your web applications will run smoothly on Apple gadgets.
• Helps diagnose and troubleshoot problems : Safari has powerful tools for diagnosing and troubleshooting problems with JavaScript and the performance of your web application. This makes troubleshooting easier.
• Real-time testing: You can instantly see what’s happening on your network. You can track network requests, track things, and see how your app is doing in real time.
• Find ways to improve: Safari’s auditing tool and performance profiler can help you find ways to make your website perform even better. This improves the user experience of your app.

Knowing when to use Safari development tools is crucial for effective web development:

• Debugging: You can use Safari JavaScript debugging and console to troubleshoot your web application. It helps you identify problems in your code by letting you pause at specific points, look at variables, and go through your code step by step.
• Speed ​​improvements: Safari’s performance profiler and timeline features help make your web application faster and more efficient. They identify slow areas of your app so that you can improve its performance.
• Testing in different browsers: Although Safari tools are designed for Safari, they can be helpful for testing your web applications in different browsers. This way you can ensure that your website works well for users of different web browsers.
• Mobile Development: Safari has excellent tools for creating web pages that work well on mobile devices. You can use responsive design mode and mobile emulation tools to ensure that your web app looks and works well on smartphones and tablets.

In a nutshell, here are the steps to make the most of Safari’s development tools:

Step 1: Open the web monitor, Right-click your web browser and select “Inspect Element”, or press Option + Command + I .

Step 1: Open the web monitor

Step 2: Explore the various tabs in the Web Inspector, such as Elements, Console, Sources, Network, and so on.

Step 2: Find the Web Inspector Tabs

Step 3: Review the HTML Items: Click the Elements tab to view the HTML elements and view their styles.

Step 3: Review the HTML Items

Step 4: Go to the Sources tab to set breakpoints, debug JavaScript code, and understand how to call functions.

Step 5: Check network activity,On the Network tab, you can see what’s happening with network requests, view request headers, and manage response data.

Step 5: Check network activity

Step 6: Improve Performance, Use the Performance and Timeline tabs to analyze and speed up your web application.

Step 6: Improve Performance

Scenario: You are creating a functional website and want to make sure it looks good and works well on desktop and mobile devices.

Steps to follow:

• Step 1: Open Safari and go to your web browser.
• Step 2: Right-click the page and select “Inspect Element” or press Option + Command + I .
• Step 3: Click the “Toggle device toolbar” icon (smartphone and tablet icon) to enable responsive design mode in Web Inspector.
• Step 4: Select a device from the dropdown menu or enter custom dimensions to simulate different screen sizes.
• Step 5: As you adjust the viewport size, observe how your website behaves in real time.

The Safari development tool is really important for web developers building websites and apps for Apple devices. These tools have many useful features such as viewing elements, editing JavaScript, monitoring network activity, checking the proper functioning of your website or app, and more. If you learn how to use these tools use and add to your productivity, your web services are more efficient , trouble-free, different -Helps to ensure that they look good on different devices So, whether you are creating a simple blog or a beautiful app is, Safari development tools are essential to succeed in the ever-changing world of web development.

Please Login to comment...

Similar reads.

• Apple Safari
• Geeks Premier League 2023
• Geeks Premier League
• Web Browsers
• How to Organize Your Digital Files with Cloud Storage and Automation
• 10 Best Blender Alternatives for 3D Modeling in 2024
• How to Transfer Photos From iPhone to iPhone
• What are Tiktok AI Avatars?
• 30 OOPs Interview Questions and Answers (2024)

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

How to View Your Website on Mobile in 30 Seconds or Less

Ever wonder what your website looks like on a smartphone? There’s a simple way to do it even if you don’t have your phone handy. Use your computer. It’s easy to do and we’ll show you how.

And if you want to see the desktop view of your website on your phone? We’ll walk you through that, too. We’ll even show you the options for different ways to view your site using website builder tools.

Use Desktop Browser View to See the Mobile Version of Your Site

Popular browsers like Google Chrome and Safari have many semi-secret features that most casual users don’t know about. One of those is the ability to view the mobile version of a website from your desktop computer.

Why should you care? According to analytics firm Statista, nearly 60 percent of website traffic comes from people using mobile devices—and this doesn’t even include those using tablets. Knowing this, you can’t afford to give your mobile visitors a subpar experience.

If you have or manage a website, especially one with an ecommerce component, you want to make sure your site is mobile-friendly . The easiest way to identify issues is to see how your site looks when viewed on a smartphone. The more responsive your site , the better the visitor experience.

Every popular browser lets you see your site through the “eyes” of a mobile phone. While the interfaces vary among browsers, all make it easy to do. Let’s take a look at how this works in two of the most popular browsers, Google Chrome and Safari.

View your mobile site on Google Chrome desktop browser

Step 1 – Open the Inspect Element tool

There are four ways to access the Inspect Element tool in Google Chrome.

Option 1: Open Chrome, navigate to your site, then right-click anywhere on the page. In the drop-down menu that appears, select Inspect .

Option 2: In the top navigation menu, select View > Developer > Inspect Elements.

Option 3: Select the three-dot icon in the top right corner of the Chrome window, then choose More Tools > Developer Tools .

Option 4: Use a keyboard shortcut. On Windows, it is Control+Shift+C , and on Mac Command+Option+C .

Step 2 – Activate the Toggle Device Toolbar

Once you open the Inspect Element tool, the screen is then divided into two parts. One side will show your site and the other side is filled with code and technical data.

On the side of the screen with the code, navigate to the Toggle Device Toolbar icon in the upper left corner. It looks like a desktop monitor with a mobile phone icon in front of it. This is the icon you click to change the view of your site on the other side of the screen.

Click the icon to go back and forth between mobile and desktop view. The image on the left will change to reflect the current view.

Here’s how the screen looks when you choose mobile view. You’ll also see a new set of icons above the mobile image. More on that in the next step.

Step 3 – Select device to preview

Now you can explore how your site looks in different mobile scenarios. You can choose preset options or customize your own.

When you select the Dimensions: Responsive dropdown menu, you can choose a device-specific option.

You can also edit this list to add or delete devices. This lets you fully customize the website views on mobile devices that matter most to you.

You can also fully customize the mobile size by manually changing the width and height dimensions.

You can even test different internet speed scenarios with the Throttling dropdown menu. If you’re not familiar with bandwidth throttling, it is a tool some web hosting providers use to control shared server resources.

View your mobile site on Safari desktop browser

You must enable Safari’s developer tools for this to work. In MacOS Sonoma, do this by choosing Safari > Settings from the top navigation menu, then toggle the Show features for web developers checkbox options to ON. You’ll see Develop added to the top navigation menu.

Step 1 – Open Inspect Element tool in Safari

There are three ways to open the Inspect Element tool in Safari.

Option 1: Navigate to your site, then right-click anywhere on the page and select Inspect Element from the drop-down menu.

Option 2: From the top navigation menu, select Develop > Show Web Inspector .

Option 3: Use the keyboard shortcut Command + Option + I (capital letter ‘i”).

Step 2 – View device display options

Once you’re in Web Inspector mode, the Safari screen is divided in half. One side displays your site, and the other shows code and other developer-specific information.

Don’t be alarmed. It may look intimidating, but unless you plan to tweak HTML or CSS code, you don’t need to go into Web Inspector mode at all. Safari gives you a direct menu option for viewing your site on mobile.

Jump straight into mobile view by choosing Develop > Enter Responsive Design Mode from the top navigation menu.

This is how the screen will look after you select Enter Responsive Design Mode without first opening Web Inspector .

Here you can view your website in different iOS settings. Choose from predefined settings or customize as needed.

Enable Desktop View on Your Mobile Browser

More and more people use their smartphones to shop and conduct day-to-day activities. So it’s no surprise that website owners must keep the latest mobile trends in mind and optimize their site for mobile traffic.

In the quest to embrace mobile marketing strategies, though, you don’t want to lose sight of the visitor accessing your site the old-fashioned way—with their computer. You want your site optimized for both.

It’s easy to check how your website looks in desktop view even if you only have your mobile device handy. Whether you’re using an iPhone or Android device, here’s how to do it.

Access desktop view on iPhone

The process varies slightly depending on which browser you use on your iPhone. Here we’ll show you how to do it using two of the most popular—Safari and Google Chrome.

View Desktop Mode on Safari Mobile Browser

Open the Safari browser on your phone and navigate to your site. Select the Aa icon next to your site’s url. Then select Request Desktop Website from the popup menu. You will now see your site as it appears on a desktop browser.

Desktop Mode on Chrome

Open the Chrome browser on your iPhone and navigate to your site. Select the three dots icon in the lower right corner. Then select Request Desktop Site from the popup menu.

Access desktop view on Android

Switching to desktop mode in Google Chrome on your Android device is easy.

Open Chrome on your phone and navigate to your website. In the address bar, tap the three vertical dots (the Kebab menu), then check the box for Desktop site . That’s all there is to it.

Other Ways to View Your Website On Mobile

There is another handy way to check the responsiveness of your site. Whether you’re using WordPress , Wix , or any of the other top website builders out there , most have a feature to see your site in mobile, tablet, or desktop view.

In WordPress, for example, you can change the view through the sidebar menu on your Admin Dashboard. On the sidebar menu, choose Advanced > Customize , then look for the icons at the bottom of the left side of the screen. You can toggle between desktop, tablet, and mobile view.

This is a convenient way to make tweaks in real-time to optimize the mobile experience for your visitors.

Privacy Overview

• Español – América Latina
• Português – Brasil
• Tiếng Việt
• More panels

Simulate mobile devices with device mode

Use device mode to approximate how your page looks and performs on a mobile device.

Device mode is the name for a collection of features in Chrome DevTools that help you simulate mobile devices. These features include:

• Simulating a mobile viewport
• Throttling the CPU
• Simulating geolocation
• Setting orientation

Limitations

Think of device mode as a first-order approximation of how your page looks and feels on a mobile device. With device mode you don't actually run your code on a mobile device. You simulate the mobile user experience from your laptop or desktop.

There are some aspects of mobile devices that DevTools will never be able to simulate. For example, the architecture of mobile CPUs is very different than the architecture of laptop or desktop CPUs. When in doubt, your best bet is to actually run your page on a mobile device. Use Remote Debugging to view, change, debug, and profile a page's code from your laptop or desktop while it actually runs on a mobile device.

Simulate a mobile viewport

Click devices Toggle device toolbar to open a toolbar that lets you simulate a mobile viewport.

By default, the device toolbar opens in viewport with Dimensions set to Responsive .

Responsive Viewport Mode

Drag the handles to resize the viewport to whatever dimensions you need. Or, enter specific values in the width and height boxes. In this example, the width is set to 480 and the height is set to 415 .

Alternatively, use the width presets bar to set the width with a click to one of the following:

Show media queries

DevTools now displays two additional bars above the viewport:

• The blue bar with max-width breakpoints.
• The orange bar with min-width breakpoints.

Click between breakpoints to change the viewport's width so that the breakpoint gets triggered.

To find the corresponding @media declaration, right-click between breakpoints and select Reveal in source code . DevTools opens the Sources panel at the corresponding line in the Editor .

Set device pixel ratio

Device pixel ratio (DPR) is the ratio between physical pixels on the hardware screen and logical (CSS) pixels. In other words, DPR tells Chrome how many screen pixels to use to draw a CSS pixel. Chrome uses the DPR value when drawing on HiDPI (High Dots Per Inch) displays.

To set a DPR value:

In the action bar at the top of the viewport, select a DPR value from the new DPR drop-down menu.

Set the device type

Use the Device Type list to simulate a mobile device or desktop device.

The next table describes the differences between the options. Rendering method refers to whether Chrome renders the page as a mobile or desktop viewport. Cursor icon refers to what type of cursor you see when you hover over the page. Events fired refers to whether the page fires touch or click events when you interact with the page.

Device-specific mode

To simulate the dimensions of a specific mobile device, select the device from the Dimensions list.

For more information, see Add a custom mobile device .

Rotate the viewport to landscape orientation

Click screen_rotation Rotate to rotate the viewport to landscape orientation.

See also Set orientation .

Toggle dual-screen mode

Some devices, for example, Surface Duo, have two screens and two ways to use them: with one or both screens active.

To toggle between dual and single screen, click the devices_fold Toggle dual-screen mode in the toolbar.

Set device posture

Some devices, for example, Asus Zenbook Fold, have foldable screens. Such screens have a posture: continuous or folded. The continuous posture refers to a "flat" position and folded forms an angle between sections of the display.

To set the device posture, select Continuous or Folded from the corresponding drop-down menu in the toolbar.

Show device frame

In this example, DevTools shows the frame for the Nest Hub.

Add a custom mobile device

To add a custom device:

Click the Device list and then select Edit .

On the Settings > Devices tab, either choose a device from the list of supported ones or click Add custom device to add your own.

If you're adding your own, enter a name, width, and height for the device, then click Add .

The device pixel ratio , user agent string , and device type fields are optional. The device type field is the list that is set to Mobile by default.

Back in the viewport, select the newly added device from the Dimensions list.

Show rulers

DevTools shows rulers at the top and to the left of the viewport.

Click the rulers at specific marks to set the viewport's width and height.

Zoom the viewport

Use the Zoom list to zoom in or out.

Capture a screenshot

To capture a screenshot of the whole page including the content that isn't visible in the viewport, select Capture a full size screenshot from the same menu.

Throttle the network and CPU

To throttle both the network and CPU, select Mid-tier mobile or Low-end mobile from the Throttle list.

Mid-tier mobile simulates fast 3G and throttles your CPU so that it is 4 times slower than normal. Low-end mobile simulates slow 3G and throttles your CPU 6 times slower than normal. Keep in mind that the throttling is relative to the normal capability of your laptop or desktop.

Note that the Throttle list will be hidden if your Device toolbar is narrow.

Throttle the CPU only

Throttle the network only

To throttle the network only and not the CPU, go the Network panel and select Fast 3G or Slow 3G from the Throttle list.

Or press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, ChromeOS) to open the Command Menu, type 3G , and select Enable fast 3G throttling or Enable slow 3G throttling .

Emulate sensors

Use the Sensors tab to override geolocation, simulate device orientation, force touch, and emulate idle state.

The next sections provide a quick look on how to override geolocation and set device orientation. For a complete list of features, see Emulate device sensors .

Override geolocation

Or press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, ChromeOS) to open the Command Menu, type Sensors , and then select Show Sensors .

Select one of the presets from the Location list, or select Other... to enter your own coordinates, or select Location unavailable to test out how your page behaves when geolocation is in an error state.

Set orientation

Select one of the presets from the Orientation list or select Custom orientation to set your own alpha, beta, and gamma values.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2024-02-20 UTC.

How to Simulate Mobile Devices with Device Mode in Chrome

Share this article

Developer Tools

Touch-enabled emulation, the mobile emulator device toolbar, css media query bars, emulated device options, bandwidth throttling simulation, emulated mobile sensors, remote real device debugging.

• Great! I Don’t Need Any Devices Now!

FAQs About Chrome Mobile Emulator

Website testing has become increasingly complex. The days of checking functionality in a couple of browsers are long gone. Your latest masterpiece must be rigorously evaluated on a range of mobile, tablet and desktop devices with differing OSs, screen resolutions, and capabilities. In extreme cases, it could take as long as the original development.

The process is complicated further by touch screens, hybrid devices, and high-density displays. If you’re coding on a regular PC with a mouse and keyboard, it’s difficult to appreciate how your interface will operate. Features such as mouse hover won’t necessarily work and your application could be inoperable. But how can you test your code on a range of operating systems during development and avoid the pain of managing and switching between multiple devices?

Fortunately, all modern browsers offer mobile emulation tools, and one of the best can be found in the Chrome browser. It can help identify early problems without leaving the comfort of your PC and development environment.

Start Chrome, navigate to the web page you want to test and open the Developer Tools (Menu > Tools > Developer Tools, Cmd + Opt + I on macOS or F12 / Ctrl + Shift + I on Windows and Linux).

You can now enable the browser emulator by clicking the Toggle device toolbar icon in the top left:

A device simulation will now appear:

While not quite an iOS or Android emulator, a number of mobile devices running both platforms can be selected as presets. The dimensions of the emulated screen can be changed when Responsive is selected as the device type.

Move your mouse over the device to see a circular “touch” cursor. This will react to touch-based JavaScript events such as touchstart , touchmove and touchend . Mouse-specific events and CSS effects should not occur.

Hold down Shift then click and move your mouse to emulate pinch zooming.

It’s worth spending a little time familiarizing yourself with the toolbar and menu above the Chrome emulator:

The default controls are:

• the device type (or Responsive )
• the current resolution
• the scale (the screen can be zoomed in or out to fit better in the emulator pane)
• the network speed
• a portrait/landscape toggle button

The three-dot menu allows you to show or hide additional controls:

• the device frame (if available, a graphic of the phone or tablet)
• CSS media query bars (see below )
• a pixel ruler
• add device pixel ratios
• add device types
• capture a screenshot (including the device frame if shown)
• capture a full-page screen shot

Select Show media queries from the three-dot menu to view a graphical color-coded representation of all media queries set in the CSS.

• BLUE: queries which target a maximum width
• GREEN: queries which target widths within a range
• ORANGE: queries which target a minimum width

Any bar can be clicked to set the emulator screen to that width.

The drop-down menu on the left allows you to select a device. Several dozen presets are provided for popular smart phones and tablets, including iPhones, iPads, Kindles, Nexus tablets, Samsung Galaxy, and so on.

Not all devices are presented at once. Click Edit… at the bottom of the device drop-down or click the DevTools Settings cog icon and choose the Devices tab:

You can enable or disable devices or enter your own by defining:

• a classification such as “Mobile” or “Tablet”
• a browser user agent string
• the device resolution
• and pixel ratio (such as 2 for iPhone Retina screens where the pixel density is twice as high as the reported viewport resolution)

All browsers identify themselves with a user agent string sent on every HTTP header. This can be examined on the client or server-side and, during the dark days of web development, would be used to modify or provide a different user experience. In extreme cases, the viewer would be directed to a different site. The technique was always flawed but has become largely redundant owing to Responsive Web Design techniques, and it was unsustainable given the number of devices available on the market.

The throttling drop-down allows you to emulate slow network speeds typically experienced on mobile connections or dodgy hotel and airport Wi-Fi! You can use this to ensure your site or application loads quickly and remains responsive in all environments.

The throttling drop-down is available in the Network tab and Chrome’s device toolbar. You can set your own bandwidth configuration by clicking the DevTools Settings cog icon and choosing the Throttling tab:

Click Add custom profile then enter:

• the profile name
• the download speed in kilobits per second
• the upload speed in kilobits per second
• the latency in milliseconds (the typical delay when making a network request)

Smartphones and tablets often have sensors such as GPS, gyroscopes, and accelerometers, which aren’t normally present in desktop devices. These can be emulated in Chrome by choosing More tools , then Sensors from the Developer Tools main three-dot menu:

A new pane appears which allows you to define:

• The current latitude and longitude or select a major city from the drop-down. You can also select Location unavailable to emulate how your application reacts when the device cannot obtain a reliable GPS signal.
• The orientation. Several presets are available or you can move the device image by clicking and dragging.
• The touch response.
• An idle state to examine how an app reacts to a lock screen.

Finally, Google Chrome allows you to connect a real Android device via USB for remote device debugging. Enter in the address bar, ensure Discover USB devices is checked, then attach your phone or tablet and follow the instructions.

Chrome allows you to set up port forwarding so you can navigate to a web address on your local server on the device. Chrome’s preview pane shows a synchronized view of the device screen and you can interact either using the device or Chrome itself.

The full range of developer tools can be used including the Application tab to test Progressive Web Apps in offline mode. Note that, unlike a real application which requires HTTPS, Chrome permits PWAs to run from localhost over an HTTP connection.

Great! I Don’t Need Any Devices Now!

Chrome’s mobile browser emulator is useful and powerful, but it’s no substitute for interacting with your website or app on a real device to evaluate the full user experience.

You should also be aware that no device emulator is perfect. For example, Chrome shows a representation of the page on an iPhone or iPad but will not attempt to simulate the standards support or Safari quirks.

That said, for quick and dirty mobile testing, Chrome’s device emulation is excellent. It’s far easier than switching between real smart phones, and you’ll have all the developer tools at your disposal. It saves hours of effort.

What is Chrome Mobile Emulator?

Chrome Mobile Emulator is a feature provided by the Google Chrome web browser that allows users to simulate the experience of browsing the web on a mobile device directly from their desktop or laptop computer. This emulator is a part of the Chrome Developer Tools, a set of built-in tools designed to assist web developers in testing and optimizing their websites and web applications. With the Chrome Mobile Emulator, developers can select from a range of predefined mobile device profiles, such as various Android and iOS devices, and view their websites as they would appear on those specific devices. It allows developers to test responsiveness, ensuring that their websites or web apps adapt and display correctly on a variety of mobile devices. Chrome Mobile Emulator serves as a valuable tool for web developers, helping them ensure that their websites and web applications are mobile-friendly and provide a seamless user experience across a wide range of mobile devices. It accomplishes this by offering a comprehensive set of emulation features within the Chrome Developer Tools, making it easier to develop and optimize mobile web content without the need for physical access to multiple devices.

How to simulate a mobile device on Chrome?

To simulate a mobile device on the Google Chrome web browser, you can use the built-in developer tools. Here’s how to do it: Open Developer Tools: There are several ways to open Chrome’s Developer Tools. You can press F12 or Ctrl+Shift+I ( Cmd+Option+I on Mac) on your keyboard. Alternatively, right-click on a web page element and select “Inspect” from the context menu. You can also go to the Chrome menu (three dots in the top-right corner) > More Tools > Developer Tools . Toggle Device Toolbar: In the Developer Tools panel, you’ll find various tabs at the top. Look for the “Toggle Device Toolbar” icon, which is usually represented by a small device icon. It’s commonly located in the top-left corner of the Developer Tools panel. You can also activate it by pressing Ctrl+Shift+M ( Cmd+Option+M on Mac) on your keyboard. Choose a Device: Click on the “Toggle Device Toolbar” icon, and you’ll see a toolbar appear at the top of the web page. This toolbar allows you to select a specific device or device type from the dropdown menu. You can choose from various Android or iOS devices. Additionally, you can toggle the device orientation between portrait and landscape and adjust the viewport dimensions by clicking on the dimensions display. You can select from available presets or enter custom dimensions. Reload the Page: After selecting the desired device and orientation, you can simply refresh the web page you’re viewing. Chrome will then render the page as if it were displayed on the selected mobile device. You can interact with the page and test its responsiveness just as you would on a real mobile device. Access Additional Features: Within the Device Toolbar, you can use the “Network Conditions” tab to simulate different network speeds and conditions. This helps you evaluate how your website or web application performs under various network conditions. Additionally, the “Sensors” tab allows you to simulate various sensor inputs, such as geolocation.

Why is Chrome Mobile Emulator not accurate?

Chrome Mobile Emulator may not provide perfect accuracy in simulating the user experience on real mobile devices for several reasons. It primarily emulates the behavior of the Chrome browser, which may differ from other browsers used on mobile devices. Additionally, emulators cannot fully replicate hardware capabilities, varying operating systems, network complexities, and device-specific behaviors. Interaction methods, such as touch events, might not precisely mimic real devices. Moreover, emulators may not always keep up with the latest updates and changes in browsers and devices. While valuable for initial testing, using actual mobile devices for testing remains crucial to ensure a more accurate assessment of website or app performance across diverse platforms.

Can Chrome emulate Android?

Yes, Chrome Mobile Emulator is a feature provided by Chrome that allows users to simulate the experience of browsing the web on a mobile device directly from their desktop or laptop computer.

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler .

📒 FREE FOCUS ASSESSMENT : All-New   →   Get Started!

Capture Your Ideas : Learn Ulysses   →   Brand New Course!

💌 NEW: Calm Inbox : Less Email, More Focus  →  Get Access

📒 NEW: 2023 Digital Planner : Made for iPad   →   Yes, Please!

FREE! Plan Your Ideal Week : Bonus Workshop + Planner   →   Get the Workshop

NEW! All the Things : Productivity Course   →   Check it Out

Productivity Workshop : The 4-Part Flywheel   →   GET ACCESS!

Bundle Up and Save : 25% discount on all app courses   →   Learn More

Simplify Your Time Management : New Course   →   Finally!

🧠 To Obsidian and Beyond : All-New Course   →   GET ACCESS

How to use Responsive Design Mode in Safari

Anyone that works with websites knows how important it is that they scale correctly on all types of devices. While mobile is extremely important, desktop is still a primary way that a lot of people experience the internet.

On the Mac, Safari makes it extremely easy to check websites across all types of devices and screen sizes. To do this, you need to enable the Developer menu. Click Safari → Preferences , and then click the Advanced tab. Enable the Show Develop menu in menu bar option in the Preferences dialog box.

One that is enabled, go to the Develop menu on the Safari menu bar. Click Enter Responsive Design Mode .

You’ll now see options for various iPhones, iPads, and desktop screen resolutions. This will allow you to make sure your websites look good for everyone , regardless of device choice.

We have more helpful tips right here .

Curated List of Must-Have Apps

We spend an inordinate amount of time sorting through hundreds of apps to find the very best. Our team here at The Sweet Setup put together a short list of our must-have, most-used apps in 2022.

You will get…

• The current list of The Sweet Setup’s top 8, must-have apps.
• A special, pro tip for each app to help you save time and become more of a power user.
• A hidden feature of each app that you may not have known about.

The Sweet Setup Staff Picks for 2022

These apps work on iPad, iPhone, and Mac. And they range across several different categories but are mostly focused on productivity. They will help you get the most out of your devices and your day.

Safari Dev Tools: The Complete 2023 Guide

Introduction to safari developer tools.

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

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

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

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

A Brief History of Safari

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

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

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

Why Learn Safari Developer Tools?

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

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

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

Core Safari Developer Tools

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

The Web Inspector

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

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

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

The Debugger

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

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

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

The Resources Panel

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

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

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

Storage Inspector

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

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

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

The Audits Panel

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

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

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

Advanced Safari Developer Tools

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

Device Mode

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

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

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

Advanced Debugging

Safari provides next-level JavaScript debugging capabilities:

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

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

Network Throttling

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

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

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

Experimental Features

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

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

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

Debugging JavaScript Issues

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

Breakpoint Usage

Effective breakpoint usage is key for isolating issues:

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

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

Scope Inspection

Understanding scope is vital for tracking down variable issues:

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

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

Async Debugging

Safari provides multiple approaches for debugging asynchronous code:

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

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

Error Handling

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

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

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

Optimizing Page Speed

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

Image Optimization

Safari provides multiple ways to optimize images:

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

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

Script Loading

Optimizing script loading is key for performance:

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

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

Caching Assets

Effective caching can boost repeat visit performance:

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

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

Layout Thrashing

Diagnosing layout thrashing is key for smooth UX:

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

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

Wrap Up and Key Takeaways

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

Key highlights include:

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

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

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

Related posts

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

How-To Geek

How to customize the safari toolbar on your mac.

If you use Safari as the default browser on your Mac, you should take some time to customize the Safari toolbar to improve your productivity.

Quick Links

Why should you customize the safari toolbar, how to customize the safari toolbar.

Safari on the Mac features a minimal interface. Although you don't have a lot of room for customization or theming, you can change the toolbar buttons to suit your productivity style. Here's how to make the Safari toolbar look and work the way you want it to.

By default, the Safari toolbar shows all your enabled extension icons along with the URL bar and navigation buttons.

If you have a lot of extensions, you might want to hide some from the toolbar. You might also want to disable the Sidebar button or the Share button if you're going for a cleaner look.

When you go to customize the Safari toolbar, you'll find a new set of buttons that you can add to the toolbar. Shortcuts such as iCloud Tabs, Top Sites, Home, History, Bookmarks, Zoom, Mail, Print, Web Inspector, and so on.

For a pro user who doesn't like using keyboard shortcuts, fast access to features like Bookmarks and History can be incredibly useful. If you're a web developer, the same goes for the Web Inspector tool.

Related: Mac Users Should Ditch Google Chrome for Safari

Now that we've answered the why, let's get to the how. You can customize the Safari toolbar to your liking by first clicking "View" from the menu bar and then selecting "Customize Toolbar."

This will open a drop-down menu with a visual customization tool for the toolbar. You'll notice that all the icons in the toolbar start to jiggle, signaling that you can now move them around if you like. If you've tried reorganizing your iPhone or iPad home screen , you'll be familiar with this interface.

In the top part of the customization menu, you'll see a list of all available buttons. This is where you'll find new buttons like History or Bookmarks. If you want to add one of these buttons to the toolbar, click on the button, and drag it to the toolbar.

If you want to remove a button, click and drag the icon out of the toolbar area.

You can also customize the look of your Safari toolbar by adding some empty space. Click on the "Flexible space" button---located in the last row---and drag it into the toolbar.

To remove flexible space, click and drag it out of the toolbar.

Now that you understand how every element works, feel free to play around to get the Safari toolbar to look and feel just the way you like it.

Mac: How to customize your Safari toolbar

Whether you’re new to Mac or it’s been a while since you’ve adjusted the toolbar in Safari, follow along below for how to customize yours.

Having your Safari toolbar dialed in to best suit your needs makes for a more efficient and pleasant browsing experience. We’ll also look at how to reset the toolbar to the default setting if you’d like to start fresh.

The toolbar doesn’t take more than a minute or two to curate, so let’s get to it 😄.

• Open Safari
• Click  View at the top of your screen in the menu bar
• Select  Customize Toolbar…
• Drag and drop items into your toolbar as you’d like

To remove items, you can drag them out of the toolbar and let go.

You can also return your toolbar to the Safari default by dragging that option from the bottom the toolbar customization window as shown below.

For more help getting the most out of your Apple devices, check out our how to guide as well as the following articles:

• iPhone: How to enable or disable read receipts for iMessage
• iPhone & iPad: How to customize calendar settings
• How to use Light Mode for messages in Mail with Dark Mode on macOS Mojave
• How to customize Voice Feedback for Siri
• iPhone & iPad: How to customize Siri suggestions
• iPhone & iPad: How to customize keyboard shortcuts
• How to find Mac keyboard shortcuts
• iPhone & iPad: How to change language and region
• Mac: How to change your language and region

Check out 9to5Mac on YouTube for more Apple news:

FTC: We use income earning auto affiliate links. More.

Apple’s Mac lineup consists of MacBook, MacBoo…

A collection of tutorials, tips, and tricks from…

Michael is an editor for 9to5Mac. Since joining in 2016 he has written more than 3,000 articles including breaking news, reviews, and detailed comparisons and tutorials.

Michael Potuck's favorite gear

Satechi USB-C Charger (4 ports)

Really useful USB-C + USB-A charger for home/work and travel.

Apple Leather MagSafe Wallet

My slim wallet of choice for iPhone 12

Simulating mobile devices in Chrome

Software Engineering Team Lead and Director of Cloudsure

Edited on Friday, 27 August 2021.

Discover the simulation power behind the Device Mode feature in Google Chrome.

Chrome DevTools has a feature called Device Mode since Chrome 49. This feature extends some previous features by allowing you to simulate different devices and capabilities. Possible use cases include:

• Visual aid for designing a mobile-first and / or responsive web site
• Verify your implementation after you have implemented a design given to you by a front-end developer or agency
• Verify device, browser or OS specific features implemented on a web page
• Mimic browsing from a specific location
• Mimic different network conditions

Disclaimer: This tool will only simulate the display of a web page rendered by your version of the Chrome browser, so don't assume it works as expected across all devices and browsers. It can't emulate the performance characteristics of a real device. There are tools and services that can be used to achieve this but is beyond the scope of this topic.

Getting started

Open the Developer Tools window.

Open the Chrome menu at the top-right of your browser window, then select More tools > Developer tools .

• Windows: F12 or Ctrl + Shift + I
• Mac: Cmd + Opt + I

Enable the Device Mode feature.

Click on the Device Mode icon at the top-left of the Developer Tools window.

You could use shortcuts, but make sure the focus is on the Developer Tools window and not the browser window for it to work.

• Windows: Ctrl + Shift + M
• Mac: Cmd + Shift + M

Toggle Device Toolbar

You can disable Device Mode by clicking on the icon or using the same shortcuts as above.

Viewport controls

These controls give you the ability to test your web page across a variety of devices or directly interact with the responsive nature of it. You can change the device, width, height, zoom and orientation (if height is present) .

iPad device selected through the Viewport controls

Configure devices

Click on that drop down > Edit to add a custom device. Your will input a device name - used to display in the drop down options, viewport width and height, device pixel ratio , user agent string, device type, and, if you want, additional user agent client hints (websites render different content depending on the type of device it interprets based off these hints).

You can get a comprehensive list from User Agent String.com .

DPR , or Device Pixel Ratio, is the number of pixels on the screen that it takes to draw a single pixel used by CSS. The more screen pixels used, the sharper the image. You should be able to distinguish the difference between standard, HiDPI and Retina displays.

Selected Galaxy Note 3 and Galaxy Note II in emulated devices to add them to the list of devices

Media queries

You can use the media query inspector by clicking on Show media queries in the vertical three dot menu at the top-right corner of the Viewport controls.

Media queries inspector on iPad display

The media queries for the web page are detected and displayed as colored bars. When you right-click on a color, you can reveal the CSS in the source code.

Tip: If you are inspecting minified CSS (or JavaScript), you will notice a curly brace icon { } at the bottom of the view pane next to the line number. Click on this to format the source code for easier reading.

Responsive mode gives you the freedom to move the viewport left to right, up and down, and diagonally. The width and height can be explicitly set at the top to the right of the device drop down list.

Network throttling

YThere are features that you can leverage in the Network tab to emulate different networking conditions.

• Cache: this feature only works while the DevTools are open. Cached resources will explicitly be fetched from the server when this option is disabled.
• Throttling: lets you hop onto a different type of network that is emulated by the DevTools. Options like fast and slow 3G exist. You can choose to go offline and you can add your own presets which require latency, download and upload speed.
• Network conditions: : opens up a new slit tab. Additional options include custom user agents and the ability to change accepted content-encodings like deflate , gzip and br .

For out more about optimizing performance under varying network conditions .

Additional options

Click on the kebab menu item to the top right of the bar and get more options which include:

• Device frame: toggles the frame of a cellphone around your viewport.
• Media queries: toggles the display of the media query breakpoints bar above the viewport.
• Rules: toggles pixel rulers displayed on the viewport.
• DPR: toggles the display of the DPR options on the top bar.
• Device type: toggles the display of the device type option on the top bar.
• Screenshots: takes a screenshot of the page or a full screenshot.

When developing on a desktop you are at a disadvantage as there isn't native support hardware for GPS and accelerometers.

Chrome DevTools has a Sensors Emulation feature which allows you to override geolocation coordinates and device orientation accelerometer data.

Click on the vertical three dot menu at the top-right corner of the Developer Tools window > More tools > Sensors .

Enabled emulate geolocation coordinates and device orientation selected in sensors tab with default data

Find out more about emulating sensors .

• Chrome Keyboard and UI Shortcuts Reference
• Simulate Mobile Devices with Device Mode