Safari User Guide

  • Change your homepage
  • Import bookmarks, history, and passwords
  • Make Safari your default web browser
  • Go to websites
  • Find what you’re looking for
  • Bookmark webpages that you want to revisit
  • See your favorite websites
  • Use tabs for webpages
  • Pin frequently visited websites
  • Play web videos
  • Mute audio in tabs
  • Pay with Apple Pay
  • Autofill credit card info
  • Autofill contact info
  • Keep a Reading List
  • Hide ads when reading articles
  • Translate a webpage
  • Download items from the web
  • Share or post webpages
  • Add passes to Wallet
  • Save part or all of a webpage
  • Print or create a PDF of a webpage
  • Customize a start page
  • Customize the Safari window
  • Customize settings per website
  • Zoom in on webpages
  • Get extensions
  • Manage cookies and website data
  • Block pop-ups
  • Clear your browsing history
  • Browse privately
  • Autofill user name and password info
  • Prevent cross-site tracking
  • View a Privacy Report
  • Change Safari preferences
  • Keyboard and other shortcuts
  • Troubleshooting

open safari devtools

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 > Preferences, click Advanced, then select “Show Develop menu in menu bar.”

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 Open Developer Tools On Safari

Copy to Clipboard

  • Software & Applications
  • Browsers & Extensions

how-to-open-developer-tools-on-safari

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

Close Icon

  • 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 Enable Inspect In Safari

How To Enable Inspect In Safari

How To Inspect Page On Safari

How To Inspect Page On Safari

How To Change Location In Safari

How To Change Location In Safari

How To Open Developer Tools In Safari

How To Open Developer Tools In Safari

How To Inspect On Safari IPhone

How To Inspect On Safari IPhone

How To Inspect On IPhone Safari

How To Inspect On IPhone Safari

How To Post On Instagram From Mac Safari

How To Post On Instagram From Mac Safari

How To Reset Safari 9.0

How To Reset Safari 9.0

Recent stories.

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

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

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

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

Unleashing Young Geniuses: How Lingokids Makes Learning a Blast!

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

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

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

10 Best AI Math Solvers for Instant Homework Solutions

  • Privacy Overview
  • Strictly Necessary Cookies

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

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

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

How to Open Safari Developer Tools & Enable Mobile View Mode

open safari devtools

John on May 12, 2021

open safari devtools

In this tutorial, we will learn how to open the Safari developer console and enable mobile view for responsive web development.

How to Enable Safari Developer Tools

If you don't have developer tools enabled in Safari, you will need to do this before the console can be opened by using the following steps:

  • From the main menu go to Safari > Preferences (or use the CMD + , keyboard shortcut.)
  • Go to the Advanced tab.
  • Check "Show Developer menu in menu bar"

Open the Safari Developer Console

Now open the developer console in responsive mode by going to the menu and selecting Develop > Enter Responsive Design Mode :

Responsive Mode

Alternatively, use the keyboard shortcut CTRL + CMD + R to enter responsive developer mode.

Now you can work on your website in a variety of different mobile device screen sizes by selecting them at the top of the page:

Dev Console

Related Tutorials

 thumbnail

How to Stop DDOS Attacks & Prevent Future Downtime

 thumbnail

How to Enable Night Light Mode on Windows 10

 thumbnail

How to View Desktop Site on iPhone with Safari

 thumbnail

How to Use Grep Command to Search Files in Linux

 thumbnail

How to Find Words on a Page using Safari on iPhone

 thumbnail

How to Clear & Save Disk Storage Space on a Mac

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

Safari for Developement

Devtools in apple safari browser.

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

Safari Tabs

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

How to .. in Safari

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

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

Table of Content

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

There are primary varieties of equipment for Safari net development:

1. Web Inspector:

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

2. Safari Technology Preview:

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

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

1. Features of the web monitor:

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

2. Safari Technology Preview Highlights:

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

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

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

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

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

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

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

Safari_development_tools1

Step 1: Open the web monitor

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

Safari_development_tools2

Step 2: Find the Web Inspector Tabs

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

Safari_development_tools3

Step 3: Review the HTML Items

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

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

