set cookie in safari developer tools

Discover more from daily.dev

Personalized news feed, dev communities and search, much better than what’s out there. Maybe ;)

Safari Browser Tips for Developers

Tips and techniques for developers using Safari browser, including enabling developer tools, inspecting and modifying code, debugging, performance optimization, responsive design, and more.

If you're developing for Apple devices, mastering Safari's developer tools is essential. Here 's a quick guide to get you started:

• Enable Developer Tools in Safari by accessing Preferences > Advanced and checking 'Show Develop menu in menu bar'.
• Web Inspector helps you inspect and modify HTML, CSS, and JavaScript in real-time.
• Responsive Design Mode allows you to test your site on various device sizes.
• Debugging Tools like the Console and Network panels aid in identifying and solving coding issues.
• Performance Optimization techniques help you speed up your website.
• Accessibility and Security features ensure your site is usable and safe for all users.
• Safari-specific tips include detecting the browser, optimizing media encoding, and implementing responsive design .
• Advanced Debugging Techniques offer deeper insights into your code's behavior.

This guide aims to improve your efficiency and effectiveness when developing web applications or sites for Safari, ensuring a smooth and optimized user experience across all Apple devices.

Navigating the Developer Tools Interface

Safari's developer tools interface provides comprehensive inspection and debugging capabilities through several key panels:

Elements Panel

The Elements panel allows you to inspect and modify the DOM tree and CSS styles associated with the loaded webpage. You can:

• View and edit HTML elements and attributes
• Modify CSS styles directly in the panel
• Visualize box models, positioning, and other layout details
• Identify accessibility issues

The Elements panel is extremely useful for tweaking designs and layouts, fixing styling issues, and understanding DOM structure.

Network Panel

The Network panel logs all network requests made by the page and provides insights into loading performance. You can:

• View all assets loaded by the page like scripts, stylesheets, images
• Check request and response headers
• Identify slow network requests impacting page load speed
• See a breakdown of total download size and time

This is helpful to optimize page load times and identify network bottlenecks.

Sources Panel

This panel allows debugging and modification of JavaScript code. You can:

• Pause code execution to step through your script
• Set breakpoints and inspect variable values
• Edit JavaScript code on the fly
• Profile memory usage and CPU activity

The Sources panel is great for identifying and fixing JavaScript bugs and performance issues.

Timelines Panel

The Timelines panel visualizes various events tied to loading and running a webpage over time, including:

• Resource loading
• Style calculations
• Layout changes
• Script activity
• Rendering frames

Analyzing these timelines is crucial to pinpoint expensive operations that may cause jank or lag when interacting with your site.

Console Panel

The Console panel logs output from JavaScript code running on the page, any runtime errors, logging statements, network request statuses, and more. This can help identify and debug a wide variety of front-end issues.

Storage Panel

This panel allows inspection and modification of all browser storage mechanisms utilized by the page like cookies, local storage, session storage, and more. It is invaluable for understanding and debugging client-side data persistence.

Overall, Safari's developer tools provide unparalleled inspection and debugging capabilities for webpages. Mastering these tools is essential for any web developer looking to build high-quality experiences.

Inspecting and Modifying HTML and CSS

Selecting elements.

To pick an element to work on in the Elements panel:

• Just click on the part of the webpage you're interested in. This makes it pop up in the Elements panel.
• Or, click on the element's name in the DOM tree in the Elements panel.

Other ways to find elements include:

• Use the search box to look for elements by their ID, class name, or tag name.
• Right-click on an element and choose "Select Element in Console" to use it in Console commands.

When you choose an element, you'll see all its details like HTML, CSS, and layout info on the right side.

Editing HTML

To change the HTML of something you've selected:

• Double-click on its tag or text in the Elements panel.
• Or right-click and pick "Edit as HTML".

Now, you can edit the HTML. Press Enter when you're done to save your changes.

Some quick tips:

• Switch tag names to change the structure.
• Change attributes like id or class .
• Add, tweak, or remove child elements.

Your webpage will update right away with your changes.

Modifying CSS Styles

To change the CSS styles of something:

• Click on the element in the Elements panel or on the webpage.
• On the right, in the Styles section, find the style you want to change.
• Click in the value box, make your edit, and press Enter.

You can also:

• Hit the New Style Rule button ( + ) to add new styles.
• Toggle style properties on or off by checking/unchecking them.
• Right-click on a style to make it !important or to copy it.

Like before, your webpage shows the changes right away.

Adding and Removing Classes

You can change how an element looks and acts by adding or removing classes.

To add a class:

• Choose the element in the Elements panel.
• Look for the class attribute in the Attributes section.
• Type in the new class name. Use spaces to add more than one.

To get rid of a class, just delete its name from the class attribute.

This is a quick way to change an element's style without messing with CSS rules directly.

Utilizing the Web Inspector for Debugging

The Web Inspector is a super handy tool for checking out how your page looks, fixing JavaScript problems, and figuring out what slows things down. Here's how to make the most of it:

Inspecting Page Layouts

• The Elements panel lets you peek at the structure of your webpage and see how elements are laid out.
• You can turn CSS styles on and off to immediately see how they affect your page.
• Experiment with layout by changing styles like width , height , margin , and so on.
• The Layout pane helps you spot issues with how things are arranged on your page.

Debugging JavaScript

• Use the Sources panel to pause your code where you want and go through it step by step.
• Check out variables, events, and what the code is doing at each step on the side.
• Change code on the fly, run small tests, and look at values in the Console .
• Find out where your code is slow or using too much memory.

Analyzing Network Performance

• The Network panel shows you everything your page is loading.
• Find out which parts take the longest to load.
• Look at the details of what's being sent and received.
• Pretend you're on a slower connection to see how your page does.

Diagnosing Rendering Issues

• Use the Timelines panel to see everything that happens when your page loads and runs.
• Look for parts of your page that make it slow or choppy.
• Record what happens when people use your page to find spots you can make better.

Getting good at using Safari's Web Inspector means you can make your websites work better and faster. It's all about spotting problems and fixing them.

Responsive Design Mode

Responsive Design Mode is a feature in Safari that lets you see how your website looks on different devices like phones, tablets, and computers. It's great for making sure your site works well no matter what screen size someone is using. Here's a simple guide to using it:

Enabling Responsive Design Mode

To start using Responsive Design Mode in Safari:

• Go to the Develop menu at the top.
• Choose Responsive Design Mode from the list.

A toolbar will show up with different screen sizes you can test.

Selecting Screen Sizes

In Responsive Design Mode, you can pick from preset screen sizes for devices like:

• Or even specific sizes like 1440px wide

Just click on one to see how your site looks. You can also manually adjust the size by dragging the corner of the window, switch to landscape mode, or simulate using a touchscreen.

Testing Responsiveness

As you change the size of the Safari window:

• Move around your site to see if it adjusts smoothly.
• Check that things like text and images move or resize correctly.
• Make sure links and buttons work as expected.

This helps you spot any parts of your site that might not look right on different screens, like if text gets too squished or a picture disappears.

Integration with Web Inspector

You can use Responsive Design Mode together with Safari's Web Inspector. This means you can:

• Look closely at the code of your site and change it on the fly.
• Solve problems with your site's JavaScript.
• Check how fast your site loads and find ways to make it faster.

Using these tools together can help you make sure your site not only looks good on all devices but also works well and loads quickly.

By getting good at using Responsive Design Mode, you can make websites that everyone can enjoy, no matter what device they're using. It's a good idea to test your site often as you build it to catch any issues early.

Advanced Debugging Techniques

Debugging web apps can sometimes feel like a puzzle, but Safari's got some cool tools to help you out. Here are some tips to step up your debugging game with the Web Inspector:

Using the Debugger Statement

You can make your JavaScript take a break by adding debugger; in your code. When Safari sees this, it'll pause right there, letting you take a closer look.

How to do it:

• Jump into the Sources panel
• Drop debugger; into the line where you want things to pause
• Refresh the page
• Your code will stop at that line, ready for you to dive in

This is super handy for checking out what's happening at certain moments.

Viewing Console Logs

The Console panel is where you'll see messages from console.log() , along with any errors or warnings.

• Use console.log() to spit out what values variables are holding or to track where you are in your code.
• You can sift through messages by type, like error or warn , to zero in on problems.
• Logging objects? You can peek inside them with console.log(someObject);

Filtering Network Traffic

In the Network panel, you can narrow down requests by:

• Type (like XHR, JS, CSS)
• Where they're from (domain)
• How big they are
• How long they take

This is great for digging into specific stuff, like if you're only interested in checking out API calls.

Analyzing Detailed Timelines

The Timelines panel lays out everything that happens as your page loads and runs, all on a neat timeline.

What you can do:

• Zoom in to get a closer look at certain actions
• Filter by types of events
• Look up specific elements or actions
• Check out the details of what's causing delays

This helps you find and fix spots that slow your app down.

• Pause your code with debugger; to take a closer look at specific spots
• Use console.log() to keep tabs on what your code is doing
• Filter network stuff to focus on what matters to you
• Use the timelines to spot and smooth out any slow parts

Getting the hang of these tricks will help you make smoother, faster web apps.

Safari-specific Development Tips

Detecting safari browser.

