devtool safari

How to Use React DevTools in Safari

Published on Jun 09, 2023 in platforms by Lucien Chemaly 11 minute read

React is commonly used for the frontend in static site generators like Gatsby and now WordPress . React DevTools is a set of developer tools with a multitude of features that can make your workflow more efficient and help you debug and optimize your code.

However, if you use Safari, you may be disappointed to learn that there is no browser extension for React DevTools like there is in Chrome and Firefox.

Fortunately, there is a solution. You can still use standalone React DevTools to connect to your site in Safari. This practical tool is also useful for debugging non-browser-based React applications, like React Native apps. It can help simplify the process of optimizing and debugging your code, making your workflow more efficient.

In this article, you’ll learn how to install and use the standalone version of React DevTools to debug a React application running in Safari. In addition, the article also highlights the differences between the standalone version and the Chrome extension, as well as some limitations of the tools.

Use Cases for Debugging React Apps

The standalone version of React DevTools is a separate application that provides a powerful set of debugging and inspection tools for React applications. It’s independent of any specific browser and can be used across various platforms and environments. This makes it a versatile option for developers who need to debug their React apps in different contexts.

Some of the use cases for the standalone version of React DevTools include:

• Debugging non-browser-based React apps: The standalone version of React DevTools is particularly useful when debugging React Native applications because it is platform-independent and can connect to apps running on iOS or Android devices. For example, you can use it to determine why a specific component of your React Native app isn’t rendering correctly on an iOS device. You can use React DevTools to inspect the component tree, check component props and state, and identify issues with styling or logic that may be causing the rendering problem.
• Debugging React apps in Safari: Safari is a widely used browser, especially among macOS users. Although Safari has its own set of developer tools, it doesn’t have extensions or support for React applications like Chrome or Firefox. The standalone version of React DevTools can be used to debug React applications running in Safari, as it provides developers with a powerful set of tools to inspect components and diagnose issues. For instance, if a specific UI component in your React app doesn’t behave as expected when viewed in Safari, you can use React DevTools to inspect the component in question. You can check its state and props and identify any issues.
• Debugging server-rendered React apps: In most static site generators, React apps are server-rendered, which means components are rendered on the server side and sent as HTML to the client. In these scenarios, the standalone version of React DevTools can help you debug issues related to server-rendered components. For example, if you’re using a solution like Next.js or React Server Components to perform server-side rendering, you can use the standalone version of React DevTools to inspect the rendered components and identify issues related to data fetching, state management, or rendering logic.

How to Debug a React App in Safari

The following tutorial explains how to use the standalone version of React DevTools to debug a React application running in Safari. By the end, you’ll be equipped with the knowledge and tools you need to confidently debug your React application.

Prerequisites

To complete this tutorial, you’ll need:

• A Mac running Safari
• A code editor, such as Visual Studio Code
• Git installed on your machine
• Node.js and npm (the Node package manager) installed on your system

To verify the installation of Node.js and npm, execute these commands in your shell or terminal:

If they aren’t installed, download and install Node.js , which also automatically installs npm. This tutorial uses Node version 18.12.1 and npm version 8.19.2.

Creating a React Demo Application

You’ll first need to set up a basic React demo application, which you’ll run and debug in your Safari browser using the standalone version of React DevTools.

Create a new React project using Create React App by executing this command:

This command will generate a new folder with the specified name and populate it with boilerplate code for a React application.

Change the current directory to your newly created project folder by running the following command:

Execute the following command to start the development server:

Your React application should now be live at http://localhost:3000/ . Use your Safari browser to open the application:

Any modifications made to the source code will trigger an automatic page refresh.

Connecting Standalone React DevTools to Your App in Safari

To connect React DevTools to your app in Safari, you first need to install the standalone React DevTools package using npm from your terminal or shell:

Run React DevTools with this command:

After you run the command, you’ll get the following screen telling you to add an additional script to your React DOM :

This tutorial uses the script with the localhost link ( <script src="http://localhost:8097"></script> ) to connect the React application, but the LAN IP address also works. Since you’re not working with a mobile application, the localhost link will work just fine.

Go to your source project and open the index.html file in the public folder. Add the localhost link just after the <head> tag, then open React DevTools. You should see the following in the Components section:

Creating a User Listing

Once you have connected React DevTools to your application, you can use the various features it provides. These features include the ability to inspect the component tree, examine component state and props, and profile component performance.

As the sample application doesn’t have many components, you’ll only see the App component in the tree. To explore more features of React DevTools, you’ll need to add more components.

To add a User component, create a file named User.js in the src folder and add the following code to it:

This component displays user information, such as first name, last name, age, and date of birth (DOB).

You’ll now create a UsersList component that utilizes the User component to display the list of users. Create a file named UsersList.js in the src folder and add the following code to it:

To populate the list of users, you need to create some dummy data and wrap the UsersList component in the App component. To do this, replace the code in App.js with the following:

Note: The App component renders the UsersList component, which in turn renders each User component for every user in the list.

The application in your Safari browser should look like the following:

Debugging and Inspecting Your App

Now that your application is ready, you can start debugging it with React DevTools.

If you open React DevTools, you should see your application tree. It begins with the App component at the top, followed by the UsersList component, and ends with the User component:

If you click the UsersList component in the tree, the props that are passed to the component will be displayed in the right pane. In this case, the props include the array of users from your dummy data:

Clicking a User component displays the props that it passes (the user object in this case). You can click any of three User components and check their relative props:

When you use React DevTools to debug your application, it’s important to understand the application tree and how it represents the component hierarchy. The application tree can help you quickly identify rendering issues and data flow by providing a visual representation of the components. You can inspect the props and state of each component to pinpoint bugs and troubleshoot issues that may arise.

Additionally, you can pin the location of a selected component in your browser by clicking the eye icon in React DevTools:

Once this has been activated, it will highlight the component in light blue in your browser:

You can also log the selected component in the console by clicking the bug icon in React DevTools:

The following image shows the results in the browser when you click the bug icon:

