State of Web Inspector | Hacker News Reader

State of Web Inspector

webkit.org

85 pointszekers30 comments

    Last year, Safari 6 included a re-imagination
    of Web Inspector that aligned the design and
    user experience with Xcode 4. This design,
    while familiar to Mac and iOS developers,
    alienated some web developers familiar with
    the old Web Inspector. Over the last year we
    have listened and have taken all your
    feedback to heart.

You know, it's funny that they'd say this. I'm a Mac and iOS developer, and I hate the design of Safari 6's web inspector. I find the iconography and general user experience inscrutable, I find the changes to View Source make it infuriatingly difficult to use, and the web inspector seems to hang a lot. I hope the new version improves this.

I think it is surprising that the old (Safari 6) inspector UI was not about improving the user experience for web developers but instead it was an effort to align "the design and user experience with Xcode 4."

Safari 6 is useless for development and has made me move to chrome for anything more than console.log.

They're losing.

Firefox + Firebug pulled webdevs away from IE like honey. Chrome is doing the same.

Try the version in WebKit nightlies and the OS X Mavericks developer preview. It's much improved from Safari 6.

While being much improved over previous version of Safari 6, that's not saying anything. It's still abysmal, and Chrome and Firefox are still leaps and bounds ahead.

Instead of just saying it's abysmal, could you be a little more specific? I've been using Firefox inspector for few months and still don't found the new WebKit Inspector to be lacking at all (except the lack of Responsive Mode).

As mentioned in another comment, I'm just now looking at this and will get back to it.

Do you have any specific feedback about things you have problems with?

I'm just now reading this but when I get a chance ill try to give a complete run down of issues I have.

Not even a few that come to mind immediately?

I was replying on an iPad, and wanted to give better information than merely what I remembered.

Edit: Sorry for the awful formatting. =( I'll note that I want Safari tools to get past the stage where they are playing catch up. This will allow them to play with new ideas, such as what Mozilla can do because of Firebug.

These are in no particular order. The developer tools crashed several times (pre-release and all), and I don't have the time to keep going through all the other places.

I'll make this clear up front, as I mentioned it below, but want to make it clear:

"I'll admit there is more their than I originally thought, but still missing things I use daily."

Here are my notes:

* Lack of effective Network Tab

* This can be found in Timelines > Network Requests

* Basic problem is the Timeline is now trying to do two things at once, both with different reasons

* Browsing network requests is cumbersome at best.

* Cannot switch between headers and bodies

* No way to see raw headers

* No way to open request

* Copy row is pointless

* This is such an odd miss...

* Back button is not consistent

* From full frame console, it sends you back to the network requests

* From source, it sends you "back" to another source page (?)

* I see no way to define what is being repainted/drawn for each record of Layout & Rendering

* Consoles in other parts of don't seem to function at (at least, the response is put into the Console tab, and not in the console area that opens up).

* No way to edit JS

* No way to edit Breakpoints without specifically opening up the Debugger

* CSS editing is non-obvious

* It's also less than helpful when completion

* No easy mechanism to edit existing rules

* Debugging doesn't let you mouseover and see this (?)

* Cannot execute JS in scope while debugging

* Debugging just seems awfully buggy at the moment, it's a pre-release, but makes it hard to put through it's paces.

All together, the dev tools don't seem fluid. I'll admit there is more their than I originally thought, but still missing things I use daily. More so, nothing seems put together that makes sense. You can argue that it's because I'm used to Chrome Dev Tools, but I can move from Chrome to Firefox with relative ease, but debugging inside Safari is still painful. Couple that with the bugs, and it really makes it hard to give it a proper run through. For example, the debugger right now is set to break on all uncaught exceptions. Running this on http://www.apple.com/osx/preview/#ibooks, it stops on ac_retina.js:20, but it doesn't offer any information in the debugger, or in the console.

I get a feeling this was designed by people copying from Xcode, rather than people working with web developers. Tools I'm used to working with don't work, or work in a different way that is simply not useful.

I didn't spend much time digging through more of the timeline stuff, and as I mentioned, the debugger was cumbersome to use.

Heck, even the Resources tab was painful. I mean, the page is loaded, yet somehow clicking on scripts to view put them in a constant loading state.

Again, it's a pre-release, but it's all I have.

Is all this just because they "lost control" of the old inspector to Google (who invested heavily in it)?

The new one doesn't support the websocket protocol yet so I can't use it in my WK stuff anyway, but I don't know why they spent a bunch of time on a new one. I was also sad to see the "Native Memory Instrumentation" removed from WebKit, because I've always wanted to know "where the memory goes" on any given page.

File a bug on this, it does sound like it shouldn't have disappeared like that.

The comment was that it was hard to maintain the way that it was written, which is probably true (there were hooks everywhere!). I don't know if there are any clever allocator/macro tricks you can use to know how many of each kind of object is allocated without a big perf hit.

I primarily used Safari on the Mac for development and browsing up until Safari 6. After they crippled the web inspector by removing key features and adding the confusing design and layout I switched completely over to Chrome for browsing and dev.

I'll certainly give it another shot, but it'll be hard to give up Chrome as the primary browser.

They added an option to use the old (same one chrome uses) inspector

http://i.imgur.com/cgiAjhD.png

That option is present only in WebKit nightly builds, and has been since when the new Web Inspector was introduced.

It has always been there, in the nightlies.

Looks interesting and it's Open Source, so yay. But than again, anything would be better than the unstable, incapable turd that was Safari 6's Web Inspector.

I used to love Safari, it's still my main browser and it was my web developing environment of choice. I really hope Apple can match Google's pace of development, but I think they have lost me for good on the development front.

Releasing that Web Inspector with such different interface, lacking basic features, with zero input from the community and closed source, shows a lack of respect for the developer that will be hard for me to overcome.

Thank God! The current inspector is horrendous. I don't know how to find anything, and I use Xcode regularly.

It's still horrendous. It's better then the previous version, but it's still far behind.

Anyone know if Chrome is going to adopt this web inspector?

I'm pretty sure that the answer is no - considering that Chrome does not use Webkit anymore.

More precisely, they forked WebKit:

http://www.chromium.org/blink

Good Job by the Apple Guys! Now just give us more features than Chrome's web inspector so I can get rid of Chrome.

Has this been written in such a way that the Blink team will be able to adopt it?

Nope. Portions of the new WebInspectorUI are not even redistributable by third parties: http://trac.webkit.org/browser/trunk/Source/WebInspectorUI/A...

It's already there in Mavericks by the way.

When I read the title, for a moment I thought Google was retiring the Web Inspector from Chrome.

Reply on news.ycombinator.com