You can find out if someone is using Safari and what version it is with this bit of code:

Then, you can make your website work differently depending on the Safari version:

This way, your website can work well for everyone, no matter what version of Safari they're using.

Supporting Multiple WebKit Versions

Since Safari uses the WebKit engine, you can check if certain WebKit features are available:

And use -webkit- in your CSS for things to look right in both old and new versions of WebKit:

Checking the WebKit Feature Status helps you know what's supported.

Optimizing Media Encoding

For videos, use MP4 format with H.264 encoding. For audio, MP3 works well across browsers. Use <video> and <audio> tags for media on your website. For drawings or animations, <canvas> works great in Safari. Using these formats makes sure your website loads fast and looks good in Safari.

Implementing Responsive Design

Use flexible layouts, images that resize, and media queries for a website that looks good on any device:

Always check how your site looks on different devices like iPhones, iPads, and desktops to make sure everything adjusts and fits well.

Adding Multi-Touch Support

Make your website interactive for touch devices by listening to touch events:

You can detect different gestures like taps, swipes, or pinches and use them to make things move or change on your site. This makes your website more fun and easier to use on phones and tablets.

sbb-itb-bfaad5b

Simulating devices and screen sizes.

Safari lets you check how your website looks on different devices and screen sizes right from your computer. This is super helpful for making sure your site looks good whether someone is viewing it on a phone, tablet, or computer.

To get started:

• Click on Develop > Responsive Design Mode in the Safari menu.
• You'll see a toolbar with different device and screen size options.

Selecting Emulation Options

In Responsive Design Mode, you can:

• Pick from devices like iPhone, iPad, Apple Watch
• Choose screen sizes like 1440x900 or 1280x720
• Try out portrait/landscape views
• Test how touch input works

Just click on a device or screen size to see how your page changes.

Customizing Sizing

You can also manually adjust the size of the page by dragging the window's edges, or you can type in specific sizes:

And you can switch between landscape and portrait modes:

As you change sizes, make sure that:

• Your page adjusts smoothly for different screen sizes
• Pictures and videos fit well and don't stick out
• Text is easy to read and everything is easy to use

Scrolling around helps you check that everything moves right.

Integration with Developer Tools

You can use Responsive Design Mode with other tools in Safari like the Web Inspector. This lets you do a lot at once, like:

• Look at and change your site's code
• Figure out JavaScript issues
• Check how fast your site is
• Find and fix display problems

This makes it easier to get your site looking and working great on all devices.

Achieving Consistency

Test your site on different screens as you build it to make sure it always works and looks right.

• Start emulation with Develop > Responsive Design
• Use the preset options for devices and screen sizes
• Adjust the page size yourself if needed
• Test your site with other Safari tools for a complete check-up
• Keep testing on different screens to make sure your site stays responsive

Following these steps will help make sure your site offers a good experience for everyone, no matter what device they're using.

Debugging Safari Web Apps on macOS

When you're working on a web app for Safari on a Mac, you'll need to know how to find and fix problems. Here's a simple guide to get you started with Safari's built-in tools for developers.

Enabling Web Inspector

First things first, you need to turn on a tool called Web Inspector:

• Go to Safari's preferences and click on the Advanced tab
• Make sure the box next to "Show Develop menu in menu bar" is checked
• You'll see a new "Develop" menu appear at the top of Safari
• From there, select "Show Web Inspector"

You can also press Option + Command + I on your keyboard to open it up quickly.

Inspecting the Web App

With Web Inspector open, you can:

Use the Elements panel to look at the website's building blocks (HTML) and how it's styled (CSS). This is great for checking the layout, seeing what styles are applied, and making sure it's accessible.

The Console panel shows you errors or any messages from your JavaScript. This helps you spot problems fast.

The Sources panel lets you dive into your JavaScript code. You can pause it, see what's happening step by step, and check out the values of different things while it runs.

The Network panel keeps track of all the files your app is loading. It's useful for finding out if anything is taking too long to load.

Check out the Timelines and Profiles panels to see if there are any slow parts in your app causing delays or making things choppy.

Testing on Different Devices

You can see how your app looks on different devices using a feature called Responsive Design Mode. Just go to the Develop menu and turn it on. This lets you check if your app looks good on phones, tablets, and computers without having to test it on each device.

Modifying Code

With Web Inspector, you can change your app's HTML, CSS, and JavaScript right there and then. This means you can try out new ideas quickly:

• Change the text or structure in the Elements panel
• Adjust how things look by tweaking the CSS
• Update your JavaScript in the Sources panel

Just refresh your app to see how the changes work out.

Achieving Performance

Use Web Inspector to look at how your app loads and runs. You can find out what's slowing it down and fix it by:

• Looking at network requests to see if files are too big or slow to load
• Checking JavaScript performance to find and fix slow code
• Watching for layout changes that might be causing delays

Testing your app in different situations helps make sure it runs smoothly for everyone.

Performance Optimization

Detecting unused code.

To spot CSS and JavaScript your web app doesn't really use, follow these steps in your browser's developer tools:

• Open the developer tools and find the Coverage panel.
• Refresh your page with the coverage tool running - this keeps track of which bits of code are active.
• Use your site to make sure you're checking all its features.
• Look at the Coverage panel to see how much of your code was actually needed.
• Click on files to see parts of the code that weren't used, shown in red.
• Get rid of code that you don't need to make your files smaller.

Some hints:

• Hit Start instrumenting coverage to begin.
• Try out every part of your site to catch all the code that might run.
• Pay special attention to big CSS or JavaScript files that aren't used much.

Cutting out unnecessary code helps your site run faster and smoother.

Analyzing Resource Sizes

To look into how big your site's files are using the Network panel:

• Open the developer tools and switch to the Network tab.
• Refresh the site to see all the files it loads.
• Look at the Size column for how big each file is.
• Organize by size to spot the biggest files.
• Click on a file for more details, like how much you could save by compressing it.
• Files larger than 2MB can slow down your site.

Ways to make files smaller:

• Shrink and tidy up JavaScript and CSS files.
• Use tools to make images smaller without losing quality.
• Only load big files when they're actually needed.

Making your files leaner can make your site load faster and work better.

Accessibility and Security

Making sure websites are easy to use and safe is really important, especially for people using iPhones and iPads. Here are some tips for making websites better for everyone in Safari:

Implementing Proper Accessibility

• Use special codes ( ARIA roles, states, and properties) to help browsers understand what each part of your website is supposed to do.
• Always provide descriptions for images and other non-text content.
• Make sure there's a strong contrast between text and its background so it's easy to read.
• Design your site so people can navigate through it using just a keyboard.
• Make your site work well with tools that help people with disabilities, like screen readers.

Tips for testing:

• Try using VoiceOver on iOS to check if people can listen to your website's content.
• Use the Accessibility Inspector in Safari to make sure everything's set up right.

Utilizing Safari's Security Features

• Use HTTPS to keep connections to your site secure.
• Make sure any external content on your site hasn't been messed with.
• Think about using Feature Policy for tighter control over your site's features.
• Use Credential Management API to help users log in securely.

Additional measures:

• Always clean and check any information users give you.
• Stick to the best ways of keeping user accounts safe.
• Be careful with scripts from other websites.

Checking for Common Issues

• Make sure your site meets the guidelines for accessibility.
• Look out for common security risks like XSS or CSRF.
• Test your site on both desktop and mobile versions of Safari.
• Check that your site still works when Safari's extra security settings are turned on.

Focusing on making your site easy to use and safe helps everyone have a better experience. Testing thoroughly is the best way to find and fix any problems.

Safari gives developers a lot of tools to make websites and apps work really well on Apple devices. If you know how to use these tools, you can make your site or app faster, look better, and be easier for everyone to use.

Here's a quick recap of what we talked about:

• Develop menu in Safari lets you use cool tools like Web Inspector for checking and fixing code, and Responsive Design Mode for seeing how your site looks on different devices.
• The Elements panel helps you look at and change the website's HTML and CSS, check how it's laid out, and make sure it's accessible to everyone.
• The Network panel helps you see how fast your site loads and find ways to make it load faster.
• Sources panel is for finding and fixing JavaScript bugs.
• Timelines panel shows you what happens when your page loads and helps you find parts that make it slow.
• Responsive Design Mode lets you see how your site looks on phones, tablets, and computers.
• Make sure your site can be used easily by everyone, including people with disabilities, by using ARIA roles and testing with tools like VoiceOver.
• Keep your site safe with HTTPS, clean inputs, and safe login methods.

We also shared tips on how to make sure your site works well in Safari, like checking for Safari browser, using WebKit features, making your site responsive, adding touch events, and making your site fast.

With Safari being so popular on mobile devices, it's really important to test your site on Apple's devices to make sure it works great. Use the tools we talked about to check your site and keep updating it with new features.

In short, making your site work well in Safari means happy users who'll want to keep coming back.

Related Questions

How do i use developer in safari.

To turn on developer tools in Safari, follow these steps:

• Open Safari , then go to Preferences
• Click on the Advanced tab
• Make sure to tick the box for Show Develop menu in menu bar
• Now, you'll see a new Develop menu at the top, which lets you access various developer tools