Safari_development_tools5

Step 5: Check network activity

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

Safari_development_tools6

Step 6: Improve Performance

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

Steps to follow:

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

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

Please Login to comment...

Similar reads.

  • Apple Safari
  • Geeks Premier League 2023
  • Geeks Premier League
  • Web Browsers
  • What are Tiktok AI Avatars?
  • Poe Introduces A Price-per-message Revenue Model For AI Bot Creators
  • Truecaller For Web Now Available For Android Users In India
  • Google Introduces New AI-powered Vids App
  • 30 OOPs Interview Questions and Answers (2024)

Improve your Coding Skills with Practice

 alt=

What kind of Experience do you want to share?

Lead image for How to Use React DevTools in 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:

React demo application in Safari

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 :

React DevTools prompt

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:

Debugging with standalone React DevTools

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:

React users list in Safari browser

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:

Application tree

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:

UsersList component

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:

User component

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:

Pinning a component in React DevTools

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

Selected component in the browser

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

Logging a component in React DevTools

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

Logging a component in the browser

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 .

Lucien Chemaly

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.

The Technical Content Manager's Playbook

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
  • Español – América Latina
  • Português – Brasil
  • Tiếng Việt
  • Chrome for Developers

Fun & Powerful: Intro to Chrome DevTools

Chrome DevTools offers many powerful tools that help you deeply inspect and improve your web applications.

The following video provides an overview of six fundamental tools, including the Inspect button and Device Mode , along with the Elements , Console , Sources , and Network panels. Additionally, you will learn about the Styles tab and ways to customize DevTools.

Watch the video to learn how to:

  • Inspect and edit DOM elements .
  • Visualize and change the dimensions of an element with the Box Model .
  • See what your page looks like on mobile devices .
  • Identify JavaScript errors with the Console panel.
  • Debug JavaScript using breakpoints in the Sources panel.
  • Analyze and filter network activity in the Network panel.
  • Simulate slower connection speeds .
  • Customize DevTools .

For an in-depth overview, see our DevTools overview .

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

Last updated 2024-04-10 UTC.

Get the most of your stay in Moscow

open safari devtools

TOP-11 Moscow Parks to Visit

I have chosen the best 11 Moscow parks to visit and spend a beautiful time for you. Do not miss and choose one that you like the most – cycling, festivals, flowers, panoramic views and many other things are waiting for you!

Gorky Park (The Central Park of Culture and Leisure) – The main one of the Moscow Parks

In my opinion this park could be called the main park of the city. Why? Because of its huge territory, the central location and the amount of people visiting the park daily.  It was founded in 1928 and in 2011 it was totally reconstructed. Now it pleases visitors with modern objects and soft green lawns.

  • Oktybrskaya or Park Kultuty metro station, Krimsky Val, 9

The Gorky park is a the right choice for everyone! The youth will like a free WiFi, bicycles, skateboards and other rentals; the couples will enjoy spending time near the river, watching a sunset; parents will appreciate colorful playgrounds and a room for mother and child. Everyone can find something for themselves: from yoga classes  to watching movies in a cozy summer cinema, from dance classes to volleyball playground. Gorky Park is also the venue for all kinds of exhibitions, festivals, events for children and adults. During the winter there is one of the biggest skating rinks in the park.

Museon Art Park – A Second Gorky they say

“Museon” is located on the opposite side of Krimsky Val street. And right now some people believe that Gorky and Museon together is a one space sharing the same beauty.

  • Oktybrskaya or Park Kultuty metro station, Krimsky Val, 2

The Park of Arts was named this way because there is the largest composition of open-air sculptures in Russia. In its territory there are already more than 1000 unique exhibits: from monuments of the socialist realism era to various kinds of contemporary art. But this is not all the attractions of the park. In recent years, “Museon” has become an important cultural site of the city. The park regularly hold many different concerts, festivals, educational projects in the field of art and design. There is a Central House of the Artist, a comfortable summer cinema and other attractions on territory. Be sure to stroll pedestrian Crimean embankment, which looks like a modern park.

Neskuchny Garden – True Russian Nature is Here

