safari web development

View in English

Watch the latest videos about Safari

Safari for developers

Safari is the best way to experience the internet on iPhone, iPad, and Mac. Thanks to blazing-fast performance and industry-leading energy efficiency, millions of users enjoy exploring the web with Safari. Take advantage of powerful new features, advanced developer tools, and cutting-edge technologies in Safari to deliver best-in-class websites and apps.

Now people can add your website to their Dock on Mac or to their Home Screen in iOS and iPadOS for easy access. On Mac, any website added to the Dock becomes a web app, with an app-like appearance and system integration similar to other apps. Create a web app manifest to communicate your website’s intended behavior for web app-related features in iOS, iPadOS, and macOS.

Watch the latest video

Safari web extensions

Safari web extensions use HTML, CSS, and JavaScript to offer powerful browser customizations — and now you can create them for every device that supports Safari. Learn how to build a Safari web extension that works for all devices, and how to convert an existing extension to Safari through Xcode and the Safari Web Extension Converter.

Learn about Safari web extensions

SharePlay in Safari

Create SharePlay experiences that people can enjoy on the web and in your app. Learn how to use the Group Activities framework in combination with your website to bring SharePlay to Safari, connecting people through shared interactions — even if they haven’t yet downloaded your app from the App Store.

Learn about Group Activities in Safari

Compact tab bar

In the compact tab bar view, the browser interface yields to the content. Safari blends the tab bar into each website by matching its background color. As a web designer or developer, you can choose the color and code it into your HTML. The entire interface is on one line, and elements naturally appear when needed, making your content feel more expansive as each web page or web app extends to all four edges of the window.

Learn about design in Safari

Verification codes

Easily create more secure logins for users in iOS 15, iPadOS 15, and macOS Monterey, or later using the new iCloud Keychain verification codes. Take advantage of verification codes, AutoFill, iCloud Keychain sync, and two-tap setup to simplify the multistep sign-in process.

Passkeys with WebAuthn

With the Passkeys Technology Preview, you can try a new type of credential that’s intended to replace passwords. A passkey is a phishing-resistant WebAuthn credential that’s backed up and synced across devices with iCloud Keychain. Enable the technology preview using Enable Syncing Platform Authenticator in the Develop menu.

Split View in Safari on iPad

People can view two websites at once on their iPad using split view. Responsive Design Mode makes it easy to see how your websites will render in this view — just tap the iPad preview until it turns into a split view.

Apple Pay on the Web

Provide an easy and secure way to make purchases in Safari 10 or later. Apple Pay lets people quickly pay without entering payment, shipping, or contact information on supported websites from their Mac, iPhone, or iPad. Because card numbers aren’t used and each transaction is confirmed with a fingerprint or passcode, Apple Pay is more secure than accepting credit and debit cards.

Web Push in Safari

Send notifications to people who use your website or web app in Safari 16 on macOS 13 — even when Safari isn’t running. Fully interoperable, Web Push’s standards-based implementation relies on the Push API, Notification API, and Service Workers. If you’ve already coded Web Push using industry best practices, it will automatically work on Safari. And you don’t need to be an Apple Developer Program member to implement this feature.

Safari Technology Preview

Download Safari Technology Preview to get a sneak peek at upcoming web technologies in iOS, iPadOS, and macOS, and experiment with them in your websites and extensions.

View in English

Safari & Web

Get started with Apple Pay on the Web

Adding Apple Pay to your website elevates your customer experience. Learn how to present Apple Pay as a payment option, validate your merchant session, and authenticate and process payments. You'll also find out how to configure your environment, set up transactions using the Apple Pay demo site,...

Build and deploy Safari Extensions for iOS

Safari web extensions for iOS use standard web technologies to provide powerful browser customizations. Learn how you can build an extension that works for iPhone and iPad, and discover how you can publish your extension on the App Store.

Introducing Extensible Enterprise SSO

Single Sign-on ensures your enterprise can implement modern authentication methods without sacrificing ease of use. Learn how to use the Authentication Services framework to expose your redirect and credential SSO services in Safari and native apps on macOS Catalina, iPadOS 13, and iOS 13...

Ensuring Beautiful Rich Links

Website links received in Messages can be made vastly more inviting than a simple text URL. By providing small amounts of metadata in your web pages, links to your website can include rich content such as icons, images and even video. Learn how visitors to your website can share links that look...

Using Web Inspector with tvOS Apps

• macOS, tvOS

With Web Inspector, you can debug web content on several Apple platforms, including tvOS. This video introduces you to Web Inspector's powerful debugging capabilities, and takes you through the features designed to accelerate debugging of TVML content in your tvOS app.

Web Inspector Walkthrough

• iOS, macOS, tvOS

Web Inspector is packed with features designed to make inspection, debugging and delivery of your web content a breeze. Get an overview of the latest features including major layouts, tabs, buttons, and other capabilities that make Web Inspector a powerful web development tool.

Meet Safari for spatial computing

Discover the web for visionOS and learn how people can experience your web content in a whole new way. Explore the unique input model powering this platform and learn how you can optimize your website for spatial computing. We'll also share how emerging standards are helping shape 3D experiences...

What’s new in web apps

Discover web apps for Mac — a powerful way to experience your website from the Dock. Learn how you can customize your web app to give people the best experience when they add your site. We'll also share how to take advantage of push notifications and badging for web apps for Mac and Home Screen...

Rediscover Safari developer features

Get ready to explore Safari's rich set of tools for web developers and designers. Learn how you can inspect web content, find out about Responsive Design Mode and WebDriver, and get started with simulators and devices. We'll also show you how to pair with Vision Pro, make content inspectable in...

What’s new in CSS

Explore the latest advancements in CSS. Learn techniques and best practices for working with wide-gamut color, creating gorgeous typography, and writing simple and robust code. We'll also peer into the future and preview upcoming layout and typography features.

Explore media formats for the web

Learn about the latest image formats and video technologies supported in Safari 17. Discover how you can use JPEG XL, AVIF, and HEIC in your websites and experiences and learn how they differ from previous formats. We'll also show you how the Managed Media Source API draws less power than Media...

What’s new in Web Inspector

Web Inspector provides a powerful set of tools to debug and inspect web pages, web extensions, and WKWebViews on macOS, iOS and iPadOS. We'll share the latest updates, including improved typography inspection, editing tools for variable fonts, controls to emulate people's preferences, element...

What’s new in Safari extensions

Learn about the latest improvements to Safari extensions. We'll take you through new APIs, explore per-site permissions for Safari app extensions, and share how you can make sure your extensions work great in both Private Browsing and Profiles.

Meet Apple Maps Server APIs

Simplify your app's mapping architecture by implementing the Apple Maps stack across MapKit, MapKit JS, and Apple Maps Server APIs. Learn how these APIs can reduce network calls and increase power efficiency, which can help improve the overall performance of your app. We'll show you how to use...

Meet Web Push for Safari

Bring better notifications to your websites and web apps in Safari on macOS with Web Push. We'll show you how you can remotely send notifications to people through the web standards-based combination of Push API, Notifications API, and Service Workers.

What's new in Safari and WebKit

Explore the latest features in Safari and WebKit and learn how you can make better and more powerful websites. We'll take you on a tour through the latest updates to HTML, CSS enhancements, Web Inspector tooling, Web APIs, and more.

Meet WeatherKit

• iOS, macOS, tvOS, watchOS

WeatherKit offers valuable weather data for your apps and services to help people stay up to date on the latest conditions. Learn how to use Swift and REST APIs to access information about the current weather, 10-day hourly forecasts for temperature, expected precipitation, wind reports, the UV...

Meet passkeys

It's time for a security upgrade: Learn how to add support for passkeys to create a quick and easy sign in experience for people, all while offering a radical increase to account security. Passkeys are simple and strong credentials built to eliminate phishing attacks. We'll share how passkeys are...

Meet CKTool JS

Discover how you can manage and automate your iCloud containers using CKTool JS. We'll show you how to configure CKTool JS to manage your containers' schemas, modify records with ease, and manipulate data on the fly. We'll also explore how you can integrate CKTool JS into your automation and...

Replace CAPTCHAs with Private Access Tokens

Don't be captured by CAPTCHAs! Private Access Tokens are a powerful alternative that help you identify HTTP requests from legitimate devices and people without compromising their identity or personal information. We'll show you how your app and server can take advantage of this tool to add...

What’s new in Safari Web Extensions

Learn how you can use the latest improvements to Safari Web Extensions to create even better experiences for people browsing the web. We'll show you how to upgrade to manifest version 3, adopt the latest APIs for Web Extensions, and sync extensions across devices.

What's new in web accessibility

Discover techniques for building rich, accessible web apps with custom controls, SSML, and the dialog element. We'll discuss different assistive technologies and help you learn how to use them when testing the accessibility of your web apps.

Create Safari Web Inspector Extensions

Learn how to add your own tools directly into Web Inspector using the latest Web Extensions APIs. We'll show you how to create your own tab in Web Inspector, evaluate JavaScript in the inspected page, and use the result to help you troubleshoot and identify potential problems.

Enhance your Sign in with Apple experience

Learn how you can provide safe and fast authentication in your app using Sign in with Apple. We'll show you how you can upgrade password-based accounts into secure, single-tap login credentials, and explore how you can seamlessly handle changes to user sessions in your app. We'll also help you...

What's new in WKWebView

Explore the latest updates to WKWebView, our framework for incorporating web content into your app's interface. We'll show you how to use the JavaScript fullscreen API, explore CSS viewport units, and learn more about find interactions. We'll also take you through refinements to content blocking...

Explore WKWebView additions

Explore the latest updates to WKWebView. We'll show you how to use APIs to manipulate web content without JavaScript, explore delegates that can help with WebRTC and Downloads, and share how you can easily create a richer web experience within your app.

Meet Safari Web Extensions on iOS

Safari Web Extensions use HTML, CSS, and JavaScript to offer people powerful browser customizations — and you can now create them for every device that supports Safari. Learn how to build a Safari Web Extension that works for all devices, and discover how you can convert an existing extension to...

Adopt Quick Note

Learn how you can link your app to Quick Note and help people quickly connect your content to their notes — and their notes to your content. Discover how Quick Note recognizes and links to app content through NSUserActivity, and find out how you can adopt this API in your app. We'll take you...

Explore Safari Web Extension improvements

Learn how you can extend Safari's functionality with Safari Web Extensions. We'll introduce you to the latest WebExtension APIs, explore non-persistent background page support — a particularly relevant topic if you're developing for iOS — and discover how you can use the Declarative Net Request...

Move beyond passwords

Despite their prevalence, passwords inherently come with challenges that make them poorly suited to securing someone's online accounts. Learn more about the challenges passwords pose to modern security and how to move beyond them. Explore the next frontier in account security with...

Secure login with iCloud Keychain verification codes

Learn how you can support on-device verification codes in your app or website for a more secure sign-in experience. We'll explore the latest updates to the iCloud Keychain password manager and discover how verification codes, AutoFill, iCloud Keychain sync, and two-tap setup simplify the...

Meet privacy-preserving ad attribution

Discover how you can measure your ad campaigns in apps and on the web without compromising privacy. We'll introduce you to Private Click Measurement and explore SKAdNetwork, which provides you with a more secure, private, and useful way to measure your app installs.

Develop advanced web content