These tools include the Web Inspector for checking your website's code and layout, Responsive Design Mode for seeing how your site looks on different devices, and a console for solving JavaScript problems.

Is Safari good for Webdev?

Yes, Safari is great for web development. It has handy tools like Web Inspector, Responsive Design Mode, and Accessibility Inspector that make building, testing, and improving websites easier.

Since Safari uses WebKit, like some other browsers, testing for cross-browser compatibility is more straightforward. Plus, its popularity among Apple device users means it's crucial for reaching a broad audience. Safari offers a solid development environment for web professionals.

How do I use Safari efficiently?

Here are a few tips to get the most out of Safari:

• Look at all your open tabs with tab previews and close ones you don't need by swiping.
• Turn on Reader Mode for a cleaner reading experience on web pages.
• Bookmark your go-to sites and use the smart search feature for quick access.
• Use Keychain for saving and autofilling passwords securely.
• When privacy is a concern, switch to Private Browsing mode.
• Add useful shortcuts to your toolbar for quick access.

How do I make Safari work better?

To improve Safari's performance:

• Clean out your browsing history and site data now and then.
• Switch on the Develop menu for access to more tools that can help optimize your browsing.
• Stop videos from playing automatically to save on resources.
• Use Reader Mode on complex pages to cut down on data use.
• Make sure privacy settings are on.
• If content blockers are messing with a site, try turning them off temporarily.
• Keep Safari and your operating system up to date for the latest speed and security enhancements.

Related posts

• Navigating Chrome Generator for Beginner Developers
• Call from Browser: The Future of Developer Networking
• Edge Browser Extension Essentials for Developers
• Download HTML Page: Step-by-Step Guide

Why not level up your reading with daily.dev?

• Web Browser
• Google Chrome Browser
• Mozilla Firefox Browser
• Microsoft Edge Browser
• Apple Safari Browser
• Tor Browser
• Opera Browser
• DuckDuckGo Browser
• Brave Browser

Shortcuts for Safari Developer Tools

• How to use Safari for web development
• Top 10 Tools That Every Java Developer Should Know
• Keyboard Shortcuts for all Web Browser
• New Features of Microsoft Edge Developer Tools
• Keyboard Shortcuts for Firefox
• Sources Tab in Apple Safari Browser
• Developer Resources Tool in Microsoft Edge Browser
• IOS Developer Jobs in USA
• Uses of Chrome Developer Tools
• How to disable JavaScript in Chrome Developer Tools?
• React Developer Tools
• 15 Must Have JavaScript Tools For Developers
• 8 Tips and Tricks For JavaScript Developers
• Best No-Code Tools for Developers in 2024
• Debug Keyboard Shortcuts For Visual Studio Code
• 10 Best Tools For Front-End Web Development
• Visual Studio Code Shortcuts For Windows and Mac
• General Keyboard Shortcuts For Visual Studio Code
• How to Use Chrome Developer Tools for API Testing?

Safari Developer Tools are a big help for people who make websites. They provide features to check, fix, and improve web pages. Shortcuts are one of the best tools. They help you quickly and easily move through web development, making things faster.

Types of Shortcuts:

Table of Content

Navigation Shortcuts

Console shortcuts, debugger shortcuts, miscellaneous shortcuts, features of shortcuts.

• Inspect Element Shortcuts: Use quick keys to go fast through the DOM (Document Object Model) and check out how web parts are put together. Then, look closely at their structure for extra understanding of what’s going on in websites.
• Console Shortcuts: Use shortcuts to run JavaScript commands quickly, letting developers fix problems and test stuff using the console.
• Network Panel Shortcuts: Make checking network activities easier by using shortcuts to go through requests, answers and speed details.
• Source Code Shortcuts: Make fixing computer program errors easier by using quick ways to move through coding, put breakpoints and check what works.

Benefits of Shortcuts

• Time Efficiency: Shortcuts save time on boss tasks. They let builders do things fast and concentrate more important parts of building stuff.
• Enhanced Productivity: Developers can do more in less time. This makes them work faster and the development process smoother.
• Effortless Navigation: Shortcuts help you move easily between different parts of Developer Tools. This makes it feel smooth and easy to use.

How/When to use these Shortcuts?

• During Development: Add shortcuts to your daily tasks. This will assist you in tasks such as checking parts, solving coding issues and observing network actions quicker.
• Debugging Sessions: Shortcuts are really useful for fixing problems in code. They help programmers fast look at the code, slow it down in some spots and see things on a window called output for console.
• Performance Optimization: Shortcuts are your friends when trying to make a website work well. Use their power in the Network Panel to show performance dragons and make sure your users have a smooth experience.

Steps to Use/Implement

• Accessing Developer Tools: Enter the work area for making websites by right-clicking on your webpage, choosing “Inspect Element,” and going into the “Develop” list. You can also open the dev tools in safari by simply pressing option+command+c.
• Navigating Panels: Shortcuts are your special spells to move between different panels like Elements, Console, Network and Sources. Move smoothly through these areas like a skilled keyboard player.
• Inspecting Elements: Go to the core of your internet page using quick keys. Shine light on darkness with some easy button presses, looking carefully at different parts of the HTML like digital sleuth.
• Executing JavaScript: Use the Console Panel, your secret door to the world of JavaScript. Shortcuts let you cast spells (do commands) easily. They turn your computer screen into a magic potion of great code wonders.
• Monitoring Network Activity: In the Network Panel, shortcuts help you move through digital traffic. Follow requests, look at answers and make your computer run better with just a press of the keyboard.

Real Life Application

Picture a developer trying to solve the puzzle of an annoying layout problem on a website. Our programmer turns into a digital Sherlock with the help of shortcuts. Shortcuts help check parts of the webpage, move through it and change looks quickly. This helps solve problems. Pictures or small moving pictures show how shortcuts are used step-by-step. This is very helpful in figuring things out practically.

Please Login to comment...

Similar reads.

• Geeks Premier League 2023
• Geeks Premier League
• Web Browsers

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

Safari cookie is not being set – Here’s a fix self.__wrap_b=(t,n,e)=>{e=e||document.querySelector(`[data-br="${t}"]`);let a=e.parentElement,r=R=>e.style.maxWidth=R+"px";e.style.maxWidth="";let o=a.clientWidth,c=a.clientHeight,i=o/2-.25,l=o+.5,u;if(o){for(;i+1 {self.__wrap_b(0,+e.dataset.brr,e)})).observe(a):process.env.NODE_ENV==="development"&&console.warn("The browser you are using does not support the ResizeObserver API. Please consider add polyfill for this API to avoid potential layout shifts or upgrade your browser. Read more: https://github.com/shuding/react-wrap-balancer#browser-support-information"))};self.__wrap_b(":Rid9j6:",1)

Workarounds and Solutions

Broader implications.

In today’s digital landscape, where seamless user experiences are paramount, the integrity of web cookies plays a pivotal role in maintaining user sessions and preserving user data. Codedamn, as a platform dedicated to empowering developers with knowledge and practical skills, understands the importance of smooth login workflows. However, a recurring issue has surfaced, particularly for Safari users, disrupting this seamless experience.

Introduction

Cookies, small pieces of data stored in the user’s browser, serve as essential tools for web applications to maintain session state, store user preferences, and facilitate various functionalities. They act as messengers between the client and server, carrying crucial information for the application’s operation.

Understanding Cookies

Cookies operate behind the scenes, enabling websites to remember users’ actions and preferences, thereby enhancing their browsing experience. They are integral to functionalities like persistent logins, shopping carts, and personalized content delivery.

The Secure Attribute of Cookies

One crucial aspect of cookies is the Secure attribute. When set, this attribute ensures that cookies are only transmitted over secure (HTTPS) connections, enhancing the security of sensitive information such as authentication tokens and session identifiers.

The Issue with Safari

Despite the ubiquity and importance of cookies, Safari users have encountered a persistent issue where cookies fail to set properly, disrupting login workflows and hindering access to essential features. Personally, navigating this challenge has shed light on the intricacies of browser behavior and the nuances of web development.

Safari’s Different Handling of Secure Attribute

One notable quirk in Safari’s behavior is its handling of the Secure attribute when working with localhost environments. Unlike other browsers like Chrome and Firefox, Safari imposes stricter policies, restricting the setting of cookies with the Secure attribute in local development environments.

Comparative Analysis with Other Browsers

To gain deeper insights into this issue, it’s crucial to compare Safari’s behavior with that of other popular browsers like Chrome and Firefox.

Browser Version Differences

Chrome and Firefox exhibit more lenient behavior regarding cookie setting on localhost, allowing developers greater flexibility in testing and debugging their applications. This variance in behavior becomes apparent when considering the versions from which Chrome and Firefox implemented their respective cookie handling mechanisms.

Security Implications

Cookies marked as Secure are a cornerstone of web security, instructing browsers to only send the cookie over HTTPS, thus preventing it from being transmitted over unencrypted HTTP. This behavior is critical for protecting user data from man-in-the-middle attacks. However, this security feature also introduces complexities in environments not using HTTPS, such as local development setups. Safari, in particular, enforces this standard strictly, often leading to situations where developers find their cookies are not being set during local testing.