Neskuchny garden is located on the right bank of the Moscow River. Today it is also seen as a part of the Gorky Park. This landscape park is one of the oldest in the city and is protected by the state. Its name was received from the Neskuchnoye Estate of  Prince Trubetskoi which is still located in the park.

  • Leninsky Prospekt metro station, Leninsky Prospect, 30

This park is famous mostly for its location close to the Gorky park. It is a quite place with true nature, lots of trees and squirrels and also ancient architecture. As in every park, there are sports and playgrounds, cafes and even a football field.

Zaryadye Park – 5 Steps Away From The Red Square

The area of this brand new park was opened only in September 2017 and located in the very heart of Moscow – right near the Red Square.

  • Open from 10AM to 10PM
  • Teatralnaya, Okhotnyi ryad, Ploschad Revolutsii

The park has 4 zones, each of them represent different parts of Russian landscapes. Above the river there is a floating bridge from where you get to see one of the best panoramic views on Moscow. Other attractions of the park are 5D cinema where you can take a flight above Moscow, few cafes and restaurants, pretty lakes with fishes and old preserved churches. In addition there is still being built a  philharmonic hall, covered with a huge dome and an Ice cage where the temperature will always stay below zero degrees.

When you are on the Red Square do not miss it!

All-Russia Exhibition Center (VDNKh) – The Soviet Style Moscow Park

Park VDNKh – one of the most famous parks in Moscow. This park is one of the sights of the city as it hasn’t changed much since the Soviet era.

  • VDNKh metro station, Prospect Mira, 119

The symbol of VDNKh is a fountain with 16 women symbolizing the friendship of the nations of the USSR. Around this fountain there are all the pavilions representing 16 republics. Now inside the pavilions you find various shops, cafes and exhibitions. If you go deep inside the park you will find a rocket Vostok and and an aircraft. What is funny the inside of the aircraft there is actually a photo exhibition. Near the northern entrance you there is a famous sculpture “Worker and Kolkhoz Woman”. It is extremely famous among Russians as all the movies by Mosfilm corporation used to start with the picture of this statue. But if you go further inside the park you will reach a very calm area. A lake is there, forest and birds singing. Since the park occupies a large area I suggest you to rent a bicycle.

Sokolniki Park – A Place For A Hunt Or For Leisure?

The park got its name because of the royal falconry, which took place there in the past when there was a dense forest. (Sokol means a falcon.) In 2011 it was significantly transformed: updated lawns, landscaped ponds and picnic areas, restored summer cinema and theater, a large rose garden, sports grounds, bicycle paths and other things.

  • Sokolniki metro station, Sokolnichesky Val, 1, p. 1

From the main entrance along the alley you can walk to the Sokolniki circle, where 8 alleys form 9 sectors, in each of them you will find trees of the same breed.  The park is famous for its rosary, as well as flower decoration. On the territory of the park there are concert halls, a library, amusement zone, dances zone and many many other attractions. In winter the park has a skating rink (a free of charge one) and ski runs. During the warm season you can rent a bicycle.

Tsaritsino Park – A Different World Inside Moscow

Here you can walk for hours, admiring the most beautiful nature and magnificent architecture.

  • Open from 6AM to 12AM
  • Tsaritsyno metro station, Dolsky, 1

The most amazing part of the park is the lake with a light and musical fountain. Every evening the fountain starts the show. Lights and music combined make you feel like you are not in Moscow but in a fairy tale. The park is also well equipped for sports lovers and healthy lifestyle. There are volleyball and basketball courts, a tennis court, sports facilities for acrobatics, bodybuilding equipment.

What I personally like about this park is the atmosphere. This place is actually far from the city center but I love going there anyway. Whenever I go there I feel like I left Moscow with all its hectic lifestyle. It is the place where I relax, enjoy myself or a company of my friends and feel kind of different. By the way totally suggested for a date!

Kolomenskoye Park – Combination Of Reserve and Architecture