Develop in JavaScript, WebGL, or WebAssembly? Learn how the latest updates to Safari and WebKit — including language changes to class syntax — can help simplify your development process, enhance performance, and improve security. We'll explore several web APIs that can help provide better...

Build Mail app extensions

Meet MailKit: the best way to build amazing experiences on top of Mail. MailKit enables apps to easily and securely interact with the Mail app for macOS. We'll deep dive into the MailKit API, and show you how to create extensions for composing messages, message actions, secure email, and content...

Discover Web Inspector improvements

Web Inspector provides the tools for you to understand and debug your web pages on macOS, iOS, and iPadOS. We'll take you through the latest features and improvements to Web Inspector, including a new overlay for inspecting CSS Grid containers on your pages, even more configurable breakpoints to...

Coordinate media playback in Safari with Group Activities

Create SharePlay experiences that people can enjoy on the web and in your companion app. Learn how you can use the Group Activities framework in combination with a companion website to bring SharePlay to Safari, letting people connect with each other for enjoyable group interactions — even if...

Design for Safari 15

Meet Safari 15: redesigned and ready to help people explore the web. Discover how you can approach designing websites and apps for Safari, and learn how to incorporate the tab bar in your designs. We'll also take you through features like Live Text and accessibility best practices, explore the...

Accelerate networking with HTTP/3 and QUIC

The web is changing, and the next major version of HTTP is here. Learn how HTTP/3 reduces latency and improves reliability for your app and discover how its underlying transport, QUIC, unlocks new innovations in your own custom protocols using new transport functionality and multi-streaming...

Configure and link your App Clips

App Clips are small parts of an app that offer a streamlined, direct experience and help people get what they need at the right time. Learn how you can invoke an App Clip through real-world experiences like App Clip Codes, NFC, and QR codes, or have them appear digitally through apps like Maps or...

One-tap account security upgrades

When you adopt the Account Authentication Modification Extension, you can provide people with fast, easy account security upgrades to use Sign in with Apple and strong passwords in the iCloud Keychain Password Manager. We'll show you how to add these upgrade flows to your app with the Account...

Meet Safari Web Extensions

When you create a Safari Web Extension, you can help people get common online tasks done more quickly and efficiently. We'll show you how to build a new Safari Web Extension and host it on the App Store, as well as how to use the safari-web-extension-converter tool to migrate existing extensions...

Broaden your reach with Siri Event Suggestions

• iOS, macOS, watchOS

Whether you're hosting event information in your app, on the web, or in an email, Siri Event Suggestions can help people keep track of their commitments — without compromising their privacy. We'll show you how to set up your reservations so that they automatically show up in the Calendar app and...

What's new for web developers

Explore the latest features and improvements for Safari and WebKit. We'll walk you through updated web APIs, CSS and media features, JavaScript syntax, and more to help you build great experiences for people when they use your website, home screen web apps, or embedded WebKit views.

Get the most out of Sign in with Apple

Sign in with Apple makes it easy for people to sign in to your apps and websites with the Apple ID they already have. Fully integrate Sign in with Apple into your app using secure requests, and by handling state changes and server notifications. We'll also introduce new APIs that allow you to let...

Meet Face ID and Touch ID for the web

Face ID and Touch ID provide a frictionless experience when logging in — and now you can use them on your websites in Safari with the Web Authentication API. Discover how to add this convenient and secure login alternative to your website.

Discover WKWebView enhancements

WKWebView is the best way to present rich, interactive web content right within your app. Explore new APIs that help you convert apps using WebViews or UIWebViews while adding entirely new capabilities. Learn about better ways to handle JavaScript, fine tune the rendering process, export web...

Shop online with AR Quick Look

AR Quick Look adds a new dimension to online shopping: We'll show you how to easily showcase your products in augmented reality for a "try before you buy" experience. Discover how to display a product banner in AR Quick Look, integrate Apple Pay, or display custom actions like "add to cart". To...

What's new in Web Inspector

The Web Inspector makes introspection and debugging simpler than ever. Discover how you can use debugger stepping, editing cookies, and overriding network loaded resources to provide you with powerful development capabilities and help you create faster, more efficient websites.

Meet Watch Face Sharing

Show off your watchOS app's complications and create a watch face worth sharing. Learn how to share watch faces inside your watchOS and iOS apps or host them on the web for anyone to find and download. We'll also explore best practices for using watch face preview images, and show you how to...

What's new in Universal Links

Universal Links help people access your content, whether or not they have your app installed. Get the details on the latest updates for the Universal Links API, including support for Apple Watch and SwiftUI. Learn how you can reduce the size and complexity of your app-site-association file with...

What's New in Universal Links

Universal Links allow your users to intelligently follow links to content inside your app or to your website. Learn how the latest enhancements in Universal Links give your users the most integrated mobile and desktop experience, even when your app isn't installed on their device.

Embedding and Sharing Visually Rich Links

The new Link Presentation framework enables app developers to easily present URLs in a rich, beautiful, and consistent way. Learn how to use Link Presentation to retrieve metadata from a URL, present the rich link content inside your app, and provide link metadata to the new share sheet...

Introducing Desktop-class Browsing on iPad

iOS 13 brings desktop-class browsing to iPad. With blazing-fast performance, industry-leading security, and modern desktop features, Safari on iPad supports the latest web standards designed and automatically adapts desktop sites and web apps to touch in order to deliver a rich browsing...

Understanding CPU Usage with Web Inspector

As a developer of web content, you play an important role in fulfilling customer expectations for a high performance web experience while minimizing power use across all their devices. Discover new insights on how you can improve the power efficiency of your webpages in Safari, or embedded web...

Supporting Dark Mode in Your Web Content

With system-wide Dark Mode support in iOS and macOS, you'll want to make sure your web content is appropriately styled to reflect your users' preference. Learn techniques to ensure your content looks its best when presented in Safari, embedded in other apps such as Mail, or when used in your...

What's New in Safari Extensions

Safari Extensions surface your app's unique capabilities within Safari. Discover how the latest features such as content blocking notifications and user interface management and control innovations for pages, tabs, and popovers make your Safari App Extensions and Content Blockers even more...

Auditing Web Content with Web Inspector

Discover a new way to ensure your web content meets team coding standards and that you can deliver better code even without reliance on automated test systems. Find out how to use the Audit tool in Web Inspector to quickly and easily audit your web content during development so important...

What's New in Authentication

Secure sign-in and authentication is a key feature of a secure account-based app design. Learn how you can improve your app's login experiences through an overview of the available authentications services and details on specific technologies such as Sign In with Apple ID, Password AutoFill for...

What's New in Safari

The latest version of Safari on macOS and iOS is packed with new capabilities that both web developers and their customers will love. Discover how to take advantage of new features including powerful new Safari Extensions APIs for window, tab, and popover management, content blocking...

What's New for Web Developers

WebKit provides a rich set of classes designed to load, display, and manage web content in your app. Discover how to integrate your web content into powerful platform features including Dark Mode, new presentation features in Share Sheet, JavaScript payment APIs for Apple Pay, and more.

Adding Indoor Maps to your App and Website

The Indoor Maps Program enables organizations with large public or private spaces to deliver user experiences that provide precise indoor location information and present stunning indoor maps. Discover the overall process in the indoor map enablement workflow then take deep dive into the...

Introducing Safari View Controller

The new SFSafariViewController class enables you to deliver interactive web content in your app just like Safari, including the key Safari UI elements already familiar to your users. See how to easily bring Safari features like Reader and AutoFill into your app, and provide a great web viewing...

Adopting Handoff on iOS and OS X

Handoff allows people to seamlessly move activities between devices and pick up right where they left off. Learn how to save, transfer, and restore user activities in apps of all architectures. See how easy it is to add Handoff support to your iOS and OS X apps to make your user experience even...

No video found.

Safari User Guide

• Change your home page
• Import bookmarks, history and passwords
• Make Safari your default web browser
• Go to websites
• Find what you’re looking for
• Bookmark web pages that you want to revisit
• See your favourite websites
• Use tabs for web pages
• 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 web page
• Download items from the web
• Share or post web pages
• Add passes to Wallet
• Save part or all of a web page
• Print or create a PDF of a web page
• Customise a start page
• Customise the Safari window
• Customise settings per website
• Zoom in on web pages
• Get extensions
• Manage cookies and website data
• Block pop-ups
• Clear your browsing history
• Browse privately
• Autofill username and password info
• Prevent cross-site tracking
• View a Privacy Report
• Change Safari preferences
• Keyboard and other shortcuts
• Troubleshooting

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

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

The Safari developer mode consists of a suite of tools meant to help web developers design, troubleshoot, and speed up their websites and Web apps. These functions contribute towards refining web development by incorporating measures that can be used to examine, revise, or evaluate web content.

The bulk of Safari Developer Mode is composed of Safari Web Inspector. This toolset functions as an entrance to numerous capabilities including accessing and modifying the heart of web page attributes such as the HTML structure for websites, CSS stylesheets, javascript functionalities, webpage performance, and debugging possibilities.

Table of Content

Benefits of Safari Developer Mode

• How to open safari developer mode
• Various options available in Developer mode

Example Showing Usage

The usage of Safari Developer Mode offers an array of benefits to developers and web development teams:

• Efficient Debugging: You can pinpoint, fix, and understand issues from the heart of a page’s components.
• Performance Optimization: Optimization of loading times by analyzing and restructuring network requests.
• Real-time Testing and Modification: Enabled real-time changes and testing that support faster development steps.
• Device Emulation: Help in producing responsive designs by simulating and imagining how the site looks on different devices.
• Responsive Design Mode: This is an app that mimics what a page looks like on different screen sizes of mobile devices across multiple orientations. It helps in creating responsive design and checking a website’s performance on various gadgets.

How to open safari developer mode:

Activating Safari Developer Mode requires a few simple steps:

openning safari settings

open advanced

Develop menu

• Open the Web Inspector: Go to Develop, click on “ Show Web Inspector. ”

Various options available in Developer mode:

Here are some of the key tools available in the developer mode of Safari browser:

The Inspector tool allows developers to examine and modify the Document Object Model (DOM) of a webpage. This helps in understanding the structure of the HTML and CSS, as well as making real-time changes to see their effects.

Inpecting Web page

The Console provides a JavaScript console for developers to log information, execute JavaScript code, and catch errors. It is a valuable tool for debugging scripts and testing code snippets.

Console mode

This panel is an extension of the Inspector tool, providing a detailed view of the HTML and CSS elements on the page. Developers can modify styles, attributes, and content directly within this panel.

Elements tab

The Sources panel allows developers to debug JavaScript code. It includes features like breakpoints, stepping through code, and watching variables, helping developers identify and fix issues in their scripts.

Sources tab

The Network panel provides insights into the network activity of a webpage, showing details of all resources loaded, their sizes, and loading times. This is crucial for optimizing page performance.

Network tab

The Timeline tool records and visualizes various events on a webpage, such as script execution, rendering, and painting. This helps developers identify performance bottlenecks and optimize their code.

Timelines tab

The Storage panel allows developers to inspect and modify data stored by the website, including cookies, local storage, and session storage. This is useful for debugging and testing how a website handles data storage.

Storage tab