To address the challenge of Safari not setting cookies in a local development environment, a practical solution involves removing the Secure attribute from cookies. This allows cookies to be transmitted over HTTP, facilitating local testing without requiring an HTTPS setup. It’s important to note that this approach should only be used in development environments due to the security risks associated with transmitting cookies over unencrypted connections.

Removing the Secure Attribute on Localhost

When developing locally, configuring your application to omit the Secure attribute from cookies enables Safari to accept and store these cookies. This workaround is particularly useful for local testing and should be coupled with environment-specific configuration to ensure that Secure is enforced in production environments, where HTTPS is used.

While this issue is commonly associated with Safari, it reflects a broader security measure adopted by modern browsers to enhance web security. The strict handling of Secure cookies underscores the increasing emphasis on using HTTPS across the web, even in development environments.

Safari’s Implementation and Web Development

Safari’s stringent cookie handling can be seen as part of Apple’s broader commitment to user privacy and security. This implementation choice prompts developers to adopt best practices early in the development process, including the use of HTTPS in local environments. While this can introduce additional setup complexity, it also prepares applications for the security requirements of the modern web.

Sharing is caring

Did you like what Mehul Mohan wrote? Thank them for their work by sharing it on social media.

No comment s so far

Curious about this topic? Continue your journey with these coding courses:

Ewomazino Akpareva

HTML CSS and SASS Bootcamp

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

Open DevTools

What's new in devtools, devtools tips, commands and shortcuts, run commands in the command menu, keyboard shortcuts, disable javascript, simulate mobile devices with device mode, search across loaded resources, elements - dom, elements - css, performance, application, memory inspector, network conditions, developer resources, css overview, performance insights, settings reference, preferences, experiments, ignore list.

• Skip to main content
• Switch language
• Skip to search

Search Support

• Protect your privacy
• Cookies and cache

Clear cookies and site data in Firefox

• Systems and Languages

Give Firefox a tune up

• How does it work?
• Download a fresh copy

Cookies are stored on your computer by websites you visit and contain information such as site preferences or login status. This article describes how to delete Firefox cookies, other site data and cached web content .

• If you just want to clear the Firefox cache, see How to clear the Firefox cache .
• To clear your browsing history, cookies and temporarily cached files at once, see Delete browsing, search and download history on Firefox .
• To prevent websites from storing cookies on your computer, see Block websites from storing cookies and site data in Firefox .

Table of Contents

• 1 Clear cookies for the current website
• 2 Clear cookies for any website
• 3 Clear all cookies, site data and cache
• 4 Clear all cookies and keep other data

Clear cookies for the current website

To delete cookies and site data for a website you're currently visiting:

• Click Clear Cookies and Site data .

Clear cookies for any website

To delete cookies for any single website:

• Click the Manage Data… button. The Manage Cookies and Site Data dialog will appear.
• To remove all cookies and storage data for the website, click Remove All Shown .
• To remove selected items, select an entry and click Remove Selected .
• Click Save Changes .
• In the Removing Cookies and Site Data confirmation dialog that opens, click OK .
• Close the about:preferences page.

To learn more about managing site data in Firefox, see Manage local site storage settings and Enhanced Cookie Clearing .

Clear all cookies, site data and cache

• Select the Privacy & Security panel and go to the Cookies and Site Data section.
• Cookies and Site Data (to remove login status and site preferences) and Cached Web Content (to remove stored images, scripts and other cached content) should both be check marked.
• Click Clear .

Clear all cookies and keep other data

To delete only cookies while keeping other data, do the following:

• Select Cookies and make sure that other items you want to keep are not selected.
• Click OK Clear Now to clear all cookies and close the Clear All History window.

Share this article: https://mzl.la/3vVeO8Y

Was this article helpful?

These fine people helped write this article:

Grow and share your expertise with others. Answer questions and improve our knowledge base.

Related Articles

How to clear the firefox cache.

The Firefox cache temporarily stores images, scripts, and other parts of websites you visit in order to speed up your browsing experience. This...

Websites say cookies are blocked - Unblock them

This article describes how to troubleshoot problems that involve websites reporting that cookies are blocked or disabled. For more information on...

Manage local site storage settings

Some websites have the ability to store information, such as files, in your local storage, and these files can only be removed manually by you....

Safari User Guide

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

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

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

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

Open Safari for me

Our expert, award-winning staff selects the products we cover and rigorously researches and tests our top picks. If you buy through our links, we may get a commission. How we test phones

WWDC 2024: Here Are the 3 Best AI Tools Apple Might Reveal

Commentary: One of the AI-features could create brand new emoji on the fly. And you know people will love it -- because this is Apple.

• Bridget has spent over 18 years as a consumer tech reporter, hosting daily tech news shows and writing syndicated newspaper columns. She's often a guest on national radio and television stations, including ABC, CBS, CNBC and NBC.

Apple will reportedly show off a way AI can generate emoji in June at WWDC.

In less than a week, Apple's Worldwide Developers Conference kicks off. And the company that brought you those animated Memoji you never use on the iPhone and made Personas so you can video chat as a character straight out of Polar Express while wearing a Vision Pro , has a plan to win the generative AI race : weird emoji.

While companies like ChatGPT , Google and Microsoft have a head start using artificial intelligence trained on large language models to generate text and conversations that sound more human, remove items and people from photos, and develop tools to make weather forecasts more accurate , Apple is, according to a Bloomberg report , going to offer the ability to put AI-generated emoji in your chats.

And people will love it -- because this is Apple. 

Of course there is much more to Apple's future AI plans than just the ability to make any emoji you can imagine (or rather not imagine) a reality. 

Apple's AI could soon make randomized emoji, similar to this hot dog-octopus monstrosity from Emoji Kitchen.

At WWDC , the iPhone-maker is expected to show off new versions of its operating systems like iOS 18 and debut generative AI tools. When I first heard about Apple's reported AI features , I was fascinated, and not just by the food-animal hybrid emoji possibilities. I was genuinely filled with hope that Apple could actually set itself apart from all the other AI criticism and controversy currently happening in tech.

But let's back up a bit to set the scene.

Back in February, during a first-quarter earnings call , Apple CEO Tim Cook told shareholders that the company is putting "a tremendous amount of time and effort" into integrating AI into its products. Then in May, on a second-quarter earnings call , he said that Apple was making a significant investment into generative AI. 

While we expect to hear a lot about AI at WWDC , Bloomberg reporter Mark Gurman got the tech circles buzzing with his report on what AI features could be coming to iOS 18 and MacOS 15.

We could see AI help edit photos, send messages or reply to email. AI could summarize long messages and transcribe voice messages. Search could be smarter, and Siri could speak more conversationally. AI tools might even summarize something you come across browsing on Safari. A lot of these features wouldn't be that surprising because they already exist on the latest Samsung Galaxy phones and Google Pixels .

But there are three possible Apple AI tools in Gurman's report that stood out to me.

On-the-fly AI emoji, please and thank you

An iPhone X with Animoji on the screen.

While there already exist tools and sites that can mash up emoji icons into ridiculous symbols, like Emoji Kitchen (I've talked about the topic before on CNET's One More Thing show), Apple might launch its own version of this tool in iOS 18 . 

Bloomberg says that the iPhone might be able to create an emoji for you on the fly, something outside the standard emoji library set by the unicode consortium. Apple knows how to have some fun with messaging, and it's right out of the company's playbook to give folks something silly to talk about in a software update. 

Apple CEO Tim Cook appears as a memoji -- an animoji AR self-portrait -- in a Group FaceTime chat at WWDC 2018.

When Apple does a weird cartoony thing, that's the feature that gets all the attention. When the Vision Pro came out , we all gawked at the Personas . The iPhone X's true depth front-facing camera was fun to show off because of the animated Memoji faces in chat. And when Apple announced the iPhone 11, it was the ability to record slow-motion videos with the front-facing camera that made the phone more exciting (I'm glad the term "slofie" didn't catch on -- nice try, 2019 Apple). 

But I am being serious when I say that Apple is really smart to give people a lighthearted playground for AI image generation. We are in a time filled with stories of how AI systems are ethically questionable and making terrible goofs .

Recently, Google set its Gemini AI free on search, and folks poked fun at the weird results it gave. Gemini pulled jokes from Reddit and The Onion, then spewed out answers as hard facts, telling people that eating rocks is good for you and recommending people put glue on pizza . 

That same week, movie star Scarlett Johansson publicly criticized OpenAI and got her lawyers involved over its lack of transparency. ChatGPT's flirtatious chatbot voice sounded eerily like her, despite Johansson denying the company permission to use her voice. The voice has since been removed. 

With emoji creation, Apple's implementation could get customers interested in using AI while avoiding any controversy. This is assuming that people don't make something terrible with the emojis. Let's not go crazy with the eggplants, people. 

Siri reboot: Now with more AI

The Humane AI Pin is designed to be an intelligent assistant that you wear.

One thing I'm watching out for at WWDC is if Apple's personal assistant, Siri, gets an upgrade to better understand our commands. The Bloomberg report mentioned that a more advanced Siri would be coming to not just the iPhone, but also the Apple Watch for on-the-go tasks. 