The Kolomenskoye park is actually a Museum-Reserve. It is a former residence of Russian tsars and one of the most scenic places in Moscow.

  • May to September – open from 8AM to 12AM, October to April – from 8AM to 9PM
  • Kolomenskoye metro station, Andropov Ave, 39

 Alike with Tsaritsino park Kolomenskoye park has its own special atmosphere with all the architecture, trees, ponds and even a river bank. The park regularly hosts various folk festivals and different fairs. In summer time you can play with kites or rent a bicycle and ride around the huge area of the park.

I love the view that you get on the city from one of the hills near the river. I love the apple trees alleys and the beautiful churches. It is also a bit far from the city center but yet worth going there. One of my best friends even celebrated her wedding there.

Aptekarsky Garden or Botanical garden of the Moscow State University – The Best Botanical Garden in The World

Aptekar in Russian language means a pharmacist so basically it is a pharmacist’s garden. It was founded in 1706 by Peter The Great for growing medicinal plants for the royal family. But later they moved it from under the walls of the Kremlin to the current location.

  • Open from 10AM to 8PM
  • Prospect Mira metro station, Prospekt Mira, 26

In the botanical garden there are no attractions and noisy crowds of tourists. The area of the garden is not as big as any other park in Moscow. And the entrance is not free. But this exactly what makes this park one of the most comfortable in the city. In the Aptekarsky garden they grow thousands of different plants, flowers and trees. Some of the trees are more than 300 years old. They held different festivals there: flowers festivals, sand and ice sculptures expositions.

For me it is one of the most beautiful parks not only in Moscow but in the world. I have never seen so many different flowers and plants anywhere else. And trust me I am a real park lover. And what is more the staff really takes care about every single tree or plant there, some of the trees have names and stories. I love it there and I think the price is really worth what you get.

Victory Park – A Park That Makes Us Remember The War

The park is located on the Poklonnaya Hill and it has one of the world’s largest memorial complexes dedicated to the World War II. The park was opened for the 50th anniversary of the Victory on May 9, 1995. It is also one of the main venues in the city for holding a variety of mass events.

  • Park Pobedy metro station, Brothers Fonchenko, 7

On the main avenue of the park there are with 1418 fountains – exactly as long as the war lasted. Fountains make five water terraces, symbolizing five years of military operations. And in the center of the park there is the Museum of the Great Patriotic War. If you are interested in the history of the war do not miss it. The Poklonnaya Hill is a part of the park and from the hill you get one of the best views on the city of Moscow. And I could say this is the best place for watching the fireworks during the mass celebrations. But be aware it gets too crowded then. As in most of the other big parks you can rent a bicycle or rollers there.

Izmailovsky Park – A Mix of a Big Forest and Attractions

Izmaylovsky Park occupies a huge green territory, making up a large part of the Izmailovo district. The park consists of two parts: Izmaylovsky Park of Culture and Rest and the forest park of Izmailovo. First part is full of attractions and restaurants while the second one is like a real forest with pine trees, birch groves, beautiful clearings and ponds.

  • Izmaylovskaya, Shosse Entuziastov or Partizanskaya metro stations, Izmaylovsky Park

It is easy to spend there a whole day. A large landscaped area and a lot of various entertainments for children and adults will help you not to get bored. An observation wheel, a boat station, children’s playgrounds, a dance floor, sports grounds, a skate park – all this is only a small part of the possible leisure activities. In the park there are bike paths and a rental services.

I don’t go there often to be honest. But the park is very very close whenever to a souvenir market on Partizanskaya metro station. And whenever the weather is nice and I have enough of free time I stroll through the alleys of the park and enjoy the nature. So if you are going to the souvenir market too and you have enough free time then do go to the park too.

5 thoughts on “TOP-11 Moscow Parks to Visit”

Pingback: Places to visit in Moscow – Sheran Bhattacharyya

' src=

Yes, sure 🙂 This is my top list 🙂

Yes, sure. These are my favorites!

' src=

I like this blog very much. Please keep sharing it in future too.

Thanks for sharing.

Thank you! 🙂

Leave a Comment Cancel Reply

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

THE 5 BEST Moscow Safaris

