entwicklertools safari ipad

David Lozzi

• Debugging Safari/Chrome on your iPhone/iPad/iOS device

In the world of modern web development, Web 2.0 (or is it 3.0?), with HTML5, CSS3, ES6, and frameworks and libraries up the wazoo, our web apps and sites always work seamlessly and flawlessly across all the browsers and devices… hahaha, I know…

The reality is, web development, as great and modern as it is, can have little caveats and nuances across the different browsers: Chrome, Safari, FireFox, Edge, and the Mac/Windows/Linux/iOS/Android versions of each. Thankfully, the big contenders like Netscape (those were the days) and Internet Explorer have finally been deprecated and are no longer expected to be supported in the wild. Even with the great modern web, we still have issues once in a while.

In my recent efforts in troubleshooting one small “nuance” between Chrome on Mac and Chrome and Safari on iOS (yes, all three were acting differently), I needed to debug my browser on my iPad and/or iPhone. I won’t get into what the issue is here, instead, I’ll get into how we can debug the browsers on our iOS devices. I’ve searched for many options, some worked, some didn’t, so below is what worked for me.

All steps below are all running on my:

• MacBook Pro 16-inc, M1 Pro, running macOS Ventura 13.6
• iPad Air (4th) v15.3.1
• iPhone 14 Pro Max iOS v17.0.3

What are we debugging

Before we get started in debugging, we should cover what we’re debugging. In the following debugging methods, we can debug anything our browser can get to: netflix.com, google.com, or our public website. With CI/CD in place, I can make code changes and get them into my dev environment in under 5 minutes, and that suffices at times. I can then hit the site directly on my iPhone and debug as needed.

Sometimes, if I’m really diving into a granular issue and don’t want to wait, I like to use ngrok. Ngrok spins up a gateway from a public address to your local dev machine. This allows me to troubleshoot realtime on my mobile browser while writing the code on my laptop. It’s pretty slick and has saved me a lot of time. I can even share the ngrok address with my colleagues and they can access it on my local machine too! Another option would be to set up DNS for your iPhone to navigate to your laptop while on the same wifi network, and that’s not worth the effort in my book.

Debugging in Chrome on iOS

This is great quick way to check out your console messages without using your Mac.

• In Chrome on your iPad or iPhone, go to chrome://inspect and then press Start Logging .
• Now go do your thing in another tab, keeping this tab open.
• Come back anytime to see any and all console outputs!

See, no laptop/desktop needed, just do it on the mobile device.

This is as far as we can get with Chrome on iPhone/iPad. From my limited understanding, Chrome for iOS uses a WKWebView which gets difficult to actually attach to and debug. If the JavaScript console output isn’t enough, try Safari…

Debugging in Safari on iOS

This is a great method of debugging your iOS devices as it gives you the closest thing to actually debugging on your computer. With this method you can use the dev tools on your Mac to connect to your iOS Safari browser. It’s pretty sweet.

• On your Mac , open Safari, then go to Safari > Settings.
• Click Advanced and click Show Develop menu in menu bar at the bottom of the window. Close the window.
• On your iPad or iPhone , go to Settings > Safari > Advanced.
• Scroll to the bottom and enable Web Inspector .

For this next part, I recommend using a USB cable to attach your iOS device to your Mac. You might get away with doing this over Wifi, as I have in the past, but it’s not reliable .

• Connect your device to your Mac using a USB cable, or try the following over Wifi.
• On your Mac, in Safari, click the Develop menu.
• Near the top of the menu you should see your iPad or iPhone listed.
• Hover over your device in the menu and you’ll see Safari with each tab listed below. Click the one you want to debug.
• The Web Inspector should then appear, now debug it: Elements, Console, Sources, Network, all of it should work!

Good enough for now

Between these two techniques, I’ve been able to troubleshoot my issues quite successfully. Generally, iOS Safari and Chrome act relatively the same, so debugging in Safari helps me clear my Chrome issue. And if it doesn’t I can always throw in more console.log s and see what Chrome is actually doing. Ideally, we should be able to debug the code directly on Chrome, like we can do with Safari, but at this time it’s just not possible.

One other option, for a cost: inspect.dev

There’s a product called inspect.dev that boasts it can debug Safari, Webviews, and Chrome from macOS, Windows, and Linux. Learn more at https://inspect.dev/why . I have not tried them out, I don’t want to pay for something that should be free for developers (hence this blog post).

Let me know if you know other ways to debug your mobile browsers! Leave a comment below or let’s connect on Twitter .

‘Til next time, happy debugging!

Please share the love!