A revamped Siri that works well on the watch is exactly how Apple can stand apart from Google, Microsoft and OpenAI. If Apple has a useful AI helper on a wearable, it would do what other companies have been trying and failing to do so far: Make an AI companion that can go anywhere without needing the phone.

Read more: AI Could Be the Key to Making Smartwatches Better

A month ago we saw the launch of the Humane AI Pin , a $700 AI computer you wear on a shirt. But early reviews blasted the wearable for being buggy and not fulfilling its promises. Humane, the startup behind the AI Pin, is now reportedly trying to sell itself for as much as $1 billion.

The Rabbit R1 can generate images through Midjourney.

Last month was also the launch of another tiny AI-powered handheld gadget called the Rabbit R1 . It also tried to be an AI assistant that you could take anywhere and answer questions, but it didn't answer much and left tech reviewers disappointed . 

If Apple brings a more AI-savvy Siri to the Apple Watch, then it will show all these other companies how a real AI voice assistant can actually be helpful on the go, instead of just being hyped as helpful. 

But that feels like a big "if."

Other companies are already dabbling with putting more AI on watches as a health or workout assistant. The Amazfit Cheetah has an AI running coach of sorts. Google's FitBit Labs is launching a new program that uses generative AI to answer questions and provide more context about your activity data. The idea is that the AI could be used to help you set realistic fitness goals.

A year ago, Bloomberg reported that Apple was working on some sort of AI-powered health coaching service. But who knows how close we are to seeing that launch. Apple also took some baby steps by putting more powerful chips in the latest watch models. That means Siri requests are processed on the device faster and more securely, instead of having the data be processed in the cloud. The Apple Watch Series 9 and Ultra 2 let you ask Siri about your health data or log information about your health. And it's all done locally on the device.

Surprise twist: More privacy

Apple markets itself as prioritizing its customers' privacy.

Another area where Apple could stand apart from everyone else is privacy. It's like that old ad, what happens on your iPhone stays on your iPhone . 

Bloomberg reports that much of the processing for Apple's AI in the next version of iOS and MacOS would run entirely on the device. 

But there's a twist that worries me.

It's also being reported that if an AI feature requires more horsepower, the work will be pushed for processing in the cloud, to data centers powered by Apple's M2 Ultra chips. 

So Apple will really need to explain how our data is being protected and give examples of what tasks might need to be calculated in the cloud. What is being sacrificed here? The Information reports that Apple might protect cloud data by using some sort of virtual black box.

If Apple's AI system can summarize our private notifications, our text messages, the sites we visit and the media we consume, Apple needs to be clear about how it's handling our privacy. 

There are already many questions on what data these AI companies are slurping up to train their systems, and what we are giving away to feed these beasts. So Apple needs to be prepared to talk about privacy, which might be harder to do because of these last two rumored announcements.

The same reports say Apple will announce it partnered with OpenAI somehow. I don't know how Apple is going to walk this line of promoting a safe, private environment, but also boasting that it invited a troublemaker into the backyard to play in our sandbox. Even if you trust Apple, are you ready to trust Apple's friends? 

Apple's AI already caused drama before it's announced

There could be enormous consequences to Apple's rumored new web eraser tool.

Another concern comes from a rumored feature on the Safari browser called Web Eraser. As  reported by Apple Insider , the tool lets you take out any element of a website, like an ad. And Business Insider reports that a group of French publishers and advertisers are asking Tim Cook to halt deploying this tool because of how it could hurt publishers that rely on advertising for their business. It's not even out yet and there's already a signed letter against it, so we'll have to see what that's all about. 

So how does Apple dance around this drama? Easy. Tell everyone it's just in beta. That's what Bloomberg is reporting . Apple will likely label AI features as beta or that they're still being tested. 

Oh sure, every single iPhone customer will try it. But hey, you can't get mad at Apple if it hangs out an "under construction" sign and its AI becomes wonky and falls apart on you, misses a fact in the summary, skipped a word in a transcription, or causes your website to fail because you can't make money anymore.

It's like being confidently unconfident.

But even with a beta label, there's one slipup that people won't forgive: a privacy slipup.

Do You Know About These 17 Hidden iOS 17 Features?

CNET's Patrick Holland edited this report.

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

Mobile Guides

• Best iPhone
• Best Galaxy S24 Deals
• Best iPhone Deals
• Samsung Galaxy S24 Review
• Best Android Phones
• Best Samsung Galaxy Phone
• Pixel 8 Pro Review
• iPhone 15 Pro/Pro Max Review
• Best iPhone 15 Deals
• Best Foldable Phones
• Galaxy Z Fold 5 Review
• OnePlus Open Review
• Best Galaxy Z Flip Deals
• Best Wireless Earbuds
• Best Noise Canceling Headphones
• Best Headphones
• Best Over Ear Headphones
• Best Wireless Earbuds and Headphones for Making Calls
• Best Headphones for Work at Home
• Best Noise Canceling Wireless Earbuds
• Best Sounding Wireless Earbuds
• Best Cheap Wireless Earbuds
• Best Wireless Headphones
• Best iPhone 15 Cases
• Best iPhone 14 Cases
• Best Power Bank for iPhone
• Best Airpods Pro Accessories
• Best Magsafe iPhone Accessories
• Best Speakerphone
• Best Wireless Car Charger and Mount
• Best iPhone Fast Charger
• Best Portable Chargers and Power Banks for Android
• Apple Watch Series 8 vs Series 7
• Best Apple Watch Bands
• Best Android Smartwatch
• Apple Watch Ultra Review
• Best Smartwatch
• Best Prepaid Phone Plans
• Best Cheap Phone Plans
• Best Unlimited Data Plans
• Best Phone Plans
• Best Phone Plan Deals
• Best Senior Phone Plans
• Best Family Phone Plans
• Best Travel Phone Plans
• Best Verizon Plans

• SUGGESTED TOPICS
• The Magazine
• Newsletters
• Managing Yourself
• Managing Teams
• Work-life Balance
• The Big Idea
• Data & Visuals
• Reading Lists
• Case Selections
• HBR Learning
• Topic Feeds
• Account Settings
• Email Preferences

Share Podcast

Tech at Work: How to Get the Most Out of Digital Collaboration Tools

Is your team making good use of tools like Slack, Zoom, and Trello?

• Apple Podcasts

Tools for collaborating online—email, instant messengers, videoconferencing apps, cloud storage, and so many others—have become the norm for most of us. But few leaders have taken the time to learn the best ways for their teams to use these ever-present tools.

Tech at Work is a four-part special series from HBR IdeaCast . Join senior tech editors Juan Martinez and Tom Stackpole for research, stories, and advice to make technology work for you and your team.

In this episode, they talk to researcher Paul Leonardi and organizational leader Sandra Ma . The experts explain how to best match collaboration tools with work tasks and how to know when a technology isn’t working for your team. They also discuss how leaders should go about selecting the most effective digital collaboration tools for their organizations.

Leonardi is the Duca Family Professor of Technology Management at the University of California, Santa Barbara.

Ma is the CEO and cofounder of Jovial, a company that helps teams improve their communication at work.

New episodes of Tech at Work publish in the HBR IdeaCast feed every other Thursday from May 2, after the regular Tuesday episode. Please let us know what you think of the series and which technology topics you want us to cover at [email protected] .

Further reading:

• Does Your Team Really Need Another Digital Tool? (Ryan O’Hara)
• What Managers Need to Know About Social Tools (Paul Leonardi and Tsedal Neeley)
• Zoom In… or Out? Why Face-to-Face Meetings Matter (If/Then: Business, Leadership, Society)

JUAN MARTINEZ: All right, Tom, how many collaboration technologies do you think we used to make this show?

TOM STACKPOLE: All right, I’m just going to count them off. Let’s start with Slack.

JUAN MARTINEZ: One.

TOM STACKPOLE: Microsoft Outlook, email.

JUAN MARTINEZ: Two.

TOM STACKPOLE: We use Google docs, don’t tell our bosses.

JUAN MARTINEZ: Three.

TOM STACKPOLE: WebEx.

JUAN MARTINEZ: Four.

TOM STACKPOLE: Microsoft Teams also.

JUAN MARTINEZ: Five.

TOM STACKPOLE: SquadCast.

JUAN MARTINEZ: Six.

TOM STACKPOLE: Box.

JUAN MARTINEZ: Seven.

TOM STACKPOLE: Is that it? I feel like I’m missing something.

JUAN MARTINEZ: You missed Google Chrome, Safari and the telephone.

TOM STACKPOLE: Our browsers’ collaboration tools, I feel like those are solo tools.

JUAN MARTINEZ: Could we have done it without the browsers? I have to share via Box, through a browser.

TOM STACKPOLE: I’m challenging your definitions. A desk, a computer, a light. I mean, our apps are our office functionally, right? And so when we were getting this off the ground, you and I are texting people, we kind of have our little grooves of how we like to do things. And all of a sudden we’re in the middle of a project that we have to coordinate quickly. And so we need to decide is this a Google Doc? Is this a thread? Is this an email? Is it a meeting? I mean, one thing that I will say that this podcast project has brought up is that not all of these tools play well together and when they don’t work, then it becomes very, very frustrating very quickly.