Safaris in moscow.

  • Adrenaline & Extreme Tours
  • Gear Rentals
  • Nature & Wildlife Tours
  • 5.0 of 5 bubbles
  • District Central (TsAO)
  • 3rd Transport Ring (TTK)
  • District North-Eastern (SVAO)
  • District Eastern (VAO)
  • District South-Western (YuZAO)
  • Lomonosovskiy
  • Ostankinskiy
  • Meshchanskiy
  • Krasnoselskiy
  • Maryina Roshcha (Jewish Quarter)
  • Good for Couples
  • Good for Kids
  • Good for Big Groups
  • Adventurous
  • Budget-friendly
  • Good for a Rainy Day
  • Hidden Gems
  • Honeymoon spot
  • Good for Adrenaline Seekers
  • Things to do ranked using Tripadvisor data including reviews, ratings, photos, and popularity.

open safari devtools

1. Rybokhotsoyuz

open safari devtools

2. Easy Russia Tour Guide

alizain1985

3. UTS GROUP

open safari devtools

4. 365AltaiMongolia

open safari devtools

5. #1 Russia -Tanzania | Zanzibar, Serengeti Safari & Kilimanjaro Agency | BURIGI CHATO SAFARIS CO LTD

open safari devtools

6. Aviashop.Ru

open safari devtools

7. Transsib Moscow

open safari devtools

8. BASK TOUR

  • Easy Russia Tour Guide
  • #1 Russia -Tanzania | Zanzibar, Serengeti Safari & Kilimanjaro Agency | BURIGI CHATO SAFARIS CO LTD
  • 365AltaiMongolia
  • Bahasa Indonesia
  • Slovenščina
  • Science & Tech
  • Russian Kitchen

Your 48-hour tour guide of Moscow this winter!

open safari devtools

9 am – Visit the Red Square 

Christmas market on Red Square

Christmas market on Red Square

The first thing that every tourist should do by default is visit the very heart of Moscow – it’s main and most beautiful (which ‘krasnaya’ actually meant in Old Russian) square! 

There are several ways to explore it:

  • Take a selfie with Spasskaya Tower
  • Have a warm drink at the Christmas market (which lasts until mid-January)
  • Visit Lenin’s Mausoleum
  • Shop in the gorgeous adjacent GUM department store
  • Visit St. Basil’s Cathedral (and learn that it’s actually several churches under one roof).           

11 am – It’s Kremlin time! 

Inside the Moscow Kremlin

Inside the Moscow Kremlin

Entering the Kremlin is, actually, a bit of a quest, as it’s a presidential facility with no general access. You need to buy a ticket or, better still, book a guided tour. Inside the Kremlin’s walls, you will find ancient cathedrals, in which Russian tsars used to be crowned and buried, as well as explore the magnificent architecture of the Kremlin that reflects the rich history of the country. And, finally, you could also make a quick visit to the Moscow Kremlin Museums and admire artifacts from various Russian tsarist eras: carriages, thrones, crowns and the most incredible armory and jewelry. 

For more information, visit the official website of the Kremlin . It’s open from 10 am to 5 pm (and it’s closed on Thursdays) in winter.

2 pm – Watch the changing of the Guard

The honor guard at the Tomb of the Unknown Soldier

The honor guard at the Tomb of the Unknown Soldier

A very spectacular (and free) thing to do is watch how the honor guard does their ceremonial change at the Tomb of the Unknown Soldier and the Eternal Flame, situated in Alexander Garden, right next to the Kremlin wall. Every hour, from 8 am to 8 pm, the 1st Company of the Kremlin (Presidential) Regiment performs this rather old and beautiful tradition. But, be warned, it's often overcrowded. 

3 pm – Enjoy a green oasis just in the center

Florarium in Zaryadye

Florarium in Zaryadye

Just a few steps from the Red Square, you will find the fabulous Zaryadye park. Opened in 2017, it is designed by renowned American architect bureau ‘Diller Scofidio + Renfro’. You can walk among the very cozy botanical decorations and explore Russia’s climate zones, as each of them is represented in dedicated areas, complete with flora from those zones.

The floating bridge in Zaryadye Park

The floating bridge in Zaryadye Park

The park also has an underground museum, an “ice cave” and a 3D cinema, where you can take part in a virtual adventure – a flight over Moscow! However, the piece de resistance is a floating boomerang bridge over the Moskva River, one of the best places to take a selfie.

