safari developer tools clear

Safari User Guide

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

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

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

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

Open Safari for me

How-To Geek

How to turn on the develop menu in safari on mac.

The Develop menu lets you view page source in Safari on Mac.

Quick Links

How to enable the develop menu in safari on mac, how to view page source in safari on mac.

When you right-click on any web page in Safari on Mac, it doesn't reveal the Show Page Source and Inspect Element buttons. To see these, you need to enable the Develop menu---we'll show you how to do that.

Once you've enabled the Develop menu, right-clicking a blank space on any website will reveal the Inspect Element and Show Page Source buttons. These allow you to take a look at the source code of any website, which is useful for things like downloading images from websites and debugging code or finding out what it looks like behind any site (for website designers).

You can easily turn on the Develop menu in Safari by following a couple of steps. Open Safari on your Mac and click the "Safari" button in the menu bar.

Next, select "Preferences." Alternatively, you can use the keyboard shortcut Command+, (comma). This will also open up Safari preferences.

Go to the "Advanced" tab.

Check the box for "Show Develop Menu in Menu Bar."

Now the Develop menu will appear between Bookmarks and Window at the top.

Apart from being able to view the page source, this will allow you to access developer-focused features, such as disabling JavaScript on any website.

Once you've enabled the Develop menu, there are a couple of ways to view the page source in Safari.

Open any website in Safari and right-click the blank space on the page. Now, select "Show Page Source." You can also get to this menu by using the keyboard shortcut Option+Command+u.

If you're looking for images or other media elements from any web page, Safari makes it easy to find these. In the left-hand pane, you will see various folders such as Images, Fonts, etc. Click the "Images" folder to quickly find the photos that you need.

After selecting an image, you can view its details easily by opening up the details sidebar. The button to open this is located at the top-right of the console, just below the gear icon. You can also open this with the shortcut Option+Command+0.

Click "Resource" at the top of the details sidebar to view details, such as the size of the image and its full URL.

You can change the position of the page source console easily, too. There are two buttons at the top-left of this console, right next to the X button. Click the rectangle icon to move the console to a different side within the browser window.

If you'd like to open the page source console in a separate window, you can click the two-rectangles icon. This will detach the console and open it in a separate window.

To check out the code for any specific element on the page, you can right-click that element and select "Inspect Element." This will take you directly to the code for the element that you selected.

Whenever you're done looking at the code, click the X button to close the page source console and return to browsing on Safari. You can also check out how to view a website's page source in Google Chrome  here.

Related: How to View the HTML Source in Google Chrome

How to clear the cache of a website added to the home screen?

I am developing a simple web application. Users of the application can add the application to the home screen of their iOS device to be presented with a nice app icon and an almost app-like user experience. This approach has one problem though:

While developing I deploy a new version of the application rather often. I then open Safari on the iOS device, hit refresh, and all HTML-, JavaScript- and CSS-files are refreshed. So far everything works as designed.

But if I open the website using the shortcut added to the homescreen, old stylesheets are being loaded and no matter what I do, the website cannot be persuaded to discard its cached files and reload them.

Here is what I tried so far:

• I removed and recreated the shortcut.
• I cleared the history and browser data from Safari
• I cleared the history and all website data using the Settings app.
• I rebooted my device.
• I even added headers instructing the browser to not cache any files at all.
• I tried a whole bunch of combinations of the steps mentioned above.

The home screen web app did reload an HTML-file that had a single word changed, though - so something must be working correctly. Appending some suffix or parameter to the CSS file links is no option here. I am using Aurelia in combination with jspm - all stylesheets and script files are included automatically acoording to their names.

And to just repeat it: When opening the page using Safari (or any other brother on the iOS device) everything works as expected.

Could anybody point me in the right direction on how to fix this problem?

I found a workaround for this infuriating bug:

request = new XMLHttpRequest() request.open("GET", "url you want to reload") request.send()

This forces a refresh of the cache with the new file. If you look at the file in the Sources tab, you'll see its content being refreshed while executing this.

looks like a bug for me. I am also experiencing this problem.

I recently asked this same question here:

https://forums.developer.apple.com/thread/62464

And even referenced this thread. I haven't gotten any replies there, but for what it's worth I can offer further confirmation that this does seem to be an issue.

I filed a bug report just in case, but meanwhile I'm still looking for a solution. So, if anyone has any ideas or suggestions, please don't hesitate to share.

Has there been any workaorund on this issue since iOS 10.1.1 still shows issue?

I am have two units that are experiencing a similar problem; We have a website designed to have a sub-page saved to the home screen. On these two units it seems like an old version of code has been cached (or something), resulting in a bug being unable to be fixed.

Any workaround or solution would be very appreciated. Alternatively, any suggestions on how to troubleshoot, in order to help you possibly find the source of the problem.

I am having this problem as well. When I set <meta name="apple-mobile-web-app-capable" content="no"> a non-cached version loads in Safari and can be installed.

However, with content="yes" a non-cached version loads in Safari, but the original cached version is re-installed from Share > Add to Home Screen.

I have tried disabling the cache from Safari > Develop > Disable Caches, emtying the caches from Safari > Develop > Empty Caches, and hard reloading from the inspector with cmd+shift+r.

Also, clearing from iOS with Settings > Safari > Clear History and Website Data, as well as Settings > Safari > Advanced > Website Data > Edit > Remove.

It would be nice if the Develop > Empty Caches command would flush the entire cache on Safari iOS when mobile device is connected with cable.

Same here - absolutely anaoying - I tried some ways descripted above and nothings helps ... Not only the MacOS Sierra Safari is driving me nuts with its poor cache behavior since the init version of Sierra. Also this issue here on iOS is horrible as a Home Screen web app totally ignore any changes of ressources of an web app,

If you have a Mac, try this...

iOS: open settings -> safari -> advanced enable web inspector.

Mac open safari -> Preferences -> Advanced enable “Show Develop menu in menu bar"

connect iOS to Mac with cable.

Open offending web app on iOS device

Open Mac-Safari

Under “Develop” find the name of your iOS device, move to it. Should see the webpage name appear. click it.

This will open a safari Web Inspector. press the refresh button (arrow going in clockwise direction). Phone should refresh with new content.

I just discovered this today and after searching the web I discovered that most of the reports about it are as old as 2012.

Many of the suggestions are the same as reported here.

https://discussions.apple.com/thread/3802691?tstart=0

I tried everything suggested without any success.

The weird is that only my iPhone 6 has the problem.

My iPad air does update. I Use IOS 10.2 on both.

Has anyone created a bug report on this. It just weird that this bug has existed since 2012 without anyone doing something about it.

"Has anyone created a bug report on this."