• Click to share on Twitter (Opens in new window)
• Click to share on Facebook (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to email a link to a friend (Opens in new window)
• Click to print (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on Pocket (Opens in new window)
• Click to share on WhatsApp (Opens in new window)

7 thoughts on “ Debugging Safari/Chrome on your iPhone/iPad/iOS device ”

You should also check out using x-code’s simulator. Safari Dev Tools can attach to the Safari session on the simulator and you’re off to the races!

Oh yea, i just found that and then forgot that… thanks I’ll check it out closer and share my findings!

Thanks for article. One small correction Chrome for iOS uses WKWebView.

Thanks for the fix! will update

• Pingback: [FIXED] The image is taking the original dimentions of it on the phone after deployment - Learn How to FIX your angular code

Thanks bro! I’ll follow yours steps, wish me luck.

Leave a Reply Cancel reply

• Collaboration
• Microsoft Forms
• Microsoft Planner
• Microsoft Power Apps
• Microsoft Power Automate (Flow)
• Microsoft Teams
• Microsoft To-Do
• Office 365 Hybrid
• Office 365 SharePoint Online
• Productivity
• SharePoint 2013 Administration
• SharePoint 2013 Apps
• SharePoint 2013 Development
• SP2010 Administration
• SP2010 Authentication
• SP2010 Customization
• SP2010 Infrastructure
• SP2010 User
• SP2010 Workaround
• Uncategorized
• Users Don't Like SharePoint

Top Posts & Pages

• Sending a beautifully formatted email from Power Automate (Flow)
• Saving data from Microsoft Forms into Excel using Power Automate (Flow)
• Use Microsoft Forms to collect data right into your Excel file
• When Power Automate (Flow) can't find your Microsoft Form
• Customize the SharePoint Calendar Colors
• Tracking usage analytics within your Power Apps
• Squeezing a little more formatting out of Microsoft Forms
• There's more than meets the eye: Differences between SharePoint's Oslo and Seattle master pages
• Tips to entertain your users while PowerApps gets their data, i.e. loading screens
• Stack Overflow

• 2,076,766 hits

Discover more from David Lozzi

Subscribe now to keep reading and get access to the full archive.

Type your email…

Continue reading

How To Inspect In Safari On IPad

• Software & Applications
• Browsers & Extensions

Introduction

Safari Inspector is a powerful tool that allows you to inspect, debug, and modify webpages directly from your iPad. Whether you're a web developer, designer, or simply curious about how websites are built, Safari Inspector provides a window into the inner workings of the web.

With the increasing use of iPads for web browsing and content creation, having the ability to inspect and modify webpages directly on the device is invaluable. Safari Inspector empowers users to delve into the structure and behavior of web content, making it an essential tool for anyone involved in web development or design.

In this article, we will explore the ins and outs of using Safari Inspector on iPad. From opening the Inspector to utilizing its powerful tools for inspecting and modifying elements, we will guide you through the process of harnessing the full potential of this feature. Whether you're a seasoned developer or a novice enthusiast, understanding how to leverage Safari Inspector on iPad can enhance your web experience and deepen your understanding of web technologies.

So, grab your iPad, launch Safari, and let's embark on a journey to uncover the hidden layers of the web with Safari Inspector.

Opening Safari Inspector on iPad

To begin our exploration of Safari Inspector on iPad, let's first uncover how to open this powerful tool. Safari Inspector is seamlessly integrated into the Safari browser , allowing users to access it with just a few taps. Here's how to open Safari Inspector on your iPad:

Launch Safari : Start by opening the Safari browser on your iPad. Safari Inspector is a built-in feature, so there's no need to download or install anything extra.

Navigate to the Webpage : Once Safari is open, navigate to the webpage you want to inspect. Whether it's a personal blog, a news site, or an e-commerce platform, Safari Inspector allows you to peek behind the curtain of any webpage.

Access the Inspector : With the webpage loaded, tap the address bar at the top of the Safari browser. Next, select the "Share" icon, which resembles a square with an arrow pointing upwards. This action will reveal a menu of options.

Select "Inspect" : From the menu, scroll to the right until you see the "Inspect" option. Tap on "Inspect," and voila! Safari Inspector will open, presenting you with a wealth of tools and information to delve into the webpage's structure and functionality.

By following these simple steps, you can easily open Safari Inspector on your iPad and begin your journey into the world of web development and design. The ability to inspect and modify webpages directly on your iPad empowers you to gain a deeper understanding of how websites are built and how they function. Now that we've opened Safari Inspector, let's dive into the array of tools and features it offers for inspecting and modifying elements on a webpage.

Using Safari Inspector Tools

Safari Inspector equips you with a robust set of tools designed to facilitate the inspection, debugging, and modification of web content directly from your iPad. Let's delve into the diverse array of tools at your disposal and explore how each one empowers you to gain insights into the inner workings of webpages.

Elements Tab

The Elements tab serves as your window into the structure of the webpage. It presents a hierarchical view of the HTML elements that compose the page, allowing you to inspect and manipulate individual elements. By tapping on specific elements within the Elements tab, you can view and modify their attributes, styles, and content, providing a comprehensive understanding of the webpage's structure.

Console Tab

The Console tab is a powerful tool for debugging JavaScript, logging messages, and executing JavaScript commands directly within the context of the webpage. It enables you to identify errors, test scripts, and interact with the webpage's functionality in real time. The Console tab serves as a valuable resource for diagnosing and resolving issues related to JavaScript execution and behavior.

Sources Tab

The Sources tab provides access to the underlying sources of the webpage, including HTML, CSS, and JavaScript files. It allows you to inspect, debug, and modify these sources, providing a comprehensive view of the webpage's codebase. With the ability to set breakpoints, step through code, and analyze network activity, the Sources tab empowers you to gain deep insights into the inner workings of the webpage's code.

Network Tab

The Network tab offers visibility into the network activity associated with the webpage, including requests, responses, and loading times for various resources. It enables you to analyze network performance, identify potential bottlenecks, and optimize the loading speed of the webpage. By examining network requests and responses, you can gain a comprehensive understanding of the webpage's resource utilization and enhance its overall performance.

Application Tab

The Application tab provides access to various aspects of the webpage's application functionality, including local storage, session storage, cookies, and cache data. It allows you to inspect and modify these application resources, providing insights into how the webpage manages and stores data locally. The Application tab is instrumental in understanding and manipulating the application-specific aspects of the webpage.

By leveraging these powerful tools within Safari Inspector, you can gain a comprehensive understanding of the structure, behavior, and performance of webpages directly from your iPad. Whether you're debugging JavaScript, optimizing network performance, or inspecting the underlying codebase, Safari Inspector equips you with the tools needed to unravel the intricacies of web development and design.

Inspecting Elements on a Webpage

Inspecting elements on a webpage is a fundamental aspect of web development and design, and Safari Inspector on iPad provides a seamless and intuitive interface for this essential task. By delving into the Elements tab within Safari Inspector, you gain the ability to explore the underlying structure of a webpage, inspect individual elements, and modify their attributes and styles. This process not only facilitates debugging and troubleshooting but also offers valuable insights into the composition and layout of web content.

Upon accessing the Elements tab, you are presented with a hierarchical view of the HTML elements that constitute the webpage. Each element, such as headings, paragraphs, images, and buttons, is displayed within a structured tree, reflecting its position and relationships within the document object model (DOM). By tapping on specific elements within this tree, you can inspect a wealth of information, including the element's attributes, styles, dimensions, and content.

Inspecting individual elements unveils a treasure trove of details that empower you to understand how the webpage is constructed. You can view and modify attributes such as IDs, classes, data attributes, and event listeners, providing the flexibility to manipulate the behavior and appearance of elements. Additionally, the Styles pane within the Elements tab allows you to explore the CSS styles applied to each element, including properties such as color, font size, margins, and positioning. This insight into the styling of elements enables you to diagnose layout issues, experiment with design modifications, and ensure visual consistency across the webpage.

Furthermore, Safari Inspector facilitates the inspection of the box model, which illustrates the dimensions and spacing of elements within the layout. By examining the content, padding, borders, and margins of elements, you can gain a comprehensive understanding of their spatial relationships and fine-tune the visual presentation of the webpage.

In essence, inspecting elements on a webpage using Safari Inspector empowers you to unravel the intricacies of web content, from its structural composition to its visual styling. Whether you're troubleshooting layout inconsistencies, experimenting with design variations, or gaining insights into the underlying HTML and CSS, Safari Inspector provides a user-friendly and powerful platform for inspecting and modifying elements directly from your iPad. This capability not only enhances your proficiency in web development and design but also fosters a deeper appreciation for the craftsmanship behind every webpage you encounter.

Modifying and Debugging CSS and JavaScript

Modifying and debugging CSS and JavaScript directly from your iPad is a game-changer, and Safari Inspector empowers you to seamlessly delve into the styles and scripts that shape the visual and interactive aspects of webpages. By leveraging the powerful tools within Safari Inspector, you can not only inspect but also modify and debug CSS and JavaScript, providing a comprehensive platform for refining the visual presentation and functionality of web content.

Modifying CSS

The Styles pane within the Elements tab of Safari Inspector allows you to directly modify CSS styles applied to individual elements. By tapping on specific style properties, such as color, font size, margins, or positioning, you can experiment with real-time modifications and witness their immediate impact on the webpage's appearance. This dynamic approach to modifying CSS empowers you to fine-tune the visual presentation, troubleshoot layout issues, and iterate on design variations directly from your iPad.

Debugging JavaScript

The Console tab within Safari Inspector serves as a robust environment for debugging JavaScript directly within the context of the webpage. By logging messages, executing JavaScript commands, and identifying errors, you can gain insights into the behavior and execution of JavaScript scripts. Additionally, the ability to set breakpoints, step through code, and inspect variables provides a comprehensive toolkit for diagnosing and resolving JavaScript-related issues. Whether you're troubleshooting interactive features, testing script functionality, or analyzing runtime behavior, Safari Inspector equips you with the tools needed to debug JavaScript with precision and efficiency.

Real-time Experimentation

One of the most compelling aspects of modifying and debugging CSS and JavaScript within Safari Inspector is the real-time nature of the process. As you make adjustments to CSS styles or diagnose JavaScript behavior, the changes are immediately reflected on the webpage, allowing you to experiment, iterate, and refine with unparalleled immediacy. This real-time experimentation fosters a dynamic and iterative approach to web development and design, enabling you to fine-tune the visual and interactive aspects of web content with agility and precision.

In essence, Safari Inspector on iPad provides a comprehensive platform for modifying and debugging CSS and JavaScript, empowering you to refine the visual presentation and interactive behavior of webpages directly from your device. Whether you're fine-tuning styles, diagnosing script errors, or experimenting with design enhancements, Safari Inspector offers a seamless and powerful environment for shaping the digital experiences that define the web.

In conclusion, Safari Inspector on iPad serves as a gateway to the inner workings of the web, offering a wealth of tools and features that empower users to inspect, debug, and modify web content with precision and agility. By seamlessly integrating into the Safari browser, Safari Inspector provides a user-friendly and intuitive platform for delving into the structure, behavior, and performance of webpages directly from the iPad.

The ability to open Safari Inspector with just a few taps, navigate through the Elements, Console, Sources, Network, and Application tabs, and leverage the diverse array of tools within each tab underscores the accessibility and power of this feature. Whether you're a seasoned web developer, a budding designer, or simply curious about the mechanics of the web, Safari Inspector offers a window into the craftsmanship and complexity that underpin every webpage.

Inspecting elements on a webpage using Safari Inspector unveils the hierarchical structure of HTML elements, the intricacies of CSS styling, and the spatial relationships defined by the box model. This process not only facilitates troubleshooting and debugging but also fosters a deeper understanding of how web content is constructed and presented.

Furthermore, the ability to modify and debug CSS and JavaScript directly from the iPad elevates the Safari Inspector experience to a dynamic and iterative endeavor. Real-time experimentation with CSS styles and JavaScript behavior empowers users to refine the visual presentation and interactive features of web content with unparalleled immediacy and precision.

In essence, Safari Inspector on iPad transcends the traditional boundaries of web development and design, bringing the power of inspection, debugging, and modification to the fingertips of users. Whether you're refining the layout of a personal blog, diagnosing JavaScript errors on an e-commerce platform, or optimizing the performance of a news site, Safari Inspector equips you with the tools and insights needed to unravel the intricacies of web content.

As the landscape of web technologies continues to evolve, Safari Inspector remains a steadfast companion for those seeking to gain a deeper understanding of the web. By embracing the capabilities of Safari Inspector on iPad, users can embark on a journey of exploration, experimentation, and refinement, shaping the digital experiences that define the modern web.

In the ever-evolving ecosystem of web development and design, Safari Inspector stands as a testament to the power of accessibility, innovation, and empowerment, offering a glimpse into the boundless possibilities that await those who dare to inspect, modify, and create on the canvas of the web.

Leave a Reply Cancel reply

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

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

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

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

Related Post

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

How To Open Developer Tools In Safari

How To Hard Reload Safari

How To View Page Source On Tablet

Where Is My Safari App

Why Does My IPad Keep Shutting Down Safari

How To Display Safari Full Screen On IPad

How To Delete Favorites On IPad Safari

How To Stop Pop-Ups On IPad Safari

Recent stories.

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

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

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

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

• Privacy Overview
• Strictly Necessary Cookies

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

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

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

Produktbereich

Auswirkungen auf funktionen.

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

Debug on iOS Using Safari Developer Tools

To debug your components running on iOS, use Safari Web Inspector. Then, to debug a mobile component, connect your desktop instance of Safari to the Salesforce mobile app running on your virtual device.

Required Editions

• Enable Safari Developer Tools Start the debugging process for your iOS app.
• Debug a Mobile Component (Safari) Use the virtual device builds to debug your Experience site app.

Cookie Consent Manager

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

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

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

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

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

Cookie List

• Apple Watch
• Macwelt Software-Shop
• Bestenlisten
• Software-Shop
• Preisvergleich

Wenn Sie über Links in unseren Artikeln einkaufen, erhalten wir eine kleine Provision. Das hat weder Einfluss auf unsere redaktionelle Unabhängigkeit noch auf den Kaufpreis.

Entwickleransicht einer Webseite auf dem iPad aktivieren

Einige Optionen kann man aber manuell nachrüsten und beispielsweise den Quellcode einer Webseite auf dem iPad ansehen. In der Desktop-Variante klickt man dafür einfach in der Menüleiste auf die Option „Darstellung“ und dort den Eintrag „Quelltext anzeigen“. Auf dem iPad benötigt man dafür deutlich mehr Schritte: Zuerst öffnet man die gewünschte Seite und trägt sie in die Lesezeichen ein. Dafür dient der gebogene Pfeil neben der Adressleiste. Danach wechselt man in die Lesezeichensammlung (mit dem Buchsymbol gekennzeichnet) und tippt auf „Bearbeiten“. Dabei kann man den Namen für das Lesezeichen ändern. In die Adresszeile muss man nun folgenden Java-Code eintragen:

Da das aber etwas mühsam ist, kann man den Code auf der Entwickler-Webseite kopieren und in die Adresszeile des Lesezeichens einfügen. Speichert man dann die Änderungen und wählt das so bearbeitete Lesezeichen in der Sammlung aus, wird der Quelltext der Seite in Safari eingeblendet.

Autor: Halyna Kubiv , Redakteurin

Halyna Kubiv ist seit 2010 bei der Macwelt. Nicht nur Apple-Produkte sind ihre Leidenschaft, sondern auch Themen rund um Fitness und Gesundheit.

Aktuelle Beiträge von Halyna Kubiv:

• Neue iPad Pro & Air: Im Mai kommen sie endlich
• Neue iPads geleakt – bei indischer Behörde registriert
• Neue Macs, iPads und Zubehör diese Woche – ohne Keynote

Wie schalte ich mein iPhone oder iPad im „Entwicklermodus“ ein? -iOS

Jede Version des iPhone versucht, Menschen bessere Funktionen bereitzustellen, die die Handhabung für den Benutzer erleichtern. Eine davon ist die Aktivierung des Entwicklermodus , in dem Alternativen für Entwickler geöffnet werden, um das Gerätesystem anzupassen oder zu erneuern, wodurch eine Reihe versteckter Funktionen geöffnet werden die das System besitzt. In diesem Tutorial zeigen wir Ihnen in einfachen Schritten, wie Sie es aktivieren.

Welche Aktionen können im Entwicklermodus Ihres iPhone oder iPad ausgeführt werden?

Durch die Aktivierung des Entwicklermodus können Sie auf Funktionen zugreifen, die dem Benutzer verborgen waren . Sobald dieser Modus aktiviert ist, können Sie Ihr Betriebssystem nach Ihren Wünschen anpassen oder konfigurieren sowie neue Funktionen mit der Entwicklung neuer Apps einführen und andere aktivieren Optionen, die den normalen Benutzer stoppen, blieben blockiert.

Unter diesen Aktionen haben wir: USB-Debugging, Konfiguration des Sicherheitsmodus, neben anderen Funktionen, die Sie nach Ihren Wünschen anpassen können. Einer der Vorteile von Apple im Sicherheitsteil besteht darin, dass es bei den Anwendungen der iTunes-Plattform besondere Sorgfalt walten lässt um bösartigen Code zu identifizieren, der dem Gerät schaden kann.

Wenn Sie auf den Entwicklermodus zugreifen, werden eine Reihe von Funktionen geöffnet, die für den normalen Benutzer verborgen waren. Diese Konfiguration wird hauptsächlich zum Reinigen oder Debuggen des Systems und zum Entwickeln einiger Anwendungen verwendet .

Wenn Sie Erfahrung als Softwaretreiber oder Programmierer haben und den Entwicklermodus aktivieren möchten, um Anwendungen von Drittanbietern zu installieren, oder wenn Sie Ihr iPhone oder iPad einfach nach Ihren Wünschen steuern oder anpassen möchten, können Sie dafür den Entwicklermodus aktivieren .

Es ist wichtig, dass Sie bedenken, dass es viele Funktionen gibt, die Sie ändern können, aber achten Sie darauf, was Sie manipulieren, da Sie Probleme für Ihr iOS-Betriebssystem erzeugen können , was dazu führt, dass Sie unter anderem Funktionen und Updates entfernen. Es ist ratsam, sich ein wenig mehr über das Thema zu informieren, bevor es zu einem irreparablen Fehler kommt.

Im Hinblick auf neue Trends ist Apple bei Updates für IOS-Betriebssysteme zunehmend technologisch an der Spitze und bringt jedes Mal neue Optionen auf den Markt, um die vorherigen zu verbessern und so dem anspruchsvollen Kunden ein hervorragendes Produkt anbieten zu können.

Wie können Sie den Entwicklermodus auf einem iOS-Gerät aktivieren?

Beim Aufrufen des Entwicklermodus besteht das Hauptziel darin, Aktionen zu ändern oder zu steuern, die den Benutzern verborgen bleiben , was eine größere Freiheit bei der Konfiguration bietet. Wie zum Beispiel das Aktivieren prominenter Funktionen wie USB-Debugging. Als Nächstes zeigen wir Ihnen die Schritte auf einfache Weise:

• Installieren Sie das iPhone- oder iPad-Mobilgerät auf Ihrem kompatiblen Computer, beispielsweise einem Mac oder einem beliebigen Apple-Prozessor .
• Drücken Sie gleichzeitig die Tasten “Home“ und “Power“ auf Ihrem iPhone und iPad für eine Dauer von 10 Sekunden.
• Lassen Sie die “Power“-Taste los, während Sie die “Home“-Taste weiterhin gedrückt halten. Halten Sie dann die Home-Taste 10 Sekunden lang gedrückt.
• Lassen Sie die Home-Taste los und Sie werden sehen, dass der Bildschirm komplett schwarz wird. Was Ihnen bestätigt, dass Sie iPhone DFU Reset erfolgreich eingegeben haben.
• Sobald der Entwicklermodus aktiviert ist, können Sie die Welt der Optionen des iOS-Betriebssystems Ihres iPhone oder iPad genießen, steuern und ändern. Es gibt verschiedene Funktionen, auf die Sie zugreifen können, sobald Sie dieses Menü aufrufen.

Es sollte beachtet werden, dass am Ende des Vorgangs eine Möglichkeit besteht, zu bestätigen, dass Sie es richtig gemacht haben, wenn eine Warnmeldung von iTunes angezeigt wird, die besagt, dass ein iPhone-Gerät im Wiederherstellungsmodus erfasst wurde. Mit dieser Meldung können Sie überprüfen, ob Sie das Verfahren richtig durchgeführt haben.

Wie können Sie den Entwicklermodus auf Ihrem iPhone oder iPad verlassen?

Dieses Verfahren ist sehr einfach und schnell, indem Sie einfach das Anpassungsmenü anzeigen und darauf klicken, das normalerweise ein graues zahnradförmiges Symbol ist, das auf dem Bildschirm Ihres iPhone oder iPad angezeigt wird, und die folgenden Schritte ausführen:

• Klicken Sie auf die Option Einstellungen (Entwickleroptionen oder zusätzliche Einstellungen) Ihres Mobilgeräts. Klicken Sie auf das Menü Entwickleroptionen .
• Wenn Sie feststellen, dass der Abschnitt USB-Debugging deaktiviert ist, fahren Sie mit der Deaktivierung der Entwickleroption fort. Sie können den Entwicklermodus beliebig oft aktivieren und deaktivieren.

Related Articles

So sperren Sie meine Computertastatur vorübergehend mit einer Verknüpfung in Windows

Wie füge ich das Kalender- und Uhr-Widget zum Desktop meines Windows 10-PCs hinzu?

So ändern Sie die Ubuntu-Systemsprache vom Terminal aus von Englisch auf Spanisch

So erstellen Sie Verzeichnisse und Unterverzeichnisse in Linux mit dem Befehl „mkdir“.

Was tun, wenn ich Bilder oder JPG-Dateien in Windows 10 nicht öffnen kann?

So entfernen und entfernen Sie das Skript aus einem partitionierten ROM unter Android

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.

Privacy Overview

• Entwicklertools
• iPhone Entwicklertools verwenden

iPhone Entwicklerkonsole in Safari öffnen

Zu Beginn gibt es einige Informationen dazu was benötigt wird, um Safari zu debuggen.

In diesem Artikel werde ich dir zwei Varianten vorstellen, mit denen iOS Safari debugged werden kann. Alle hier vorgestellten Verfahren wurden mit einem MacBook Pro 13 Zoll (2017) und einem iPhone SE (2. Generation) getestet. Das MacBook ist auf Version 11.0.1 (macOS Big Sur) und das iPhone ist auf Version 14.1.

Erste Variante (Echtes iPhone debuggen)

• iPhone deiner Wahl
• macOS - (MacBook, iMac, Mac Mini)

Zweite Variante (iPhone Simulator Debuggen)

• Xcode Simulator (Software)

Safari vorbereiten

Im ersten Schritt müssen wir den Safari Browser vorbereiten. Falls du die Entwicklerkonsole von Safari regelmäßig nutzt, wirst du diesen Schritt wahrscheinlich schon erledigt haben.

Dazu öffnest du die Safari Einstellungen und gehst dort auf die Option "Erweitert". Dort klickst du auf den Punkt "Entwickler" in der Menüleiste .

Jetzt wirst du das folgende Menü in der Safari-Leiste sehen.

Sobald du diesen Punkt erledigt hast, kannst du dich entschieden welche Variante du nutzen willst. Entweder ein echtes Gerät debuggen oder mit dem Xcode Simulator arbeiten.

iPhone debuggen

Um die Variante zu nutzen brauchst du ein iPhone, dann kannst du mit den folgenden Einstellungen fortfahren.

iPhone Einstellungen

• iOS Einstellungen öffnen und Safari auswählen
• Im Safari Menü nach ganz unten scrollen und "Erweitert" auswählen.
• Den Punkt "Webinformationen" aktivieren.

Verbindung zwischen MacOS und iPhone herstellen

Um die Verbindung herzustellen benötigst du ein Lightning zu USB/USB-C Kabel . Falls die Verbindung zum ersten Mal hergestellt wird erscheint eine Anfrage auf dem iPhone, ob du diesem Computer vertrauen kannst. Diese musst du noch bestätigen und danach kannst du auch schon loslegen.

Wenn du nun auf dem iPhone eine Seite im Safari öffnest, bekommst du im Entwicklermenü dein iPhone angezeigt und kannst die geöffneten Webseiten auswählen und die Entwicklerkonsole für dein iPhone verwenden.

Wenn wir nun ein Element in der DOM auswählen, sehen wir dass immer in Echtzeit auf dem iPhone. So können wir wie gewohnt Elemente verändern/hinzufügen oder auch die JavaScript-Konsole abrufen.

Das wär's nun zur Variante mit dem eigenen iPhone - Ein Nachteil ist, dass, wenn man immer das Neuste testen will oder ein Kunde einem ein bestimmtes Gerät mitteilt, so braucht man immer dieses Gerät, weshalb die Variante mit dem Simulator oft nützlicher ist.

iPhone Simulator debuggen

Um den Simulator zu nutzen brauchst du wieder das aktivierte Entwicklermenü und du musst Xcode installiert haben. Das findest du im AppStore auf deinem Mac.

Xcode Herunterladen

Nachdem du Xcode installiert hast, kannst du über die Spotlightsuche (oben rechts die Suche oder CMD + Space) nach " simulator " suchen, dort findest du den Simulator.

Sobald du diesen startest, wird je nach Einstellung entweder direkt ein Gerät geöffnet oder nicht. Falls bei dir keines gestartet wird, kannst du oben über die Menüleiste ein Gerät auswählen.

Zum Testen wählen wir jetzt ein iPhone 12 Pro Max aus, damit testen wir das aktuell neueste Gerät.

Jetzt kannst du sehen wie das iPhone geladen wird und danach auch schon Safari starten. Wenn du nun wieder auf deinem Mac den Safari-Browser startest, kannst du dort über die Entwicklerkonsole die Webseite auswählen, an der du arbeiten willst.

iPads testen

Genau so wie du das iPhone auswählen konntest, kannst du auch die verschiedenen aktuellen iPads testen. Wähle dazu zum Beispiel das iPad Pro (9.7 Zoll) aus und es erscheint auch im Safari Entwicklermenü. Dort kannst deine Webseite debuggen.

Der Vorteil vom Simulator liegt auf der Hand. Man spart es sich das Gerät zu kaufen und braucht nur ein macOS Gerät. Ein Nachteil vom Simulator ist, dass man das Userinterface und die Toucheingaben nicht wirklich gut testen kann. Um ein Gefühl für diese Eigenschaften zu bekommen, ist ein natives Gerät immer besser.

Hinterlasse mir gerne einen Kommentar zum Artikel und wie er dir weitergeholfen hat beziehungsweise, was dir helfen würde das Thema besser zu verstehen. Oder hast du einen Fehler entdeckt, den ich korrigieren sollte? Schreibe mir auch dazu gerne ein Feedback!

Es sind noch keine Kommentare vorhanden? Sei der/die Erste und verfasse einen Kommentar zum Artikel "iPhone Entwicklertools verwenden" !

Der User Agent ist ein nützliches Mittel im Browser um systembedingte Ausgaben zu erzielen. Der User Agent kann sogar manipuliert werden!

Was genau ist eigentlich ein Cookie? Wie viele MB kann ein Cookie speichern? Und wo liegt überhaupt der Unterschied zum Local Storage? Ich erkläre es dir hier!

Wir behandeln das Konzept der Memoisation mittels verschiedener Varianten. Über eine Klasse, eine Funktion, und lru_cache aus den functools.

Safari: Entwicklertools aktivieren - so funktioniert's

Für den Blick "unter die Motorhaube" einer Webseite bietet Safari die Entwicklertools. Wie Sie diese ganz einfach aktivieren, lesen Sie in diesem Praxistipp.

Die mit einem Symbol oder farbiger Unterstreichung gekennzeichneten Links sind Affiliate-Links. Kommt darüber ein Einkauf zustande, erhalten wir eine Provision - ohne Mehrkosten für Sie! Mehr Infos.

Die Entwicklertools im Safari-Browser aktivieren

Um die Entwicklertools in Safari zu aktivieren, sind nur wenige Klicks erforderlich:

• Öffnen Sie Safari und klicken Sie in der Menüleiste auf die Option "Safari" -> "Einstellungen".
• Klicken Sie jetzt auf das Icon "Erweitert" und aktivieren Sie die Checkbox ganz unten "Menü Entwickler in der Menüleiste anzeigen".
• Sie können die Entwicklertools nun über die Menüleisten-Option "Entwickler" aufrufen.

Neueste Videos

Safari entwicklertools aktivieren - safari > einstellungen.

Safari Entwicklertools aktivieren - Safari > Einstellungen

(Screenshot: Felix Gillhuber)

Safari Entwicklertools aktivieren - Erweitert > "Menü Entwickler in der Menüleiste anzeigen" anklicken

Safari Entwicklertools aktivieren - Erweitert > "Menü Entwickler in der Menüleiste anzeigen" anklicken

Safari Entwicklertools aktivieren - "Entwickler" in der Menüleiste

Safari Entwicklertools aktivieren - "Entwickler" in der Menüleiste

In einem weiteren Praxistipp erklären wir Ihnen, wie Sie Safari immer im privaten Modus starten können.

Aktuell viel gesucht

50 Whatsapp Status Sprüche zum Nachdenken

Handynummer suchen und Besitzer herausfinden - so geht's

Handynummer suchen und Besitzer herausfinden - so geht's

KI-Bilder erstellen: Diese Möglichkeiten gibt es

Warum sind Rolex-Uhren so teuer? Wir klären auf

Payback-Punkte auf Konto überweisen lassen - so einfach geht's

Payback-Punkte auf Konto überweisen lassen - so einfach geht's

Word: Seitenzahl ab Seite 3 - Nummerierung von 1 beginnend

Windows 10: Screenshot erstellen - so klappt's

Windows 10: Screenshot erstellen - so klappt's

YouTube Musik runterladen - so klappt der Download

Windows 10: Fehler 0x80070643 beheben - so geht's

Windows 10: Fehler 0x80070643 beheben - so geht's

Die fünf besten kostenlosen Email-Adressen: E-Mail Anbieter im Vergleich

Wertvolle 2 Euro Münzen: So erkennen Sie seltene Exemplare

Unbekannte Telefonnummer identifizieren: So klappt's mit der Rückwärtssuche

Unbekannte Telefonnummer identifizieren: So klappt's mit der Rückwärtssuche

Neueste MacOS-Tipps

• Mac: Zwischenablage anzeigen - so geht's
• Mac OS: Unendlich-Zeichen schreiben - so klappt's
• Apple ID: Einstellungen aktualisieren - so gehen Sie vor
• Hochzahlen am Mac: Hoch 2 per Tastenkombination & Co.
• Abgesicherter Modus beim Mac starten: So klappt's
• Excel: Daten konsolidieren - so funktioniert's
• Umschalttaste auf dem Mac: Hier ist sie auf der Apple-Tastatur
• Weitere neue Tipps

Beliebteste MacOS-Tipps

• At-Zeichen mit Apple-Mac-Tastatur (@) - so geht's
• iMac und MacBook zurücksetzen: Werkseinstellung herstellen
• macOS Versionen: Alle Betriebssysteme im Überblick
• Mac: Externe Festplatte wird nicht erkannt - was tun?
• Programme von Mac deinstallieren - wie geht das?
• Android mit Mac verbinden: 3 Möglichkeiten im Check
• Weitere beliebte Tipps

Die besten Shopping-Gutscheine

• Gutscheine von OTTO
• Deinhandy.de-Gutscheine
• Rabatte bei Saturn
• Home24-Rabattcodes
• Weitere Gutscheine

• Tests & Ratgeber

Entwicklertools in Safari

Safari: entwicklertools aktivieren.

03.02.2023, 09:43 Uhr

Marco Wehrens

Wie werden die Entwicklertools bei Safari aktiviert?

• Im Menü am oberen Rand des Bildschirms wählen Sie den Punkt „Safari“ und dann die Option „Einstellungen“ aus.
• In dem Fenster, das sich nun öffnet, wählen Sie den Reiter „Erweitert“ aus und aktivieren die Option „Entwickler in der Menüleiste anzeigen“. Nun sollte im Menü oben der Punkt „Entwickler“ erscheinen.
• Klicken Sie auf diesen Punkt, sehen Sie verschiedene Optionen.
• Deaktivieren Sie beispielsweise die Anzeige von Bildern oder verhindern Sie die Ausführung von JavaScript auf einer Webseite.
• Saturn Gutscheine
• Galaxus Gutscheine
• ebay Gutscheine
• Cyberport Gutscheine
• LIDL Gutscheine
• Memory PC Gutscheine
• Euronics Gutscheine
• BAUR Gutscheine
• Toom Gutscheine
• H&M Gutscheine
• Luftreiniger im Vergleich
• Rasierer im Vergleich
• Ergonomische Bürostühle im Vergleich
• Vakuumierer im Vergleich
• Handstaubsauger im Vergleich
• Browsergames Vergleich
• Tagesgeld Vergleich
• Kreditkarten Vergleich
• Jobs & Karriere
• Balkonkraftwerke
• Widerrufsbelehrung
• Datenschutz
• Privatsphäre
• Widerruf Tracking
• Jugendschutz
• Transparenz
• Verantwortung
• Einfach werben auf COMPUTER BILD
• Bildnachweise

• c't Magazin Logo c't – Magazin für Computertechnik
• iX Magazin Logo iX – Magazin für professionelle Informationstechnik
• MIT Technology Review Logo MIT Technology Review – Das Magazin für Innovation von Heise
• c't Fotografie Logo c't Fotografie - Das Magazin rund ums digitale Bild
• Mac an i Logo Mac & i – Nachrichten, Tests, Tipps und Meinungen rund um Apple
• Make Logo Make – Kreativ mit Technik
• Alle Magazine im Browser lesen

${intro} ${title}

Mac: entwicklertools in safari aktivieren.

Sie möchten die Entwicklertools im Menüband von Safari angezeigt bekommen, wissen aber nicht wo sich die Einstellung dafür befindet? So geht's:

• Katharina Witte

Es kann durchaus nützlich sein, die Entwicklertools in Safari zu aktivieren. Einige interessante Möglichkeiten sind dort versteckt, wie u.a. die JavaScript-Konsole oder das Schreiben von Makros. Wir zeigen Ihnen, wo Sie die Einstellung dazu finden.

Entwicklertools aktivieren bei Safari

Folgen Sie unserer Schritt-für-Schritt-Anleitung oder schauen Sie sich unsere Kurzanleitung an.

Entwicklertools anzeigen lassen Mac (4 Bilder)

1. Schritt:

Kurzanleitung: entwicklertools aktivieren bei safari.

• Öffnen Sie Safari auf Ihrem Mac und klicken Sie oben in der Leiste auf " Safari ".
• Wählen Sie im Untermenü den Punkt " Einstellungen... " aus. Alternativ können Sie auch die Tastenkombination [Cmd] + [,] drücken.
• Klicken Sie bei den Einstellungen auf " Erweitert " und setzen Sie einen Haken bei " Menü " Entwickler" in der Menüleiste anzeigen ".
• Der Punkt " Entwickler " erscheint sofort in der Menüleiste und Sie können dort verschiedene Optionen wählen.
• Kleine Hacks mit den Entwicklertools von Chrome und Firefox
• Android: Entwickleroptionen aktivieren/deaktivieren
• Word: Entwicklertools aktivieren und nutzen

Ihre Meinung ist uns wichtig! Sagen Sie uns Ihre Meinung zu heise online und gewinnen Sie einen Amazon-Gutschein!

Wie finden sie unsere angebote.

Helfen Sie mit, unsere Angebote zu verbessern, indem Sie an einer kurzen Umfrage teilnehmen. Als Dankeschön verlosen wir unter allen Teilnehmenden 20 Amazon-Gutscheine im Wert von je 25 €.

Konsole und Quelltext im Blick

Web inspector für ios 15: safari-erweiterung für entwickler.

Mit Web Inspector bietet sich nach Vidimote, Keyword Search , Amplosion und Overamped noch eine sehenswerte Safari-Erweiterung für iPhone und iPad zum Download im App Store an. Diese erweitert den Apple-Browser nun endlich auch auf den Mobilgeräten Cupertinos um eine Taste zum Einblenden der wichtigsten Web-Entwickler-Werkzeuge.

Die kostenlose Safari-Erweiterung, die auf In-App-Käufe, Werbung und Nutzer-Tracking verzichtet, ist vergleichbar mit dem Web Inspector, den Apple seinem Desktop-Browser ab Werk mit auf den Weg gegeben hat , auf iPhone und iPad aber zurückhält.

Quelltext und Javascript-Konsole

So blendet die Erweiterung bei Bedarf eine Quelltext-Ansicht ein, die den Zugriff auf die sogenannten DOM-Objekte der aktiven Webseite gewährt. Hier lassen sich ausgesuchte Bereiche der Webseite inspizieren, editieren und genauer überprüfen. So stehen, wie auch auf dem Desktop, Möglichkeiten zur Verfügung die Netzwerk-Requests der offenen Webseite zu prüfen und einen Zeitlichen Verlauf des Rendering-Ablaufs einzusehen, der alle Ressourcen der Webseite (von Bildern über Skripte bis hin zu CSS-Stylesheets) berücksichtigt.

Eine JavaScript-Konsole hilft beim Beheben von Fehlern auf der Webseite, zeigt Warnungen an und ist oft der erste Anlaufpunkt bei Debugging-Ausflügen im Netz.

Leider nicht im Hintergrund aktiv

Web Inspector ist eine der ersten Safari-Erweiterungen die einen klassischen Web Inspector mit dem beschriebenen Funktionsumfang zur Verfügung stellt – andere dürften schon in Kürze folgen. Bis kein besserer Download verfügbar ist, empfehlen wir den hier mitlesenden Webentwicklern den Zugriff.

Ihr solltet aber die Einschränkungen kennen, auf die Entwickler Zhenyi Tan in seinem Blog aufmerksam macht : Da die Web-Erweiterung unter iOS nicht kontinuierlich im Systemhintergrund laufen kann, lassen sich JavaScript-Meldungen und Netzwerk-Requests ausschließlich nach den Laden der Seite anzeigen und nicht schon währenddessen.

Deine Anmerkung zum Artikel

Mit Absendung stimmst du unseren Datenschutzbestimmungen zu

Zum Absenden des Formulars muss Google reCAPTCHA geladen werden. Google reCAPTCHA Datenschutzerklärung

Google reCAPTCHA laden

Klingt super, wenn man nun auch irgendwann mal einen Mail Header sehen könnte oder know wifi löschen, wäre das klasse….

Kleiner Tipp, iPhone an Mac anschließen, Safari auf dem Mac starten, Entwickler-Tools öffnen. Schon gibt’s die gleichen Entwickler-Tools für iOS-Safari.

Ohne Mac ist das aber keine Lösung. Ich habe die hier genannte App auch sofort auf iPhone oder iPad installiert. Hat natürlich noch potenzial aber immerhin ein Anfang. Langfristig ersetzt es den Mac.

Gibt es wirklich Menschen, die den Safari zum entwickeln nutzen? Der Chrome ist dafür doch viel besser?

Der Safari nach Chrome das Web auch dominiert ist es wichtig Safari auch zu testen. Ich nutze ihn auch zum entwickeln. Mein Kollege nutzt Chrome. So haben wir entdecken wir zeitnah Fehler auf Websites.

…nicht zum entwickeln, aber zum debuggen, wenn es etwas nicht funktioniert, sind die Tools auch unter Safari sinnvoll.

Grandios! Wird sofort installiert. Danke! — Die einzige mir bekannte App, die ich bisher immer mal wieder für diese Zwecke genutzt habe, ist „Inspect Browser“. Nicht schön, aber erfüllt ihren Zweck: https://apps.apple.com/de/app/inspect-browser/id1203594958

Nach wie vor danke für den Tipp! Die Extension kommt aber leider tatsächlich nicht an „Inspect“ ran.

Die Achoo html Extension ist auch ganz nett. Dort kann man auch den Quelltext einsehen, aber zusätzlich hat man noch einen WYSIWYG Editor. Man kann also quasi die Seite live editieren. Ganz praktisch um bestimmte Elemente vor dem drucken zu entfernen.

Redet mit. Seid nett zueinander! Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

iTunes is the world's easiest way to organise and add to your digital media collection.

iTunes wurde auf Ihrem Computer nicht gefunden. Jetzt iTunes holen, um Inhalte aus dem iTunes Store zu laden.

iTunes ist schon installiert? Klicke auf „Ich habe iTunes“, um es jetzt zu öffnen.

App Store > Entwickler-Tools

• Terminal & SSH
• Pythonica: Code and Debug
• Bluetooth Inspector
• Python Recipes Pro
• Discover icons | SF Symbols
• PasteMe - Pastebin Client
• SNMP & SSH Terminal
• PortX - SSH, SFTP Client
• Simple Server: HTTP Server
• Python3 Charm - AI Leaning
• MQTT Home Automation
• San Fransymbols
• col.or - AR Color Name Finder
• Apple Developer
• Device Monitor²
• Termius: Terminal & SSH client
• Text Editor - Document Editor
• SSL Toolkit
• Breadpad - SPICE Simulator
• Uptime Kuma Manager
• WSS WebSocket Client
• Programmierrechner
• Web Inspector
• NeoServer -Docker/SSH/SFTP
• OctoPrint | Klipper - Obico
• Harbour - Docker Manager
• Replit: Idea to software, fast
• Logger for Shortcuts
• Textastic Code Editor
• Morsels — Code Snippets
• View Source Premier
• HTML Editor
• Terminal Emulator
• Spck Editor
• Programming Notebook PRO
• Globe Topper
• Code Develop IDE
• Wireshark Helper - Decrypt TLS
• Wlan Signalstärke - Wifiman
• CodeSandbox
• php$ - programming language
• MongoLime - manage databases
• SSH Files – Secure ShellFish
• TablePlus - Database Client
• Inspect Browser
• SAP Build Apps Preview
• CodeSnack IDE
• Code - Compile & Run Program
• Hexer — Hex File Viewer
• Dmanage : Browser,Files
• Analytics for Cloudflare®
• Store Redirect Switch
• iHTTP Tracker -Network monitor
• RevenueCat Sales: RCReporting
• Core Data Manager
• JavaScript Code-Pad Editor&IDE
• Http traffic capture
• Code Recipes Pro
• AS Lytx: Trends & Analytics
• Adaptivity (A)
• Wifi Analyzer: Network Scanner
• Userscripts
• ServerDog Pro: Status, SSH
• SQLed - SQL Datenbank Manager
• Arduino Bluetooth Pro
• Core Beacons
• ServerCat - SSH Terminal
• Retool Mobile
• Nmap Handbook
• Http Traffic pro - sniffer
• Kuber - Kubernetes Dashboard
• PrivateID Age
• C++ IDE Fresh Edition
• Buffer Editor - Code Editor
• Koder Code Editor
• WebTraffic - Inspect network
• Rest – HTTP API Client
• Privacy Manifestor
• DraftCode for PHP IDE
• Quelltext Reader
• HTML Editor - .html Editor
• Desktop Browser • Zoomable
• Pyto - Python 3
• Bluetooth-Assistent
• RegEx Lab: Regular Expressions
• Flutter UI Templates
• Netdata server monitoring
• Working Copy - Git client
• Python Code-Pad Compiler&IDE
• HueHouse - Color Picker Tool
• Text Editor
• DashTabs: Firebase, AdMob …
• [3D] Preview
• Store Redirect
• iPulse - Monitor Your Device
• UCoW - Ultimate Code Wrapper
• MQTT Terminal Pro
• SQLiteFlow - SQLite Editor
• Flutter Cheats
• Cookie Editor Safari Extension
• SeeLess - C Compiler
• JetBrains Space
• Proxyman - Network Debug Tool
• SecurityKit - Developer Tools
• API Tester: Scripts & Terminal
• App Icon Generator
• Spectre VPN
• MiniHog View PostHog Analytics
• ActionsHub - GitHub Actions
• Tutorials iOS-Programmierung
• CONTI+ ServiceAPP
• eTicket.app
• Juno – Python and Jupyter
• Juno Connect: Jupyter Client
• Agile Planning Poker
• TCP UDP Debugger
• MermaidEditor
• nRF Device Firmware Update
• VSCoW - Code Wrapper
• Enchanted LLM
• RC Lytx: RevenueCat Analytics
• MySQL Mobile Client
• Auto Tapper Tap
• Programming Notebook LITE
• PPHub For GitHub - Developer
• SF Symbols Reference
• Haptics - Test Haptic Feedback
• AirTerminal - BLE Terminal
• BetterAppIcons
• 'Proto' für Figma
• BlueTools Bluetooth Assistant
• Bluetooth Terminal
• xTerminal - SSH Terminal Shell
• Cookie-Editor
• Playing Haptics
• Python Recipes
• WebSSH - SysAdmin Tools
• Lorem Ipsum Generator Keyboard
• Neural Object Detector
• Runestone Text Editor
• Chikii - SSH Server Toolbox
• Flutter Offline Docs
• GitBlur - Best GitLab App
• ScriptWidget
• a-Shell mini
• Storm Sniffer - Packet Capture
• App Store Connect
• kiwi - CI/CD Build Status
• Pro Markdown Editor and Reader
• Python Editor - .py Editor
• FTP Files - Server Storage
• Docker Management
• Ruby 2.0-run code,pro
• Lighthouse Score
• WhaleDeck – Docker Manager
• Web Monitor - Down or Just Me
• SMTPTester - Test smtp service
• Changes for Linear
• SSH Term Pro
• Tanuki for GitLab
• Continuous .NET C# and F# IDE
• Code Runner - Compiler&IDE
• ESP32 BLE Terminal
• Wuma - Uptime Kuma Manager
• Mango 5Star
• Entwickler-Tools
• Unterhaltung
• Essen und Trinken
• Grafik und Design
• Gesundheit und Fitness
• Zeitungen und Zeitschriften
• Nachrichten
• Foto und Video
• Produktivität
• Nachschlagewerke
• Soziale Netze
• Dienst­programme

Auf der Suche nach Mac Apps? Jetzt den Mac App Store besuchen.

View in English

Web development tools

Apple has brought its expertise in development tools to the web. Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize websites for peak performance and compatibility on both platforms. And with Responsive Design Mode, you can preview your web pages in various screen sizes, orientations, and resolutions. Access these tools by enabling the Develop menu in Safari’s Advanced preferences.

Web Inspector

Web Inspector is your command center, giving you quick and easy access to the richest set of development tools ever included in a web browser. It helps you inspect all of the resources and activity on a web page, making development more efficient across Apple platforms. The clean, unified design puts each core function in a separate tab, which you can rearrange to fit your workflow. You can even debug memory using Timelines and tweak styles using widgets for over 150 of the most common CSS properties.

Elements. View and inspect the elements that make up the DOM of a web page. Clicking elements from the fully editable markup tree on the left reveals the node’s styles in the middle sidebar, with more details in the right sidebar.

Console. Type JavaScript commands in the console to interactively debug, modify, and get information about your webpage. View logs, errors, and warnings emitted from a webpage, so you can identify issues fast and resolve them right away.

Sources. Find every resource of a webpage, including documents, images, scripts, stylesheets, and more. Use the built-in debugger with data type and code highlights to troubleshoot and understand the script execution flow.

Network. See a detailed list of all network requests made to load every web page resource, so you can quickly evaluate the response, status, timing, and more.

Timelines. Understand all the activity that occurs on an open web page, such as network requests, layout and rendering, JavaScript events, memory, and CPU impact. Everything is neatly plotted on a timeline or recored by frame, helping you discover ways to optimize your site.

Storage. Find details about the data stored by a web page, such as application cache, cookies, databases, indexed databases, local storage, and session storage.

Graphics. Preview animation keyframes and their classes from HTML5 canvas, JavaScript animations, CSS animations, and CSS transitions. Dial in the motion and the visual design of web pages.

Layers. Visualize compositing layers in 3D to understand where layers are generated and in what order they'll render. Use layers to help find unexpected memory consumption or excessive repaints on a web page.

Audit. Preform audits against a web page to certify that common code and accessibility errors are addressed. Confirm that a web page follows design guidelines and specifications of modern web pages.

Responsive Design Mode

Safari has a powerful new interface for designing responsive web experiences. Responsive Design Mode provides a simple interface for quickly previewing your web page across various screen sizes, orientations, and resolutions, as well as custom viewports and user agents. You can drag the edges of any window to resize it. And you can click on a device to toggle its orientation, taking it from portrait to landscape — and even into Split View on iPad.

• Search the community and support articles
• Microsoft 365 and Office
• Search Community member

Ask a new question

Solver tool in Excel for iPad

Report abuse, replies (7) .

Hi.   There is, but I have not been able to install it as of yet.  I'm missing something.

I hope someone can jump in with the final steps.

On the ipad, go to store.office.com

I found solver on the main page, but you can filter by "'Excel", and find Solver.

I followed the instructions, and it says I have the add-inn.

However, on the ipad, when I go to Insert / Add-ins/ See All.

I don't see it there.   I'm not  sure what the next step is.

10 people found this reply helpful

Was this reply helpful? Yes No

Sorry this didn't help.

Great! Thanks for your feedback.

How satisfied are you with this reply?

Thanks for your feedback, it helps us improve the site.

Thanks for your feedback.

4 people found this reply helpful

Oh.  I get it!

The documentation is totally messed up.

The general idea is that Excel for iPad can not run macros.  So, in order for Solver to work, a server runs the program in the background.

As such, the workbook can not be located on the iPad.  It appears to only work in Office Online.

On the iPad, using the Safari browser, the location is www.office.com

Click the online version of Excel.

In the online version, there is a menu item "Insert" / "Office Add-ins"

Solver is located there.

Not sure, but one might have to go to the office store (mention previously) to get Solver.

Boy, that documentation was terrible.!!!

I think I read somewhere that there is a 30 second limit to the Server working a Solver problem.

= = = = = = =

HTH  :>)

Dana  

14 people found this reply helpful

2 people found this reply helpful

Oh.  I get it! The documentation is totally messed up. The general idea is that Excel for iPad can not run macros.  So, in order for Solver to work, a server runs the program in the background. As such, the workbook can not be located on the iPad.  It appears to only work in Office Online. On the iPad, using the Safari browser, the location is www.office.com Click the online version of Excel. In the online version, there is a menu item "Insert" / "Office Add-ins" Solver is located there. Not sure, but one might have to go to the office store (mention previously) to get Solver. Boy, that documentation was terrible.!!! I think I read somewhere that there is a 30 second limit to the Server working a Solver problem. = = = = = = = HTH  :>) Dana  