You can also grab a quick lunch or relax with a cup of coffee or tea in the park.

7 pm – Arrange a ballet night

The Bolshoi Theater

The Bolshoi Theater

Of course, the most fancy way to finish your day in Moscow would be to go to the ballet at the Bolshoi Theater (in a perfect world, to see ‘The Nutcracker’!). However, getting tickets to the Bolshoi is not an easy task and should be done well in advance of your visit. 

But, don’t be upset if you don’t manage to get tickets to the Bolshoi. Moscow has dozens of other options to see a ballet (or opera). No less brilliant performances can be seen in the Stanislavsky and Nemirovich-Danchenko Music Theater or in The State Kremlin Palace (by the way, this is another way to get a quick glimpse inside the Kremlin!).

10:30 pm – Have a late dinner in a fancy restaurant

Dr Zhivago restaurant

Dr Zhivago restaurant

There are not so many other cities with such a big choice of restaurants in a range of tastes and styles. In 2021, the authoritative Michelin guide announced their pick of the best of Moscow’s restaurants. And here’s our guide to all the places with Russian cuisine for any budget. But, if you happen to be in the area of the Bolshoi or Nemirovich-Danchenko Theater, then ‘Dr. Zhivago’ would definitely be a nice option (and it’s open around the clock).

DAY 2 

9 am – grab a moscow coffee.

Winter festivities mood in Moscow

Winter festivities mood in Moscow

Moscow is definitely a coffee city! You can find coffee shops on every corner and they all offer a huge range of drinks. Try a ‘raf’ coffee, a sweet, creamy drink that was created in Russia, or dare to pick one of the very unusual offers, like cheese coffee or a Soviet candy style one (check out our coffee guide here ).

10 am – Take a river cruise

Winter boating along the Moskva River

Winter boating along the Moskva River

Another exciting way to explore Moscow is to observe it from the water. Boats cruise along the Moskva River all year round. Most begin their route from the Hotel Ukraine, one of Stalin's ‘Seven Sister’ skyscrapers, and will bring you back to the same spot after passing the medieval Novodevichy Convent, Moscow State University and Luzhniki Stadium, the Cathedral of Christ the Saviour and giant monument to Peter the Great and many other sightseeings. 

It’s always at optimum temperature inside the boat, which also has huge panoramic windows. Select boats also offer a full dining experience, so it is also a nice place to have breakfast or lunch.

If you are not a water person, then discover other, unusual sides of Moscow – pick one of the activities we’ve prepared for you here ! 

1 pm – Visit ‘Russia’ Expo and taste a bunch of Russian regional cuisines

Russia Expo at VDNKh

Russia Expo at VDNKh

Until April 2024, the Soviet-era VDNKh exhibition park is hosting the huge ‘Russia’ expo, with tons of activities and expositions devoted to Russia, its culture, science and nature. Check out our special guide on what to do there!  

An entire ‘House of Russian Cuisine’ has been opened at the expo. You will find 15 food stands with flagship dishes from Kamchatka, Siberia, Karelia and other regions of Russia. Imagine trying a range of cuisines and dishes in one place without even having to travel anywhere, be it Altai pelmeni, Tula kalach or Caucasian pies! A perfect place to grab some lunch.

House of Russian cuisines at VDNKh

House of Russian cuisines at VDNKh

The VDNKh exhibition park is a great place to visit, in general! Its pavilions are the perfect example of Stalinit Empire style architecture and you can almost feel as if you’ve traveled back in time! You will also find several interesting museums in the park – devoted to space exploration, Russian history and even a ‘Special Purpose Garage’, which showcases the various vehicles used by the country’s leaders. 

'Sun of Moscow' wheel

'Sun of Moscow' wheel

And, finally, you can ride Europe's tallest panoramic wheel – ‘Sun of Moscow’ – that will give you panoramic views of the city – from a height of 140 meters!

5 pm – Ice skate with view & mulled wine

Ice skating rink on Red Square (GUM department store on the background)

Ice skating rink on Red Square (GUM department store on the background)

