Using with Chrome Devtools gives a 404

[Jimadine]

Is it possible to debug pages with my locally installed Chrome Devtools? I have this working OK with the default front-end but when I try to use

ios-webkit-debug-proxy -f chrome-devtools://devtools/bundled/inspector.html

I visit http://localhost:9221, follow the link through to my iPad, click the inspectable page and then see a page:

In address bar: http://localhost:9222/devtools/inspector.html?host=localhost:9222&page=1

404. That's an error.

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

If I visit chrome-devtools://devtools/bundled/inspector.html directly I see a bare Devtools page. I am using Chrome 49.0.2623.108 m (64-bit) and Windows 7 64-bit.

Thanks.

[artygus]

@Jimadine yes, it's incorrect
try to use ws=localhost:9222/devtools/page/1 instead of host=localhost:9222&page=1

[Jimadine]

Apologies, I should have been clearer. When I said:

In address bar: http://localhost:9222/devtools/inspector.html?host=localhost:9222&page=1

I meant that that was the address that showed up in the address bar on the 404 page. I did try changing the address in the address bar to the one that you suggest, but I am almost certain I got a 404 page too.

I also tried:

ios-webkit-debug-proxy -f chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/page/1

...based upon animator013's comments in this thread, but again I hit a 404 page when clicking an inspectable page.

I will try again next week and report back.

Thanks for your help.

[Jimadine]

@artygus I tried to get it to work with local DevTools again, but unfortunately it didn't work. Here are two screenshots:

[artygus]

@Jimadine did you try to use remote fornte end tools, e.g. -f http://chrome-devtools-frontend.appspot.com/static/27.0.1453.93/devtools.html?

[Jimadine]

Yes, and that worked for me in the end.

The reason I was trying to get the local Chrome front-end working was because — although I could reach the remote FE — it wasn't allowing me to navigate the DOM as I'm used to in Chrome Devtools. I later worked out that I could use the arrow keys to navigate up and down the DOM tree as an alternative to (non-working) mouse clicks.

Thanks again for your help.

[artygus]

@Jimadine oh, that's too bad. Chrome dev protocol went too far from what Safari has and latest dev tools wouldn't show you styles at all (at least it didn't work 3-4 months ago), I suggest using dev tools extracted from webkit https://github.com/artygus/webkit-webinspector

[Jimadine]

Thanks for the tip. I've done the debugging I needed to but I'll certainly check out your webkit-webinspector the next time I use ios-webkit-debug-proxy-win32.