Everything works fine, but the Dev Tools Page is empty and doesn't contain Safari Information

[tralpha]

I'm using an iPhone 5s with a Safari browser, together with a Mac 10.10.1.

I could install the ios webkit debug proxy and get it working. It can detect my phone and everything, but however when I copy the link of the available website for debugging into a new Chrome page and try debugging, I simply get a blank DevTools page, and I can't find and manipulate the DOM from the Safari browser on my iPhone.

Could anyone tell me what's wrong with this? Is there anything I'm doing wrong? Please let me know.

Thanks!
Ralph

[schickling]

+1

[montogeek]

Use http://chrome-devtools-frontend.appspot.com/static/27.0.1453.93/devtools.html

[jfrumar]

That's still not working for me :(

Using Yosemite 10.10.1 and Chrome Version 39.0.2171.95 (64-bit). Also tried in Canary Version 41.0.2271.0 canary (64-bit) - same issue.

Looks like it can connect to the proxy OK, and I see the tabs and the UI, but everything is blank.

[seanwash]

I'm getting the same blank page by using chrome-devtools://devtools/bundled/devtools.html. Looks like the proxy sees the ios simulator fine, but the inspector is blank.

Yosemite 10.10.1 and Chrome Version 39.0.2171.95 (64-bit)

[TeddyRux]

👍

[hcentelles]

👍

[confile]

+1 I have to same problem as @tralpha I always get an empty page in the chrome dev tools. Also with @montogeek http://chrome-devtools-frontend.appspot.com/static/27.0.1453.93/devtools.html it does not connect.

Is there something else to do?

[steffimueller]

I have the same problem. Could not connect.

[steffimueller]

@montogeek Are you able to connect to your device?

[montogeek]

Yes, I was able.

[confile]

@wrightt Is google working on a fix for this issue?

[mandx]

Same here, after compiling and running it on Ubuntu 14.04. (installing instructions from this thread) Latest Chrome stable from Google's repos shows the inspector blank (there isn't even a window global in the console) and no errors at all. Tried with Firefox's Valence/WebIDE and it also shows no error, but the connection doesn't go through.

Running the proxy with --debug shows "packets" being sent by the proxy for every action on the device, but nothing connected to the proxy appears to react on those actions.

[mikejoyceio]

Having the same issue as the OP. iPhone 4, Mavericks.

[horsson]

same issue here.

[richardkeen]

I worked around this by downloading Chromium 37 for Mac from here: http://sourceforge.net/projects/osxportableapps/files/Chromium/

[osuka]

can confirm this works with latest Chrome (40) and Safari w/ iOS 8.1 if launched like:

ios_webkit_debug_proxy -f http://chrome-devtools-frontend.appspot.com/static/27.0.1453.93/devtools.html

Works fine but it's crazy slow. Still, miles better than debugging via remote Safari.

[montogeek]

Thanks!

[mcmilwj]

Worked for me @osuka .. thanks!

[mandx]

@osuka I can confirm it works with that frontend on Ubuntu 14.04, and also sluggish slow.

[pmeenan]

It's a newer version than from Chrome 27 but WebPagetest has an embedded
version of the timeline code as well. If you access the github version
through the rawgit CDN interface (MaxCDN) it should be a lot faster than
the appspot URL:
https://cdn.rawgit.com/WPO-Foundation/webpagetest/WebPageTest-2.16/www/chrome/inspector-20140603/devtools.html

If that doesn't work I can see about putting an older version up as well
(maybe in a dedicated repository).

On Thu, Jan 29, 2015 at 5:10 PM, Armando Pérez Marqués <
[email protected]> wrote:

@osuka https://github.com/osuka I can confirm it works with that
frontend on Ubuntu 14.04, and also sluggish slow.

—
Reply to this email directly or view it on GitHub
#86 (comment)
.

[jfrumar]

When I load up http://localhost:9222/ and then click the link for my connected device, I got:

1. That's an error.

The requested URL /devtools/devtools.html?host=localhost:9222&page=1 was not found. Invalid frontend URL?

[GingerBear]

saw a comment on stackoverflow, seems to be working (fast but still buggy) using ws parameter like chrome-devtools://devtools/bundled/devtools.html?ws=localhost:9222/devtools/page/1 with default start. ws url can get from http://localhost:9222/json.

Also, the original old version of devtools in the readme (18.0.1025.74) works perfectly for me (OSX10.10, IOS8.1). Start with

ios_webkit_debug_proxy -f http://chrome-devtools-frontend.appspot.com/static/18.0.1025.74/devtools.html

[aerohit]

I was getting a blank page on chrome dev tools. I tried the chrome-devtools://devtools/bundled/devtools.html?ws=localhost:9222/devtools/page/1 as suggested by GingerBear above and managed to connect finally.

But I keep losing the connection. I get a 'websocket_closed' message on the devtools and the following error on the terminal:

Invalid message _rpc_applicationUpdated

[GingerBear]

@aerohit I am guessing newer devtools change its debug protocol, so this project can no longer correctly translate from safari's debug protocol to devtools'.

The version of devtool used be the default (18.0.1025.74) works well. You can see the version in history of a file 97244ed#diff-5ec77c8336660a306cae07d0bd49757dL208

[zwri]

Oops, I clicked "Close" by mistake!

Anyways, yes, there seem to be two issues here:

1. I need to add the trivial "_rpc_applicationUpdated" handler, and
2. Chrome's inspector UI no longer supports the latest MobileSafari's DevTools -- we'd have to fix the Chromium https://chromium.googlesource.com/chromium/blink/+/master/Source/devtools/front_end/

[paulirish]

Chrome and Safari have now diverged a bit with the debugger protocol. I haven't looked into how much, but I suspect it isn't a big gap. It's likely quite fixable.

protocol status

current Chrome DevTools protocol:

https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/devtools/protocol.json

(and a handy viewer for it: http://chromedevtools.github.io/debugger-protocol-viewer/ )

current Safari Inspector protocol:

http://trac.webkit.org/browser/trunk/Source/JavaScriptCore/inspector/protocol

Mozilla maintains a snapshot of the protocols in ios7 and ios8: https://github.com/mozilla/valence/tree/master/protocol-docs

get involved

It'd be very valuable for someone to author a minimal protocol compat layer to allow the io7 and ios8 protocols to map back to modern Chrome protocol. Then you could use whatever's in your browser.

If you want to hack around.. try inspecting the inspector to see whats up with the empty devtools page or sniffing out the websocket connection to view the raw data

➡️ Ping me if you'd like to get involved in this.

[zwri]

Sounds good to me! @paulirish, I've added you as a project admin, so please feel free to coordinate.

[dangelov]

fwiw @GingerBear 's suggestion for using ws works for me

[evelynriossf]

May 20th.. I'm getting the same problem with the white screen in Chrome 43. @GingerBear 's suggestion to use chrome-devtools://devtools/bundled/devtools.html?ws=localhost:9222/devtools/page/1 works for me.

[grglaz]

running ios_webkit_debug_proxy -f http://chrome-devtools-frontend.appspot.com/static/27.0.1453.93/devtools.html

and browsing with http://localhost:9222/devtools/devtools.html?ws=localhost:9222/devtools/page/1 or chrome-devtools://devtools/bundled/devtools.html?ws=localhost:9222/devtools/page/1

works for me too
just in the beginning communication in is soooo slow... but after first loading seems to be fine.

[shmdhussain]

@GingerBear: ur suggestion is working..thanks..but I am not able to inspect webview application pages. is anybody facing this issue?

[auchenberg]

@grglaz @shmdhussain Which build of ios-webkit-debug-proxy are you running with? I committed a changed to update the chrome devtools url, so the WS querystring is correct.

[shmdhussain]

@auchenberg : Just now i installed the ios-webkit-debug-proxy (i think v1.5) in OSX 10.10 and chrome 43

[auchenberg]

@shmdhussain Alrighty, then it's unrelated to my change. Never mind :)

[shmdhussain]

@auchenberg : so will it work normally as "http://localhost:9222/devtools/devtools.html?ws=localhost:9222/devtools/page/1" instead of "chrome-devtools://devtools/bundled/devtools.html?ws=localhost:9222/devtools/page/1"?

Could you please help me in how to debug UIWebview native ios app, i am not able to do so. Thanks in advance.

[foobartel]

@shmdhussain @auchenberg For me v1.5 only works with this url:
chrome-devtools://devtools/bundled/devtools.html?ws=localhost:9222/devtools/page/1

The link from http://localhost:9222/ for the first iOS device is
http://localhost:9222/devtools/devtools.html?ws=localhost:9222/devtools/page/1 though, and that only shows a white page with a grey bar at the top and some Apple SLA comment in the source.

[shmdhussain]

@foobartel : are you able to inspect native webview app? see my screenshot for http://localhost:9222/devtools/devtools.html?ws=localhost:9222/devtools/page/1

screenshot for chrome-devtools://devtools/bundled/devtools.html?ws=localhost:9222/devtools/page/1

[kcbanner]

I am specifically interested in the profiling capabilities. Since Safari 7, the JavaScript CPU profiler is missing. I'd like to use the Chrome devtools to run CPU profiles on iOS devices, since the only way to run a CPU profiler currently is to downgrade to OS X 10.8 and use Safari 6. I can use ios_webkit_debug_proxy to debug my webview/safari with the Chrome Canary bundled dev tools, but sadly the profiling tools to not work.

[animator013]

From chrome ver. 45 url

chrome-devtools://devtools/bundled/devtools.html?ws=localhost:9222/devtools/page/1

no longer works for me.

I used this instead:

chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/page/1

Hope it helps someone.

[nikoloza]

Running:

ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

worked for me. Note: inspector.html at the end instead of devtools.html

for both of Versions:

• 45.0.2454.93
• 47.0.2511.3 canary

[paulirish]

Yes, this is a permanent change, introduced in chrome 45. For anyone uses the bundled inspector you should be using it via inspector.html, as the two above comments indicate.

Sorry for the breakage here.

[donrhummy]

What's the earliest version of Chrome that has this bundled inspector?
"ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html"

[artygus]

@kcbanner check this out https://github.com/artygus/webkit-webinspector, I extracted webkit's webinspector so there's no need to downgrade to safari 6 anymore

[desmondtam]

I'm able to see the requests, but the timings are mis-translated I think. Does anybody else see something similar?

[leftdevel]

@animator013. Your solution works for me, thanks!

[netpoetica]

Is it expected that one should see the console.logs from their client application in the Inspector?

[artygus]

hi @netpoetica absolutely, but there're more and more issues with dev tools, please check out https://github.com/google/ios-webkit-debug-proxy#devtools-note