Ice skating is one of the most popular and affordable activities in Moscow. There are several great ice skating rinks in picturesque locations that are open all winter long. One of the biggest rinks in Europe is also at the aforementioned VDNKh or you can visit the one in Gorky Park, another very popular Moscow spot, or the small, but fancy rink – right on Red Square! 

All the parks offer ice skate rental, so the only things you need are warm clothes, a charged phone to record your memories and a good mood!  Moscow also gets dark at 4:30 pm in winter and hundreds of lights are switched on, turning the city into a giant fairy tale! 

A mulled wine with a view

A mulled wine with a view

And, if you are not a sports person, we’ve picked several other unusual activities that you could do in Moscow instead. For example, did you know that there is an entire district of dacha (countryside) houses, just 10 minutes from the center, surrounded by giant new highrises? How about taking a stroll there and feeling the early Soviet atmosphere?

8 pm – Warm up & laugh out loud

After all these outdoor activities, what could be better than a warm cozy bar with a hot drink and nice company? Moscow is a city full of entertainment for all tastes. So, if you know the Russian language or want to practice it, go to a theater or catch a stand-up comedy show. Moscow even has comedy shows in English, where you can hear both Russians speaking fluent English or foreigners (including Brits and Americans) who live in Russia speaking in broken or heavily-accented Russian (Check their show dates on the ‘ Moscow English Comedy ’ Telegram channel)!

11 pm – Finish by partying the night away!

Propaganda club in Moscow

Propaganda club in Moscow

Moscow never sleeps, as you might have heard. Which means there are plenty of bars and nightclubs where you can have a drink (or two or three; be sure to check out how Russians make Black Russian and White Russian cocktails) and chat with incredibly different people. Have fun and don’t miss your flight (or miss it and stay longer in the best city in the world!)!

That's it! See you soon in Moscow

That's it! See you soon in Moscow

Dear readers,

Our website and social media accounts are under threat of being restricted or banned, due to the current circumstances. So, to keep up with our latest content, simply do the following:

  • Subscribe to our Telegram channel
  • Subscribe to our weekly email newsletter
  • Enable push notifications on our website
  • Install a VPN service on your computer and/or phone to have access to our website, even if it is blocked in your country

If using any of Russia Beyond's content, partly or in full, always provide an active hyperlink to the original material.

to our newsletter!

Get the week's best stories straight to your inbox

  • Tula: The best getaway from Moscow! (PHOTOS)
  • 20 most interesting places in Moscow Region (PHOTOS)
  • 10 things you should NEVER do in Moscow

open safari devtools

This website uses cookies. Click here to find out more.

IMAGES

  1. How to use Devtools for Safari Mobile View ?

    open safari devtools

  2. Show Safari Web Developer Tools and how to dock them in Safari

    open safari devtools

  3. How to use Devtools for Safari Mobile View ?

    open safari devtools

  4. Unlock the Power of Safari Developer Tools

    open safari devtools

  5. How to use Safari Devtools for mobile view of website

    open safari devtools

  6. How to use Devtools for Safari Mobile View ?

    open safari devtools

VIDEO

  1. How to Open Safari/Harrier automatic Diggy.😎 #automobile #tata

  2. Open safari 😀 #music #safari_park i

  3. How to change the home page in Safari

  4. Open safari tour

  5. How To Fix Safari Not Opening or Loading Sites On iPhone (2024)

  6. Searching the current html with Chrome DevTools