Now, let us look at a particular scenario where we will fix a problem with a web page using Safari Developer Mode. Imagine a case where the layout of a website gets altered because it has a problem relating to CSS style. The web inspector allows a person to pick out the bad part, inspect and fix the CSS properties in real time. Here’s a image showcasing this process:

Web developers rely on Safari Developer Mode; it is a great tool with multiple features and functions vital for effective web development. For web developers, the Safari Developer Mode equipped with the Web Inspector forms an amazing partner that possesses a toolbox for creating, debugging, and optimizing websites. It goes through HTML, CSS, JavaScript, network performance, as well as responsive design. The suite facilitates convenient debugging, live testing, and diverse instrumentation. This touches on project development starting right at its conception, incorporating quality and responsiveness aspects in design. In brief, it is a point of reference for making beautiful and fast websites even at this digital world.

Please Login to comment...

Similar reads.

• Apple Safari
• Geeks Premier League 2023
• Geeks Premier League
• Web Browsers

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

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

Safari Dev Tools: The Complete 2023 Guide

Introduction to safari developer tools.

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

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

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

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

A Brief History of Safari

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

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

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

Why Learn Safari Developer Tools?

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

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

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

Core Safari Developer Tools

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

The Web Inspector

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

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

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

The Debugger

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

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

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

The Resources Panel

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

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

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

Storage Inspector

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

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

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

The Audits Panel

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

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

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

Advanced Safari Developer Tools

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

Device Mode

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

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

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

Advanced Debugging

Safari provides next-level JavaScript debugging capabilities:

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

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

Network Throttling

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

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

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

Experimental Features

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

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

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

Debugging JavaScript Issues

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

Breakpoint Usage

Effective breakpoint usage is key for isolating issues:

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

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

Scope Inspection

Understanding scope is vital for tracking down variable issues:

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

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

Async Debugging

Safari provides multiple approaches for debugging asynchronous code:

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

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

Error Handling

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

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

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

Optimizing Page Speed

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

Image Optimization

Safari provides multiple ways to optimize images:

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

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

Script Loading

Optimizing script loading is key for performance:

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

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

Caching Assets

Effective caching can boost repeat visit performance:

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

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

Layout Thrashing

Diagnosing layout thrashing is key for smooth UX:

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

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

Wrap Up and Key Takeaways

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

Key highlights include:

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

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

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

Related posts

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

DEV Community

Posted on May 22, 2020

What Do Front-End Devs Think About Safari?

I'm mostly a back-end guy, and have by and large worked with Firefox and Chrome being the browsers of choice, and have only had two issues with Safari (see below). As of today, I may have a third, but I may just have a configuration issue. So, please, what do you think about Safari? Is it the new IE 6? Is it considered decent? What do you think?

Look at this URI: http:/~foo/ It's wrong . You stick it in the browser and it doesn't work, but put it in a page and it will just assume the current server. It's just one step away from /~foo/ , right? At least that's the logic my coworker had, but it broke the page for some users. When I had this issue in 2012, it worked in Firefox and Chrome and Opera and IE, but, I figured out by the logs, not Safari. The issue is that every other browser supported it — I don't know if they still do — and Safari didn't.

HTML5 added an Audio API. To learn it, I created a page where, when you go there, you got an old-school pre-VOIP dial tone, which is actually two tones. But the Secret Masters of HTML decided that pages making noise without us saying "you can make noise" is a bad thing , and so I rewrote it so that, and I asked my wife to check on the iPhone and it wouldn't play. I never fully figured out the issue between iOS Safari and my HTML5 stuff, but I installed a WebKit-based browser on my Linux box to try to work it out, and I don't believe I ever fully did.

So, that's my bits. What do you think about Safari? Do you have any Safari stories?

Top comments (19)

Templates let you quickly answer FAQs or store snippets for re-use.

• Email [email protected]
• Location NY
• Education Mount Allison University
• Pronouns He/him
• Work Co-founder at Forem
• Joined Dec 27, 2015

In my opinion Safari was almost great, and then Apple just stopped trying. I'm sure the folks working on Safari are putting in a lot of work with good intentions, but their efforts seem starved.

Safari is a pleasant browser which is clean, light, performant software. I think it wins on less bloat vs Chrome, but it seems really late to deliver on APIs everybody else is in agreement on and it ships inconsistent implementations of standards with no obvious public statement about the bug.

(Apple also breaks stuff in WKWebview without notice 😭)

I like Safari as an end-user if I can get out of the mindset of knowing how sloppy it is in that ecosystem due to the focus on performance and such, but I have mostly worse things to say.

This incredibly frustrating afternoon still lingers in my mind 🤪:

Safari's implementation of srcset is buggy, rendering the whole feature basically useless

Ben halpern ・ oct 16 '17 ・ 2 min read.

• Location France
• Work Lead dev at Surfing Dirt
• Joined May 16, 2020

Apple manages Safari in a very conservative way. They add features not because it benefits the ecosystem, but because it benefits them. Remember, Apple makes 30% off all iOS app sales, so the Web is an afterthought for them, almost a threat.

It's not IE6 because they actually do work on it, they're just not playing the same game as say Mozilla or even Google/Microsoft.

As a result, from a developer's perspective it is super frustrating to see how they add features here and there, but skip others, and as a result they hold us all back.

Edit: I feel bad for Safari/WebKit developers because I'm sure they want to do the right thing as much as we'd like, but it's another one of those Apple internal political game things.

• Joined May 23, 2020

Safari is the odd browser and the new IE. I really hate developing something on Chrome and having to redo the whole thing on Safari because they don't support fully some API. Display grid & flex are still buggy especially with some Html 5tags such as the details/summary tag. All in all I prefer if Safari is reworked on Chromium or rewrite their engine to match with Google and Mozilla's.

• Location Spain
• Education Higher Level Education Certificate on Web Application Development
• Work Tech Lead/Lead Dev
• Joined Apr 19, 2019

Well the fact is Safari uses a modified WebKit while Chromium is another fork of WebKit. You can pick a good base for something but Safari is what happens when you build something bad over it.

• Location Portland, OR
• Education Syracuse University / Rensselaer
• Work Principal Software Development Engineer at Swimlane
• Joined Apr 24, 2018

I just filed a bug with Webkit and the team was very receptive, easy to work with. I found a bug in Webkit's implementation of the Web Animations API, which happens to be spec other browsers have partially supported . Go figure.

I’ve been frustrated at times with Webkit’s implementation of spec, but every browser vendor has their awkward moments. It feels like Safari has fallen behind, but I have hope for Webkit.

Safari is far better than IE. In enterprise we're probably going to be supporting IE11 at some capacity until 2025. I’d rather work with Safari any day of the week then start debugging issues in a VM running IE11.

Sometimes I feel like I am living in an alternative universe where Google and Microsoft have teamed up and left Apple behind. Oh wait, this is just 2020. Hard to believe years ago Apple and Google's browsers were running on the same engine.

The Dev Tools in Safari look rather nice. I appreciate the Dev Tools when inspecting web apps via the iOS Simulator or connected iOS device, although the initial experience feels clunky when devices don't immediately show up in the browser's Develop menu. After that point everything is fine.

I use Safari as my primary web browser all of the time. I know. Gasp! Using Safari is a pleasant experience. Safari is integrated with MacOS / iOS and typically is more performant than Chrome. The UI is minimal and functional. Websites don't just fall apart when I visit them.

• Location Zürich
• Joined Jan 24, 2019

I used for years to use Safari as default browser for my personal use. For development I rather liked the Chrome debugger. Even though this behavior allowed me to easily test on both browser.

Recently, as I was debugging a website/pwa on my iPhone, I paired it with the USB cable to my laptop.

Because I wasn't sure if the last version was fetched or not, I decided to clean the iPhone cache (from the phone settings).

As a result, moreover than my phone's cache, my all Safari browsing history on my laptop was cleared too 🤔.

I was about to restore backup or continue with it but I actually saw there a chance to switch browser and go back to Firefox 😜.

After now a couple of weeks of Firefox usage, I can say that I'm really please with it 🚀.

I'm used to work with Chrome and then test it (and fix it) for FF, Edge and Safari. We don't support IE anymore and now, Safari is the new IE. I can understand why Chrome renders something on it's way as there's a logic behind, but Safari... Man there's a lot of unconscious decisions from Apple team on it and tones of incompatibilities with things that must work "as is" without prefixing. Why supporting some values for the property justify-content but not giving support to another? I think it's just for avoid people building great efficient webview Apps, where they have no control on payments, I can't see another reason.

• Joined May 24, 2020

Lately I'm finding issues with Safari which don't occur on any other browser I need to support, sometimes even including ie10 & 11. Case in point was a recent need to use background-attachment: fixed; in a project only to discover that even now Safari doesn't support this ancient property!!

I despise iOS Safari too, it is so quirky it's beyond logic sometimes. The only saving grace is the user base updates readily leaving VH unit bugs and touch delays in the past pretty quickly. CSS animation triggered by Javascript can be anything but smooth though, where it just works great on everything else. I also still find myself needing to force hardware acceleration to prevent large images from hiding when you scroll fast on a page in iOS.

It's widely documented the quirks and issues of IE and old Edge but Safari is a turd silently lurking in the shadows behind the glossy veneer of Apple.

I have a css construct with flex-boxes that crashes the safari tab. I'm not exactly sure what it is, since I can't test safari. I'd have to buy an apple device or pay some testing environment service.

And for a private project, I'm not going to do that.

So yeah. To me, safari is just that thing that never works and I don't want to fix it. But if you do a commercial project, you are forced to support it. In that sense, it's the modern day ie.

• Location Hamburg, Germany
• Work Software Engineer
• Joined Mar 22, 2019

Did you check out BrowserStack ? Their free tier lets you do manual testing on a plethora of machines, even locally.

We call it SafarIE as safari is the new internet explorer. It's the browser most likely to not work due to missing features or obscure bugs

• Location Bristol, UK
• Work Chief Technology Officer
• Joined May 18, 2020

Safari iOS is frequently crippled by Apple wanting the mobile web to be differentiated from mobile apps on which they profit. There is of course an argument for mobile apps, but Apple would rather stack the deck at the expense of their users.

And here I am dealing with every other browser working with brotli compression on server sent event streams - even IE just doesn't accept it and carries on working. Safari, nah...

I agree, web kit browser, feels light to use. But it has truly frustrating faults.

• Location Camrose, AB
• Work Web Applications Specialist at University of Alberta
• Joined Apr 7, 2020

Safari is the new Explorer. It's certainly better than Explorer, but if I have a problem with a page not rendering/behaving properly, 9/10 it's Safari.

• Joined Mar 16, 2020

I hate hate hate hate and I can't stress this enough, hate all apple products. I hate their behavior, I hate the design, I hate the UI, I hate how BUGGY BUGGY BUGGY everything on apple is, I hate how perfect CSS code that runs every where is just NOT WORKING on safari, and don't tell me you need to adapt the code to safari, no, ITS BUGGY! I have no idea why people even go near their products, they're stupid, clumsy, uncomfortable, and all developers should put a BAN on apple devices, just stop developing for apple, no site should support safari, no application should support iOS, just BAN THEM!

• Location Poland
• Education Academy od Fine Arts Kraków
• Work Web Developer at Corexpand
• Joined Nov 14, 2020

