Giter Club home page Giter Club logo

ios-safari-remote-debug-kit's Introduction

Remote Debugging iOS Safari on Windows and Linux

Using this project you can debug your websites and web applications running in iOS Safari from a PC running Windows or Linux.

It provides a free and up-to-date alternative to the discontinued remotedebug-ios-webkit-adapter by RemoteDebug and is the spiritual successor to the abandoned webkit-webinspector by Arty Gus. It is a free and open source alternative to inspect.dev.

The setup scripts (generate.sh or generate.ps1) download the latest version of WebKit's built-in WebInspector and patch it to work with the WebSocket ios-webkit-debug-proxy provides and to be compatible with Chromium based browsers.

Requirements for running

  • ios-webkit-debug-proxy
    • On Windows, it will automatically be downloaded, but you must also install and trust the device in iTunes for it to work
    • For Linux, please follow the installation instructions.
  • Node.JS http-server or Python or PHP
    • If you have Python or PHP on your system, you don't need to change anything
    • If you have Node.JS on your system, just run npm i -g http-server and you're set.
  • A Chromium based browser
    • like Google Chrome, Edge or Opera
  • or WebKit based browser
    • like Epiphany/GNOME Web

Requirements for setup

  • git (required by generate.sh or generate.ps1) for downloading WebKit source code
    • On Windows, I suggest using git for Windows in PowerShell
    • On Linux, I suggest installing git from your package manager

Instructions

Setup

  1. Clone this repository to your PC
  2. On Windows, run generate.ps1. On Linux, run generate.sh.

This will result in the folder WebKit being created inside src. It contains the WebInspector files.

Running

  1. Plug your iOS device into your PC via USB
  2. On Windows, open iTunes and mark the iOS device as trusted (pop-up asks for confirmation the first time you connect a new device)
  3. On the iOS device, confirm that you trust the connection if asked
  4. Go to Settings->Safari->Advanced->Web Inspector and enable it
  5. Open the website you want to debug in Safari
  6. On Windows, run start.ps1. On Linux, run start.sh. Make sure your iOS device's screen is unlocked.
  7. The ios-webkit-debug-proxy will show your iOS device's name as connected.
  8. Then open the Chromium or WebKit based browser of your choice with the following URL: http://localhost:8080/Main.html?ws=localhost:9222/devtools/page/1
    • If you have mutliple pages open or extensions installed, refer to http://localhost:9222/ for the page number that is at the end of the URL
  9. You should be greeted with the WebInspector and can now debug to your heart's content.

Troubleshooting

  • If you get an error like Uncaught (in promise) Error: 'Browser' domain was not found from Connection.js:162 you are trying to inspect a page that is not inspectable (this could be caused by having Safari extensions installed). Refer to http://localhost:9222/ for the available pages and put the correct one at the end of the URL (for example http://localhost:8080/Main.html?ws=localhost:9222/devtools/page/2) for inspecting the second page.
  • In case your inspector window stays empty, open the dev tools of your local browser to check the console for errors.
    • If you get an error like WebSocket connection to 'ws://localhost:9222/devtools/page/1' failed: from InspectorFrontendHostStub.js:68, try unplugging your device and plugging it back in while the site you want to debug is open in Safari. Once you see the ios-webkit-debug-proxy console window display a message like Connected :9222 to Himbeers iPad (...), refresh the inspector page inside your browser (do not use the refresh button on the inspector page, refresh the entire site from your browser).

Exiting

Windows

  • Two windows will open. One manages the web server and the other one is ios-webkit-debug-proxy.
  • To exit, close the ios-webkit-debug-proxy window, the other one will close automatically
    • Alternatively you can also press Ctrl+C in the web server window

Linux

  • Press Ctrl+C in the terminal window to exit

Known Issues

  • "Events" on the "Timelines" tab don't work
  • Canvas content doesn't show on the "Graphics" tab
  • Minor style glitches due to Webkit vs. Chromium differences

Notes

If you want to see details about how this was made, you can read a detailed explanation in HOW_IT_WORKS.md (note that this document only describes how the very first version of this tool was created and might not be completely up-to-date).

Attribution

ios-safari-remote-debug-kit's People

Contributors

dilden avatar gurumov avatar himbeersaftlp avatar lf- avatar ssz66666 avatar sxxov avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

ios-safari-remote-debug-kit's Issues

localhost refused to connect

Hi. I ran start.ps1. In one terminal window I have this:

Listing devices on :9221
Connected :9222 to iPhone (4) (00008030-00164D3A023B402E)

In the other I have this:
Entering script directory C:\Programming\ios_safari-remote-debug-kit\ios-safari-remote-debug-kit\src
Running ios-webkit-debug-proxy...
Entering C:\Programming\ios_safari-remote-debug-kit\ios-safari-remote-debug-kit\src