So, does this mean that you can't use Solver with the iPad's Excel app but only through a web browser connection with Office Online?

1 person found this reply helpful

Hello John,

Welcome to Microsoft Community.

Unfortunately the Excel Solver Add-in is not available for Excel for iPad. It is currently available for Excel for Windows versions and as suggested above.

You may refer to the following Microsoft Communities thread which talks about the same issue:

http://answers.microsoft.com/en-us/office/forum/office_365hp-excel/excel-solver-on-ipad/1499f49f-cfc6-4230-ab52-786fc095b9b2

Hope the above information helps.

Hello John, Welcome to Microsoft Community. Unfortunately the Excel Solver Add-in is not available for Excel for iPad. It is currently available for Excel for Windows versions and as suggested above. You may refer to the following Microsoft Communities thread which talks about the same issue: http://answers.microsoft.com/en-us/office/forum/office_365hp-excel/excel-solver-on-ipad/1499f49f-cfc6-4230-ab52-786fc095b9b2 Hope the above information helps. Thank you.

Thank you for your reply.  You should, however, review the following press release from Frontline that appears to state the contrary.  http://www.solver.com/frontline-systems-releases-new-solver-add-excel-2016-excel-online-and-excel-ipad

Question Info

• Norsk Bokmål
• Ελληνικά
• Русский
• עברית
• العربية
• ไทย
• 한국어
• 中文(简体)
• 中文(繁體)
• 日本語