Safari is next IE. There is always something that is buggy in a strange way. The days of "Safari testing" are the bad days. Today - an animation that works perfectly fine in all other browsers is 'jittery' in Safari. Safari costs tech companies a lot of money for extra testing and creating "safari workarounds".

• Location Earth, Milky Way
• Work Senior Performance Engineer at platformOS
• Joined Dec 25, 2017

It sucks. Especially iOS safari. Bring back ie6-ie8 memories after they were dead everywhere apart from those 3% of users that your employer forces you to support.

• Location London
• Education BSc Applied Computing
• Work Frontend Web Developer at Freelance
• Joined Nov 20, 2019

Not a fan. Been working on a AR app recently and doing basic shit like getting sound to play using webAudioAPI has been a pain in the arse and it is only because of Safari.

At first sound wouldn't even play because it needs to detect a user tap first (expected and Chrome has a similar requirement tbf) - Funnily enough my first implementation worked in Chrome but didn't in Safari so had to explicitly call the audio method when the tap event fired. Then there is the delays , my current headache right now. On Chrome or FF audio just plays when the sound manger is called - but on Safari - nope there is a 1 / 2 second delay - meaning there is a sync problem with the animation.

But lots of people use it so there you go. Made a simple job a lot more complicated - works perfectly on FF / Chrome etc but Safari was a pain and the main hurdle for cross browser issues. But yeah tbh it my feeling is that it is sub-par and increasingly outdated.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Simplifying Nested Routes in React Router

just-vicky - May 24

Path To A Clean(er) React Architecture - Domain Entities & DTOs

Johannes Kettmann - May 24

Attending the Vercel Ship 2024 NYC Virtual Event: A Glimpse into the Future of Web Development

From 0 to 1 - May 23

How to use Promise chaining in Javascript.

Makoto Tsuga - May 23

We're a place where coders share, stay up-to-date and grow their careers.

How To Open Developer Tools In Safari

• Software & Applications
• Browsers & Extensions

Introduction

When it comes to web browsing, Safari stands out as a popular choice for Mac and iOS users. Whether you're a web developer, a tech enthusiast, or simply someone curious about the inner workings of the websites you visit, Safari's Developer Tools can provide valuable insights and functionalities. These tools empower users to inspect, debug, and optimize web content, making them indispensable for anyone involved in web development or simply interested in understanding the technical aspects of the internet.

In this article, we'll delve into the process of opening Developer Tools in Safari on both Mac and iOS devices. By the end, you'll have a comprehensive understanding of how to access these powerful tools, enabling you to explore the underlying structure of web pages, analyze network activity, and experiment with various web development features.

Let's embark on this journey to uncover the hidden capabilities of Safari's Developer Tools, empowering you to gain a deeper understanding of the web and its intricate design. Whether you're a seasoned developer or a curious individual eager to peek behind the digital curtain, the following sections will equip you with the knowledge to harness the full potential of Safari's Developer Tools.

Opening Developer Tools in Safari on Mac

Opening Developer Tools in Safari on a Mac is a straightforward process that provides access to a wealth of powerful features for web development and debugging. Whether you're a seasoned developer or a curious individual eager to explore the inner workings of websites, Safari's Developer Tools offer a comprehensive suite of functionalities to aid in understanding and optimizing web content.

To initiate the process of opening Developer Tools in Safari on a Mac, you can follow these simple steps:

Using the Menu Bar:

• Launch Safari on your Mac and navigate to the menu bar located at the top of the screen.
• Click on "Safari" in the menu bar to reveal a dropdown menu.
• From the dropdown menu, select "Preferences" to access Safari's settings.

Accessing the Advanced Settings:

• Within the Preferences window, click on the "Advanced" tab located at the far right.
• Check the box next to "Show Develop menu in menu bar" to enable the Develop menu within Safari.

Opening Developer Tools:

• Once the Develop menu is enabled, navigate back to the menu bar at the top of the screen.
• Click on "Develop" to reveal a dropdown menu containing various web development tools and options.
• From the dropdown menu, select "Show Web Inspector" to open the Developer Tools panel.

Upon completing these steps, the Developer Tools panel will appear, providing access to a wide array of functionalities such as inspecting elements, analyzing network activity, debugging JavaScript, and much more. This powerful suite of tools empowers users to delve into the underlying structure of web pages, identify and rectify issues, and optimize the performance of web content.

By familiarizing yourself with the process of opening Developer Tools in Safari on a Mac, you gain the ability to harness the full potential of these tools, enabling you to explore, analyze, and enhance the web browsing experience. Whether you're a web developer seeking to fine-tune a website's performance or simply intrigued by the technical aspects of the internet, Safari's Developer Tools on Mac provide a gateway to a deeper understanding of web development and design.

Opening Developer Tools in Safari on iPhone or iPad

Accessing Developer Tools in Safari on an iPhone or iPad allows users to gain valuable insights into the technical aspects of web content and perform various web development tasks directly from their mobile devices. Whether you're a web developer on the go or simply curious about the inner workings of websites, Safari's Developer Tools provide a convenient way to inspect, debug, and optimize web content on iOS devices.

To initiate the process of opening Developer Tools in Safari on an iPhone or iPad, follow these simple steps:

Launching Safari: Begin by unlocking your iPhone or iPad and locating the Safari icon on the home screen. Tap the Safari icon to open the Safari browser .

Enabling Developer Tools: With Safari open, navigate to the website or web page you wish to inspect and debug. Once on the desired web page, tap the address bar at the top of the screen to reveal the URL and other options.

Accessing Developer Tools: In the address bar, enter "inspect://" followed by the URL of the web page you are currently viewing. For example, if you are on the website "example.com," you would enter "inspect://example.com" in the address bar and tap "Go" or the "Enter" key on the on-screen keyboard .

Upon completing these steps, Safari's Developer Tools will be activated, providing access to a range of functionalities such as inspecting elements, analyzing network activity, debugging JavaScript, and more. This powerful suite of tools empowers users to delve into the underlying structure of web pages, identify and rectify issues, and optimize the performance of web content directly from their iPhone or iPad.

By familiarizing yourself with the process of opening Developer Tools in Safari on an iPhone or iPad, you gain the ability to harness the full potential of these tools, enabling you to explore, analyze, and enhance the web browsing experience while on the go. Whether you're a web developer seeking to troubleshoot a website's functionality or simply intrigued by the technical aspects of the internet, Safari's Developer Tools on iOS devices provide a convenient gateway to a deeper understanding of web development and design.

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

5 Ways to Improve IT Automation

• What is Building Information Modelling

Related Post

Sla network: benefits, advantages, satisfaction of both parties to the contract, what is minecraft coded in, how much hp does a diablo tuner add, what is halo-fi, what is halo lock iphone, related posts.

How To Enable Inspect In Safari

How To Open Developer Tools On Safari

How To Inspect Page On Safari

How To Inspect On IPhone Safari

How To Change Location In Safari

How To Post On Instagram From Mac Safari

How To Inspect On Safari IPhone

How To Reset Safari 9.0

Recent stories.

What is Building Information Modelling?

How to Use Email Blasts Marketing To Take Control of Your Market

Learn To Convert Scanned Documents Into Editable Text With OCR

Top Mini Split Air Conditioner For Summer

Comfortable and Luxurious Family Life | Zero Gravity Massage Chair

Fintechs and Traditional Banks: Navigating the Future of Financial Services

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

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

WebKit Features in Safari 17.5

May 13, 2024

by Jen Simmons

Happy May! It’s time for another release of Safari — our third significant update of 2024. With just a month until WWDC24 and the unveiling of what’s coming later this year, we are happy to get these 7 features and 22 bug fixes into the hands of your users today.

There are several exciting new CSS features in Safari 17.5, including text-wrap: balance , the light-dark() color function, and @starting-style , plus the ability to use feature queries with @import rules. Let’s look at how you can put each one to use.

Text wrap balance

On the web, with its flexible container widths, inconsistent lengths of content, and variation between browsers, it can feel impossible to avoid having text wrap in such a way that too few words end up all by themselves on a very short last line.

When type was set by hand, typographers would painstakingly avoid this undesirable result by manually moving content around. Over the decades, web developers have tried a series of different tricks to avoid orphans in CSS, in HTML, in JavaScript, and in content management systems. None work very well. The attempts usually feel hacky, laborious, and fragile.

To solve this and other frustrations, the CSS Working Group has defined three new options that you can use to change how text will wrap. You can switch from default wrapping to another style with text-wrap . WebKit for Safari 17.5 adds support for the first of these new options — balancing.

The text-wrap: balance rule asks the browser to “balance” the lines of text and make them all about the same length.

You can see how now the text no longer fills the containing block — there’s a large amount of space on the right of the words. This is expected, and something you’ll want to think about as you decide when to use text-wrap: balance .

Where exactly each line of text will break when using text-wrap: balance may be slightly different in each browser. The CSS Text level 4 web standard leaves it up to each browser engine team to decide which algorithm they want to use in determining how exactly to wrap balanced text.

It can be computationally expensive for the browser to count characters and balance multiple lines of text, so the standard allows browsers to limit the number of lines that are balanced. Chromium browsers balance 6 or fewer lines, Firefox balances 10 or fewer, while Safari/WebKit balances an unlimited numbers of lines.

For now, Safari does not balance text if it’s surrounding a float or initial letter. And Safari disables the balancer if the content contains preserved tabs or soft hyphens.

Text wrap shorthands and longhands

The text-wrap property is actually a shorthand for two longhand properties: text-wrap-style and text-wrap-mode .

The text-wrap-mode property provides a mechanism for expressing whether or not text should wrap.

The wrap value turns it on, and the nowrap value turns it off, just like the values for white-space . (In fact, text-wrap-mode is the newly introduced longhand of white-space .) WebKit added support for text-wrap-mode: wrap and nowrap in Safari 17.4 .

The text-wrap-style property selects how to wrap. The initial value is auto — asking text to wrap in the way it has for decades. Or, you can choose a value to switch to another “style” of wrapping.

WebKit for Safari 17.5 adds support for text-wrap-style: balance , stable , and auto .

Of course, the text-wrap shorthand is a way to combine text-wrap-mode and text-wrap-style and declare them together. If you write text-wrap: balance it’s the same as text-wrap: wrap balance , meaning: “yes, please wrap, and when you do, please balance the text”.

Full support will eventually include three properties and six values. No browser supports everything yet, so be sure to look up support for the text-wrap , text-wrap-mode , and text-wrap-style properties, as well as the balance , pretty , stable , auto , wrap , and nowrap values.

The balance , pretty , and stable values will simply fall back to auto in browsers without support, so progressive enhancement is easy. You can use these values today, no matter how many of your users don’t yet have a browser with support. They will simply get auto -wrapped text, just like they would if you didn’t use text-wrap . Meanwhile, those users with support will get an extra boost of polish.

Dark mode and the light-dark() color function

More and more, users expect websites and web apps to support dark mode . Since Safari 12.1 , the prefers-color-scheme media query has given you the ability to write code like this:

Or perhaps you’ve used variables to define colors for both light and dark mode at once, making it easier to use them everywhere.

Well, now there’s a new option — the light-dark() function. It makes defining colors for dark mode even easier.

First, inform the browser you are providing a design for both light and dark modes with the color-scheme property. This prompts the browser to switch the default user agent styles when in dark mode, ensuring the form controls appear in dark mode, for example. It’s also required for light-dark() to work correctly.

