safari remote web inspector

• Shop 'Til You Drop
• Our Picks: The Best Tech Gifts This Year

How to Activate the iPhone Debug Console or Web Inspector

Use Safari's web developer tools to study problematic websites

• Saint Mary-of-the-Woods College
• Switching from Android

What to Know

• Activate Web Inspector on iOS: Go to Settings > Safari > Advanced and move the Web Inspector toggle switch to the On position.
• Use Web Inspector on macOS: Connect your iOS device to a Mac and choose the URL to inspect from the Develop menu.

If you run into a bug or another issue with a website on Safari mobile, use the Web Inspector tool to investigate. This article explains how to use the Safari console for iPhone to debug errors with the help of your Mac computer. Instructions apply to iPhones with iOS 14, iOS 12, or iOS 11, and well as Macs with macOS Big Sur (11.0), macOS Catalina (10.15), or macOS Mojave (10.14).

Activate Web Inspector on Your iPhone or Other iOS Device

The Web Inspector is disabled by default since most iPhone users have no use for it. However, if you're a developer or you're curious, you can activate it in a few short steps. Here's how:

Open the iPhone  Settings  menu.

On an iPhone with an early version of iOS, access the Debug Console through Settings > Safari > Developer > Debug Console . When Safari on the iPhone detects CSS, HTML, and JavaScript errors, details of each display in the debugger.

Scroll down and tap  Safari  to open the screen that contains everything related to the Safari web browser on your iPhone, iPad, or iPod touch.

Scroll to the bottom of the page and select Advanced .

Move the Web Inspector toggle switch to the On position.

Connect Your iOS Device to Safari on a Mac

To use the Web Inspector, connect your iPhone or another iOS device to a Mac that has the Safari web browser and enable the Develop menu .

With Safari open, select Safari from the menu bar and choose  Preferences .

Select the  Advanced  tab.

Select the Show Develop menu in menu bar check box and close the settings window.

From the Safari menu bar, select Develop and choose the name of your attached iOS device, then select the URL that appears under Safari to open the debug console for that site.

After you connect your device, use your Mac to inspect the website you want to debug and have it open in the Safari mobile browser.

What Is Web Inspector?

Web developers use Web Inspector to modify, debug, and optimize websites on Macs and iOS devices. With Web Inspector open, developers can inspect the resources on a web page. The Web Inspector window contains editable HTML and notes regarding the styles and layers of the web page in a separate panel.

Before iOS 6, the iPhone Safari web browser had a built-in Debug Console that developers used to find web page defects. Recent versions of iOS use Web Inspector instead.

With Safari 9 and OS X Mavericks (10.9), Apple introduced Responsive Design Mode in Web Inspector. Developers use this built-in simulator to preview how web pages scale to different screen sizes, resolutions, and orientations.

To set up Web Inspector on your iPad, open your iPad's Settings and select Safari > Advanced , then turn Web Inspector On . Connect the iPad to a Mac computer, then open Safari on the Mac and select Safari > Preferences > Advanced , then turn on Show Develop menu in menu bar .

You cannot just connect your iPhone to a Windows PC and start using Web Inspector through Chrome like you can with a Mac. Installing package manager software can provide you a sort of workaround, but it's not recommended unless you're familiar with the package management app you intend to use.

Get the Latest Tech News Delivered Every Day

• How to Activate and Use Responsive Design Mode in Safari
• How to Save Videos From X (Formerly Twitter)
• Add More Features by Turning on Safari's Develop Menu
• 10 Hidden Features in macOS Sonoma (2023)
• How to Use Web Browser Developer Tools
• How to Change Your Homepage in Safari
• How to Use the PS4 Web Browser
• How to Disable JavaScript in Safari for iPhone
• How to Manage Your Browsing History in Safari
• What Is macOS?
• How to Inspect an Element on a Mac
• How to Use Safari Extensions on the iPhone, iPad, or iPod Touch
• How to View HTML Source in Safari
• Modifying Startup Behavior and Home Pages for macOS
• How to View the Source Code of a Web Page
• Manage Smart Search in Safari for Mac

By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.

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

Provide feedback.

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

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

A DevTools proxy (Chrome Remote Debugging Protocol) for iOS devices (Safari Remote Web Inspector).

google/ios-webkit-debug-proxy

Name already in use.

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more about the CLI .

• Open with GitHub Desktop
• Download ZIP

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

• 222 commits

iOS WebKit Debug Proxy

The ios_webkit_debug_proxy (aka iwdp ) proxies requests from usbmuxd daemon over a websocket connection, allowing developers to send commands to MobileSafari and UIWebViews on real and simulated iOS devices.

Installation

iOS WebKit Debug Proxy works on Linux, MacOS & Windows.

It's easiest to install with homebrew :

It's easiest to install with scoop :

Note: you also need the latest version of iTunes installed.