Actualizar el iPhone o iPad

Obtén información sobre cómo actualizar el iPhone o iPad a la versión más reciente de iOS o iPadOS.

Puedes actualizar el iPhone o iPad a la versión más reciente de iOS o iPadOS de forma inalámbrica.

Si la actualización no aparece en el dispositivo, usa la computadora para actualizarlo manualmente. Obtén información sobre cómo actualizar el dispositivo de forma manual si usas una Mac con macOS Catalina o versiones posteriores, o si usas una Mac con macOS Mojave o versiones anteriores, o una PC con Windows .

Actualizar el iPhone o iPad de forma inalámbrica

Realiza un respaldo del contenido de tu dispositivo con iCloud o una computadora.

Conecta el dispositivo a una fuente de alimentación y a Internet con Wi-Fi .

Ve a Configuración > General y, luego, toca Actualización de software.

Si aparece más de una opción de actualización de software disponible, selecciona la que desees instalar.

Toca Instalar ahora. Si aparece la opción Descargar e instalar, tócala para descargar la actualización, ingresa el código y, luego, toca Instalar ahora. Obtén información sobre qué hacer si olvidaste el código .

Si aparece una alerta al actualizar el sistema de forma inalámbrica

Obtén información sobre qué hacer si aparece un mensaje de alerta al intentar actualizar el dispositivo de forma inalámbrica .