Then, any time you define a color, you can use the light-dark() function to define the first color for light mode, and the second color for dark mode.

You can still use variables, if you’d like. Perhaps you want to structure your code like this.

An often-asked question when learning about light-dark() is “does this only work for colors?” Yes, this function only works for colors. Use the prefers-color-scheme media query to define the rest of your color-scheme dependent styles.

Starting style

WebKit for Safari 17.5 adds support for @starting-style . It lets you define starting values for a particular element. This is needed to enable a transition when the element’s box is created (or re-created).

In the above example, the background-color will transition from transparent to green when the element is added to the document.

Many developers are excited to use @starting-style along with display: none interpolation. To do so, WebKit also needs to support animation of the display property, which has not yet shipped in Safari. You can test this use case today in Safari Technology Preview .

Features queries for importing CSS

WebKit for Safari 17.5 adds the supports() syntax to @import rules. Now you can conditionally import CSS files based on whether or not there’s support for a certain feature.

For example, you could load different stylesheets based on whether or not CSS Nesting is supported .

Or you could load certain CSS files when a browser does not have support for Cascade Layers . (Note that any @import rules with layer() will automatically be ignored in a browser without layer support.)

Or simply test for a feature. Here, these layout styles will only be loaded if Subgrid is supported .

WebKit for Safari 17.5 adds support for AV1 to WebCodecs when an AV1 hardware decoder is available.

WebKit for Safari 17.5 adds WebGL support for EXT_conservative_depth and NV_shader_noperspective_interpolation .

WKWebView adds support for logging MarketplaceKit errors to the JavaScript console. This will make errors easier to debug.

Bug Fixes and more

In addition to these new features, WebKit for Safari 17.5 includes work polishing existing features.

Accessibility

• Fixed a bug preventing VoiceOver word echoing in some text fields. (122451549) (FB13592798)
• Fixed flickering with multiple accelerated animations and direction changes. (117815004)

Authentication

• Fixed excludeCredentials property being ignored during a passkey registration request. (124405037)
• Fixed the proximity calculation for implicit @scope . (124640124)
• Fixed the Grid track sizing algorithm logical height computation avoid unnecessary grid item updates. (124713418)
• Fixed any @scope limit making the element out of scope. (124956673)
• Fixed native text fields becoming invisible in dark mode. (123658326)
• Fixed fallback native <select> rendering in dark mode. (123845293)
• Fixed scrolling for an element when a video element with pointer-events: none is placed over it. (118936715)
• Fixed HTML5 <audio> playback to continue to the next media activity when in the background. (121268089) (FB13551577)
• Fixed AV1 to decode in hardware on iPhone 15 Pro. (121924090)
• Fixed audio distortion over internal speakers when streaming content in web browsers. (122590884)
• Fixed firing loadeddata events for <audio> and <video> on page load. (124079735) (FB13675360)
• Fixed adjusting the size of the scrollable area when changing betwen non-overlay and overlay scrollbars. (117507268)
• Fixed flickering when showing a layer on a painted background for the first time by avoiding async image decoding. (117533495)
• Fixed line breaking before or between ruby sequences. (122663646)
• Fixed mousemove events in an iframe when the mouse is clicked from outside the iframe and then moves into it while the button is held down. (120540148) (FB13517196)
• Fixed several issues that caused Web Push to not show notifications when the web app or Safari was not already running. (124075358)

Web Inspector

• Fixed info and debug buttons not appearing in the Console Tab until new console messages are displayed. (122923625)
• Fixed WebCodecs to correctly use the VP9 hardware decoder. (123475343)
• Fixed no incoming video in Teams VA. (124406255)
• Fixed the camera pausing occasionally when torch is enabled. (124434403)

Updating to Safari 17.5

Safari 17.5 is available on iOS 17.5 , iPadOS 17.5 , macOS Sonoma 14.5 , macOS Ventura, macOS Monterey and in visionOS 1.2.

If you are running macOS Ventura or macOS Monterey, you can update Safari by itself, without updating macOS. On macOS Ventura, go to  > System Settings > General > Software Update and click “More info…” under Updates Available.

To get the latest version of Safari on iPhone, iPad, or Apple Vision Pro, go to Settings > General > Software Update, and tap to update.

We love hearing from you. To share your thoughts on Safari 17.5, find us on Mastodon at @[email protected] and @[email protected] . Or send a reply on X to @webkit . You can also follow WebKit on LinkedIn . If you run into any issues, we welcome your feedback on Safari UI, or your WebKit bug report about web technologies or Web Inspector. Filing issues really does make a difference.

Download the latest Safari Technology Preview on macOS to stay at the forefront of the web platform and to use the latest Web Inspector features.

You can also find this information in the Safari 17.5 release notes .

A beginner’s guide to web development: 4 steps to get over the learning curve

According to Google, as a mobile web page’s load time reaches 10 seconds , the probability of its visitors bouncing (i.e., leaving the site) increases by 123%. It turns out,  it’s usually not their WiFi connection’s fault. 

That’s the domain of a web developer. A good one can write code, develop and test new apps and websites, iterate on features, monitor site traffic, ensure the website isn’t bogged down with elements, and, above all else, solve problems people don’t even know they had.

UNC Kenan-Flagler’s top-ranked online MBA

According to the Bureau of Labor Statistics, the employment of web developers in the U.S. is expected to increase by 16% by 2032, much faster than the national average of 3% across all professions. This indicates a high demand for skilled web developers in the coming years. 

Sounds complex, right? Agoric CEO Dean Tribble thinks it’s actually pretty clear cut: “At the end of the day, computers and websites are designed to be predictable. They only do things that we tell them to do.” 

For him, the biggest part of becoming a web developer and getting paid the big bucks—somewhere between $73,000 and $119,000 per year on average, according to Glassdoor —is learning to tell the computer what to do.

How to learn web development in 4 steps

This roadmap outlines each step in becoming a web developer, from knowing nothing to having projects you can show future employers and clients. 

1. Research which aspect of web development interests you the most

A web developer’s curiosity is the fuel that keeps them motivated. Your initial spark should be exploring and researching websites you like, in order to understand what makes them tick.  

Tribble advises that you should learn how the internet, computers, data structures, and algorithms all work together. Then, decide which piece of the internet interests you the most. There are three web development specializations. 

• Front-end developer : This role involves positioning images, designing the navigation, and determining the site’s overall presentation. The focus is on ensuring that the site or application is easy to navigate, making it a good fit for those with a creative eye and a passion for user experience.
• Back-end developer : Responsible for building and maintaining the mechanisms that process data and perform actions on websites. The focus is on data storage, security, and server-side functions, making it a good fit for people who love computers and problem-solving. 
• Full-stack developer : Responsible for building a website’s front-end and back-end. This role is for people who love it all, including function and feng shui.

“It’s fine to begin with learning just one aspect of web development,” says Front-End and Web Practice Lead at Coherent Solutions , Vladimir Yurkevich.

Both Tribble and Yurkevich stress that to avoid stepping on the toes of other project collaborators and ruining their code,  it’s essential to know how all the moving parts of a site function from an “under-the-hood” perspective. This will expand your expertise and raise your value.

2. Learn the three main web development programming languages

No matter which side of development you’re looking to learn, you’ll typically need to know three languages: HTML, CSS, and JavaScript . These are the foundational languages of web development. 

Think of it like you’re building a house. HTML is the framework, CSS adds visual appeal, and JavaScript furnishes it with functionality. But, there are different frameworks for JavaScript, like React, Angular, and Nodejs. Both experts agree it’s best to find resources to help you master the primary language rather than its derivatives.

On the other hand, in the same way, Latin languages like Italian and Spanish sound similar to each other, after you’ve learned the big three programming languages , these other ones might come a little easier: 

• Python : It offers various frameworks like Django, Flask, and web2py for building web applications.
• TypeScript : Enhances JavaScript with static typing, improving code reliability.
• Ruby : Also known as Ruby on Rails, this language is an open-source framework for web development.
• Java : It is robust, reliable, and portable, commonly used for web applications and APIs.
• SQL : Essential for managing relational databases in web applications.
• Go : It is a high-level programming language designed by Google and is similar to C. 
• Kotlin : This language is gaining popularity for Android app development and server-side applications.

Free web development resources

Before swiping your card on a course or bootcamp, the sites below teach the art of web development and programming at a base-expert level for free.

• freeCodeCamp : This 501(c)(3) public charity offers free courses that teach full-stack web development and all of the languages needed to be successful.
• Interneting Is Hard : This is a set of beginner-friendly web development tutorials.
• CSS Cheat Sheet : This interactive site helps you learn CSS by doing—it has buttons, code generators, scrubbers, and tutorials.
• Roadmap : This site shows you the roadmap to becoming hirable and allows you to check off items as you learn them.

If you’re interested in enrolling in something with more structure, certifications, and a set amount of study hours, Fortune made a list of part- and full-time bootcamps .

3. Start building small projects, then increase the complexity

Now that you have a solid foundational knowledge of the programming skills needed to grow as a developer, it’s time to start building actual projects. 

The learning curve in web development is less of a one-time hurdle and more of a constant stream of lulls and highs. Yurkevich refers to this as a learning ‘spiral,’ where you revisit and deepen your understanding of concepts as you progress, leading to a continuous upward trajectory in your learning journey.

“Web development is oscillation and iteration. It’s about going back and forth with learning and doing,” he says. For example, a web developer spends most of their time coding their ideas to reality, going back, reading documentation, watching YouTube videos, or speaking with an expert, “Then go back to your idea.” 

But that’s not the stopping point, he advises, “After all that, try to increase the complexity of the problem. The joy of solving the problem will forever be engraved into your brain.” 

The web development process

These are the five main stages of how you should approach not only your first few projects but all of them:

• Define your project and what you aim to achieve.
• Write the plan for your website or app.
• Design your website with UI in mind using Figma.
• Develop, test, and iterate your project.
• Maintain your project and make sure there are no bugs.

If your project isn’t functioning as intended, there is a guaranteed issue with your code. Tribble advises that, in this scenario, your new goal should be understanding the root cause of the bug. 

Web development projects for beginners

Remember, while these jumping-off points might sound simple, but as you spiral upward, you can expand on them, adding utility and innovation as you learn more. 

• Clone a website you like.
• Build a weather app.
• Create a landing page.
• Build a multiplayer game.
• Create a URL-shortening tool.
• Organize your day by coding a to-do list app.
• Make a quiz app.

4. Build a web development portfolio that showcases your skills

Your portfolio is a game of show, not tell. Like in most industries, hiring managers and potential clients would rather have proof that you can do the job over a paper degree. 

That said, our experts encourage people to earn certifications and attend school, but you can 100% build a professional portfolio without spending all that money. There are some things to consider when putting your portfolio together.

• Highlight reel : Be selective about how you treat your portfolio. Avoid throwing all your projects into it, from simple calculators to small building blocks.
• Tailor it : Depending on your specialization, you want your portfolio to showcase the correct skills for your desired job.
• Communication is key : One of the most important skills you can have as a web developer is the ability to communicate. Make sure to show your process of iterating and building your work examples. 

Look at top names in web development, such as Charles Bruyerre, Keita Yamada, and Bruno Simon, for inspiration in building your web development portfolio.

Still on the fence?