Install dependencies available in apt repository:

Build and install dependencies that require more recent versions:

• libimobiledevice-glue
• libimobiledevice

Build and install ios-webkit-debug-proxy :

On Linux, you must run the usbmuxd daemon. The above install adds a /lib/udev rule to start the daemon whenever a device is attached.

To verify that usbmuxd can list your attached device(s), ensure that libimobiledevice-utils is installed and then run idevice_id -l .

Start the simulator or device

The iOS Simulator is supported, but it must be started before the proxy. The simulator can be started in XCode, standalone, or via the command line:

Enable the inspector

Your attached iOS devices must have ≥1 open browser tabs and the inspector enabled via: Settings > Safari > Advanced > Web Inspector = ON

Start the proxy

• --debug for verbose output.
• --frontend to specify a frontend
• --help for more options.
• Ctrl-C to quit. Also, the proxy can be left running as a background process.

Using with DevTools

ios_webkit_debug_proxy can be used with many tools such as Chrome DevTools and Safari Web Inspector.

Chrome Devtools

In recent versions of Chrome and Safari there're major discrepancies between Chrome Remote Debugging Protocol and Webkit Inspector Protocol , which means that newer versions of Chrome DevTools aren't compatible with Safari.

Safari Web Inspector

You can use Safari Web Inspector extracted from Webkit sources, e.g. artygus/webkit-webinspector or HimbeersaftLP/ios-safari-remote-debug-kit .

Firefox DevTools via Valence

Another option is mozilla/valence which enables Firefox DevTools to be used with iOS.

Configuration

View and inspect debuggable tabs.

Navigate to localhost:9221 . You'll see a listing of all connected devices.

Click through to view tabs available on each, and click through again to open the DevTools for a tab.

Setting the DevTools UI URL

Chrome DevTools UI used as a default frontend:

You can use the -f argument to specify different frontend source, like Chrome's local DevTools, a local Chromium checkout or another URL:

If you use -f chrome-devtools://devtools/bundled/inspector.html , you won't be able to click the links shown in localhost:9222 as Chrome blocks clicking these URLs. However, you can copy/paste them into the address bar.

Just the same, you can apply the appropriate port (9222) and page (2) values below.

The -f value must end in ".html". Due to security reasons, https URLs will not work; use http or force-allow with the URL bar's shield icon. As of Chrome 45, the primary URL changed from devtools.html to inspector.html .

To disable the frontend proxy, use the --no-frontend argument.

Port assigment

The default configuration works well for most developers. The device_id-to-port assignment defaults to:

If a port is in use then the next available port will be used, up to the range limit.

The port assignment is first-come-first-serve but is preserved if a device is detached and reattached, assuming that the proxy is not restarted, e.g.:

• start the proxy
• the device list gets :9221
• attach A gets :9222
• attach B gets :9223
• detach A, doesn't affect B's port
• attach C gets :9224 (not :9222)
• reattach A gets :9222 again (not :9225)

The port assignment rules can be set via the command line with -c . The default is equivalent to:

where "null" represents the device list. The following example restricts the proxy to a single device and port:

Troubleshooting

Undefined reference to symbol 'log10@@glibc_2.2.5'.

Run this before make : ./configure LIBS="-lm"

error while loading shared libraries: libimobiledevice.so.6

Run sudo ldconfig

ssl sendq retry failed: Undefined error: 0

should only happen with versions > 1.8.5, make sure ios-webkit-debug-proxy is built with same version of libssl that libimobildevice was built with

idevice_id not found

The idevice_id executable may be found as part of the libimobiledevice-utils package.

could not start com.apple.webinspector! success

Remove and rebuild libimobiledevice .