====================================================================================
Will try to launch a web server on http://localhost:8080
You can then open http://localhost:8080/Main.html?ws=localhost:9222/devtools/page/1
in a Chromium or WebKit based browser to start debugging.
Press Ctrl+C to exit.

Searching web server
Found Python 3, using it to serve the WebInspector

When I open http://localhost:9222/ I can see this:

Inspectable pages for iPhone (4):

  1. https://something.com/
  2. ?
  3. ?
  4. https://something-else.com/

However if I open http://localhost:8080/Main.html?ws=localhost:9222/devtools/page/1 I get an error message:
This site can’t be reachedlocalhost refused to connect.
Try:

Checking the connection
Checking the proxy and the firewall
ERR_CONNECTION_REFUSED

I tried two different iPhones. One with iOS 15 and one with iOS 16. Same result.
Any ideas what the problem is?

Debugging within VS Code

Is there any current way to do live debugging similar to what is mentioned here in VS Code? I have spent a good chunk of time trying to get an implementation of it working and am just unsure if it's possible. Thanks!

Python 3 webserver not working on Windows 10

Hi, when trying to run start.ps1 and then opening the suggested URL Chrome indicates that the website is not online, this also happen when trying to open localhost:8080. After modifying start.ps1 to not look for Python (line 46) it works perfectly by using the NodeJS one.

Environment: Windows 10 with Python 3 and NodeJS v17.2.0
Used for: iPhone 7 with iOS 15.4

Hope this info is useful.

start.sh: line 11: $1: unbound variable

Distributor ID: Ubuntu x86_64
Description: Ubuntu 22.04.3 LTS
Release: 22.04
Codename: jammy

when i run "start.ps1" after install all requirment.
i got :
"Entering script directory /home/userName/ios-safari-remote-debug-kit/src
start.sh: line 11: $1: unbound variable

Start.ps1 still falsely concludes Python 3 is available, despite being already installed.

First of all thanks for making this software, it's proving to be a life-saver for me right now!

This issue seems similar to #2, although my situation is a little different.

I do have Python 3 installed, but I still get the Microsoft Store redirect when I try to run a python script from powershell. After doing some digging, it seems this was the culprit:

I think we have this problem when installing Python because in a new Windows installation the aliases are in the ON position as in image below. When turned on, Windows puts an empty or fake file named python.exe and python3.exe in the directory named %USERPROFILE%\AppData\Local\Microsoft\WindowsApps. This is the alias.

UCwkU

Then Microsoft put that directory at the top of the list in the "Path" environment variables.

iTeHL

When you enter "python" in cmd, it searches the directories listed in your "Path" environment variables page from top to bottom. So if you installed Python after a new Windows 10 install then get redirected to the Windows Store, it's because there are two python.exe's: The alias in the App Execution Alias page, and the real one wherever you installed Python. But cmd finds the App execution, alias python.exe, first because that directory is at the top of the Path.

Obnoxious of Windows to do this, but it's easy enough to fix once you see what's going on. I don't know if there's an easy programmatic way to handle this in-script, but maybe at least either alert the user to remove their aliases if the script doesn't actually run, or just move to the next fallback? Or even just adding a note in the docs about this potential pitfall.

(Someone suggested a programmatic solution to this issue for use in scripts, though I'm not sure if directly messing with the user's aliases like this is the best idea:)

Remove-Item $env:USERPROFILE\AppData\Local\Microsoft\WindowsApps\python*.exe

Unable to attach inspector / iOS 16 issues?

I get this in the 2nd CMD Window thats opening:

Listing devices on :9221
Could not start com.apple.webinspector!: No error
Unable to attach 00008120-001E250C110B401E inspector

While the powershell window instructs me to open the localhost:8080 stuff, it does not show errors:

====================================================================================
Will try to launch a web server on http://localhost:8080
You can then open http://localhost:8080/Main.html?ws=localhost:9222/devtools/page/1
in a Chromium or WebKit based browser to start debugging.
Press Ctrl+C to exit.
====================================================================================

Searching web server
Found Python 3, using it to serve the WebInspector

Using an iPhone 14, with iOS 16.0.3 on it.
Could not get any debuggin software to start yet.

Memory usage

Forgive me if I should know this, but is there a way to check memory usage with this? I'm trying to find out why my safari is crashing and I see a lot of other cool stuff, but not active memory.

Reload page

Device - iPad 2
host OS - Windows 11

Upon accessing Reload page button
it gives the error below -

Web Inspector encountered an internal error.

These uncaught exceptions caused this problem
Uncaught TypeError:​ Cannot read properties of undefined (reading 'reload')​ (at Main.js:​2536:​22)​
?​ @ TypeError:​ Cannot read properties of undefined (reading 'reload')​
?​ @ Main.js:​2536:​22)​
?​ @ Object.js:​134:​31)​
?​ @ Object.js:​142:​9)​
?​ @ ButtonNavigationItem.js:​208:​14)​
?​ @ ButtonNavigationItem.js:​187:​14)​