If you can’t picture yourself as an early-years Bill Gates or as a still-in-Harvard Mark Zuckerberg, don’t worry. The spiral is about taking small steps and having a learner’s mindset. 

“The biggest thing that the most successful people in this field have in common is that they built their careers doing something they love to do,” says Yurkevich. 

If you don’t love web development and programming right now, that’s okay, too. He advises, “Love for [this field] is not built instantly. You have to build projects repeatedly. As a web developer, you’ll get by on getting those small wins here and there.”

If you’re still unsure where a career in web development can take you, Fortune sought the ten most in-demand jobs in the field. 

Frequently asked questions

Is 3 months enough to learn web development.

Yes, you can become a qualified web developer in three months. Still, industry veterans say they learn new languages, solve new problems, and keep up with new technology even in the late stages of their careers. 

Can I learn web development on my own?

Yes, you can learn web development on your own. This guide outlines the 4 steps you need to take to become a web developer.

Harvard Business Analytics Program

Mba rankings.

• Best Online MBA Programs for 2024
• Best Online Master’s in Accounting Programs for 2024
• Best MBA Programs for 2024
• Best Executive MBA Programs for 2024
• Best Part-Time MBA Programs for 2024
• 25 Most Affordable Online MBAs for 2024
• Best Online Master’s in Business Analytics Programs for 2024

Information technology & data rankings

• Best Online Master’s in Data Science Programs for 2024
• Most Affordable Master’s in Data Science for 2024
• Best Master’s in Cybersecurity Degrees for 2024
• Best Online Master’s in Cybersecurity Degrees for 2024
• Best Online Master’s in Computer Science Degrees for 2024
• Best Master’s in Data Science Programs for 2024
• Most Affordable Online Master’s in Data Science Programs for 2024
• Most Affordable Online Master’s in Cybersecurity Degrees for 2024

Health rankings

• Best Online MSN Nurse Practitioner Programs for 2024
• Accredited Online Master’s of Social Work (MSW) Programs for 2024
• Best Online Master’s in Nursing (MSN) Programs for 2024
• Best Online Master’s in Public Health (MPH) Programs for 2024
• Most Affordable Online MSN Nurse Practitioner Programs for 2024
• Best Online Master’s in Psychology Programs for 2024

Leadership rankings

• Best Online Doctorate in Education (EdD) Programs for 2024
• Most Affordable Online Doctorate in Education (EdD) Programs for 2024
• Coding Bootcamps in New York for 2024
• Best Data Science and Analytics Bootcamps for 2024
• Best Cybersecurity Bootcamps for 2024
• Best UX/UI bootcamps for 2024

Boarding schools

• World’s Leading Boarding Schools for 2024
• Top Boarding School Advisors for 2024

• a. Send us an email
• b. Anonymous form
• Buyer's Guide
• Upcoming Products
• Tips / Contact Us
• Podcast Instagram Facebook Twitter Mastodon YouTube Notifications RSS Newsletter

Apple Releases Safari Technology Preview 195 With Bug Fixes and Performance Improvements

Apple today released a new update for Safari Technology Preview , the experimental browser Apple first introduced in March 2016. Apple designed the ‌Safari Technology Preview‌ to test features that may be introduced into future release versions of Safari.

The current ‌Safari Technology Preview‌ release is compatible with machines running macOS Ventura and macOS Sonoma , the latest version of macOS that Apple released in September 2023.

The ‌Safari Technology Preview‌ update is available through the Software Update mechanism in System Preferences or System Settings to anyone who has downloaded the browser . Full release notes for the update are available on the Safari Technology Preview website .

Apple's aim with ‌Safari Technology Preview‌ is to gather feedback from developers and users on its browser development process. ‌Safari Technology Preview‌ can run side-by-side with the existing Safari browser and while designed for developers, it does not require a developer account to download.

Get weekly top MacRumors stories in your inbox.

Popular Stories

5 Reasons to Use OpenAI's ChatGPT App for Mac

Best Buy's Memorial Day Sale Has Record Low Prices on iPads, MacBooks, and Much More

macOS 15 System Settings to Get Design Overhaul

5 Biggest Changes Rumored for iPhone 16 Pro Max

Next article.

Our comprehensive guide highlighting every major new addition in iOS 17, plus how-tos that walk you through using the new features.

Apple News+ improvements, cross-platform tracker alerts, website app downloads for the EU, and more.

Get the most out your iPhone 15 with our complete guide to all the new features.

A deep dive into new features in macOS Sonoma, big and small.

Apple's annual Worldwide Developers Conference will kick off with a keynote on June 10.

Expected to see new AI-focused features and more. Preview coming at WWDC in June with public release in September.

AI-focused improvements, new features for Calculator and Notes, and more.

Action button expands to all models, new Capture button, camera improvements, and more.

Other Stories

2 days ago by Tim Hardwick

2 days ago by Juli Clover

4 days ago by Tim Hardwick

5 days ago by Tim Hardwick

How to Use Inspect Element in Chrome, Safari, & Firefox

Published: May 20, 2024

When I started my coding journey, I couldn’t always pinpoint what made a web page great — all of the code underneath that craft a well-designed experience. So, I would use the inspect element on my browser to peel back the curtain. Here, I could see how pages were coded so I could understand how to recreate elements for my own projects.

The inspect element feature lets us view and even modify any website’s front end. This simple trick can help you understand how websites work and even help you build your own.

In this post, I’ll discuss what it means to “inspect” page elements and how to do so on three common web browsers. If you’re in a pinch, jump ahead to what you’re looking for.

Table of Contents

How to Inspect Elements in Chrome

How to inspect elements in safari, how to inspect elements in firefox, get a closer look with inspect, what does “inspect element” mean.

Inspect element is a feature of modern web browsers that enables anyone to view and edit a website’s source code, including its HTML, CSS, JavaScript, and media files. When the source code is modified with the inspect tool, the changes are shown live inside the browser window.

Inspect is a web professional’s scout team. Developers, designers, and marketers frequently use it to peek inside any website (including their own) to preview content and style changes, fix bugs, or learn how a particular website is built. For instance, if I find an intriguing interface on a competing website, the inspect element lets me see the HTML and CSS that make it up.

I also think of my browser’s inspect feature as a “sandbox” of sorts. I can play around with a web page as much as I want by changing content, colors, fonts, layouts, etc. When finished, I just refresh the page to revert everything to normal.

Inspect doesn’t change the website itself — only how it appears in your browser. You can then experiment without worry!

Inspect is also an incredibly valuable tool for those learning web development. Instead of viewing plain source code, I can use the inspect element to interact with the page and see how each line of code maps to an element or style.

By better understanding what constitutes the typical web page, I can communicate effectively with developers in the case of an error or if I want to make a change.

Inspect may be a “developer tool,” but you don’t need to write any code or install any additional software to use it. You can do everything I’ve described right inside your browser. Let’s learn how.

How to Inspect Elements

To inspect elements, you have to right-click any part of a web page and click Inspect > Inspect Element. Alternatively, you can press Command+Option+i on your Mac or F12 on your PC to do the same.

Every modern web browser has a native tool for inspecting elements. It can be accessed in any browser, but some browsers like Chrome and Safari have slight differences. Let’s discuss how to use the inspect tool in three desktop web browsers: Google Chrome, Apple’s Safari, and Mozilla Firefox.

Chrome comes with a handy developer tool that allows you to inspect individual elements. This allows you to see the code behind a web page and even edit it on your own browser. (Note that the changes are only visible to you, not to anyone else across the web.)

Here's how to get started.

Free Guide: 25 HTML & CSS Coding Hacks

Tangible tips and coding templates from experts to help you code better and faster.

• Coding to Convention
• Being Browser-Friendly
• Minimizing Bugs
• Optimizing Performance

You're all set!

Click this link to access this resource at any time.

1. Launch Chrome and navigate to the page you want to inspect.

To use the element inspector in Google Chrome, I first navigate to any web page. In these examples, I’ll be using HubSpot.com .

2. Open up the Inspect panel.

Once I arrive at my desired page, I have several ways to open Chrome's Inspect tool.

• Option 1 : I can right-click any part of the page and choose Inspect . Right-clicking a specific page element will open that element in the inspector view.
• Option 2 : In the top menu bar, I can select View > Developer > Developer Tools .
• Option 3: I can click the three-dot icon in the top right corner of the browser window. From there, I can choose More Tools > Developer Tools . Then, I can click the Inspect tab in the popup.
• Option 4 : I can use the shortcut control-shift-C on Windows or command-option-C on macOS.

3. Change the location of the inspect panel.

To better view the code, I can change the position of the inspector window.

The Chrome Developer Tools panel will open at the bottom of the browser window, but sometimes it opens in a separate window altogether.

If I want to change the location of the panel, I can click the three-dots icon in the top right corner of the panel (next to the X icon), and then choose my preferred dock position.

Pro tip: Choosing Dock to right makes it easier to view the rendered page and its source:

Along the top of the inspect panel, I see tabs for Elements , Console , Sources , etc. These are all tools I can use to assess a page’s contents and performance. However, everything I need to inspect is under the Elements tab.

4. Look at the source HTML code of the page.

The biggest area of the panel will contain the source HTML of the current page. I always spend some time exploring this region. Hovering the cursor over the piece of code highlights the corresponding element on the page.

Blue indicates the contents of an element, green corresponds to padding, and areas in orange are margins.

Pro tip: If you’re a beginner and want to learn more about the different elements you’re inspecting, check out this HTML guide for beginners.

5. Select a specific element to inspect.

Rather than trying to read through the code to find an element, I can also do the opposite. I can locate a piece of code by hovering over the page element itself. To do this, I click the Element select icon in the top left corner of the panel.

8. Edit the page's CSS code.

Moving down the Chrome inspect panel, I see the Styles tab. This shows me what CSS styling has been applied to the selected element. I can click on lines of code to rewrite them, or I can activate/deactivate certain declarations by checking/unchecking the boxes next to them. I’ll do this for my <h1> element’s font-weight property:

9. View the page's mobile version.

Finally, let’s cover one more feature of Chrome’s inspect feature: mobile view. When building a site, designers need to consider how its pages appear on desktop, mobile, and tablet screens alike.

Fortunately, Chrome lets me preview the same web page in multiple screen resolutions. Start by clicking the Toggle device icon in the top left corner of the panel:

Now, when I click a page element, the Web Inspector reveals the corresponding source code.

7. Edit, add, or delete page elements.

Like Chrome’s inspector, Safari lets me modify, add, and remove page elements. To edit the page, I can right-click an HTML element in the inspect panel. I can then choose an option from the Edit menu.

Web Inspector will prompt me for a new text input and then display my changes in real time:

If I want to delete a page element, I just select some code and delete it. Or, I can right-click and choose Toggle Visibility to hide an element without deleting it.

8. Activate or deactivate the page's CSS code.

To the right, I have the Styles column, where I can change or activate/deactivate CSS declarations for any element, like so:

When testing content and style changes, I want to see the effect on mobile screens as well as desktops. I’ll cover that next.

Pro tip: When seeking inspiration from other web pages, I always take advantage of the Styles tab in my browser’s developer tools to tailor the CSS according to how I envision it on my own page. Try it out. This allows you to refine and adapt design elements to suit your specific preference before moving forward with coding it in your own workspace.