JUAN MARTINEZ: Yeah. And I think that’s the problem that a lot of people have is we don’t get to choose these tools and if we do choose them, usually we’re going against IT’s preferred way of working. And so for managers it’s really, really important that they listen to the complaints that our experts are going to bring up because a lot of people are feeling this way, they’re struggling, they’re in too many applications during the day, they’re losing information. You know me, Tom, I like email. Just send everything to me in email and I’ll get to it eventually. Having 10 different apps to do one podcast seems a bit much.

Welcome to Tech At Work , a four part special series of the HBR IdeaCast . I’m Juan Martinez.

TOM STACKPOLE: And I’m Tom Stackpole. Every other Thursday, we’ll bring you research stories and advice about the technology that’s changing work and how to manage it.

JUAN MARTINEZ: This week we’re talking about collaboration technologies.

TOM STACKPOLE: We’ll use them various instant messengers, shared drives, project management tools, video apps, email. But how often do we stop and think about how best to use them?

JUAN MARTINEZ: Later on, we’ll talk with a former product team leader from the tech industry who has led more than one team through the dilemma of using collaboration tools. Her solutions are simple and translate across any industry or app.

TOM STACKPOLE: But first, we’ll hear from a researcher who can help us understand how to make better choices about matching collaboration tools with our tasks at work and how to know when a technology isn’t working for your team.

JUAN MARTINEZ: All right, let’s get into it. Our first guest is Paul Leonardi. He’s a professor at the University of California at Santa Barbara. And we started with Paul’s take on why remote work is so hard despite all the many tools we have for collaboration,

PAUL LEONARDI: When should we be in the office, when should we not be in the office? And what I’ve seen is the companies that are most successful at doing this remote work four years post lockdowns and shutdowns, are the ones that have figured out how do we match where we’re at in a particular project with the net needs for coordination or the necessity of interdependence in our work. So if you’re working on a part of a project where I do my piece, you do your piece and at the end we pull it all together, that’s a great candidate for working remotely.

Because we don’t have to be in the same room together, hash things out, come to some mutual agreement or understanding, but there’s other kinds of work where we work in a very coordinated way. Where there’s a lot of disagreement about how to move forward, where we need to really talk through a set of concepts or ideas, where we’re going to go back and forth really rapidly and those are the kinds of activities that we do need a lot of coordination for. And it’s just hard to have that kind of coordination when we’re using digital tools. Companies that are doing well in remote work are helping their employees and giving them guidelines about what kinds of tools we might use for certain kinds of tasks.

TOM STACKPOLE: So who is empowered to make these kinds of choices? To me, it seems like this is where a lot of companies are struggling. They’re trying to figure out what are the tasks and what are the tools that we need to have on hand to do them successfully?

PAUL LEONARDI: Yeah, let me give you a little bit of background based on a survey that I did with SANA, Amazon AWS and one of my colleagues, Professor Bob Sutton. So we conducted a study of a number of different users and we found some pretty jarring stats about people’s digital technology use in the workplace. So on average, we found people spend 84 minutes a day looking for the information they need to get their work done. That’s a lot of minutes per day. They spend… And I think this one’s even more surprising, about 30 minutes per day deciding what digital tools they should use for a specific task. And they spend almost an hour a day switching between different tools. What that suggests to me is that we have an overabundance of different communication and digital technologies in our workplace. And this may sound a little Draconian, like we’re trying to decide for people, but what the research shows is that too much choice is always demotivating and it’s difficult to get people on the same page about what kinds of tools are the best to use.

And so if you’re the leader of a team, you may want to begin to create some for these kinds of tasks are best done using this tool. So that people, number one, don’t have to spend those 30 minutes a day deciding what tools they’re going to use. And they won’t feel as overwhelmed or exhausted by having to make those decisions constantly. We also have seen that several really senior level executives have started to come down and say, “We need to eliminate many of the technologies that we have in the organization.” I was working with one company and they did an audit and found out that they had 47 different digital collaboration tools of some kind or another at use in the company.

And so the CTO decided we’re going to drop that number way, way down and did a bunch of consultation across the organization and said, “There are 10 key tools that we’re going to support and endorse and we’re basically outlawing everything else.” And there was a bit of an uproar from employees saying, “Oh, that’s my favorite tool to use and I can’t believe that’s going away.” But after a period of about six months, people were much happier that they didn’t have so much choice and it also meant that it was much easier for them to align with others about what technology they should use.

JUAN MARTINEZ: Well, it sounds like you’re a bundle versus best of breed guy. Meaning you’d rather have a few small tools that you can master rather than having what’s “the best tool” in its class. I asked this because Tom is a huge best of breed guy. I’m a bundle guy, reduce the uncertainty for me and I’ll master the tool that you give me, whatever that may be. My question is, based on your research, can you tell us why we’re so bad at choosing that right bundled tool? It seems like whenever companies do it, they pick the wrong one, people rebel.

PAUL LEONARDI: Yeah. Well, one of the key reasons is that we are always being pushed to think about what’s the latest and the greatest technology. There is a billion dollar marketing enterprise out there that’s getting us to think about the new capabilities that some tool has and how they’re going to make our jobs better. I have spent 20 years watching people like an anthropologist sitting behind them, using different technologies. And I can tell you with a lot of confidence, people use about 10% of the capability of any tool that’s in front of them. If those features are all there but you never actually use them, does it make a difference? No.

TOM STACKPOLE: Thanks for adding me, Juan, as being a hardliner. My version of this argument for best of breed is that you get one tool, it does one thing really well and hopefully that means it’s intuitive. And so you have all the interoperability of a bundled package and all of it makes me want to throw my computer out the window because it’s just consistently frustrating in all of these different ways.

PAUL LEONARDI: Yeah, I hear you. I hear you.

TOM STACKPOLE: Reasonable people can disagree. I want to go back to a piece that you wrote back in 2017 with Tsedal Neeley who’s an HBS professor. You found that people were using Slack and similar tools to connect with new colleagues and acquire institutional knowledge. They were lurking in chats and sort of watching what people were talking about, how decisions were being made and that people were getting a lot of value out of that kind of tool and that kind of activity. So what are the kind of new opportunities and new challenges that are emerging now that people have been using these tools for a decade and are using them more intensely in sort of this remote and hybrid capacity?

PAUL LEONARDI: Well, back in 2016-ish timeframe when we were doing this study, there wasn’t a whole lot of content on most of these tools. It was relatively easy to scroll through a news feed on one of the tools that we were looking at and you could read a lot of content that was coming from people from different parts of the globe. If you spent maybe 20 minutes a day, you could get a pretty good handle on what’s happening in different arenas and in different divisions. The major difference today is that the volume of content and the speed at which that content is produced has exploded. So it is impossible for any one person to read through a bunch of news feeds and interactions that other people are having and have a good handle on what do people know across my organization? Impossible. There’s just so much content.

So a colleague and I did a study around this and we said, “Well, what are people going to focus on and what are they going to pay attention to if there’s so much content?” And it turns out that what they pay attention to is the content that’s being produced by the people they already interact with the most. So they’re not expanding their networks, they’re not getting access to new knowledge and information from different parts of the company. They’re just hearing for a second time what they’ve already heard in their project meetings or in the hallway or across their cubes. And that’s not what these tools were meant to do.

So I think that’s a key challenge for how we think about using these tools today. I’ve worked with a couple of companies that are eager to see how we could use AI to begin to identify information that people might find useful and direct their attention in those ways. And so the reality is that our ability to attend to stimuli is limited. And the more information that we are exposed to, we end up focusing on that information and not being able to expand the scope of the information and data that we might want to see. And that’s just a big change that we’ve experienced in the last seven years.

JUAN MARTINEZ: How do we make the best use of video conferencing tools? Because to me it seems like video conferencing tools are the final stage before we start wearing virtual reality goggles. Like this is where we can chat, this is where we can share files, this is where we can see each other, but it still seems like they’re just these awful tools that are hard to get into. It crashes. So what do we do? Where do we go from here?

PAUL LEONARDI: Yeah, not only do they crash, but they create a sense of anxiousness. From what I’ve seen in the data in my own experiments that I’ve done in companies, video is still quite good When you need to engage in some kind of synchronous activity, right? Where there is back and forth required and you’re going to be processing information together collectively. It leads to better outcomes than if we are moving sequentially back and forth through some kind of text-based medium email, IAM Chat, whatever it might be.

But often I think people abuse video conferencing because we hop on it way too quickly and easily and we expect people to have their videos up. And when we do that for an issue that could have more easily been resolved via email or in our Slack channel, we’re introducing more information processing, more complexity, more anxiety producing activities than we really need to be. And so I think we should still be judicious about when we use video conferencing that just because it’s good, doesn’t mean that it’s great for all tasks and we should be thinking about what are those tasks that it’s most useful for. So we don’t burn people out.

TOM STACKPOLE: Personally, I’m still a phone call person and it was funny during the pandemic, there was a moment when we were all using video conferencing and it was like, “Do you want to just hop on a call?” And people were so relieved, it was very funny. And then you get to pace around and gesticulate like a maniac and it can be good.