Could not connect to lockdownd (or doesn't work with iOS10+)

Could not connect to lockdownd. Exiting.: No such file or directory. Unable to attach inspector ios_webkit_debug_proxy

Check the device for a prompt to trust the connected computer . Choose "Trust" and try again.

Could not connect to lockdownd. Exiting.: Broken pipe. Unable to attach inspector

Could not connect to lockdownd, error code -<number>. Exiting.

Make sure you're using latest version of ios-webkit-debug-proxy

Inspectable pages list is empty for iOS >= 12.2

Can not see simulator.

• Make sure you started simulator before the proxy
• Check that webinspector switch is enabled (Settings -> Safari -> Advanced -> Web Inspector)
• Most likely simulator's web inspector daemon listens on ipv6 interface, check that you have ::1 localhost line in /etc/hosts

Building under Rosetta (OS X)

libimobildevice formulae depends on [email protected], which is key-only and requires the following env paths for the build

If no luck so far...

Lastly, always try replugging in the USB cable.

IWDP Clients

JSON-formatted APIs are provided for programmatic clients.

• http://localhost:9221/json will list all devices
• http://localhost:9222/json to list device ":9222"'s tabs
• ws://localhost:9222/devtools/page/1 to inspect a tab.

See the examples/README for example clients: NodeJS, C, clientside JS, websocket and more.

View the design document for an overview of the source layout and architecture.

License and Copyright

Google BSD license https://developers.google.com/google-bsd-license Copyright 2012 Google Inc. [email protected]

The proxy uses the following open-source packages:

• libplist 2.2.0
• libusbmuxd 2.0.0
• libimobiledevice 1.3.0

Code of conduct

Security policy, releases 14, contributors 30.

• Preferences
• Forgot your password?
• Browse Source

Context Navigation

Other webkit clients, using the web inspector, hacking on the web inspector, related blog posts, web inspector, elements panel, styles pane, remote web inspector on gtk+ and efl ports, apple web inspector remote experiment.

The Web Inspector allows you to view the page source, live DOM hierarchy, script debugging, profiling and more!

Enabling the Web Inspector

• Enable the Develop menu option in the Advanced preferences.
• Use the optional toolbar button, Develop menu or Inspect Element context menu to access the Web Inspector.
• Find the application's bundle identifier.
• Enter the following command once in Terminal (inserting the bundle identifier) defaults write "bundle-identifier-here" WebKitDeveloperExtras -bool true
• Relaunch the application in order to use the Web Inspector

The Web Inspector can be opened by right clicking anywhere on a web page and choosing Inspect Element . Once open, it highlights the node on the page as it is selected in the hierarchy. You can also search for nodes by node name, id and CSS class name.

The Node pane shows the current node type and name, as well as any element attributes.

Under the Style pane we show all the CSS rules that apply to the focused node. These rules are listed in cascade order with overridden properties striked-out—letting you truly see how cascading stylesheets affect the page layout. All shorthand properties have a disclosure-triangle to show and hide the expanded properties created by the shorthand.

The Metrics pane provides a quick visual look at how margins, borders and padding affect the current node.

Various HTML and JavaScript properties, including length of text nodes, offsetWidth/Height, class names, and parent/sibling information are vieweable in the Properties pane.

See ​ Safari User Guide for Web Developers for more details on other panels of the Web Inspector.

Most of the Web Inspector's code is HTML, JavaScript, and CSS—so it's very easy to implement new features and fix bugs!

​ List Web Inspector bugs and feature requests

​ Introducing the Web Inspector ​ Yet another one more thing… a new Web Inspector! ​ Web Inspector Redesign ​ Web Inspector Updates ​ State of Web Inspector

Shortcut Keys

Using the web inspector remotely.

• The very same version of WebKit has to be used on the other side

​ Safari User Guide for Web Developers In early 2010, an experiment was made to get Web Inspector to run in a plain old web page, debugging a remote web browsing session in another browser window.

A write-up is available here: ​ weinre - Web Inspector Remote , and the relevant source and demo archives are attached to this page.

Attachments (2)

• weinre.zip ​ ( 1.1 MB ) - added by [email protected] 14 years ago . archive containing a runnable demo of weinre
• weinre-src.zip ​ ( 1.1 MB ) - added by [email protected] 14 years ago . archive containing the source for the weinre experiment

Download in other formats:

Powered by Trac 1.2.3 By Edgewall Software .

Hosted by Apple

How to use Safari Web Inspector on Mac, iPad, and iPhone

If you’re a web developer, then you likely already know about Safari’s Web Inspector. But if you’re just starting to use Safari for development or have just begun your Web Development career, this guide will show you the basics for getting started with the Safari Web Inspector on iOS and Mac.

What is the Safari Web Inspector?

For those not yet familiar with the tool, you can use the Safari Web Inspector for help with your web development. It allows you to review page elements, make changes, troubleshoot problems, and review page performance. Apple sums it up with:

Web Inspector is the primary web development tool in Safari. Web Inspector allows you to inspect, tweak, debug, and analyze the performance of your web content in a Safari tab.

Enable and open Safari Web Inspector

You can use the Safari Web Inspector for development on your iPhone, iPad, or Mac. Here’s how to enable and open it on iOS and macOS so you’re ready to use it when you need it.

If you’re going to use the Web Inspector frequently, whether for iOS or Mac, you might as well add the Develop tab to your menu bar so you can access it easily.

• Open Safari on your computer and click Safari > Settings or Preferences from the menu bar.
• Choose the Advanced tab.
• Check the box at the bottom for “ Show features for web developers ” or Show Develop menu in menu bar .

Now when you want to enable the Web Inspector, click Develop > Show Web Inspector from your menu bar.

If you prefer to forgo adding the Develop button to your menu bar, you can access the Web Inspector on Mac with a shortcut. Navigate to the page you want to inspect, right-click on it, and pick Inspect Element from the context menu.

Just keep in mind that if you plan to use Web Inspector for Safari on your iOS device, you’ll need the Develop button in the menu bar on your Mac.

For iPhone and iPad

To use the Web Inspector for iOS on your Mac, grab your USB cable and connect your iPhone or iPad to your computer. Then, follow these steps to enable the tool:

• Open the Settings app on your iPhone or iPad and tap Safari .
• Scroll to the bottom and tap Advanced .
• Enable the toggle for Web Inspector .

Next, make sure Safari is open on your iOS device and your Mac. After that, follow these steps:

1) Click Develop from the Safari menu bar on Mac, and you’ll see your iPhone or iPad listed here.