Safari’s Responsive Design Mode allows me to preview a website across common devices.

To view the page in a mobile viewport, I choose Develop → Enter Responsive Design Mode . In this mode, I can use the same inspector tools on pages formatted for Apple devices or set the dimensions myself:

What I like: Safari’s responsive design tab not only lets you test your web page’s responsiveness on devices, but you can also test its behavior across different browsers. Serving as a one-stop-shop for testing responsiveness, the Safari dev tools are a huge time saver.

Firefox is another great option for inspecting a web page in either macOS, Windows, or Linux. Here’s how to get started.

1. Open Firefox's inspect element tool.

To open the Firefox Inspector, I have several options:

• Option 1: I can right-click any part of the page and choose Inspect Element . Right-clicking a specific page element will open that element in the inspector view.
• Option 2: I can select Tools → Browser Tools → Web Developer Tools from the top menu bar.
• Option 3: I can use the shortcut control-shift-I or press f12 in Windows or command-option-I in macOS.

Next, I go to the web page I’d like to inspect. I’ll be using HubSpot.com again.

3. Change the location of the inspector panel.

The Firefox inspector appears along the bottom of the window by default. To change its position, I can select the three-dots icon in the top right corner of the inspector, then choose an alternative display option.

4. Look at the HTML code of the page.

Firefox’s inspector panel is comparable in features to Chrome’s and Safari’s. The HTML source code indicates the corresponding page element with color codes — content is blue, padding is purple, and margins are yellow:

I can also find code by selecting elements on the page. To enter selection mode, I click the cursor icon in the top left corner:

I can then click any page element to reveal its source code in the inspect panel.

6. Modify or delete page elements.

To modify or delete a page element, I select its code in the inspector. Then, I can either double-click to change the text, right-click and choose Edit as HTML, or click Plus Button next to the “Search HTML” bar to add code. Or I can simply delete the code and see the resulting changes on the page.

7. Toggle the page's CSS styles.

To toggle the CSS styling of an element, I use the Filter Styles region at the bottom of the inspect panel. There, I can uncheck the box next to a CSS declaration to deactivate it (or write in new code myself):

8. View the page's mobile version.

Finally, Firefox’s tools also come with a mobile preview option. To use it, I can click the Responsive Design Mode icon in the top right corner of the panel:

Responsive Design Mode lets me choose from several preset screen resolutions or set my own. I can also toggle connection speed and device pixel ratio:

What I like: As a software developer, it is very important that I make web pages that can be easily used by anyone. Firefox’s accessibility tab in its inspector tool allows me to check if my nodes accessibility tree is missing any important properties. I can verify color contrasts too.

The quickest way to access this feature is by right clicking on the page → choose Inspect → select the two arrows next to debugger → select Accessibility .

Once you learn the basics of your browser’s inspect tool, you might realize just how much information about your favorite websites is publicly available. With a few clicks, you can explore how exactly web pages are built, what styles they use, how they optimize for search engines, how they format on mobile screens, and a lot more.

Editor's note: This article was originally published in December 2020 and has been updated for comprehensiveness.

Don't forget to share this post!

Related articles.

The Beginner's Guide to Website Development

Are .io Domains Good? Why Tech Startups Love .io Domains

15 Backend Project Ideas for Your Developer Portfolio

37 Backend Interview Questions and Answers: The Ultimate Guide 2022

How to Build & Run an Effective Website With a Small Team or Budget [Startup Tips]

How to Code a Website for Free in 6 Easy Steps

How Long Does it Take to Build a Website?

Flush DNS: What It Is & How to Easily Clear DNS Cache

How to Make a Website With User Accounts and Profiles [With WordPress, Wix, and More]

Wildcard SSL Certificates: What They Are & How They Work

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

{{ activeMenu.name }}

• Python Courses
• JavaScript Courses
• Artificial Intelligence Courses
• Data Science Courses
• React Courses
• Ethical Hacking Courses
• View All Courses

Fresh Articles

• Python Projects
• JavaScript Projects
• Java Projects
• HTML Projects
• C++ Projects
• PHP Projects
• View All Projects

• Python Certifications
• JavaScript Certifications
• Linux Certifications
• Data Science Certifications
• Data Analytics Certifications
• Cybersecurity Certifications
• View All Certifications

• IDEs & Editors
• Web Development
• Frameworks & Libraries
• View All Programming
• View All Development
• App Development
• Game Development
• Courses, Books, & Certifications
• Data Science
• Data Analytics
• Artificial Intelligence (AI)
• Machine Learning (ML)
• View All Data, Analysis, & AI
• Networking & Security
• Cloud, DevOps, & Systems
• Recommendations
• Crypto, Web3, & Blockchain
• User-Submitted Tutorials
• View All Blog Content
• JavaScript Online Compiler
• HTML & CSS Online Compiler
• Certifications
• Programming
• Development
• Data, Analysis, & AI
• Online JavaScript Compiler
• Online HTML Compiler

Don't have an account? Sign up

Forgot your password?

Already have an account? Login

Have you read our submission guidelines?

Go back to Sign In

Want To Learn Web Development? Build Web Development Projects!

In this article, we share the 11 best web development projects in 2024 with source code.

Whether you’re trying to become a web developer or improve your current portfolio, we’ve included web development projects for beginners and experienced devs.

In 2024, web development is a broad field, so we’ve included some of the best web development projects for various tech stacks, including HTML/CSS/JS, ASP.NET, Django, MEAN, MERN, and more.

Plus, when you consider that the Bureau of Labor Statistics reports a median annual salary of over $85,000 for web developers , building web development projects can be highly rewarding for your career.

If you’re looking to pick up valuable web development skills, one of the best approaches is project-based learning by building web development projects. So, if you’re ready, fire up your favorite web development IDE , and let’s check out the best web development projects .

• Why Build Web Development Projects?

Web development is a constantly evolving field, and staying ahead of the curve can be challenging.

Project-based learning is one of the best ways to keep learning engaging. You can even overlap your web development project with a web development course . 

By looking for and building real-world web development project ideas, you can develop new skills, gain experience, and create a portfolio of work to showcase to potential employers.

Let’s take a look at the primary benefits of building web development projects.

• Project-based learning: You're not just learning theory; you're applying knowledge in a practical context to develop a deeper understanding.
• Build your portfolio: You can demonstrate your versatility and adaptability.
• Career opportunities: Building your skills and creating a portfolio of work will put you in a better position to land your dream job.
• Problem-solving: Web development projects are inherently challenging, and building them will enhance your problem-solving skills.
• Creative expression: You can use your imagination and creativity to build projects that are unique and visually appealing.

If you’re a web dev beginner, a pro tip for you is that it’s really important to work on multiple web development projects. This is ideal for gaining experience with different technologies, languages, and web development frameworks .

This can also help you develop a broad set of skills to apply in various contexts, whether e-commerce, social media, education, healthcare, finance, and more.

• Best Web Development Project Ideas for Beginners

1. Landing Page - HTML & CSS

Download source code

This is a tried and tested idea for beginner web development projects that you can use to develop your understanding of layout and design and how to use different HTML and CSS elements to build the page's structure.

This HTML project includes elements like headings, paragraphs, images, and forms.

You'll also get to use your knowledge of responsive design to ensure your landing page displays correctly across different devices and screen sizes.

Overall, if you want to become a web developer , this is a great project to get hands-on experience with HTML and CSS, allowing you to apply your knowledge in a practical setting and solidify your understanding of web development concepts. 

This project also gives you the opportunity to try different hosting resources. You could try Amazon for cloud hosting on a site built for high-volume traffic, for example, or stick with a free hosting platform for a smaller project.

Prerequisites:

• Basic understanding of web development concepts
• Familiarity with HTML tags and CSS selectors
• Knowledge of responsive design techniques

Stack Required:

2. Personal Portfolio Website - HTML, CSS, & JavaScript

This beginner-level project will help you develop your skills in HTML, CSS, and JavaScript as you'll design and code a personal portfolio website.

This JavaScript project will also require you to create a responsive design that not only works flawlessly across different devices but also optimizes it for fast loading and SEO.

By tackling this project, you'll gain hands-on experience using HTML to structure the content, CSS to style it, and JavaScript to add interactivity. Making this ideal for building real-world websites that can help jumpstart your web development career.

Our research also uncovered several types of web-building software with discounts at AppSumo. These resources often take the coding out of the process though, so use them only once you’re comfortable with your skills.

• Knowledge of layout and typography design
• Understanding of JavaScript functions and event handling

3. To-do List App - Ruby on Rails

This project is an excellent way to enhance your web development skills with Ruby on Rails, HTML, CSS, and JavaScript, as you’ll be creating a functional web application that enables users to create, manage, and track their to-do lists. It’s also one of the best web development projects for students to stretch their current skill set.

Now, for newcomers to Rails, it might seem daunting to try out, but if you're coming over from another language, you could always use an AI coding assistant to help out during the building process. This is a great way to learn a new language on the fly.

Expect to be implementing CRUD functionalities, RESTful routing, and database queries in Ruby on Rails, as well as working with HTML forms, CSS styling, and JavaScript functions, and event handling.

Throughout this project, you’ll also utilize your technical skills in creating Ruby scripts and implementing an MVC architecture, alongside gaining experience in front-end development by creating responsive and visually appealing interfaces with HTML and CSS. 

By completing this project, you'll have the opportunity to hone your web development skills and gain practical experience in building a full-stack web application.

And remember, don't be put off by a tech stack that seems unfamiliar, as you can always use something like GitHub Copilot to help out!

• Familiarity with HTML forms and CSS styling
• Knowledge of JavaScript functions and event handling
• Knowledge of Ruby on Rails
• Understanding of database relationships and migrations
• Ruby on Rails

4. Cinema Website - ASP.NET

This project is a great opportunity for beginners to strengthen their skills by working on a real-world web application with ASP.NET and Bootstrap, which are two powerhouses in the field of web development. 

This project is a great way to challenge yourself, as you’ll need a basic grasp of web development concepts, familiarity with HTML and CSS, and of course, knowledge of C#, object-oriented programming (OOP), and the .NET framework. It also helps to have an understanding of JavaScript functions and event handling.

By the end of this project, you will have built a fully-functional cinema web app that includes ticket booking functions, movie information display, and user authentication. All of which are great analogs to real-world applications and the skills you’ll need as a web developer.

• Knowledge of C# programming and object-oriented programming (OOP) concepts
• Knowledge of ASP.NET

5. URL Shortener - PHP

This beginner-friendly web development project will help you develop your skills in PHP, JavaScript, CSS, and HTML as you build a web application that shortens URLs and tracks the number of clicks on each shortened link. You can even run this open-source project on your own server, providing full control over data and statistics.

By working on this PHP project , you'll gain practical experience in web development alongside database management as you’ll need to implement SQL data storage and retrieval. Overall, this project is an excellent opportunity to apply common technologies to build a real-world web application that would look great in your portfolio.

• Knowledge of PHP programming and object-oriented programming (OOP) concepts
• Understanding of database systems and SQL
• Intermediate Web Development Projects

6. Job Board - Laravel

This intermediate-level web development project is great for improving your skills in CSS, HTML, JavaScript, and the Laravel PHP framework. By building a job board web application, you’ll allow employers to post job listings and job seekers to search and apply for jobs. 