PAUL LEONARDI: It’s become so much the norm that people ask to hop on a Zoom call, that it seems awkward to me sometimes when I give people the choice and they say, “Oh, let’s just chat on the phone.” And it goes back, I think to this best of breed argument we were having before that we are conditioned to think not only we should be using the latest and greatest, but we’re also conditioned to think that any tool that provides more capabilities is a better tool to use. And in fact, that’s not always true. That many of the tools that provide lots and lots of capabilities are not as good to use because they create too much choice and we need to be thinking in simpler terms.

TOM STACKPOLE: So in that spirit, how do we figure out when something isn’t working? So what should leaders keep an eye out for?

PAUL LEONARDI: One of the things that I urge a lot of leaders to look at is, is there a tool that occupies more than 80% of all of your team’s interaction? And if there is, you most likely have a problem. Any technology that achieves that much of a monopoly on our time and attention, means that it’s getting used for activities well beyond what it needs to be used for. And that’s an indication that you’ve got a problem. Even if people aren’t complaining, even if people are not telling you, “I feel like I’m overwhelmed.” People are not using the right tools for the right job if they’re using one tool 80% of the time for every single job.

JUAN MARTINEZ: Well, I disagree. I use email 80 percent of my day. I send massive amounts of email. There’s nothing wrong with email. It always works. We always get what we need.

PAUL LEONARDI: I’m going to disagree with you on that one. I think we way overuse email. Way, way, way overuse email, and I’m as guilty as the next person of sending way too many email messages for things that I should be picking up the phone to do, for things I should be walking down the hall to do, for things that I should be looking up myself. So I think email is a perfect example of a tool where you see, yeah, people are using it 80% of their time and they shouldn’t be.

JUAN MARTINEZ: Tom, back me up here. I’m right. Email is the golden tool for [inaudible 00:16:07] work.

TOM STACKPOLE: Email is the most dispiriting part of my job. Because I open it up and there’s a billion unread things and we’re editors, we spend most of our day… Well, you should be spending most of our day looking at text. And all I’m doing is I’m looking at email chains, trying to remember what was the point of them in the first place. And that’s using brain power and a certain skill set that I theoretically should be using on drafts primarily. So I mean the thing that I overuse is Slack because it gives me the little dopamine rush. I get to see the little thing pop up and there’s no backlog or less of a sort of crashing discernible backlog. But Paul, what’s your vice tool that you can’t give up that you overuse?

PAUL LEONARDI: Oh, mine is definitely email. It seems like it’s much easier to respond to somebody on email with a difficult issue or a difficult topic rather than call them up. But nine times out of 10, it ends up being way more work responding to them on email than it would’ve been if I just went to the office. I’ll give you a quick example. So last year, I spent several months in Austria. And I was communicating with somebody that I depend on a lot in the US. And because of the time difference, email was the most easy way to communicate.

And we had kind of a sensitive issue and I kept communicating with this person sending emails and the person kept sending emails back to me and we just were not seeing eye to eye. And my frustration with this person grew and grew. I should have just picked up the phone and talked about. And we do this kind of stuff all the time, right? Because there’s a seductiveness to the ease of email or the ease of text-based communication that the allure is that I can just say a couple of things and get it off my plate. But if you add up all the back and forth that needs to happen in the emotional distress that comes with not resolving issues as quickly as we should, they end up taking a toll. And that can happen in any medium.

JUAN MARTINEZ: Coming up after the break, we’ll talk more about how leaders can make better decisions about digital collaboration tools for their organizations. Then we’ll speak with the leader who solved her team’s real life slack dilemma. She’ll tell us how she did it. Be right back.

So Paul, when employees go to their bosses and they say, “Listen, all of these tools, they don’t work the way we want them to. I don’t enjoy using them.” How do they make the case to their boss and then their boss making the case to his or her boss that we have to buy a tool that actually works and we need to scrap what we’ve been doing? It’s a big step.

PAUL LEONARDI: Yeah. Well, a lot of people have voted with their feet in organizations over the last couple of years, and this is probably why we see Slack being so widely diffused. Most people could just charge to their corporate cards. It wasn’t an enterprise license and so you could just get Slack for your team. I think the more useful thing for people to do is to talk about the demands that they’re facing in terms of their coordination and their coordination needs. So do we feel overwhelmed by having to use five different applications and switch amongst and between them all the time? Do we feel like we’re not able to reach mutual understanding with other people given the tools that we currently have? Being able to articulate what are the key areas where our communication and collaboration are breaking down is really important to being able to make a convincing argument that the tool set that we have is not working.

Often, then what I see leaders do is they say, “Okay, well either too bad suck it up or we’ve got IT policy around these tools and that tools,” which is really just a huge cop out. And this is how most companies have been set up, is that you’re supposed to do the work and the technology sits in the background and somebody else deals with that. That’s not the world we’ve been in for at least the last 20 years, but most companies still operate as though we are. Every manager has to be a technology manager in some ways. And that means that you have to understand what kind of infrastructure do we use to get the data that we need for our team? What kinds of communication and collaboration tools should we have in place to make sure that everybody can operate successfully together in the ways they need?

And I’ve asked people in almost every study I’ve ever done, how much do the tools that you use wear you out? And that’s separate from how much burnout do I feel from the demands of my job, et cetera. And that number has been growing and growing and growing over the last 20 years. We do feel really exhausted by the use of our tools. So it does speak to the importance of making sure that we are thinking about our employee wellbeing, thinking about tools as part of the culture of our organization and making sure that we’re being smart in our curation of those tools.

TOM STACKPOLE: So let’s talk about that leader perspective for a second. What kind of information do you need as a leader to make a smart decision about this? What kind of questions do you need to be asking?

PAUL LEONARDI: The kinds of questions that I would recommend starting with are first, how many tools do you use to communicate and to work with people on your team? Then I would ask that same question, but for people in different teams, in different parts of the organization. And if you hear a number that’s north of five, then you likely have too many tools available for your team to be using. So that’s the first question, quantity. The second is, what are the kinds of activities that you need to coordinate with people about? And if those activities don’t require a lot of back and forth and don’t require people to constantly be live with one another interacting, that tells you something about the suite of tools that you need to have in your organization.

JUAN MARTINEZ: I’ve been doing this almost 20 years, writing about technology and business and it seems for 20 years the idea has been that we’re going to integrate all these tools into one beautiful platform where we’re not going to run into any of those problems. I don’t see that happening anytime soon. But let me ask you to put your prognosticator cap on. Where are we going to be with collaboration tools in 10 years?

PAUL LEONARDI: I do think what we’re going to see is that especially with the use of Gen.AI and its ability to handle all this unstructured data that we produce through all these tools, more cues for us about when we need to contribute, when we need to interact. And more things handed to us on a platter about here’s the information that you need in order to make this particular decision.

TOM STACKPOLE: So to sort of get back to the messy and imperfect moment we’re in now, do we actually have the tools that we need to work in a dispersed or to work remotely and we’re just not using them, right? Or are there gaps that you see where we do need a different kind of tool that will help us actually do this in a way that feels less like an information dump that you’re just trying to always keep up with?

PAUL LEONARDI: I do think we mostly have the tools that we need. What we don’t have is the right kind of sensibilities about how to use those tools all the time. And I’ll tell you a quick story that I think is illustrative of this point. So with my colleague Joe [inaudible 00:24:03] who’s now a senior associate at McKinsey, we did this study where we looked at this big automotive company and this broadband provider. And we compared basically how do these teams work together when people don’t live in the same time zones and are at the office at different times of the day. But also there’s a co-located component. And we could show pretty much that it didn’t matter where you were around the world and what tools you were connecting with. Everybody could do their work at the same level of proficiency and could communicate with one another in pretty decent ways, but there was sort of a seedy social dynamic, right? That took place-

JUAN MARTINEZ: I love seedy social dynamics.

PAUL LEONARDI: Yeah, yeah. So listen up. What would happen is that the people who were in the office with the boss would often send little remarks like, “Oh, sorry, you missed this, but we had this discussion or whatever.” And so the people that weren’t co-located with the boss, who were working remotely from a different state or a different country, started to feel like they were just missing out on all kinds of actions and opportunities. And more importantly, felt like they weren’t in line for raises and promotions or getting better jobs that they wanted. And to combat that problem, they started to create all of these scenarios that demonstrated how committed they could be to the team and to the organization. They would often sacrifice important things like miss their kid’s birthday party in the evening so that they could be on the call and let the team know, right? Like, “I’m missing my kid’s birthday party so I could be on the call. Look how committed I was.”

And the managers, the leaders ate it up and we saw them assign better jobs and better projects, right? To these people and evaluate them more favorably. So everybody was doing great baseline, but when you got this perception that we had this disadvantage because we were remotely, now we start making these sacrifices and people got real burnt out by that. But it accrued all the advantages that they wanted them to accrue. So I think that’s an interesting example, right? That the tools were there, people were contributing in great ways to the team, but these seedy social dynamics, right? Get catalyzed and that’s what throws things off the rails. So it’s kind of a long-winded way of saying, “I think we mostly have the right tools to do the right job if we can figure out how do we manage the fact that not everybody can connect in the same way.” It’s those kinds of choices. Choices about how we integrate the technology with our organization and with our organizational culture that are the real challenges that we still face today.

JUAN MARTINEZ: Thank you so much for being here today. This has been absolutely fantastic.