COMMENTS

  1. 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 > Preferences, click Advanced, then select "Show Develop menu in menu bar.". See also Safari for Developers.

  2. How to Turn on the Develop Menu in Safari on Mac

    How to Enable the Develop Menu in Safari on Mac. 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).

  3. How To Open Developer Tools On Safari

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

  4. How to Open Safari Developer Tools & Enable Mobile View Mode

    How to Enable Safari Developer Tools. If you don't have developer tools enabled in Safari, you will need to do this before the console can be opened by using the following steps: From the main menu go to Safari > Preferences (or use the CMD + , keyboard shortcut.) Go to the Advanced tab. Check "Show Developer menu in menu bar".

  5. Show Safari Web Developer Tools and how to dock them in Safari

    Then from the Safari " Develop " menu select " Show Web Inspector " or use the keyboard shortcut Option+Command+i. When opened the Safari developer tools pops open in a new window, to get it docked to the bottom of the current Safari window click on the middle icon to snap in at the base of the current open Safari window. And voila ...

  6. Debug Websites Using the Safari Developer Tools

    Select the Console tab. Alternatively, you can also open the Safari debug console using the shortcut option + command + C on Mac. Method 2: Debug Websites using BrowserStack Live ... Using the DevTools from the toolbar, you can explore the specific webpage elements and start debugging under real user conditions.

  7. Complete Guide to Safari Developer Tools

    To open the integrated Safari Developer Tools, click the Safari Web Inspector icon. It will launch developer tools with which you can debug your web applications or websites on a real iPhone running a real Safari browser. If you want to debug websites on real devices, here is a quick tutorial on performing real-time browser testing on real ...

  8. Guide to Safari Developer Tools

    To enable Safari Developer Tools, open Safari, click Safari in your menu bar, and then select Preferences. You can also use Command-Comma keyboard shortcut to open Safari's Preferences dialog. Locate and select the Advanced menu. At the bottom of this menu you should see a checkbox that is labeled "Show Develop menu in menu bar".

  9. DevTools in Apple Safari Browser

    Steps to follow: Step 1: Open Safari and go to your web browser. Step 2: Right-click the page and select "Inspect Element" or press Option + Command + I . Step 3: Click the "Toggle device toolbar" icon (smartphone and tablet icon) to enable responsive design mode in Web Inspector.

  10. How to use Devtools for Safari Mobile View?

    To access the Responsive Design Mode, enable the Safari Develop menu. Follow the steps below to enable the Develop menu: Launch Safari browser. Click on Safari -> Settings -> Advanced. Select the checkbox -> Show Develop menu in menu bar. Once the Develop menu is enabled, it'll show up in the menu bar as shown in the image below: Note ...

  11. Open Safari / Google Chrome developer tools programmatically from

    The DevTools web page that opens is served from the remote-debugging-frontend in the first browser instance, which serves from the git repo your local filesystem. Debug this Devtools Web page and edit its source like any other web app. I hope this is what you need.

  12. How to Use React DevTools in 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.

  13. How to Use Developer Tools in Safari on iOS

    Whether it's to pass that big test, qualify for that big promotion or even master that cooking technique; people who rely on dummies, rely on it to learn the critical skills and relevant information necessary for success. Enabling the Debug Console in Safari on iPhone, iPod touch, or iPad allows you to see HTML, CSS, and JavaScript errors ...

  14. Moscow

    Price per person. 641,69. View details. About the tour Reviews 10. 8 days / 7 nights. St. Petersburg Moscow. We offer you a unique opportunity to visit Russia's two largest cities, Moscow and St. Petersburg. This fascinating, week-long tour will take you to the historic Russian capitals that have always played the most important part in the ...

  15. Fun & Powerful: Intro to Chrome DevTools

    Chrome DevTools offers many powerful tools that help you deeply inspect and improve your web applications. The following video provides an overview of six fundamental tools, including the Inspect button and Device Mode, along with the Elements, Console, Sources, and Network panels. Additionally, you will learn about the Styles tab and ways to ...

  16. 11 Moscow Parks To Visit And Spend a Beautiful Time

    The Kolomenskoye park is actually a Museum-Reserve. It is a former residence of Russian tsars and one of the most scenic places in Moscow. Free. May to September - open from 8AM to 12AM, October to April - from 8AM to 9PM. Kolomenskoye metro station, Andropov Ave, 39.

  17. THE 5 BEST Moscow Safaris (Updated 2024)

    Safaris in Moscow. 1. Rybokhotsoyuz. 2. Easy Russia Tour Guide. An excellent and reliable service which made my trip mesmorizing with easy moscow. Especially Anna is a wonderful... 3. UTS GROUP.

  18. Your 48-hour tour guide of Moscow this winter!

    And, finally, you could also make a quick visit to the Moscow Kremlin Museums and admire artifacts from various Russian tsarist eras: carriages, thrones, crowns and the most incredible armory and ...