If you're still new to PHP, you might want to check out a PHP course to bolster your skills for building this project.

On the other hand, if you have PHP knowledge, you’ll get to experiment with commonly used web application features like user authentication, data search and filtering, job application tracking, and email notifications.

This is also a great way to improve your understanding of database management and SQL. 

By the end of this project, you’ll have gained practical exposure to web development with Laravel and various front-end technologies.

• Strong understanding of web development concepts
• Proficiency in HTML and CSS, including responsive design and CSS grid/flexbox
• Familiarity with JavaScript, including DOM manipulation and AJAX
• Experience with PHP and the Laravel framework
• Understanding of SQL and database systems
• Laravel PHP framework

7. Quiz App - MEAN Stack

This MEAN stack app is an intermediate-level project that’s excellent for improving your full-stack development skills by integrating M ongoDB, E xpress, A ngular, and N odeJS.

Expect to challenge yourself with this project, as you’ll be creating a RESTful API for a quiz application with some of the most popular JavaScript libraries .

Yep, you will need to build the front end using Angular, combining TypeScript, HTML, and CSS to develop a dynamic web app for users to take quizzes and view their results. 

You’ll also need to work with NoSQL and integrate each of the MEAN stack components to create a seamless full-stack application. By the end of this project, you’ll have solid experience using these technologies to create a fully functional application.

• Experience with the MEAN stack
• NodeJS installed on your machine
• MongoDB installed and running on the default port (27017)
• Express, Mongoose, Body Parser, and CORS packages installed
• Angular 4 and Angular CLI installed
• [MEAN Stack]
• MongoDB 
• Express 
• Angular 

8. Weather Forecasting App - JavaScript

This intermediate project is a great way to level up your HTML, CSS, and JavaScript skills to create a fully functional weather app that allows users to search for weather conditions and forecast information in any location around the world.

To do this, you’ll be integrating with a weather API like OpenWeatherMap and then polling this service to fetch and display data within your app. API integration is a foundational skill for web dev pros, making this project a great way for you to hone these skills. 

You can also get to grips with Bootstrap to style a responsive app front-end that looks great on any device. 

• Good understanding of HTML, CSS, and JavaScript
• Familiarity with NPM and Webpack
• Basic knowledge of API integration
• Familiarity with Bootstrap is a plus, but not required.
• A weather API such as OpenWeatherMap
• Advanced Web Development Projects

9. Content Management System - Django

If you’ve ever thought about building your own version of WordPress, this advanced web development project creates a fully functional Content Management System (CMS) for managing website content via Django, Python, JavaScript, HTML, SCSS, and Shell scripting. 

This is a great way to gain experience building a web app that allows web admins to create, edit, and publish content in a structured manner. You’ll also include support for hierarchical pages, multi-language and multi-site capabilities, draft/publish workflows, version control, and a customizable navigation system.

If you're a little rusty with Django or still learning to use it, I'd definitely recommend having a Django book on hand to tackle any challenges you might encounter.

If you’re already familiar with Python, this is an excellent way to branch out into web development, as you’ll use Django to create the content management logic. You’ll also need to use JavaScript for the frontend interactivity, HTML/CSS for the overall structure and styling, and Shell scripting for any automation. 

Our experience shows that you’ll need a foundation in Python to succeed with this project. For novices, we recommend enrollment in Python with Dr. Johns for an introduction to the fundamentals of the language.

• Basic knowledge of HTML, CSS, and JavaScript
• Proficiency in Python programming language
• Familiarity with the Django web framework
• Knowledge of Shell scripting
• Understanding of version control systems such as Git
• Familiarity with database concepts and design
• Basic knowledge of web development principles and architecture.

10. Slack Clone - TypeScript & Next.js

This Slack clone project is an exciting way for more experienced web developers to get to grips with building a real-time messaging app with a modern web stack.

Expect to test your TypeScript skills, use Next.js for server-side rendering and SEO, implement Firebase for real-time database and authentication, create and style components with Material UI, manage app state with MobX, and use Git with Shell commands to manage version control and deployment.

As you’d expect with the real Slack app, you’ll need to implement user authentication and authorization to ensure secure communication between users. You’ll also add the ability to create and manage channels.

If you're making the leap from JS to TypeScript, you might want to consider taking a TypeScript course to fill any knowledge gaps.

When it comes to UX, you’ll include infinity scrolling to provide users with a seamless way to view messages, and you’ll also optimize the app for search engines using SEO best practices.

By the end of this project, you’ll have an excellent understanding of what goes into creating something like Slack, along with a portfolio-worthy project. Win-win!

• Proficient in JavaScript
• Familiarity with React.js and CSS
• Understanding of TypeScript syntax
• Knowledge of Git and Shell commands
• Material UI

11. Facebook Clone - MERN Stack

This Facebook clone project is a great way to learn the ins and outs of building a social media platform like truly global Facebook. What’s more, you’ll be doing this with the MERN (MongoDB, Express, React, Node) stack, which is one of the most prevalent in modern web development.

As an advanced web development project, you’ll also be able to enhance your skills in HTML, CSS, and JavaScript, as well as gain hands-on experience with MongoDB for NoSQL and implementing authentication and authorization with Node.js and Express.js.

By the end of this React project , you'll have experience working with third-party UI libraries like Chakra UI, you’ll know how to develop real-time search functionality for user profiles using debounce, and you’ll know how to handle sign-up and login validations.

If you’re interested in full-stack web development, this is a great project to level up your skills while also adding something solid to your portfolio.

If you're unsure whether you're ready to tackle this project, consider taking a React course to level up your skills, then return and take it on!

• A solid understanding of HTML, CSS, and JavaScript.
• Experience with building web applications using the MERN stack.
• Familiarity with Chakra UI or similar UI libraries.
• Understanding of database design and usage with MongoDB.
• Experience with authentication and authorization using Node.js and Express.js.
• [MERN Stack]
• What Is A Web Development Project?

At their core, web development projects encompass a diverse range of tasks aimed at creating and maintaining dynamic websites or web applications.

Ranging from simple web pages to sophisticated digital platforms, web development projects blend coding, design, and strategic planning.

They also provide a unique opportunity for developers to apply theoretical knowledge in real-world scenarios, honing their skills across various technologies and frameworks.

Web development projects also serve as a canvas for innovation, problem-solving, and showcasing your talent.

By diving into the projects we've included in this article – from HTML/CSS/JS basics to advanced MEAN and MERN stack applications – you can gain hands-on experience and build a portfolio that showcases your versatility and expertise.

Whether building a responsive portfolio website, developing a feature-rich e-commerce platform, or crafting a social media clone, have fun, and use these projects to master the intricacies of web design and programming.

• What Projects Do Web Developers Work On?

Web developers can work on a wide array of projects, each demanding a unique set of skills and creativity.

Typically, web developers take on varied workloads, from constructing straightforward websites to developing complex, interactive web applications.

Web developers are also often tasked with creating responsive user interfaces, integrating backend databases, and implementing interactive features that enhance user experience.

And as you've seen in this article, web development projects can range from personal blogs and small business websites to large-scale e-commerce platforms and social networking sites.

Depending on your current skill level and preferred tech stack, some popular web development projects that you might get to work on include developing web applications with real-time data processing, creating APIs, and crafting solutions for specific industries like healthcare, education, or finance.

Remember this: whether the project is a simple content management system or an intricate enterprise application, it offers a platform for you to showcase your technical acumen, problem-solving skills, and adaptability in a rapidly evolving digital landscape.

This diversity not only challenges you as a web developer to stay on top of the latest technologies, but it also provides the opportunity for creative expression and innovation in solving real-world problems through digital solutions.

• Wrapping Up

There you go, the 11 best web development projects in 2024, including a range of web development projects for beginners and experienced devs alike. 

We’ve even included web development projects for a range of popular tech stacks, including HTML/CSS/JS, ASP.NET, Django, MEAN, MERN, and more. 

Whether you’re just beginning your career in web development or you want to level up your portfolio, each of the web development projects on our list is ideal for learning web development while also demonstrating your skills to future employers. 

Whichever web development project you choose to tackle, have fun, and best of luck with your career in web development!

Looking for a web development course to take while building web development projects? Check out:

Dr. Angela Yu's Web Development Bootcamp on Udemy

• Frequently Asked Questions

1. What Are 3 Types of Web Development?

Web development can be categorized into three main types: front-end development, which involves creating the user interface of a website or web application; back-end development, which involves creating the server-side components of a website or web application; and full-stack development, which encompasses both front-end and back-end development. 

2. How Do I Find Web Developer Projects?

There are several ways for web developers to find projects, depending on your experience level and goals. One common approach is to create a portfolio website or online presence to showcase your skills and attract potential clients or employers. You can also search for web developer jobs or freelance projects on job boards, social media, or online marketplaces. 

3. How Much Does a Web Developer Charge Per Project?

The cost of a web development project can vary widely depending on factors such as the project's complexity, the scope of work involved, and the developer's experience level. However, with an average annual salary of more than $85K , you can use this as a starting point to reverse-engineer a project rate, depending on the time you think it will take you.

People are also reading:

• What is Web Application Architecture?
• How to Become a Backend Developer?
• Top Javascript Frameworks
• How to Learn Javascript Quickly?
• Best PHP Frameworks
• Best Java Frameworks
• PHP Cheat Sheet
• Top PHP Alternatives

Technical Editor for Hackr.io | 15+ Years in Python, Java, SQL, C++, C#, JavaScript, Ruby, PHP, .NET, MATLAB, HTML & CSS, and more... 10+ Years in Networking, Cloud, APIs, Linux | 5+ Years in Data Science | 2x PhDs in Structural & Blast Engineering

Subscribe to our Newsletter for Articles, News, & Jobs.

Disclosure: Hackr.io is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

In this article

• The 8 Best Web Design Courses Online in 2024: Top 8 [Free + Paid] Courses Web Development Web Design
• Top 20 Full Stack Developer Interview Questions and Answers [2024] App Development Web Development Career Development Interview Questions
• What is Web Development? The Ultimate Guide Web Development

Please login to leave comments

Always be in the loop.

Get news once a week, and don't worry — no spam.

{{ errors }}

{{ message }}

• Help center
• We ❤️ Feedback
• Advertise / Partner
• Write for us
• Privacy Policy
• Cookie Policy
• Change Privacy Settings
• Disclosure Policy
• Terms and Conditions
• Refund Policy

Disclosure: This page may contain affliate links, meaning when you click the links and make a purchase, we receive a commission.

ChatGPT Safari Web Version Unusual Activity Error

Guys (If you see this), please help me!

Hello, everyone, especially ChatGPT users! I find myself in a perplexing situation and I hope some of you can help me.

I have encountered an error (shown in the attached image) that has left me puzzled. It’s one of those moments where you stare at the screen, hoping for divine intervention or at least a clue from the universe.

To add to the mystery, my ChatGPT seems to be lagging more than usual. It feels like time is moving slowly while I am trying to keep up. Restarting did not do the trick, and I feel a bit lost in the digital world.

Has anyone else experienced something similar? Any ideas on what might be causing this error and lagging problem? Your insights would be greatly appreciated! Let’s solve this mystery together.

Error: Unusual Activity has been detected from your device. Try again later. Follows by a string that I don’t know what does it mean

If it’s nothing much of a big deal, tell me.

Related Topics