Algunas actualizaciones de software no están disponibles de forma inalámbrica. Es posible que las conexiones VPN y proxy impidan que el dispositivo se conecte a los servidores de actualización.

Si necesitas más espacio al actualizar el sistema de forma inalámbrica

Si aparece un mensaje en el que se indica que debes eliminar apps temporalmente debido a que el software necesita más espacio para la actualización, toca Continuar para permitir que se eliminen las apps. Una vez completada la instalación, estas apps se volverán a instalar automáticamente. Si tocas Cancelar, puedes  eliminar contenido de forma manual  del dispositivo para tener más espacio.

Personalizar las actualizaciones automáticas

El dispositivo puede actualizarse automáticamente durante la noche mientras se carga.

Activar las actualizaciones automáticas

Ve a Configuración > General > Actualización de software.

Toca Actualizaciones automáticas y, luego, activa Descargar actualizaciones de iOS.

Activa Instalar actualizaciones de iOS. Tu dispositivo se actualiza automáticamente a la versión más reciente de iOS o iPadOS. Es posible que algunas actualizaciones se deban instalar de forma manual.

Instalar las respuestas rápidas de seguridad

Las respuestas rápidas de seguridad ofrecen importantes mejoras de seguridad más rápido, antes de que se incluyan en futuras actualizaciones de software.

Para obtener respuestas rápidas de seguridad automáticamente, haz lo siguiente:

Toca Actualización automática.

Asegúrate de que la opción Respuestas de seguridad y archivos del sistema esté activada.

Si no deseas que las respuestas rápidas de seguridad se instalen automáticamente, puedes instalar las respuestas rápidas de seguridad como actualizaciones de software .

Si tienes que eliminar una respuesta rápida de seguridad:

Ve a Configuración > General > Información.

Toca Versión de iOS.

Toca Eliminar respuesta de seguridad.

Puedes reinstalar la respuesta rápida de seguridad más tarde o esperar a que se instale permanentemente como parte de una actualización de software estándar.

Cuando se actualiza un dispositivo a la versión más reciente del software de iOS o iPadOS, se obtienen las últimas funciones, actualizaciones de seguridad y correcciones de errores. No todas las funciones están disponibles en todos los dispositivos o en todos los países y regiones. Es posible que el rendimiento de la batería y el sistema se vea influenciado por varios factores, como el estado de la red y el uso individual del dispositivo. Los resultados reales pueden variar.

Contactar con el Soporte técnico de Apple

¿Necesitas ayuda? Ahorra tiempo iniciando una solicitud en línea al soporte técnico y te pondremos en contacto con un experto.