2) Mouse over the device, and you’ll then see the websites open in Safari on your mobile device.

3) Select the one you want, and the Web Inspector will pop open in a new window for you to use.

Note: If this is the first time you’re using your iPhone or iPad for this work, take your mouse cursor over that iPhone or iPad and click Use for Development . Next, tap Trust on your iPhone or iPad and enter the device passcode. Now, this iOS or iPadOS device is ready to be used for web inspection. If it still shows a correction error, simply unplug the USB cable and plug it in again.

Position the Safari Web Inspector

If you’re using the Web Inspector for iOS, it will remain in its own floating window.

If you’re using it for Safari on your Mac, you can change its position. By default, Web Inspector displays at the bottom of your Safari window. To detach it and place it in a separate window or dock it to the left or right side of Safari, select one of the buttons from the top left of the Inspector window.

Get to know the Web Inspector

The Safari Web Inspector has a handy toolbar and tabs with some options that you can adjust to fit your needs.

Web Inspector toolbar

• “X” to close the Inspector
• Positioning buttons
• Reload button
• Download web archive button
• Activity viewer (resource count, resource size, load time, logs, errors, warnings)
• Element selector button

Web Inspector tabs

You can use all tabs or just a few. You can right-click or hold Control and click the tabs and then check and uncheck those you want to see. Rearrange the tabs by holding and dragging them to their new positions. And all the way to the right of the tabs bar, you’ll see a Settings button. This lets you adjust settings for tabs, indents, source maps, zoom, and more.

• Elements : Current state of the page’s Document Object Model
• Network : Resources loaded by the current page
• Debugger : View the JavaScript execution, variables, and control flow
• Resources : Resources being used by the current page’s content
• Timelines : A view of what the page’s content is doing
• Storage : State that is available to the page’s content
• Canvas : Contexts created from CSS
• Console : Shows logged messages and lets you evaluate JavaScript code

For in-depth help on a specific tab, you can head to the Apple Developer Support site . Select Table of Contents > Get started in Safari Developer Tools > Web Inspector .

Good luck with your inspection!

Hopefully, this guide will help you as you start working with the Safari Web Inspector for your iPhone, iPad, or Mac web development.

If you currently use the Web Inspector and have tips and tricks you’d like to share with others who are just starting, please feel free to comment below!

Check out next: How to view the source code of a webpage in Safari

Switch to the new Teams today to scale your business and achieve more together.

Microsoft Teams

Join a teams meeting.

Control who can join and present in your Microsoft Teams meetings by changing participant settings on the Meeting options page. Minimize meeting disruptions by muting audio and video for individuals or all attendees.

Dynamic view automatically arranges the elements of your meeting for an optimal viewing experience.

Customize how your video feed and content appear to the audience with Presenter mode.

Deliver inclusive and engaging presentations while providing a more interactive experience for your audience with PowerPoint Live in Teams.

Get started with Microsoft Teams today

Frequently asked questions, what is a meeting id, and how do i use it.

Every Microsoft Teams meeting has a unique meeting ID, similar to a meeting invite link. To join a meeting using the meeting ID, go to any web or in-product Teams entry point and enter the meeting ID where indicated. Learn more about how to join a Teams meeting.

Where can I find the Teams meeting ID?

You can find the meeting ID on your email invite. If you didn’t receive a meeting invite, contact the meeting host to request the meeting ID.

If you’re using a Teams personal account, you can only join a meeting using the meeting invite link.

How do I know if my meeting ID is secure?

Meeting ID is long enough to prevent someone from guessing it by randomly typing a number to connect to the meeting. For additional.

What are the system requirements to join a Teams meeting?

You can have a Teams meeting on any device (Windows, iOS, Android, or Linux) or on the web. See the specific hardware requirements for meeting using the Teams app.

Can I send the meeting ID to someone outside my organization?

Yes. With Teams, you can host meetings with people inside and outside your organization. When you schedule a meeting in Teams or Microsoft Outlook using the desktop app or on the web, you can send the unique meeting ID or meeting link to anyone. When meeting with external participants, a meeting lobby can help add increased security to limit uninvited guests. Learn more.

Where can I find more tips and information about online meetings with Teams?

Follow microsoft teams.