Using React DevTools, you can gain a better understanding of the structure and behavior of your applications. You can also more easily identify and fix bugs and performance issues. The standalone version is particularly useful because it can be used with any React application, whether it’s running locally or on a remote server, and it provides a separate, dedicated window for debugging purposes. Overall, the standalone version of React DevTools is a practical tool for developing and debugging React applications.

Differences between Standalone React DevTools and the Chrome Extension

If you use the standalone version of React DevTools, you’ll be able to use it with any browser, not just Safari. It also offers more customization options and flexibility compared to the Chrome extension. The following are some other differences between the two versions:

• Cross-platform compatibility: The standalone version of React DevTools is designed to work across various platforms, including browsers and devices, enabling a broader range of debugging and development possibilities. Chrome extensions, on the other hand, are limited to working within the Chrome browser environment.
• Ease of setup and connection: Chrome extensions are designed to integrate seamlessly with the browser, so using the extension version makes it easy to detect and connect to React apps running in the browser. The standalone version of React DevTools often requires manual configuration to connect to the target app, which can be more time-consuming and error-prone.
• Updates and maintenance: These two versions of React DevTools may have different release schedules and update processes. Chrome extensions typically update automatically with the browser, while the standalone version may require manual updates.

Limitations of Standalone React DevTools

It’s also important to be aware that the standalone version of React DevTools has some limitations. For instance, the tool may not work as effectively with certain types of components, such as those built with third-party libraries. You may need to use additional tools or methods to gather the necessary information if the tool provides limited data.

The following are some of the most notable limitations:

• Browser-specific features: The standalone version of React DevTools may lack some browser-specific features, such as network request inspection, JavaScript debugging, or browser performance profiling. For these features, developers need to use the browser’s built-in developer tools or rely on other debugging solutions tailored for the specific browser.
• Integration with browser environment: The standalone version doesn’t have the same level of integration with the browser environment as the extensions. Certain tasks, like interacting with browser APIs or manipulating the DOM, may be more challenging or impossible to accomplish using the standalone version.
• Learning curve: Due to differences in features, interface, and setup process, developers may need to invest additional time in learning how to use the standalone version of React DevTools. This may slow down their development process, especially if they are already familiar with the Chrome extension.
• Performance and resource usage: The standalone version of React DevTools may have different performance characteristics and resource usage compared to the Chrome extension version. Depending on the specific tools and configurations used, developers may experience varying levels of performance and resource consumption, which can impact their development experience.

By keeping these limitations in mind, you can adjust your approach and optimize your code more effectively. For instance, you can use alternative tools or workarounds to gather the information you need.

The standalone version of React DevTools offers a versatile solution for developers who need a powerful and flexible set of debugging tools, whether they’re working on browser-based React apps or non-browser-based applications like React Native apps.

This article introduced the standalone version of React DevTools and demonstrated how to use it to debug a React app running in Safari. You should now be comfortable with setting up, connecting, and using React DevTools to inspect and debug your React applications. With the knowledge from this article, you’ll be able to debug your React applications, regardless of the environment or browser they are running in.

You can find the code that was used in this article in this GitHub repository .

By Lucien Chemaly

Lucien has a Master's and Engineering Degree in IT and Telecommunications from the University of Rennes, France. He teaches seasonal courses for engineering students at the Saint Joseph University of Beirut and has been involved in programming training for private companies. He also writes for Draft.dev.

Build a Blog that Software Developers Will Read

The Technical Content Manager’s Playbook is a collection of resources you can use to manage a high-quality, technical blog:

• A template for creating content briefs
• An Airtable publishing calendar
• A technical blogging style guide

• Patrick Brosset
• Sep 7, 2021

What’s New With DevTools: Cross-Browser Edition

• 18 min read
• Tools , Browsers , Debugging , Testing , DevTools
• Share on Twitter ,  LinkedIn

About The Author

Patrick Brosset is a product manager on the Edge Developer Experience team at Microsoft, and previously worked at Mozilla. He has about 20 years of experience … More about Patrick ↬

Email Newsletter

Weekly tips on front-end & UX . Trusted by 200,000+ folks.

Browser developer tools keep evolving, with new and improved features added all the time. It’s hard to keep track, especially when using more than one browser. With that much on offer, it is not surprising that we feel overwhelmed and use the features we already know instead of keeping up with what’s new.

It’s a shame though, as some of them can make us much more productive.

So, my goal with this article is to raise awareness on some of the newest features in Chrome, Microsoft Edge, Firefox and Safari. Hopefully, it will make you want to try them out, and maybe will help you get more comfortable next time you need to debug a browser-specific issue.

With that said, let’s jump right in.

Chrome DevTools

The Chrome DevTools team has been hard at work modernizing their (now 13 years old) codebase. They have been busy improving the build system, migrating to TypeScript, introducing new WebComponents, re-building their theme infrastructure, and way more. As a result, the tools are now easier to extend and change.

But on top of this less user-facing work, the team did ship a lot of features too. Let me go over a few of them here, related to CSS debugging.

Scroll-snapping

CSS scroll-snapping offers web developers a way to control the position at which a scrollable container stops scrolling. It’s a useful feature for, e.g., long lists of photos where you want the browser to position each photo neatly within its scrollable container automatically for you.

If you want to learn more about scroll-snapping, you can read this MDN documentation , and take a look at Adam Argyle’s demos here .

The key properties of scroll-snapping are:

• scroll-snap-type , which tells the browser the direction in which snapping happens, and how it happens;
• scroll-snap-align , which tells the browser where to snap.

Chrome DevTools introduced new features that help debug these key properties:

• if an element defines scroll-snapping by using scroll-snap-type , the Elements panel shows a badge next to it.
• the scroll container,
• the items that scroll within the container,
• the position where items are aligned (marked by a blue dot).

This overlay makes it easy to understand if and how things snap into place after scrolling around. This can be very useful when, e.g., your items don’t have a background and boundaries between them are hard to see.