I filed a bug report a while ago. I haven't tried it on 10.2 yet though, so I'm not sure what the current state of things is (aside from what's being reported here).

Just upgraded to 10.2 and am still having this problem.

The app will occasionally refresh (I think based on a timer), but behaviour is incredibly inconsistent and making it impossible to develop a web app on mobile devices.

Am having this problem on iPad 2 and iPhone 5 running iOS 9 and 10, respectively.

We have been building using a similar method to you guys and came across the same issue in iOS 10; just really unpredictable caching behaviour.

Eventually, our work around has been to strip back our manifest file and build it up item item.

The smaller the manifest file, the more predictable and reliable the caching behaviour.

So, suggest that if you can strip any fat out of your manifest and build it item by item, giving this a go.

Sorry it's not a 'proper' solution though!

I dont know how to fix the home screen problem, but 2 ways to force the page to reload once this happens are

1. Double click on refresh.

2. Load the page from a shortcut within Safari.

To avoid hair pulling you can put a false parameter name after the call to the css or js file you are trying to update/refresh. This works on Chrome too which also holds on to cache aggresively. Just put something like the following on the end of your script inclusion:

<link rel="stylesheet" href="mycssfile?id=12345.css">

or for js file

<script src="assets/js/myjsfile.js?id=1234”></script>

This forces Safari/Chrome into treating the file as ‘dynamic’ and it will update it each time. You can remove the ?id=12345 for production

‘id’ can be anything

‘12345’ can be anything

You don’t have to change the figure each time you make a change, but if your browser suddenly stops updating again you can just change the number by one digit for instance,

hope that helps,

Changing the stylesheet filename has worked for me in the past.

But even quicker on my IPhone 6, I was able to refresh to updated CSS data for a webpage-in-progress by holding down refresh (right side of address bar) until "Request Desktop Site" popped up. I clicked on it and the webpage completely updated, styles and all.

Subsequent loads from a blank browser page and simple refreshes are still using the updated CSS data.

Download Free

How to Use Developer Tools on Safari

It's free and super easy to set up

If you're a web developer or designer working on Mac, Safari is a browser that you cannot ignore. It's the most used browser on Mac, and it is fully featured with all the necessary tools to help developers design and debug their web pages. Most importantly, Safari has a built-in set of developer tools that are available from the moment you install it, making it convenient and efficient for developers to find, inspect, and modify elements of their webpage. In this article, we'll look at how to use developer tools on Safari, step by step.

Enabling Developer Tools in Safari

Developing websites and applications requires the use of developer tools, which allow you to inspect and modify code, debug errors, and optimize performance. If you're using Safari as your browser, you'll need to enable developer tools before you can start using them. Here's how:

Accessing Safari Preferences

To access Safari Preferences, you have two options. You can either click on Safari from the top menu bar and then click Preferences, or you can use the keyboard shortcut Command + , (comma). Either way, you'll end up in the same place.

Once you're in Safari Preferences, you'll see a variety of tabs at the top of the window. Click on the one that says "Advanced".

Activating the Develop Menu

In the Advanced tab, you'll see a checkbox that says "Show Develop menu in the menu bar". Check this box to enable the Develop menu.

Now that you've enabled the Develop menu, you'll see it in the top menu bar, between Bookmarks and Window. Click on it to see the various options available to you.

Some of the most commonly used options in the Develop menu include:

Inspect Element: This allows you to view and modify the HTML and CSS of a page.

Console: This displays any error messages or other output from the JavaScript console.

Network: This shows you the resources that are being loaded by the page, including images, scripts, and stylesheets.

Debugger: This lets you step through JavaScript code and set breakpoints to help you find and fix errors.

By using these developer tools, you'll be able to create more efficient and effective websites and applications. Happy developing!

Navigating the Developer Tools Interface

Once you have enabled developer tools, you can access them by clicking on the Develop menu and selecting Show Web Inspector. This will open the developer tool interface with several panels:

Elements Panel

The Elements panel is a powerful tool for web developers. It allows you to see the HTML and CSS for the currently selected element on the page. You can use this panel to select and inspect individual elements, modify page elements, and edit styles. You can even add new HTML elements and see how they affect the page layout. The Elements panel is an essential tool for anyone who wants to understand how a web page is constructed.

Network Panel

The Network panel is another important tool for web developers. It shows information about any requests made by the page, including the URL, status, size, and timing. This is useful for debugging performance issues and checking how a page loads. You can use the Network panel to identify slow-loading resources, optimize page speed, and troubleshoot network issues.

Sources Panel

The Sources panel shows you the JavaScript files associated with the page and allows you to debug them. You can set breakpoints, step through code, and inspect variables. This is useful for troubleshooting JavaScript errors and optimizing code performance. You can also use the Sources panel to edit JavaScript code and see how it affects the page behavior.

Timeline Panel

The Timeline panel shows you a timeline of how the page loads performance-wise. It can be used to identify slow-loading resources or laggy scripts. You can see exactly when each resource is loaded and how long it takes. The Timeline panel is a great tool for optimizing page speed and improving user experience.

Console Panel

The Console panel is where you can access the browser's JavaScript console. You can execute JavaScript code in the context of the page and view debug messages and errors. This is useful for troubleshooting JavaScript issues, testing code snippets, and experimenting with new features. You can also use the Console panel to log messages and interact with the page in real-time.

Storage Panel

The Storage panel shows you the various types of storage present on a page, such as cookies, local storage, and session storage. It can be used to debug issues related to handling client-side storage. You can view, edit, and delete storage data, as well as monitor storage usage. The Storage panel is a great tool for understanding how client-side storage works and how to optimize it.

Overall, the developer tools interface is a powerful set of tools that can help you understand and optimize your web pages. Whether you're a beginner or an experienced developer, these tools are essential for building high-quality web applications.

Inspecting and Modifying HTML and CSS

Selecting elements.

Using the Elements panel, you can select an HTML element by clicking on it in the panel or directly on the page. When you select an element, you'll see its HTML and CSS properties on the right-hand side of the panel.

Editing HTML

You can easily edit the HTML of an element, either by double-clicking on the HTML code you want to change or by right-clicking on the HTML code and choosing "Edit as HTML". Then, you can make the necessary changes and save them.

Modifying CSS Styles

Similarly, you can modify CSS styles of an element in the Styles section of the panel. To add a new style, click the "+ New Style Rule" button. To modify an existing style, simply click on it and make the necessary changes.

Adding and Removing Classes

You can also add or remove classes from an element in the Elements panel. To add a class, select the element and add the class name in the "class" field. To remove a class, simply delete its name from the "class" field.

In conclusion, Safari's developer tools are an essential toolset for designers and web developers. They offer a wide range of features that make debugging and designing a webpage accessible and efficient. With this article, you should have a basic understanding of how to use developer tools on Safari. Experiment with the tools and explore their full potential to make your web development experience more productive and enjoyable.

Let's set you up !

Working on the web!

Student Tips

Startup Tools

Browser Glossary

Browser Tips

How To Open Developer Tools On Safari

• Software & Applications
• Browsers & Extensions

Introduction

Opening developer tools in a web browser is a fundamental skill for anyone involved in web development, debugging, or troubleshooting website issues. Developer tools, also known as DevTools, provide a suite of powerful features that allow you to inspect and modify the structure and layout of a web page, analyze network activity, debug JavaScript, and much more. In this article, we will explore how to open developer tools specifically in the Safari web browser.

Safari, known for its sleek interface and robust performance, offers multiple methods to access its developer tools. Whether you prefer using the menu bar, keyboard shortcuts, or the context menu, Safari provides convenient options to suit your workflow. By mastering these methods, you can seamlessly integrate developer tools into your web development process, enhancing your efficiency and productivity.

In the following sections, we will delve into each method, providing step-by-step instructions and tips to ensure a smooth experience. Whether you are a seasoned web developer or just starting your journey, understanding how to open developer tools in Safari is a valuable skill that can empower you to create, debug, and optimize websites with confidence. Let's embark on this exploration and unlock the potential of Safari's developer tools together.

Method 1: Using the Menu Bar

Opening developer tools in Safari using the menu bar is a straightforward and reliable method. This approach is particularly useful for users who prefer navigating through familiar menu options to access essential browser features. Here's how you can effortlessly open developer tools using the menu bar:

Launch Safari : Begin by opening the Safari web browser on your Mac or iOS device. Ensure that you are running the latest version of Safari to access the most advanced developer tools and features.

Navigate to the Menu Bar : Look at the top of your screen for the menu bar. You will find the menu options such as "File," "Edit," "View," "History," "Bookmarks," "Develop," "Window," and "Help."

Access the "Develop" Menu : Click on the "Develop" option in the menu bar. If you don't see the "Develop" menu, you may need to enable it first. To do this, go to "Safari" > "Preferences" > "Advanced" and check the box next to "Show Develop menu in menu bar."

Open Developer Tools : Once you have accessed the "Develop" menu, you will find a list of options, including "Show Web Inspector." Click on "Show Web Inspector," and the developer tools panel will appear, providing you with a comprehensive set of tools to analyze and modify web pages.

Explore the Developer Tools : With the developer tools now open, take a moment to familiarize yourself with the various tabs and features available. You can inspect the HTML and CSS of the web page, analyze network activity, debug JavaScript, and much more.

By utilizing the menu bar to access developer tools in Safari, you can seamlessly integrate this essential feature into your web development workflow. This method provides a convenient and intuitive way to leverage the power of Safari's developer tools, empowering you to create, debug, and optimize websites with precision and efficiency.

Method 2: Using Keyboard Shortcuts

Harnessing the power of keyboard shortcuts is a time-saving and efficient way to access developer tools in Safari. By memorizing and utilizing these shortcuts, you can seamlessly integrate developer tools into your web development workflow, enhancing your productivity and efficiency. Here's how you can effortlessly open developer tools using keyboard shortcuts:

Initiate Keyboard Shortcut : To open the developer tools using a keyboard shortcut, simply press "Option + Command + I" on your Mac keyboard . Alternatively, you can use "Option + Command + C" to open the developer tools and immediately activate the cursor for inspecting elements on the web page.

Access Developer Tools : Upon executing the keyboard shortcut, the developer tools panel will swiftly appear, providing you with a comprehensive set of tools to inspect, debug, and optimize web pages. This rapid access to developer tools streamlines your workflow, allowing you to delve into web page elements and network activity without interrupting your creative momentum.

Navigate with Ease : With the developer tools now open, take a moment to explore the various tabs and features available. You can effortlessly navigate through the Elements, Console, Sources, Network, and other panels using the keyboard or mouse, gaining valuable insights into the structure and behavior of the web page.

By leveraging keyboard shortcuts to access developer tools in Safari, you can seamlessly integrate this essential feature into your web development process. The intuitive and rapid nature of keyboard shortcuts empowers you to swiftly analyze and modify web pages, debug JavaScript, and optimize website performance with precision and speed. Embracing these shortcuts as part of your web development toolkit can elevate your proficiency and effectiveness, enabling you to create exceptional web experiences with ease.

Method 3: Using the Context Menu

Utilizing the context menu to access developer tools in Safari offers a convenient and efficient method, particularly for users who prefer a streamlined approach to web development. By leveraging the context menu, you can seamlessly open the developer tools directly from the web page, eliminating the need to navigate through multiple menu options. Here's a detailed exploration of how you can effortlessly open developer tools using the context menu:

Navigate to the Web Page : Visit the web page that you intend to inspect and analyze using the developer tools. Whether it's your own website, a client's project, or a site you're troubleshooting, the context menu provides a swift pathway to accessing the developer tools.

Right-click on the Web Page : Once you are on the web page, right-click (or control-click) anywhere on the page to reveal the context menu. This menu typically offers a range of options related to the content and functionality of the web page.

Access the "Inspect Element" Option : Within the context menu, look for the option labeled "Inspect Element" or a similar variation. Click on this option, and the developer tools panel will promptly appear, providing you with a comprehensive set of tools to inspect and modify the web page's structure and behavior.

Explore the Developer Tools : With the developer tools now open, take a moment to explore the various tabs and features available. You can inspect and modify the HTML and CSS of the web page, analyze network activity, debug JavaScript, and much more, all within the context of the specific elements you've chosen to inspect.

By leveraging the context menu to access developer tools in Safari, you can seamlessly integrate this essential feature into your web development workflow. This method offers a direct and intuitive pathway to swiftly analyze and modify web pages, empowering you to gain valuable insights and optimize website performance with precision and ease. Embracing the context menu as part of your web development toolkit can elevate your proficiency and effectiveness, enabling you to create exceptional web experiences with seamless accessibility to developer tools.

In conclusion, mastering the art of opening developer tools in Safari is a valuable skill that can significantly enhance your web development capabilities. By exploring the various methods to access developer tools, including using the menu bar, keyboard shortcuts, and the context menu, you can seamlessly integrate this essential feature into your workflow, empowering you to create, debug, and optimize websites with precision and efficiency.

Whether you prefer the familiarity of navigating through the menu bar, the rapid accessibility of keyboard shortcuts, or the streamlined efficiency of the context menu, Safari offers versatile options to suit your preferences and workflow. Each method provides a seamless pathway to unlock the powerful suite of developer tools, enabling you to inspect and modify web pages, analyze network activity, debug JavaScript, and much more.

By leveraging the menu bar, users can rely on the intuitive navigation to access developer tools, seamlessly integrating this essential feature into their web development process. The convenience of using familiar menu options ensures a smooth transition into the world of web page inspection and modification.

Embracing keyboard shortcuts as part of your web development toolkit can elevate your proficiency and effectiveness, enabling you to swiftly analyze and modify web pages, debug JavaScript, and optimize website performance with precision and speed. The rapid access to developer tools streamlines your workflow, allowing you to delve into web page elements and network activity without interrupting your creative momentum.

Utilizing the context menu to access developer tools offers a direct and intuitive pathway to swiftly analyze and modify web pages, empowering you to gain valuable insights and optimize website performance with precision and ease. This method eliminates the need to navigate through multiple menu options, providing a streamlined approach to web development.

In essence, understanding how to open developer tools in Safari is a foundational skill that can empower you to create exceptional web experiences. By seamlessly integrating developer tools into your web development process, you gain the ability to inspect, debug, and optimize websites with confidence, ultimately enhancing the quality and performance of your web projects. Embrace the versatility of Safari's developer tools and unlock the potential to elevate your web development capabilities.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

• Crowdfunding
• Cryptocurrency
• Digital Banking
• Digital Payments
• Investments
• Console Gaming
• Mobile Gaming
• VR/AR Gaming
• Gadget Usage
• Gaming Tips
• Online Safety
• Software Tutorials
• Tech Setup & Troubleshooting
• Buyer’s Guides
• Comparative Analysis
• Gadget Reviews
• Service Reviews
• Software Reviews
• Mobile Devices
• PCs & Laptops
• Smart Home Gadgets
• Content Creation Tools
• Digital Photography
• Video & Music Streaming
• Online Security
• Online Services
• Web Hosting
• WiFi & Ethernet
• Browsers & Extensions
• Communication Platforms
• Operating Systems
• Productivity Tools
• AI & Machine Learning
• Cybersecurity
• Emerging Tech
• IoT & Smart Devices
• Virtual & Augmented Reality
• Latest News
• AI Developments
• Fintech Updates
• Gaming News
• New Product Launches

• AI Writing How Its Changing the Way We Create Content
• How to Find the Best Midjourney Alternative in 2024 A Guide to AI Anime Generators

Related Post

Ai writing: how it’s changing the way we create content, unleashing young geniuses: how lingokids makes learning a blast, 10 best ai math solvers for instant homework solutions, 10 best ai homework helper tools to get instant homework help, 10 best ai humanizers to humanize ai text with ease, sla network: benefits, advantages, satisfaction of both parties to the contract, related posts.

How To Open Developer Tools In Safari

How To Inspect On IPhone Safari

How To Enable Inspect In Safari

How To Post On Instagram From Mac Safari

How To Inspect Page On Safari

How To Reset Safari 9.0

How To Reset Safari In Mac

How To Change Location In Safari

Recent stories.

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

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

How to Sell Counter-Strike 2 Skins Instantly? A Comprehensive Guide

10 Proven Ways For Online Gamers To Avoid Cyber Attacks And Scams

• Privacy Overview
• Strictly Necessary Cookies

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

What are browser developer tools?

Every modern web browser includes a powerful suite of developer tools. These tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load. This article explains how to use the basic functions of your browser's devtools.

Note: Before you run through the examples below, open the Beginner's example site that we built during the Getting started with the Web article series. You should have this open as you follow the steps below.

How to open the devtools in your browser

The devtools live inside your browser in a subwindow that looks roughly like this, depending on what browser you are using:

How do you pull it up? Three ways:

• Windows: Ctrl + Shift + I or F12
• macOS: ⌘ + ⌥ + I

• Chrome: More tools ➤ Developer tools
• Safari: Develop ➤ Show Web Inspector. If you can't see the Develop menu, go to Safari ➤ Preferences ➤ Advanced , and check the Show Develop menu in menu bar checkbox.
• Opera : Developer ➤ Developer tools
• Context menu: Press-and-hold/right-click an item on a webpage (Ctrl-click on the Mac), and choose Inspect Element from the context menu that appears. ( An added bonus: this method straight-away highlights the code of the element you right-clicked.)

The Inspector: DOM explorer and CSS editor

The developer tools usually open by default to the inspector, which looks something like the following screenshot. This tool shows what the HTML on your page looks like at runtime, as well as what CSS is applied to each element on the page. It also allows you to instantly modify the HTML and CSS and see the results of your changes reflected live in the browser viewport.

If you don't see the inspector,

• Tap/click the Inspector tab.
• In Chrome, Microsoft Edge, or Opera, tap/click Elements.
• In Safari, the controls are not so clearly presented, but you should see the HTML if you haven't selected something else to appear in the window. Press the Style button to see the CSS.

Exploring the DOM inspector

For a start, right-click (Ctrl-click) an HTML element in the DOM inspector and look at the context menu. The available menu options vary among browsers, but the important ones are mostly the same:

• Delete Node (sometimes Delete Element ). Deletes the current element.
• Edit as HTML (sometimes Add attribute / Edit text ). Lets you change the HTML and see the results on the fly. Very useful for debugging and testing.
• :hover/:active/:focus . Forces element states to be toggled on, so you can see what their styling would look like.
• Copy/Copy as HTML . Copy the currently selected HTML.
• Some browsers also have Copy CSS Path and Copy XPath available, to allow you to copy the CSS selector or XPath expression that would select the current HTML element.

Try editing some of your DOM now. Double-click an element, or right-click it and choose Edit as HTML from the context menu. You can make any changes you'd like, but you cannot save your changes.

Exploring the CSS editor

By default, the CSS editor displays the CSS rules applied to the currently selected element:

These features are especially handy:

• The rules applied to the current element are shown in order of most-to-least-specific.
• Click the checkboxes next to each declaration to see what would happen if you removed the declaration.
• Click the little arrow next to each shorthand property to show the property's longhand equivalents.
• Click a property name or value to bring up a text box, where you can key in a new value to get a live preview of a style change.
• Next to each rule is the file name and line number the rule is defined in. Clicking that rule causes the dev tools to jump to show it in its own view, where it can generally be edited and saved.
• You can also click the closing curly brace of any rule to bring up a text box on a new line, where you can write a completely new declaration for your page.

You'll notice a number of clickable tabs at the top of the CSS Viewer:

• Computed : This shows the computed styles for the currently selected element (the final, normalized values that the browser applies).
• Box Model : represents visually the current element's box model, so you can see at a glance what padding, border and margin is applied to it, and how big its content is.
• Grid : If the page you are inspecting uses CSS Grid, this section allows you to view the grid details.
• Fonts : In Firefox, the Fonts tab shows the fonts applied to the current element.

Find out more

Find out more about the Inspector in different browsers:

• Firefox Page inspector
• Chrome DOM inspector (Opera's inspector works the same as this)
• Safari DOM inspector and style explorer

The JavaScript debugger

The JavaScript debugger allows you to watch the value of variables and set breakpoints, places in your code that you want to pause execution and identify the problems that prevent your code from executing properly.

To get to the debugger:

Chrome : Open the Developer tools and then select the Sources tab. (Opera works the same way.)

Safari : Open the Developer Tools and then select the Debugger tab.

Exploring the debugger

There are three panes in the JavaScript Debugger on Firefox.

The first pane on the left contains the list of files associated with the page you are debugging. Select the file you want to work with from this list. Click on a file to select it and view its contents in the center pane of the Debugger.

Source code

Set breakpoints where you want to pause execution. In the following image, the highlight on the number 18 shows that the line has a breakpoint set.

Watch expressions and breakpoints

The right-hand pane shows a list of the watch expressions you have added and breakpoints you have set.

In the image, the first section, Watch expressions , shows that the listItems variable has been added. You can expand the list to view the values in the array.

The next section, Breakpoints , lists the breakpoints set on the page. In example.js, a breakpoint has been set on the statement listItems.push(inputNewItem.value);

The final two sections only appear when the code is running.

The Call stack section shows you what code was executed to get to the current line. You can see that the code is in the function that handles a mouse click, and that the code is currently paused on the breakpoint.

The final section, Scopes , shows what values are visible from various points within your code. For example, in the image below, you can see the objects available to the code in the addItemClick function.

Find out more about the JavaScript debugger in different browsers:

• Firefox JavaScript Debugger )
• Microsoft Edge Debugger
• Chrome Debugger
• Safari Debugger

The JavaScript console

The JavaScript console is an incredibly useful tool for debugging JavaScript that isn't working as expected. It allows you to run lines of JavaScript against the page currently loaded in the browser, and reports the errors encountered as the browser tries to execute your code. To access the console in any browser:

If the developer tools are already open, click or press the Console tab.

This will give you a window like the following:

To see what happens, try entering the following snippets of code into the console one by one (and then pressing Enter):

Now try entering the following incorrect versions of the code and see what you get.

You'll start to see the kind of errors that the browser returns. Often these errors are fairly cryptic, but it should be pretty simple to figure these problems out!

Find out more about the JavaScript console in different browsers:

• Firefox Web Console
• Chrome JavaScript Console (Opera's inspector works the same as this)
• Safari Console
• Debugging HTML
• Debugging CSS

Product Area

Feature impact.

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

Enable Safari Developer Tools

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

Start the debugging process for your iOS app.

Required Editions

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

Cookie Consent Manager

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

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

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

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

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

Cookie List

Optimizing WebKit & Safari for Speedometer 3.0

Apr 10, 2024

by Alan Baradlay, Antti Koivisto, Matt Woodrow, Patrick Angle, Ryosuke Niwa, Vitor Ribeiro Roriz, Wenson Hsieh, and Yusuke Suzuki

The introduction of Speedometer 3.0 is a major step forward in making the web faster for all, and allowing Web developers to make websites and web apps that were not previously possible. In this article, we explore ways the WebKit team made performance optimizations in WebKit and Safari based on the Speedometer 3.0 benchmark.

In order to make these improvements, we made an extensive use of our performance testing infrastructure. It’s integrated with our continuous integration , and provides the capability to schedule A/B tests. This allows engineers to quickly test out performance optimizations and catch new performance regressions.

Improving Tools

Proper tooling support is the key to identifying and addressing performance bottlenecks. We defined new internal JSON format for JavaScriptCore sampling profiler output to dump and process them offline. It includes a script which processes and generates analysis of hot functions and hot byte codes for JavaScriptCore. We also added FlameGraph generation tool for the dumped sampling profiler output which visualizes performance bottlenecks. In addition, we added support for JITDump generation on Darwin platforms to dump JIT related information during execution. And we improved generated JITDump information for easy use as well. These tooling improvements allowed us to quickly identify bottlenecks across Speedometer 3.0.

Improving JavaScriptCore

Revising megamorphic inline cache (ic).

Megamorphic IC offers faster property access when one property access site observes many different object types and/or property names. We observed that some frameworks such as React contain a megamorphic property access. This led us to continuously improve JavaScriptCore’s megamorphic property access optimizations: expanding put megamorphic IC, adding megamorphic IC for the in operation, and adding generic improvements for megamorphic IC.

Revising Call IC

Call IC offers faster function calls by caching call targets inline. We redesigned Call IC and we integrated two different architectures into different tiers of Just-In-Time (JIT) compilers. Lower level tiers use Call IC without any JIT code generation and the highest level tier uses JIT code generatiton with the fastest Call IC. There is a tradeoff between code generation time and code efficiency, and JavaScriptCore performs a balancing act between them to achieve the best performance across different tiers.

Optimizing JSON

Speedometer 3.0 also presented new optimization opportunities to our JSON implementations as they contain more non-ASCII characters than before. We made our fast JSON stringifier work for unicode characters . We also analyzed profile data carefully and made JSON.parse faster than ever .

Adjusting Inlining Heuristics

There are many tradeoffs when inlining functions in JavaScript. For example, inline functions can more aggressively increase the total bytecode size and may cause memory bandwidth to become a new bottleneck. The amount of instruction cache available in CPU can also influence how effective a given inlining strategy is. And the calculus of these tradeoffs change over time as we make more improvements to JavaScriptCore such as adding new bytecode instruction and changes to DFG’s numerous optimization phases. We took the release of the new Speedometer 3.0 benchmark as an opportunity to adjust inlining heuristics based on data collected in modern Apple silicon Macs with the latest JavaScriptCore.

Make JIT Code Destruction Lazy

Due to complicated conditions, JavaScriptCore eagerly destroyed CodeBlock and JIT code when GC detects they are dead. Since these destructions are costly, they should be delayed and processed while the browser is idle. We made changes so that they are now destroyed lazily, during idle time in most cases.

Opportunistic Sweeping and Garbage Collection

In addition, we noticed that a significant amount of time goes into performing garbage collection and incremental sweeping across all subtests in both Speedometer 2.1 and 3.0. In particular, if a subtest allocated a large number of JavaScript objects on the heap, we would often spend a significant amount of time in subsequent subtests collecting these objects. This had several effects:

• Increasing synchronous time intervals on many subtests due to on-demand sweeping and garbage collection when hitting heap size limits.
• Increasing asynchronous time intervals on many subtests due to asynchronous garbage collection or timer-based incremental sweeping triggering immediately after the synchronous timing interval.
• Increasing overall variance depending on whether timer-based incremental sweeping and garbage collection would fall in the synchronous or asynchronous timing windows of any given subtest.

At a high level, we realized that some of this work could be performed opportunistically in between rendering updates — that is, during idle time — instead of triggering in the middle of subtests. To achieve this, we introduced a new mechanism in WebCore to provide hints to JavaScriptCore to opportunistically perform scheduled work after the previous rendering update has completed until a given deadline (determined by the estimated remaining time until the next rendering update). The opportunistic task scheduler also accounts for imminently scheduled zero delay timers or pending requestAnimationFrame callbacks : if it observes either, it’s less likely to schedule opportunistic work in order to avoid interference with imminent script execution. We currently perform a couple types of opportunistically scheduled tasks:

• Incremental Sweeping : Prior to the opportunistic task scheduler, incremental sweeping in JavaScriptCore was automatically triggered by a periodically scheduled 100 ms timer. This had the effect of occasionally triggering incremental sweeping during asynchronous timing intervals, but also wasn’t aggressive enough to prevent on-demand sweeping in the middle of script execution. Now that JavaScriptCore is knowledgable about when to opportunistically schedule tasks, it can instead perform the majority of incremental sweeping in between rendering updates while there aren’t imminently scheduled timers. The process of sweeping is also granular to each marked block, which allows us to halt opportunistic sweeping early if we’re about to exceed the deadline for the next estimated rendering update.
• Garbage Collection : By tracking the amount of time spent performing garbage collection in previous cycles, we’re able to roughly estimate the amount of time needed to perform the next garbage collection based on the number of bytes visited or allocated since the last cycle. If the remaining duration for performing opportunistically scheduled tasks is longer than this estimated garbage collection duration, we immediately perform either an Eden collection or full garbage collection . Furthermore, we integrated activity-based garbage collections into this new scheme to schedule them at appropriate timing.

Overall, this strategy yields a 6.5% total improvement in Speedometer 3.0 *, decreasing the time spent in every subtest by a significant margin, and a 6.9% total improvement in Speedometer 2.1 *, significantly decreasing the time spent in nearly all subtests.

* macOS 14.4, MacBook Air (M2, 2022)

Various Miscellaneous Optimizations for Real World Use Cases

We extensively reviewed all Speedometer 3.0 subtests and did many optimizations for realistic use cases. The examples include but are not limited to: faster Object.assign with empty objects , improving object spread performance , and so on.

Improving DOM code

Improving DOM code is Speedometer’s namesake, and that’s exactly what we did. For example, we now store the NodeType in the Node object itself instead of relying on a virtual function call. We also made DOMParser use a fast parser, improved its support of li elements , and made DOMParser not construct a redundant DocumentFragment . Together, these changes improved TodoMVC-JavaScript-ES5 by ~20%. We also eliminated O(n^2) behavior in the fast parser for about ~0.5% overall progression in Speedometer 3.0. We also made input elements construct their user-agent shadow tree lazily during construction and cloning , the latter of which is new in Speedometer 3.0 due to web components and Lit tests. We devirtualized many functions and inlined more functions to reduce the function call overheads. We carefully reviewed performance profile data and removed inefficiency in hot paths like repeated reparsing of the same URLs .

Improving Layout and Rendering

We landed a number of important optimizations in our layout and rendering code. First off, most type checks performed on RenderObject are now done using an inline enum class instead of virtual function calls , this alone is responsible for around ~0.7% of overall progression in Speedometer 3.0.

Improving Style Engine

We also optimized the way we compute the properties animated by Web Animations code. Previously, we were enumerating every animatable properties while resolving transition: all . We optimized this code to only enumerate affected properties. This was ~0.7% overall Speedometer 3.0 progression. Animating elements can now be resolved without fully recomputing their style unless necessary for correctness.

Speedometer 3.0 content, like many modern web sites, uses CSS custom properties extensively. We implemented significant optimizations to improve their performance. Most custom property references are now resolved via fast cache lookups, avoiding expensive style resolution time property parsing. Custom properties are now stored in a new hierarchical data structure that reduces memory usage as well.

One key component of WebKit styling performance is a cache (called “matched declarations cache”) that maps directly from a set of CSS declarations to the final element style, avoiding repeating expensive style building steps for identically styled elements. We significantly improved the hit rate of this cache.

We also improved styling performance of author shadow trees, allowing trees with identical styles to share style data more effectively.

Improving Inline Layout

We fixed a number of performance bottlenecks in inline layout engine as well. Eliminating complex text path in Editor-TipTap was a major ~7% overall improvement. To understand this optimization, WebKit has two different code paths for text layout: the simple text path, which uses low level font API to access raw font data, and the complex text path, which uses CoreText for complex shaping and ligatures. The simple text path is faster but it does not cover all the edge cases. The complex text path has full coverage but is slower than the simple text path.

Previously, we were taking the complex text path whenever a non-default value of font-feature or font-variant was used. This is because historically the simple text path wouldn’t support these operations. However, we noticed that the only feature of these still missing in the simple text path was font-variant-caps . By implementing font-variant-caps support for the simple text path , we allowed the simple text path to handle the benchmark content. This resulted in 4.5x improvement in Editor-TipTap subtest, and ~7% overall progression in Speedometer 3.0.

In addition to improving the handling of text content in WebKit, we also worked with CoreText team to avoid unnecessary work in laying out glyphs. This resulted in ~0.5% overall progression in Speedometer 3.0, and these performance gains will benefit not just WebKit but other frameworks and applications that use CoreText.

Improving SVG Layout

Another area we landed many optimizations for is SVG. Speedometer 3.0 contains a fair bit of SVG content in test cases such as React-Stockcharts-SVG. We were spending a lot of time computing the bounding box for repaint by creating GraphicsContext, applying all styles, and actually drawing strokes in CoreGraphics. Here, we adopted Blink ’s optimization to approximate bounding box and made ~6% improvement in React-Stockcharts-SVG subtest. We also eliminated O(n^2) algorithm in SVG text layout code, which made some SVG content load a lot quicker .

Improving IOSurface Cache Hit Rate

Another optimization we did involve improving the cache hit rate of IOSurface. An IOSurface is a bitmap image buffer we use to paint web contents into. Since creating this object is rather expensive, we have a cache of IOSurface objects based on their dimensions. We observed that the cache hit rate was rather low (~30%) so we increased the cache size from 64MB to 256MB on macOS and improved the cache hit rate by 2.7x to ~80%, improving the overall Speedometer 3.0 score by ~0.7%. In practice, this means lower latency for canvas operations and other painting operations.

Reducing Wait Time for GPU Process

Previously, we required a synchronous IPC call from the Web Process to the GPU process to determine which of the existing buffers had been released by CoreAnimation and was suitable to use for the next frame. We optimized this by having the GPUP just select (or allocate) an appropriate buffer, and direct all incoming drawing commands to the right destination without requiring any response. We also changed the delivery of any newly allocated IOSurface handles to go via a background helper thread , rather than blocking the Web Process’s main thread.

Improving Compositing

Updates to compositing layers are now batched , and flushed during rendering updates, rather than computed during every layout. This significantly reduces the cost of script-incurred layout flushes.

Improving Safari

In addition to optimizations we made in WebKit, there were a handful of optimizations for Safari as well.

Optimizing AutoFill Code

One area we looked at was Safari’s AutoFill code. Safari uses JavaScript to implement its AutoFill logic, and this execution time was showing up in the Speedometer 3.0 profile. We made this code significantly faster by waiting for the contents of the page to settle before performing some work for AutoFill. This includes coalescing handling of newly focused fields until after the page had finished loading when possible, and moving lower-priority work out of the critical path of loading and presenting the page for long-loading pages. This was responsible for ~13% progression in TodoMVC-React-Complex-DOM and ~1% progression in numerous other tests, improving the overall Speedometer 3.0 score by ~0.9%.

Profile Guided Optimizations

In addition to making the above code changes, we also adjusted our profile-guided optimizations to take Speedometer 3.0 into account. This allowed us to improve the overall Speedometer 3.0 score by 1~1.6%. It’s worth noting that we observed an intricate interaction between making code changes and profile-guided optimizations. We sometimes don’t observe an immediate improvement in the overall Speedometer 3.0 score when we eliminate, or reduce the runtime cost of a particular code path until the daily update of profile-guided optimizations kicks. This is because the modified or newly added code has to benefit from profile-guided optimizations before it can show a measurable difference. In some cases, we even observed that a performance optimization initially results in a performance degradation until the profile-guided optimizations are updated.

With all these optimizations and dozens more, we were able to improve the overall Speedometer 3.0 score by ~60% between Safari 17.0 and Safari 17.4. Even though individual progressions were often less than 1%, over time, they all stacked up together to make a big difference. Because some of these optimizations also benefited Speedometer 2.1, Safari 17.4 is also ~13% faster than Safari 17.0 on Speedometer 2.1. We’re thrilled to deliver these performance improvements to our users allowing web developers to build websites and web apps that are more responsive and snappier than ever.

View, manage, and install add-ins for Excel, PowerPoint, and Word

When you install and use an add-in, it adds custom commands and extends the features of your Microsoft 365 programs to help increase your productivity.

Note:  This article only applies to add-ins in Excel, PowerPoint, and Word. For guidance on how to view, install, and manage add-ins in Outlook, see  Use add-ins in Outlook .

View installed add-ins

You can directly install add-ins from this page or select  More Add-ins  to explore.

In the Office Add-ins dialog, select the  My Add-ins  tab.

Select an add-in you want to view the details for and right-click to select  Add-in details  option.

Install an add-in

Tip:  If you selected  Home  >  Add-ins , directly install popular add-ins from the menu that appears, or select  More Add-ins to view more options. 

Select  Add  from the add-in you want to install.

Manage installed add-ins

To manage and view information about your installed add-ins, perform the following:

Select  File > Get Add-ins .   Alternatively, select  Home  >  Add-ins > More add-ins .

In the Office Add-ins dialog, select the  My Add-ins tab.

Select  Manage My Add-ins . This opens the Office Store page in your preferred browser with a list of your installed add-ins.

Remove an add-in

To remove an add-in you installed, follow these steps.

Select  File  > Get Add-ins . Alternatively, select  Home > Add-ins .

In the Office Add-ins dialog, select  My Add-ins  tab.

Select an add-in you want to remove and right click to select  Remove  option.

Note:  Add-ins that appear in the  Admin Managed  section of the Office Add-ins dialog can only be removed by your organization's administrator.

Cancel an add-in subscription

To discontinue your subscription to an add-in, do the following:

Open the Microsoft 365 application and select the Home  tab.

Select  Add-ins from the ribbon,   then select  More Add-ins .

Select the My Add-ins tab   to view your existing add-ins.

Select  Manage My Add-ins .

Under the Payment and Billing section, choose Cancel Subscription .

Select  OK ,   then Continue .

Once you've cancelled your subscription, you should see a message that says "You have cancelled your app subscription" in the comments field of your add-in list.

Manage an add-in's access to your devices

Note:  The information in this section only applies to Excel on the web, Outlook on the web, PowerPoint on the web, and Word on the web running in Chromium-based browsers, such as Microsoft Edge and Google Chrome.

When an installed add-in requires access to your devices, such as your camera or microphone, you will be shown a dialog with the option to allow, allow once, or deny permission.

If you select  Allow , the add-in will have access to the requested devices. The permission you grant persists until you uninstall the add-in or until you clear the cache of the browser where the add-in is running.

If you select  Allow Once , the add-in will have access to the requested devices until it's relaunched in the browser.

If you select  Deny , the add-in won't be able to access the requested devices. This persists until you uninstall the add-in or until you clear the cache of the browser where the add-in is running.

If you want to change an add-in's access to your devices after selecting  Allow  or  Deny , you must first uninstall the add-in or clear your browser cache.

Add or load a PowerPoint add-in

Add or remove add-ins in Excel

Get a Microsoft 365 Add-in for Excel

Get a Microsoft 365 Add-in for Outlook

Help for Excel for Windows add-ins

Need more help?

Want more options.

Explore subscription benefits, browse training courses, learn how to secure your device, and more.

Microsoft 365 subscription benefits

Microsoft 365 training

Microsoft security

Accessibility center

Communities help you ask and answer questions, give feedback, and hear from experts with rich knowledge.

Ask the Microsoft Community

Microsoft Tech Community

Windows Insiders

Microsoft 365 Insiders

Find solutions to common problems or get help from a support agent.

Online support

Was this information helpful?

Thank you for your feedback.

Structure Data Members as a Type List Using Pure C++ (C++14)

There is no standard way of getting type description in C++ at this moment. As a result developers come up with all sorts of tools ranging from macros to domain specific languages to have type reflection. But the truth is with C++14 you can at least get data member types in the form of a type list with only one (serious) limitation: the technique can only work with literal and non-const/non-reference types . That means types like bool or char, char const*, float and others (including user provided literal types) are fine.

Here is the relevant part that makes it possible:

I hope it's crystal clear from the code what happens: we have a templated custom conversion operator in read_type that is then used in get_type_id constexpr function to identify and return a data member type by its index. All in all in takes a dozen lines of code.

Having a type list of a data structure at hands we can then turn that into a tuple for example. The only problem is that std::tuple is usually implemented using single inheritance. It means the structure layout may vary across compilers as I note in this blog post . Also it stores data in reverse order. Because of this I decided to create my own tuple which I named luple: a lightweight tuple . It uses multiple inheritance which has identical layout on three major compilers (at least as far as I tested because it's not a POD type formally).

So here is an example of using it:

After getting member type information we can calculate theirs offsets. Or here I just cast it into a luple (tuple-like data structure) and work with it using usual tuple methods. Check an online example at tio.run (or at Ideone ) where I print out the guts of a FILE (stdio) data structure.

You can find both luple and struct_reader in a Github repository . The header files have more detailed description of the API.

There is also relevant comment by Howard Hinnant on non-recursive tuples.

The idea was inspired by Antony Polukhin's talk at CppCon 2016 (thanks to Ruslan Abdikeev for pointing to it).

Project phase

Click dummy.

Less to non-functional preliminary stage of a prototype to test usability at an early stage.

The Click Dummy is a rudimentary functional mockup and represents an exemplary sequence of interactions based on a logical screen flow. The test person operates the Click Dummy as if he were actually using the application and gets a first impression of the possible final product.

• Constructive user feedback on the interface and interaction of an application.
• Create and test rudimentary program flow.

Usually used in later stages of development, unless one varies an already successfully running project or application scenario. In contrast to a Vision Prototype, the Click Dummy is not based on any economic intention, with the Click Dummy the focus is on the usability testing and the feedback of the potential user.

Anything to improve with the method description? Just send an e-mail with your suggestion. Thank you!

• Very helpful for developers and customers or users
• Mostly less expensive than a prototype
• Content Design and UI Mapping
• Contextual Inquiry
• Extreme User Interview
• Letter to Grandma
• Prototyping
• Remote Moderated Usability Test
• Storyboarding
• System Usability Scale
• Usability Testing
• User Interview
• Paper Prototyping
• Vision Prototype
• Prototyping: Wie muss ein Klickdummy aussehen? (de / usabilityblog.de)
• Mock-up (Wikipedia)
• Avoiding Common Prototyping Mistakes (UX Matters)

The Design Method Finder is a UX and PM method data base with quick access to a lot of interesting and potentially helpful methods.

Dynamic System Development Model

The big picture, house of dsdm, dsdm principles, dsdm stages, dsdm roles and responsibilities, dsdm products or artefacts.

• Skip to content
• Accessibility Policy
• Oracle blogs
• Lorem ipsum dolor

The Latest Oracle E-Business Suite Technology News Direct from Oracle E-Business Suite Development & Product Management

• Upgrade Recommendations ,
• Application Tier ,
• EBS Tools ,

April 2024 Updates to EBS Critical Patch Update Checker (ECPUC)

EBS Critical Patch Update Checker (ECPUC) has been updated with the April 2024 Critical Patch Update (CPU). We strongly recommend that you run the latest ECPUC against your EBS environment to:

•     Identify your environment's current EBS CPU patch level.
•     Identify required EBS CPU patches and security fixes for your environment.

Obtaining ECPUC

ECPUC is avaialble with Patch 35583866 .  Instructions for running ECPUC are documented in the README.txt file included with the patch.  

Patch 35583866   provides a script, ECPUC.sql. When run, ECPUC.sql generates the ECPUC.lst report which includes your current EBS CPU level and a list of all required EBS CPU patches and security fixes for your environment for a given quarterly EBS CPU.

Read the README carefully.  The README for this patch includes a number of usage scenarios and examples.

Always use the latest version of ECPUC . New EBS CPU patches and fixes will not be checked by older versions of the utility.

As part of your quarterly CPU patching activity :

• Run ECPUC before applying EBS CPU patches and fixes . You should run ECPUC before applying the latest EBS CPU patches to identify the patches and bug fixes that are required for your environment.
• Apply all recommended patches as soon as possible. If ECPUC reports recommended patches or fixes, you should apply these to your enviornment as soon as possible.
• Run ECPUC after applying EBS CPU patches and fixes . You should run ECPUC after applying patches and performing cutover to confirm that all recommended patches and fixes were applied successfully.

Run ECPUC to review and report on your EBS CPU level. You may be required to review and report on the EBS CPU level of your environment. To check the EBS CPU level in your environment, run ECPUC and review the ECPUC.lst report to determine your EBS CPU level and identify any recommended patches.

Note:  You should always apply patches and fixes to non-production envrionments prior to promoting and applying to production.

Additional References

• Identifying the Latest Critical Patch Update for Oracle E-Business Suite Release 12 (MOS Note 248400.1)
• Oracle E-Business Suite Release 12 Critical Patch Update (April 2024) (MOS Note 3007752.1)
• Oracle E-Business Suite Security Guide, Release 12.2 - Secure Configuration
• Secure Configuration Guide for Oracle E-Business Suite Release 12 (MOS Note 403537.1)
• FAQ: Oracle E-Business Suite Security (MOS Note 2063486.1)

Related Articles

• Critical Patch Update for April 2024 Now Available
• Oct 2023 Updates to EBS Critical Patch Update Checker (ECPUC)
• Critical Patch Update for October 2023 Now Available
• Identifying EBS 12.2 CPU Patches and Fixes Using ECPUC
• Critical Patch Update for July 2023 Now Available
• Critical Patch Update for April 2023 Now Available
• Critical Patch Update for January 2023 Now Available
• Critical Patch Update for October 2022 Now Available
• Critical Patch Update for July 2022 Now Available
• Critical Patch Update for April 2022 Now Available

Elke Phelps

Product management director.

Elke is a Product Manager in the Oracle E-Business Suite Applications Technology Group.  She joined Oracle in 2011 after having been an Oracle customer and Oracle Technologist (Oracle Database Administrator, Oracle Applications DBA, Technical Architect and Technical Manager of an Oracle Applications DBA Team) since 1993.  As part of the Oracle E-Business Suite Applications Technology Product Management Team, her scope of responsibility includes security, database certifications and advanced architectures for on-premises and Oracle Cloud deployments.  She is a frequent contributor and editor of the Oracle E-Business Suite Technology Blog .

Elke is the lead author of the Oracle Applications DBA Field Guide (Apress 2006) and Oracle R12 Applications DBA Field Guide (Coqui Tech and Press 2010).  Elke is also the founder of the Oracle Applications User Group (OAUG) E-Business Suite Applications Technology Special Interest Group (SIG) and served as President of the SIG from February 2005 - August 2011.  Elke has been a speaker at the Oracle OpenWorld and Collaborate conferences since 2004.  Prior to joining Oracle, Elke was designated an Oracle ACE (2007) and Oracle ACE Director (2009).  She received the OAUG Oracle Ambassador of the Year award in 2015.

Elke has a Computer Science Degree and a Masters of Business Administration from the University of Oklahoma.  In her spare time, Elke enjoys traveling especially to Europe, Puerto Rico and the amazing US National Parks.  Elke also enjoys hiking, antiquing, gardening and cooking. 

Elke is a Product Manager in the Oracle E-Business Suite Applications Technology Group.&nbsp; She joined Oracle in 2011 after having been an Oracle customer and Oracle Technologist (Oracle Database Administrator, Oracle Applications DBA, Technical Architect and Technical Manager of an Oracle Applications DBA Team) since 1993.&nbsp; As part of the Oracle E-Business Suite Applications Technology Product Management Team, her scope of responsibility includes security, database certifications and advanced architectures for on-premises and Oracle Cloud deployments.&nbsp; She is a frequent contributor and editor of the Oracle E-Business Suite Technology Blog .

Elke is the lead author of the Oracle Applications DBA Field Guide (Apress 2006) and Oracle R12 Applications DBA Field Guide (Coqui Tech and Press 2010).&nbsp; Elke is also the founder of the Oracle Applications User Group (OAUG) E-Business Suite Applications Technology Special Interest Group (SIG) and served as President of the SIG from February 2005 - August 2011.&nbsp; Elke has been a speaker at the Oracle OpenWorld and Collaborate conferences since 2004.&nbsp; Prior to joining Oracle, Elke was designated an Oracle ACE (2007) and Oracle ACE Director (2009).&nbsp; She received the OAUG Oracle Ambassador of the Year award in 2015.

Elke has a Computer Science Degree and a Masters of Business Administration from the University of Oklahoma.&nbsp; In her spare time, Elke enjoys traveling especially to Europe, Puerto Rico and the amazing US National Parks.&nbsp; Elke also enjoys hiking, antiquing, gardening and cooking.&nbsp;

EBS Critical Patch Update Checker (ECPUC) has been updated with the April 2024&nbsp;Critical Patch Update (CPU). We strongly recommend that you run the latest ECPUC against your EBS environment to:

• &nbsp;&nbsp;&nbsp; Identify your environment&#39;s current EBS CPU patch level.
• &nbsp;&nbsp;&nbsp; Identify required EBS CPU patches and security fixes for your environment.

ECPUC is avaialble with Patch 35583866 .&nbsp; Instructions for running ECPUC are documented in the README.txt file included with the patch. &nbsp;

Patch 35583866 &nbsp; provides a script, ECPUC.sql. When run, ECPUC.sql generates the ECPUC.lst report which includes your current EBS CPU level and a list of all required EBS CPU patches and security fixes for your environment for a given quarterly EBS CPU.

Read the README carefully.&nbsp; The README for this patch includes a number of usage scenarios and examples.

Note:&nbsp; You should always apply patches and fixes to non-production envrionments prior to promoting and applying to production.

• Oracle E-Business Suite Release 12 Critical Patch Update (April&nbsp;2024) (MOS Note 3007752.1)
• Critical Patch Update for April&nbsp;2024 Now Available

Previous Post

JRE 1.8.0_411 Certified with EBS Release 12.2

Resources for.

• Analyst Reports
• Cloud Economics
• Corporate Responsibility
• Diversity and Inclusion
• Security Practices
• What is Customer Service?
• What is ERP?
• What is Marketing Automation?
• What is Procurement?
• What is Talent Management?
• What is VM?
• Try Oracle Cloud Free Tier
• Oracle Sustainability
• Oracle COVID-19 Response
• Oracle and SailGP
• Oracle and Premier League
• Oracle and Red Bull Racing Honda
• US Sales 1.800.633.0738
• How can we help?
• Subscribe to Oracle Content
• © 2022 Oracle
• Privacy / Do Not Sell My Info