======

Please see the attached files
ApplicationIssueNote63j
ApplicationIssueNote63i

WebKit Inspector missing files

Hi,

I followed the process on win11 and I get everything to work except that when I visit the page http://localhost:8080/Main.html?ws=localhost:9222/devtools/page/1, I have some errors.

https://imgur.com/a/yHWOEYu

GET http://localhost:8080/WebKitAdditions/WebInspectorUI/WebInspectorUIAdditions.css net::ERR_ABORTED 404 (Not Found) Main.html:978 GET http://localhost:8080/WebKitAdditions/WebInspectorUI/WebInspectorUIAdditions.js net::ERR_ABORTED 404 (Not Found) FileUtilities.js:54 Uncaught TypeError: InspectorFrontendHost.canSave is not a function at Function.canSave (FileUtilities.js:54:38) at Object.WI._updateDownloadTabBarButton (Main.js:2560:27) at HTMLDocument.WI.contentLoaded (Main.js:466:8) canSave @ FileUtilities.js:54 WI._updateDownloadTabBarButton @ Main.js:2560 WI.contentLoaded @ Main.js:466 favicon.ico:1 GET http://localhost:8080/favicon.ico 404 (Not Found) InspectorFrontendHostStub.js:68 WebSocket connection to 'ws://localhost:9222/devtools/page/1' failed:

It turns out there is a missing folder in \ios-safari-remote-debug-kit\src\WebKit\Source\WebInspectorUI\UserInterface.

It seems to be missing the WebKitAdditions folder and from there, I don't know what I can do...

Any idea ?

Thank you !

scrollIntoViewIfNeeded is not a function

I'm getting Internal errors on Web Inspector when running:
TypeError:​ tagSpans[0]​.scrollIntoViewIfNeeded is not a function (at DOMTreeElement.js:​702:​25)​
I've seen it appear in other areas of web inspector

Should this still work with iOS 15?

Trying to connect an iPhone with iOS 15.6 I get:

Listing devices on :9221
Serving HTTP on 127.0.0.1 port 8080 (http://127.0.0.1:8080/) ...
ssl send failed: Success
Unable to send 197 bytes to inspector
Unable to connect to $DEVICENAME ($DEVICE_ID)
  Please verify that Settings > Safari > Advanced > Web Inspector = ON

I guess that's a problem with ios-webkit-debug-proxy?

ios-webkit-debug-proxy -Fd gives me:

ss.add_server_fd(3)
Listing devices on :9221
ss.add_fd(4)
ss.add_server_fd(5)
ss.remove_server_fd(5)
ss.recv fd=4 len=974
ss.add_server_fd(5)
ss.add_fd(7)
wi.send_packet[198]:
 00 00 00 C2 62 70 6C 69 73 74 30 30 D2 01 03 02 04 5A 5F  ....bplist00.....Z_
 5F 73 65 6C 65 63 74 6F 72 5F 10 16 5F 72 70 63 5F 72 65  _selector_.._rpc_re
 70 6F 72 74 49 64 65 6E 74 69 66 69 65 72 3A 5A 5F 5F 61  portIdentifier:Z__a
 72 67 75 6D 65 6E 74 D1 05 06 5F 10 1A 57 49 52 43 6F 6E  rgument..._..WIRCon
 6E 65 63 74 69 6F 6E 49 64 65 6E 74 69 66 69 65 72 4B 65  nectionIdentifierKe
 79 5F 10 3C 35 38 63 37 65 30 32 64 32 63 35 37 32 32 32  y_.<58c7e02d2c57222
 30 2D 37 62 35 30 65 31 66 38 2D 34 32 64 39 2D 61 31 32  0-7b50e1f8-42d9-a12
 37 2D 37 30 66 61 30 39 32 35 35 32 38 63 31 61 66 64 31  7-70fa0925528c1afd1
 61 33 37 30 61 64 33 08 0D 18 31 3C 3F 5C 00 00 00 00 00  a370ad3...1<?\.....
 00 01 01 00 00 00 00 00 00 00 07 00 00 00 00 00 00 00 00  ...................
 00 00 00 00 00 00 00 9B                                   ........
ss.failed fd=7
ssl send failed: Success
Unable to send 198 bytes to inspector
ss.remove_server_fd(5)
Unable to connect to $DEVICENAME ($DEVICE_ID)
  Please verify that Settings > Safari > Advanced > Web Inspector = ON
ss.remove_fd(7)
Segmentation fault

Host OS is Linux Mint 20.3 (based on Ubuntu 20.04) BTW.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.