While scroll snapping isn’t a new CSS feature, adoption is rather low ( less than 4% according to chromestatus.com ), and since the specification changed, not every browser supports it the same way.

I hope that this DevTools feature will make people want to play more with it and ultimately adopt it for their sites.

Container queries

If you have done any kind of web development in recent years, you have probably heard of container queries . It’s been one of the most requested CSS features for the longest time and has been a very complex problem for browser makers and spec writers to solve.

If you don’t know what container queries are, I would suggest going through Stephanie Eckles’ Primer On CSS Container Queries article first.

In a few words, they’re a way for developers to define the layout and style of elements depending on their container’s size. This ability is a huge advantage when creating reusable components since we can make them adapt to the place they are used in (rather than only adapt to the viewport size which media queries are good for).

Fortunately, things are moving in this space and Chromium now supports container queries and the Chrome DevTools team has started adding tooling that makes it easier to get started with them.

Container queries are not enabled by default in Chromium yet (to enable them, go to chrome://flags and search for “container queries”), and it may still take a little while for them to be. Furthermore, the DevTools work to debug them is still in its early days. But some early features have already landed.

• When selecting an element in DevTools that has styles coming from a @container at-rule, then this rule appears in the Styles sidebar of the Elements panel. This is similar to how media queries styles are presented in DevTools and will make it straightforward to know where a certain style is coming from.

As the above screenshot shows, the Styles sidebar displays 2 rules that apply to the current element. The bottom one applies to the .media element at all times and provides its default style. And the top one is nested in a @container (max-width:300px) container query that only takes effect when the container is narrower than 300px.

• On top of this, just above the @container at-rule, the Styles pane displays a link to the element that the rule resolves to, and hovering over it displays extra information about its size. This way you know exactly why the container query matched.

The Chrome DevTools team is actively working on this feature and you can expect much more in the future.

Chromium Collaboration

Before going into features that other browsers have, let’s talk about Chromium for a little bit. Chromium is an open-source project that Chrome, Edge, Brave, and other browsers are built upon. It means all these browsers have access to the features of Chromium.

Two of the most active contributors to this project are Google and Microsoft and, when it comes to DevTools, they collaborated on a few interesting features that I’d like to go over now.

CSS Layout Debugging Tools

A few years ago, Firefox innovated in this space and shipped the first-ever grid and flexbox inspectors. Chromium-based browsers now also make it possible for web developers to debug grid and flexbox easily.

This collaborative project involved engineers, product managers and designers from Microsoft and Google, working towards a shared goal (learn more about the project itself in my BlinkOn talk ).

Among other things, DevTools now has the following layout debugging features:

• Highlight multiple grid and flex layouts on the page, and customize if you want to see grid line names or numbers, grid areas, and so on.
• Flex and grid editors to visually play around with the various properties.
• Alignment icons in the CSS autocomplete make it easier to choose properties and values.
• Highlight on property hover to understand what parts of the page a property applies to.

You can read more information about this on Microsoft’s and Google’s documentation sites.

Localization

This was another collaborative project involving Microsoft and Google which, now, makes it possible for all Chromium-based DevTools to be translated in languages other than English.

Originally, there was never a plan to localize DevTools, which means that this was a huge effort. It involved going over the entire codebase and making UI strings localizable.

The result was worth it though. If English isn’t your first language and you’d feel more comfortable using DevTools in a different one, head over to the Settings ( F1 ) and find the language drop-down.

Here is a screenshot of what it looks like in Chrome DevTools:

And here is how Edge looks in Japanese:

Edge DevTools

Microsoft switched to Chromium to develop Edge more than 2 years ago now. While, at the time, it caused a lot of discussions in the web community, not much has been written or said about it since then. The people working on Edge (including its DevTools) have been busy though, and the browser has a lot of unique features now.

Being based on the Chromium open source project does mean that Edge benefits from all of its features and bug fixes. Practically speaking, the Edge team ingests the changes made in the Chromium repository in their own repository.

But over the past year or so, the team started to create Edge-specific functionality based on the needs of Edge users and feedback. Edge DevTools now has a series of unique features that I will go over.

Opening, Closing, and Moving Tools

With almost 30 different panels, DevTools is a really complicated piece of software in any browser. But, you never really need access to all the tools at the same time. In fact, when starting DevTools for the first time, only a few panels are visible and you can add more later.

On the other hand though, it’s hard to discover the panels that aren’t shown by default, even if they could be really useful to you.

Edge added 3 small, yet powerful, features to address this:

• a close button on tabs to close the tools you don’t need anymore,
• a + (plus) button at the end of the tab bar to open any tool,
• a context menu option to move tools around.

The following GIF shows how closing and opening tools in both the main and drawer areas can be done in Edge.

You can also move tools between the main area and drawer area:

• right-clicking on a tab at the top shows a “Move to bottom” item, and
• right-clicking on a tab in the drawer shows a “Move to top” item.

Getting Contextual Help with the DevTools Tooltips

It is hard for beginners and seasoned developers alike to know all about DevTools. As I mentioned before, there are so many panels that it’s unlikely you know them all.

To address this, Edge added a way to go directly from the tools to their documentation on Microsoft’s website .

This new Tooltips feature works as a toggleable overlay that covers the tools. When enabled, panels are highlighted and contextual help is provided for each of them, with links to documentation.

You can start the Tooltips in 3 different ways:

• by using the Ctrl + Shift + H keyboard shortcut on Windows/Linux ( Cmd + Shift + H on Mac);
• by going into the main ( ... ) menu, then going into Help, and selecting “Toggle the DevTools Tooltips”;
• by using the command menu and typing “Tooltips”.

Customizing Colors

In code editing environments, developers love customizing their color themes to make the code easier to read and more pleasant to look at. Because web developers spend considerable amounts of time in DevTools too, it makes sense for it to also have customizable colors.

Edge just added a number of new themes to DevTools , on top of the already available dark and light themes. A total of 9 new themes were added. These come from VS Code and will therefore be familiar to people using this editor.

You can select the theme you want to use by going into the settings (using F1 or the gear icon in the top-right corner), or by using the command menu and typing theme .

Firefox DevTools

Similar to the Chrome DevTools team, the folks working on Firefox DevTools have been busy with a big architecture refresh aimed at modernizing their codebase. Additionally, their team is quite a bit smaller these days as Mozilla had to refocus over recent times. But, even though this means they had less time for adding new features, they still managed to release a few really interesting ones that I’ll go over now.

Debugging Unwanted Scrollbars

Have you ever asked yourself: “where is this scrollbar coming from?” I know I have, and now Firefox has a tool to debug this very problem.

In the Inspector panel, all elements that scroll have a scroll badge next to them, which is already useful when dealing with deeply nested DOM trees. On top of this, you can click this badge to reveal the element (or elements) that caused the scrollbar to appear.

You can find more documentation about it here .

Visualizing Tabbing Order

Navigating a web page with the keyboard requires using the tab key to move through focusable elements one by one. The order in which focusable elements get focused while using tab is an important aspect of the accessibility of your site and an incorrect order may be confusing to users. It’s especially important to pay attention to this as modern layout CSS techniques allow web developers to rearrange elements on a page very easily.

Firefox has a useful Accessibility Inspector panel that provides information about the accessibility tree, finds and reports various accessibility problems automatically, and lets you simulate different color vision deficiencies.

On top of these features, the panel now provides a new page overlay that displays the tabbing order for focusable elements.

To enable it, use the “Show Tabbing Order” checkbox in the toolbar.

A Brand New Performance Tool

Not many web development areas depend on tooling as much as performance optimization does. In this domain, Chrome DevTools’ Performance panel is best in class.

Over the past few years, Firefox engineers have been focusing on improving the performance of the browser itself, and to help them do this, they built a performance profiler tool. The tool was originally built to optimize the engine native code but supported analyzing JavaScript performance right from the start, too.

Today, this new performance tool replaces the old Firefox DevTools performance panel in pre-release versions (Nightly and Developer Edition). Take it for a spin when you get the chance.

Among other things, the new Firefox profiler supports sharing profiles with others so they can help you improve the performance of your recorded use case.

You can read documentation about it here , and learn more about the project on their GitHub repository .

Safari Web Inspector

Last but not least, let’s go over a few of the recent Safari features.

The small team at Apple has been keeping itself very busy with a wide range of improvements and fixes around the tools. Learning more about the Safari Web Inspector can help you be more productive when debugging your sites on iOS or tvOS devices. Furthermore, it has a bunch of features that other DevTools don’t, and that not a lot of people know about.

CSS Grid Debugging

With Firefox, Chrome, and Edge (and all Chromium-based browsers) having dedicated tools for visualizing and debugging CSS grids, Safari was the last major browser not to have this. Well, now it does!

Fundamentally, Safari now has the same features just like other browsers’ DevTools in this area. This is great as it means it’s easy to go from one browser to the next and still be productive.

• Grid badges are displayed in the Elements panel to quickly find grids.
• Clicking on the badge toggles the visualization overlay on the page.
• A new Layout panel is now displayed in the sidebar. It allows you to configure the grid overlay, see the list of all grids on the page and toggle the overlay for them.

What’s interesting about Safari’s implementation though is that they’ve really nailed the performance aspect of the tool. You can enable many different overlays at once, and scroll around the page without it causing any performance problems at all.

The other interesting thing is Safari introduced a 3-pane Elements panel, just like Firefox, which allows you to see the DOM, the CSS rules for the selected element, and the Layout panel all at once.

Find out more about the CSS Grid Inspector on this WebKit blog post .

A Slew of Debugger Improvements

Safari used to have a separate Resources and Debugger panel. They have merged them into a single Sources panel that makes it easier to find everything you need when debugging your code. Additionally, this makes the tool more consistent with Chromium which a lot of people are used to.

Consistency for common tasks is important in a cross-browser world. Web developers already need to test across multiple browsers, so if they need to learn a whole new paradigm when using another browser’s DevTools, it can make things more difficult than they need to be.

But Safari also recently focused on adding innovative features to its debugger that other DevTools don’t have.

Bootstrap script : Safari lets you write JavaScript code that is guaranteed to run first before any of the scripts on the page. This is very useful to instrument built-in functions for adding debugger statements or logging for example.

New breakpoint configurations : All browsers support multiple types of breakpoints like conditional breakpoints, DOM breakpoints, event breakpoints, and more.

Safari recently improved their entire suite of breakpoint types by giving them all a way to configure them extensively. With this new breakpoint feature, you can decide:

• if you want a breakpoint to only hit when a certain condition is true,
• if you want the breakpoint to pause execution at all, or just execute some code,
• or even play an audio beep so you know some line of code was executed.

queryInstances and queryHolders console functions : These two functions are really useful when your site starts using a lot of JavaScript objects. In some situations, it may become difficult to keep track of the dependencies between these objects, and memory leaks may start to appear, too.

Safari does have a Memory tool that can help resolve these issues by letting you explore memory heap snapshots. But sometimes you already know which class or object is causing the problem and you want to find what instances exist or what refers to it.

If Animal is a JavaScript class in your application, then queryInstances(Animal) will return an array of all of its instances.

If foo is an object in your application, then queryHolders(foo) will return an array of all the other objects that have references to foo .

Closing Thoughts

I hope these features will be useful to you. I can only recommend using multiple browsers and getting familiar with their DevTools. Being more familiar with other DevTools can prove useful when you have to debug an issue in a browser you don’t use on a regular basis.

Know that the companies which make browsers all have teams working on DevTools actively. They’re invested in making them better, less buggy, and more powerful. These teams depend on your feedback to build the right things. Without hearing about what problems you are facing, or what features you lack, it’s harder for them to make the right decisions about what to build.

Reporting bugs to a DevTools team won’t just help you when the fix comes, but may also be helping many others who have been facing the same issue.

It’s worth knowing that the DevTools teams at Microsoft, Mozilla, Apple and Google are usually fairly small and receive a lot of feedback, so reporting an issue does not mean it will be fixed quickly, but it does help, and those teams are listening .

Here are a few ways you can report bugs, ask questions or request features:

• Firefox uses Bugzilla as their public bug tracker and anyone is welcome to report bugs or ask for new features by creating a new entry there. All you need is a GitHub account to log in.
• Getting in touch with the team can either be done on Twitter by using the @FirefoxDevTools account or logging in to the Mozilla chat (find documentation about the chat here ).
• Safari also uses public bug tracking for their WebKit bugs . Here is documentation about how to search for bugs and report new ones .
• You can also get in touch with the team on Twitter with @webkit .
• Finally, you can also signal bugs about Safari and the Safari Web Inspector using the feedback assistant .
• The easiest way to report a problem or ask for a feature is by using the feedback button in DevTools (the little stick figure in the top-right corner of the tools).
• Asking questions to the team works best over Twitter by mentioning the @EdgeDevTools account.
• The team listens for feedback on the devtools-dev mailing list as well as on twitter at @ChromeDevTools .
• Since Chromium is the open-source project that powers Google Chrome and Microsoft Edge (and others), you can also report issues on the Chromium’s bug tracker .

With that, thank you for reading!

Smashing Newsletter

Tips on front-end & UX, delivered weekly in your inbox. Just the things you can actually use.

Front-End & UX Workshops, Online

With practical takeaways, live sessions, video recordings and a friendly Q&A.

TypeScript in 50 Lessons

Everything TypeScript, with code walkthroughs and examples. And other printed books.

React Developer Tools

Use React Developer Tools to inspect React components , edit props and state , and identify performance problems.

You will learn

• How to install React Developer Tools

Browser extension

The easiest way to debug websites built with React is to install the React Developer Tools browser extension. It is available for several popular browsers:

• Install for Chrome
• Install for Firefox
• Install for Edge

Now, if you visit a website built with React, you will see the Components and Profiler panels.

Safari and other browsers

For other browsers (for example, Safari), install the react-devtools npm package:

Next open the developer tools from the terminal:

Then connect your website by adding the following <script> tag to the beginning of your website’s <head> :

Reload your website in the browser now to view it in developer tools.

Mobile (React Native)

React Developer Tools can be used to inspect apps built with React Native as well.

The easiest way to use React Developer Tools is to install it globally:

Next open the developer tools from the terminal.

It should connect to any local React Native app that’s running.

Try reloading the app if developer tools doesn’t connect after a few seconds.

Learn more about debugging React Native.

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

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

This is a port of the vue-devtools extension available for Google Chrome and Mozilla Firefox browsers. This repository contains an Xcode project that ports the extension using an existing Chrome extension installation into a Swift-based Safari Extension.

arizsiddiqui/vue-devtools-for-safari

Folders and files, repository files navigation, vue devtools for safari, how to run this project.

To install Vue-devtools in Safari, follow these steps:

1. Install Xcode

If not already installed, you need to install Xcode to run the project as well as build the Safari Extension. There are multiple ways to download the latest version of Xcode:-

• via the Mac App Store.
• via tha Apple Developers website.

Make sure you have more than 40-45 GBs free on your disk to ensure smooth installation of the IDE.

2. Enable Developer mode in Safari to allow Unsigned Extensions.

• To enable Developer mode in Safari, Press ⌘, to open the Safari App Preferences.
• Navigate to the 'Advanced' Tab
• Check the 'Show Develop menu in menu bar'. You should now be able to see the 'Develop' tab appear after the 'Bookmarks' tab in the menu bar.
• Open the 'Develop' menu and click the 'Allow Unsigned Extensions' option in the menu.
• Close Safari to make sure the changes take effect.

3. Clone this repository.

• Open Terminal or your preferred Terminal emulator.
• Navigate to the directory you want to save this codebase in.
• Clone the repository using the command: git clone https://github.com/arizsiddiqui/vue-devtools-for-safari
• This codebase should now be available on your local machine.

4. Run the project.

• In Finder navigate inside this repository until you find the 'Vue.js devtools.xcodeproj' file.
• Double click this file to open the entire project in Xcode.

5. Bundle the source code into a Safari WebExtension App.

• In Xcode, open the 'Product' menu in the menu bar and click 'Archive'. Xcode will start building the project to be bundled into an application.
• In the Archives window that then appears, choose 'Distribute App', and 'Copy App' in the distribution dialog box.
• Choose the destination folder for the bundled application.

6. Add the extension to Safari.

• In Finder, navigate to the destination folder. Here you should find an application by the name of 'Vue.js devtools.app'.
• Run the app by double clicking on it.
• Click the button inside to open Safari Extensions.
• Check the box next to the devtools extension to enable it in Safari.
• JavaScript 98.1%

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

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.

Debug, Inspect , Done.

Inspect helps you debug the mobile web on ios and android by giving you an all-in-one developer tool for macos, windows, and linux..

Join the best

You are in good hands.

Engineers from these companies are already happy (Inspect)ors, more productive and saving time.

Why Inspect?

Debug the web on ios devices.

Inspect enables to you debug Safari and WebViews on your iOS device.

Debug the web on Android

Inspect enables you to debug Chrome and WebViews on your Android device.

No new hardware needed

No new hardware needed. Inspect is provides a software-only solution that works across platforms.

UI from Chrome DevTools

Inspect is built on Chrome DevTools, so you feel right at home from day one.

Inspect over Wifi (on MacOS)

Inspect supports debugging of iOS devices over WIFI on macOS. It's time to let go of the cables.

Works on macOS, Linux and Windows

Inspect and debug your web apps and websites on iOS and Android from macOS, Windows and Linux.

Vue Devtools

Browser devtools extension for debugging Vue.js applications

💚️ Become a Sponsor

Moscow Metro Font

Moscow Metro is a multi-line display typeface inspired by the Moscow underground map. It comes in Regular and Color versions.

Moscow Metro is ideal for posters and headlines, neon signage and other artworks.

• Share by email

Designed by: Nadira Filatova Website

License: free for commercial use.

40 Facts About Elektrostal

Written by Lanette Mayes

Modified & Updated: 02 Mar 2024

Reviewed by Jessica Corbett

Elektrostal is a vibrant city located in the Moscow Oblast region of Russia. With a rich history, stunning architecture, and a thriving community, Elektrostal is a city that has much to offer. Whether you are a history buff, nature enthusiast, or simply curious about different cultures, Elektrostal is sure to captivate you.

This article will provide you with 40 fascinating facts about Elektrostal, giving you a better understanding of why this city is worth exploring. From its origins as an industrial hub to its modern-day charm, we will delve into the various aspects that make Elektrostal a unique and must-visit destination.

So, join us as we uncover the hidden treasures of Elektrostal and discover what makes this city a true gem in the heart of Russia.

Key Takeaways:

• Elektrostal, known as the “Motor City of Russia,” is a vibrant and growing city with a rich industrial history, offering diverse cultural experiences and a strong commitment to environmental sustainability.
• With its convenient location near Moscow, Elektrostal provides a picturesque landscape, vibrant nightlife, and a range of recreational activities, making it an ideal destination for residents and visitors alike.

Known as the “Motor City of Russia.”

Elektrostal, a city located in the Moscow Oblast region of Russia, earned the nickname “Motor City” due to its significant involvement in the automotive industry.

Home to the Elektrostal Metallurgical Plant.

Elektrostal is renowned for its metallurgical plant, which has been producing high-quality steel and alloys since its establishment in 1916.

Boasts a rich industrial heritage.

Elektrostal has a long history of industrial development, contributing to the growth and progress of the region.

Founded in 1916.

The city of Elektrostal was founded in 1916 as a result of the construction of the Elektrostal Metallurgical Plant.

Located approximately 50 kilometers east of Moscow.

Elektrostal is situated in close proximity to the Russian capital, making it easily accessible for both residents and visitors.

Known for its vibrant cultural scene.

Elektrostal is home to several cultural institutions, including museums, theaters, and art galleries that showcase the city’s rich artistic heritage.

A popular destination for nature lovers.

Surrounded by picturesque landscapes and forests, Elektrostal offers ample opportunities for outdoor activities such as hiking, camping, and birdwatching.

Hosts the annual Elektrostal City Day celebrations.

Every year, Elektrostal organizes festive events and activities to celebrate its founding, bringing together residents and visitors in a spirit of unity and joy.

Has a population of approximately 160,000 people.

Elektrostal is home to a diverse and vibrant community of around 160,000 residents, contributing to its dynamic atmosphere.

Boasts excellent education facilities.

The city is known for its well-established educational institutions, providing quality education to students of all ages.

A center for scientific research and innovation.

Elektrostal serves as an important hub for scientific research, particularly in the fields of metallurgy, materials science, and engineering.

Surrounded by picturesque lakes.

The city is blessed with numerous beautiful lakes, offering scenic views and recreational opportunities for locals and visitors alike.

Well-connected transportation system.

Elektrostal benefits from an efficient transportation network, including highways, railways, and public transportation options, ensuring convenient travel within and beyond the city.

Famous for its traditional Russian cuisine.

Food enthusiasts can indulge in authentic Russian dishes at numerous restaurants and cafes scattered throughout Elektrostal.

Home to notable architectural landmarks.

Elektrostal boasts impressive architecture, including the Church of the Transfiguration of the Lord and the Elektrostal Palace of Culture.

Offers a wide range of recreational facilities.

Residents and visitors can enjoy various recreational activities, such as sports complexes, swimming pools, and fitness centers, enhancing the overall quality of life.

Provides a high standard of healthcare.

Elektrostal is equipped with modern medical facilities, ensuring residents have access to quality healthcare services.

Home to the Elektrostal History Museum.

The Elektrostal History Museum showcases the city’s fascinating past through exhibitions and displays.

A hub for sports enthusiasts.

Elektrostal is passionate about sports, with numerous stadiums, arenas, and sports clubs offering opportunities for athletes and spectators.

Celebrates diverse cultural festivals.

Throughout the year, Elektrostal hosts a variety of cultural festivals, celebrating different ethnicities, traditions, and art forms.

Electric power played a significant role in its early development.

Elektrostal owes its name and initial growth to the establishment of electric power stations and the utilization of electricity in the industrial sector.

Boasts a thriving economy.

The city’s strong industrial base, coupled with its strategic location near Moscow, has contributed to Elektrostal’s prosperous economic status.

Houses the Elektrostal Drama Theater.

The Elektrostal Drama Theater is a cultural centerpiece, attracting theater enthusiasts from far and wide.

Popular destination for winter sports.

Elektrostal’s proximity to ski resorts and winter sport facilities makes it a favorite destination for skiing, snowboarding, and other winter activities.

Promotes environmental sustainability.

Elektrostal prioritizes environmental protection and sustainability, implementing initiatives to reduce pollution and preserve natural resources.

Home to renowned educational institutions.

Elektrostal is known for its prestigious schools and universities, offering a wide range of academic programs to students.

Committed to cultural preservation.

The city values its cultural heritage and takes active steps to preserve and promote traditional customs, crafts, and arts.

Hosts an annual International Film Festival.

The Elektrostal International Film Festival attracts filmmakers and cinema enthusiasts from around the world, showcasing a diverse range of films.

Encourages entrepreneurship and innovation.

Elektrostal supports aspiring entrepreneurs and fosters a culture of innovation, providing opportunities for startups and business development.

Offers a range of housing options.

Elektrostal provides diverse housing options, including apartments, houses, and residential complexes, catering to different lifestyles and budgets.

Home to notable sports teams.

Elektrostal is proud of its sports legacy, with several successful sports teams competing at regional and national levels.

Boasts a vibrant nightlife scene.

Residents and visitors can enjoy a lively nightlife in Elektrostal, with numerous bars, clubs, and entertainment venues.

Promotes cultural exchange and international relations.

Elektrostal actively engages in international partnerships, cultural exchanges, and diplomatic collaborations to foster global connections.

Surrounded by beautiful nature reserves.

Nearby nature reserves, such as the Barybino Forest and Luchinskoye Lake, offer opportunities for nature enthusiasts to explore and appreciate the region’s biodiversity.

Commemorates historical events.

The city pays tribute to significant historical events through memorials, monuments, and exhibitions, ensuring the preservation of collective memory.

Promotes sports and youth development.

Elektrostal invests in sports infrastructure and programs to encourage youth participation, health, and physical fitness.

Hosts annual cultural and artistic festivals.

Throughout the year, Elektrostal celebrates its cultural diversity through festivals dedicated to music, dance, art, and theater.

Provides a picturesque landscape for photography enthusiasts.

The city’s scenic beauty, architectural landmarks, and natural surroundings make it a paradise for photographers.

Connects to Moscow via a direct train line.

The convenient train connection between Elektrostal and Moscow makes commuting between the two cities effortless.

A city with a bright future.

Elektrostal continues to grow and develop, aiming to become a model city in terms of infrastructure, sustainability, and quality of life for its residents.

In conclusion, Elektrostal is a fascinating city with a rich history and a vibrant present. From its origins as a center of steel production to its modern-day status as a hub for education and industry, Elektrostal has plenty to offer both residents and visitors. With its beautiful parks, cultural attractions, and proximity to Moscow, there is no shortage of things to see and do in this dynamic city. Whether you’re interested in exploring its historical landmarks, enjoying outdoor activities, or immersing yourself in the local culture, Elektrostal has something for everyone. So, next time you find yourself in the Moscow region, don’t miss the opportunity to discover the hidden gems of Elektrostal.

Q: What is the population of Elektrostal?

A: As of the latest data, the population of Elektrostal is approximately XXXX.

Q: How far is Elektrostal from Moscow?

A: Elektrostal is located approximately XX kilometers away from Moscow.

Q: Are there any famous landmarks in Elektrostal?

A: Yes, Elektrostal is home to several notable landmarks, including XXXX and XXXX.

Q: What industries are prominent in Elektrostal?

A: Elektrostal is known for its steel production industry and is also a center for engineering and manufacturing.

Q: Are there any universities or educational institutions in Elektrostal?

A: Yes, Elektrostal is home to XXXX University and several other educational institutions.

Q: What are some popular outdoor activities in Elektrostal?

A: Elektrostal offers several outdoor activities, such as hiking, cycling, and picnicking in its beautiful parks.

Q: Is Elektrostal well-connected in terms of transportation?

A: Yes, Elektrostal has good transportation links, including trains and buses, making it easily accessible from nearby cities.

Q: Are there any annual events or festivals in Elektrostal?

A: Yes, Elektrostal hosts various events and festivals throughout the year, including XXXX and XXXX.

Was this page helpful?

Our commitment to delivering trustworthy and engaging content is at the heart of what we do. Each fact on our site is contributed by real users like you, bringing a wealth of diverse insights and information. To ensure the highest standards of accuracy and reliability, our dedicated editors meticulously review each submission. This process guarantees that the facts we share are not only fascinating but also credible. Trust in our commitment to quality and authenticity as you explore and learn with us.

Share this Fact:

• Model training in Red Hat OpenShift AI

This is the fourth episode of our series that dives into training and deploying computer vision models at the edge . And I have some good news: we're already past the halfway point. Have a look at the series outline and the remainder of the fascicles:

• How to install single node OpenShift on AWS
• How to install single node OpenShift on bare metal
• Red Hat OpenShift AI installation and set up
• Prepare and label custom datasets with Label Studio
• Deploy computer vision applications at the edge with MicroShift 

Introduction

Training artificial intelligence (AI) models is a pivotal process in the development of AI systems, demanding significant time and resources. The importance of this training phase cannot be overstated, as it is during this stage that the model learns to recognize patterns, make predictions, and perform tasks based on the provided data. 

Red Hat OpenShift AI provides a robust platform for conducting AI model training. This platform empowers us to efficiently perform model development iterations, fine-tune parameters, and validate performance, ultimately facilitating the creation of high-quality AI solutions. We will use this platform to train our YOLO algorithm based on previously processed data. 

Info alert: Note

Red Hat OpenShift AI deployment on single node OpenShift is currently not officially supported. Refer to the OpenShift AI official  documentation to get more information about supported platforms and configurations.

For this demo, we have decided to develop a real-time detection system that will provide efficient and accurate animal locations and some statistics within video sequences. In this article, we are going to show you the complete process for training the model based on a dataset of animal images previously labeled. It is worth mentioning that the  original set of images and labels has been prepared in advance and  converted to YOLO format to simplify the explanation. 

However, if you want to build a demo to detect a custom set of objects, don't worry. We show you how to label your own image dataset in the article Prepare and label custom datasets with Label Studio . Then you will only have to replace the animals dataset with your custom one.

Project set up

Once you are logged in the OpenShift AI dashboard, the first step is to create the project where all of the resources related to our project will live. It is considered a good practice to create separate projects each time to ensure component isolation and better access control. Here you have the steps to create the new project: 

• On the left menu in the dashboard, navigate to the  Data Science Projects tab.
• Click the  Create data science project button.
• There you can type your preferred project name. In my case, it will be  safari .
• Finally, click  Create . 

That’s how easy it is to create the project namespace. This is where all the resources tailored to this demo will be deployed.

Create workbench

Now that we have our newly created  safari project, we can configure our workbench:

• Click  Create workbench .
• Once on the workbench configuration page, complete the fields to match the following specifications:
• Name :  safari (insert any preferred name).
• Image selection :  PyTorch .
• Version selection :  2023.2 (recommended).
• Container size :  Medium (this will depend on your node resources; the more, the better).
• Accelerator :  NVIDIA GPU . 
• Number of accelerators :  2 . (In this case, our node has 2 NVIDIA GPU cards, but you will need to select the number that applies to your environment.)
• Persistent storage size :  80 GiB (we can always extend it later if needed).
• Once you have completed the form, click  Create workbench . You will be redirected to the project dashboard, where the workbench is starting. It could take a couple of minutes to pull the image before changing the status to Running. Your project should look similar to Figure 1.

• Now you can access the Workbench Interface by clicking  Open and logging in using your kubeadmin credentials.

That's it! Our workbench is ready and the next step will be to deploy the Notebook containing the training instructions. Now, jump to the model training section.

Model training

The moment to directly work with the AI model has arrived. When you open your workbench, you will be directed to a Jupyter environment, a versatile computational platform used for interactive computing, data analysis, and scientific research. It provides a web-based interface that allows users to create files with code in multiple programming languages, as shown in Figure 2.

Notebooks in Jupyter serve as interactive computing documents that combine live code, visualizations, explanatory text, and multimedia elements in a single interface, allowing users to execute code blocks individually, visualize results immediately, and document their processes in real-time. We can always spin up a new Python Notebook and start programming right from scratch, but OpenShift AI also makes it possible to import Git repositories and visualize the dataset and Notebooks directly from the Jupyter interface. 

On the left side of the screen, you should see the Git icon (shown in Figure 3).

Click  Clone a Repository and paste the Safari GitHub repository URL :  https://github.com/OpenShiftDemos/safari-demo

After a few moments, you should see the  safari-demo directory cloned in your Jupyter environment. Let me briefly explain the repo folder architecture:

• notebooks : Stores different notebooks. We will use:  Safari_YOLOv8.ipynb .
• dataset : Contains the images and annotations for the animal images.
• weights : Stores the weights resulting from the training. You can use them in case you don’t want to train the model on your own. 

If you are trying to build your own model, you can use the notebook in the  safari-demo as a reference. Remember to adapt the following steps to point out the model to your custom dataset.

Navigate to  safari-demo  > notebooks  > Safari_YOLOv8.ipynb to open the   notebook. The file contains code cells that can be run by clicking the  Play button at the top. At this point, you can proceed with the training by reading through the notebook or via this article, as we will be reviewing some of the most important code cells.

First of all, we are going to clone the official  YOLO repository and install some of the package dependencies:

Next, verify that the images and labels for the training are in the right path. If you are using your own dataset, from now on, you will have to replace this information with the path where your dataset images are stored.

The output will show us the training, test, and validation folders with the images and labels subfolders. Also, the  data.yaml file will be listed. Let me show you the information this file contains:

You will need to create a similar file if you are using a custom dataset, modifying the number of classes, labels list, and the route to your images. 

As you can see, this is the file that YOLO uses as a reference to know where the training and validation folders are located. We also need to let it know how many classes we have. In our case, there are  80 different animals. Next comes the list of the class names in order. This is important when labeling the dataset images. Figure 4 shows an example.

Each line in the text file corresponds to a boundary box. The first number on each line corresponds to the class name. In this example,  0 means  Zidane , but in our model,  0=Hippopotamus , as shown in the  data.yaml .

Now that we know the basics, it’s time to train the model. As you can see below, the code is quite simple. First, we load a pretrained model that the YOLO Ultralytics team provides. These weights will be used as a starting point for the training with the new animal data. Next, we just need to call the  train function and fill in a couple of parameters:

• data : the path to our  data.yaml file.
• epoch : maximum number of iterations during the training.
• imgsz : size of the images used for the training.
• batch : number of images used during each training iteration.

Here starts the training of the YOLOv8 model using our dataset. In the first line of the output shown when running the cell, you should spot your GPU card, which is used to speed up the process. In my case, it’s the  Tesla M60 GPU card:

Wait until the training process finishes. This will be done automatically when either the function reaches the iteration number specified in the  epoch parameter or if at some point there is no significant accuracy improvement between iterations. The training time will depend on different factors, including the size of the images and the GPU used. When finished, the weights file will be automatically saved in the following folder:

At this point, our recently trained model should be able to detect animals on images. Let's try it out by passing a sample image. We just need to load our weights file to the model and specify the path to the image used as an example. 

If you want to save some time and skip the training process, you can use the weights file provided in the Git repository ( safari-demo > weights > best.pt ). Modify the paths to point to the file if needed.

Here you have the results (Figure 5):

Our brown bear is detected correctly. Now that we know that our model is working, we just need to save the model in onnx format so that we can use it in a container image later:

The file is saved in the following folder. Navigate to the directory and download it to your computer. We will use it later to be part of our Safari application:

That’s all we need for the training. We are ready to jump to the latest episode: the model deployment in Red Hat build of MicroShift.

In this tutorial, you used Red Hat OpenShift AI to train a YOLO v8 model. Our exploration has not only delved into the intricacies of object detection but also showcased the integration of computer vision cutting-edge technology with the robust OpenShift platform. 

As we bid farewell to this series, our final destination awaits in the next article, where we will witness the deployment of our trained model onto MicroShift. Join us in the grand finale: Deploy computer vision applications at the edge with MicroShift

• Red Hat Enterprise Linux
• Red Hat OpenShift
• Red Hat Ansible Automation Platform
• See all products
• See all technologies
• Developer Sandbox
• Developer Tools
• Interactive Tutorials
• API Catalog
• Operators Marketplace
• Learning Resources
• Cheat Sheets

Communicate

• Contact sales
• Find a partner

Report a website issue

• Site Status Dashboard
• Report a security problem

RED HAT DEVELOPER

Build here. Go anywhere.

We serve the builders. The problem solvers who create careers with code.

Join us if you’re a developer, software engineer, web designer, front-end designer, UX designer, computer scientist, architect, tester, product manager, project manager or team lead.

Red Hat legal and privacy links

• About Red Hat
• Contact Red Hat
• Red Hat Blog
• Diversity, equity, and inclusion
• Cool Stuff Store
• Red Hat Summit
• Privacy statement
• Terms of use
• All policies and guidelines
• Digital accessibility