PAUL LEONARDI: Great. My pleasure. These are fun topics to discuss. They’re also really important.

JUAN MARTINEZ: That was Paul Leonardi, professor at the University of California, Santa Barbara. And he’s at work on a new book about digital exhaustion. Look for it next year from Riverhead.

Before we wrap up, we’re going to switch from research and focus on a real life collaboration technology dilemma involving Tom’s favorite tool, Slack. Our guest is Sandra Ma. She’s led product teams at a handful of startups in the Boston area. Now, she’s the co-founder and CEO of Jovial, a company that helps teams improve their communication at work. And Sandra started off by telling us why Slack was such a challenge for one of her teams.

SANDRA MA: Oftentimes we’d have a big initiative and we want to make sure everyone’s involved. And so what would happen is we’d have this big kickoff meeting and typically someone from the leadership team would say, “All right, well let’s make sure we create a Slack channel for this project, of course, to keep everyone aligned.” And then after the meeting, we have this 30 person Slack channel. And inevitably what happens is that that spawns into another four Slack channels. Because within that larger group, of course we have work streams, SWOT teams, whatever everyone wants to call them. And so suddenly I’ve just been added to five different Slack channels for the single initiative. And on top of that, I’m overseeing a bunch of other projects too. Now we’re talking, I’m in 50 different Slack channels all of a sudden. And it was really overwhelming, especially when you get silently added with no context and there’s a year of history and the Slack channel to scroll through and you just get the kind of deer in headlights, what do I do type of feeling.

TOM STACKPOLE: It’s one of the great passive-aggressive office moves of all time at this point.

JUAN MARTINEZ: Well, but other than the inconvenience or having to backtrack and read a year’s worth of Slack messages, was work suffering in any way because of the miscommunication, because of the overabundance of communication that you were having?

SANDRA MA: Yeah, I felt like I was spending so much time looking for information and sorting and filtering through all of the Slack messages. And I think a lot of my colleagues shared this sentiment too. And they also shared, “Sandra, did you see this Slack or did you see that thread?” And I hadn’t seen it, and I would ask them the same thing for one of the other Slack channels. And they had missed some messages too. And so important information was getting missed. And then we were actually delayed in launching products as a result because of this miscommunication as well.

TOM STACKPOLE: And so you’re hearing this, you’re watching things get lost and fall behind. So what was your first step that you took when you realized this is a problem and you realized you had to do something about it?

SANDRA MA: Talking to the other folks in the group that felt the same way, that was a bit of a light bulb moment of like, okay, I’m not the only one who feels this way, and so we do need to do something about it. And so after that, it was identifying the people that were doing the primary work in the group and getting them together and establishing communication norms.

JUAN MARTINEZ: I’ve been on teams where we’ve introduced new solutions and normally you test the solution and you either decide, we hate this, we’re going to get rid of it, or the few people who test it fall in love with it and then everybody has to live with the decision of the few people who tested the solution. What was your experience in testing new solutions? Which tools did you try? And ultimately, which one did you settle on?

SANDRA MA: It was really thinking about what’s the intention behind any of the communications we have going out. And we agreed that Slack was only for day-to-day, quick exchanges, non-urgent questions and status updates. And Slack was not going to be the source of truth for any important information. But then we were using email to send out updates to the broader team that were important, and the broader team could expect those to come at the end of every week. And then meetings would solely be used for problem solving any complex topics would happen in meetings. And then lastly, documentation. In some cases people think they need to get some kind of fancy project management tool. In this case, we landed on let’s have this spreadsheet. It’s going to be our single source of truth. All of the information about this project or initiative will live in one place, will list very clearly all of the owners and roles and responsibilities of people so people know who to ask questions to. And then we all can trust that all of the latest information is within this one place.

TOM STACKPOLE: So how did you get people on board? What was that process like? Because I’m reflexively a malcontent and I would probably push back because I’m difficult. But how did you get people on board with this? How did you get people to buy in?

SANDRA MA: So making it very clear and easy and effortless for them to do and showing that following through with this new communication process is actually going to help us move faster. And people were seeing that too because no longer did they have a ton of questions that they had to throw in the Slack channel because they knew they could go to this single place to have most of their questions answered. And for that last 5 to 10% where maybe there was some question that wasn’t within that documentation, then could go to the Slack channel.

TOM STACKPOLE: I’m curious, what were the kind of anxieties or concerns that you heard back from people when you launched this news? And then how did you address those?

SANDRA MA: I think whenever anybody comes to me with concerns, it’s all about listening and understanding and what’s kind of behind the concern. And so I think an example is some people are like, “Well, I use Slack for everything. This is my main mode of communication.” And my response would be, “That’s great. We’re still going to have Slack as a form of communication. We’ll still put updates there, but this single source of truth document is going to be where everything lives, and that’s where you go for the most updated information.”

JUAN MARTINEZ: So if we’re going to do a before-and-after snapshot, you have to tell us what improved as a result of this. Like did you earn more money as a company? Was communication faster? What was the business result of standardizing this approach?

SANDRA MA: Money was part of it for sure. I think saving time and money, there was a lot more efficiency. And because we eliminated confusion, employees were actually able to spend time on doing the work and they didn’t have to spend all that time just sifting through Slack. So that in itself was huge. But then as a result of all that, we were able to launch the product faster. There were no surprises, there were no mishaps. The team just overall felt better.

JUAN MARTINEZ: So how do you tell somebody who was in your position how to get this process started to do it the right way from day one?

SANDRA MA: Yeah. So I would say three words to remember, and that’s clarity, consistency and connection. Clarity, the first one is all about that establishing the communication norms and setting very clear expectations. Consistency is thinking about, all right, well now we have established the norms, but now we actually have to get people to adopt them, right? And so leadership has to be following through and they have to be communicating these new standards with their employees. Otherwise, nobody’s going to take it seriously. And then the last piece is connection. Building trust within your teams and employees feeling seen, they’re feeling understood. And when you have that connection, then what happens is you have accountability. And so Tom, Juan, let’s say we’re on the same team and you both ask me there, “Sandra, we need your help on a project.” And I’m going to tell you, “Yeah, I got you.” Because you guys had my back last time, it’s all good. I’m not even going to hesitate. And that’s something that sometimes is missing because of ultimately people don’t feel that connection to the work.

JUAN MARTINEZ: Tom really like Slack. I really like email. If you had to pick between one of the two, what are you choosing?

TOM STACKPOLE: Yeah, who’s right?

SANDRA MA: There’s no right or wrong. There’s preferences. I personally am an email person.

JUAN MARTINEZ: That’s the right answer.

TOM STACKPOLE: Am I using email wrong? Because I just think it’s like an unfiltered stream of chaos in my life.

SANDRA MA: But then what is Slack to you, if that’s what email is?

TOM STACKPOLE: It’s a more familiar kind of chaos that I feel comfortable navigating.

SANDRA MA: Okay.

JUAN MARTINEZ: In fairness to Tom, he handles all of the technology pitches that we get for the website. So he gets tons of email from a ton of different people.

TOM STACKPOLE: I got to stop getting pitches. That’s my solution.

JUAN MARTINEZ: Slack is internal, so he can avoid dealing with the outside public on Slack. I think that’s why he likes it better.

SANDRA MA: Got you. So you are kind of in a protected shell when you’re in Slack.

TOM STACKPOLE: It’s my safe space.

SANDRA MA: Right, email, anything goes.

TOM STACKPOLE: Yeah. This is how we navigate our internal debates.

JUAN MARTINEZ: We do them in public. This is the best way.

SANDRA MA: Spring a neutral third party into the mix to solve the problems.

JUAN MARTINEZ: Thank you so much for being here today. We really appreciate it.

SANDRA MA: Yeah, thank you for having me. Really appreciate being here.

JUAN MARTINEZ: That was Sandra Ma. She led tech product teams before launching her own company, Jovial, which focuses on improving workplace communication.

TOM STACKPOLE: Next time on Tech at Work . What does your company need to know about tools like the Apple Vision Pro? These aren’t in mainstream use yet, but there are already some interesting use cases.

JUAN MARTINEZ: We’ll talk with the researcher who’s studying how companies use augmented reality, mixed reality, virtual reality, spatial computing, and immersive technology for retail and marketing engagement. And a developer will tell us how to get started with the Spatial Computing project. That’s our final episode of the series. Look for it in two weeks, right here in the HBR IdeaCast feed.

TOM STACKPOLE: Thanks to our team, senior producer, Anne Saini, senior editor, Curt Nickisch, audio product manager, Ian Fox, and senior production specialist Rob Eckhardt. Special thanks to Hannah Bates and our friends on HBR’s video and social teams, Nicole Smith, Ramsey Khabbaz, Kelsey Hansen, Scott LaPierre and Elainy Mata. And much gratitude to our fearless leaders, Maureen Hoch and Adi Ignatius. Thanks for listening to Tech at Work , a special series of the HBR IdeaCast . I’m Tom Stackpole.

JUAN MARTINEZ: And I’m Juan Martinez. Join us again in two weeks.

• Subscribe On:

Latest in this series

This article is about collaboration and teams.

• Technology and analytics
• Operations strategy
• Virtual teams
• Process management
• Leadership and managing people
• Organizational culture

Partner Center