May 01, 2013 Flattr this

Safari Web Inspector


webkit-icon-256.pngWith the update of Safari 6.0.4 i realized the Web Inspector changed in a way which makes it almost unusable for my needs. In 6.0.4, the Inspector wouldn't even properly show cascading css properties or inheritance for a selected element anymore! See the screenshots below for a comparison between Safari's and Chrome's Inspector.

I posted my frustration on Twitter and thanks to some keyword search running somewhere in a lonely cloud, a Safari Engineer got back to me. So thank you very much, Timothy! This blogpost is for you, because i couldn't fit it into 140 characters.

In this post, i will focus on one aspect of the Inspector only: Working with CSS. Because that's what i do most and because for JavaScript development, the tools at hand generally get the job done well for me.

Web Inspectors showing information for the exact same element (Safari to the left, Chrome to the right):

Safari Chrome

Preface

Shortcomings in the Safari Web Inspector and a lot of rendering bugs in Safari (which seem to be mostly ironed now) forced me to use Chrome more and more for my development needs. I never wanted to. I care for Safari. I still prefer the Safari UI over Chrome (just look at Chrome's Preferences-Screens – shudder) and don't know if i like where Google (the company) is headed to. But Chrome has compelling features and before i knew it, i was using Chrome during 95% of my development time.

Features i miss most in Safari's Inspector

  1. Being able to select an element in the source view of the Inspector and keep the element selected between reloads and navigating a site. Chrome supports this and if i remember right, Safari did at one time in the past.
    You won't believe how important that is for me and how often i need that during the day. Webdev often is rinse, repeat, reload (preferably via the Live Reload plugin).
  2. Edit a linked css file directly in the browser. This is often more convenient than fiddling with css in the styles pane of the inspector. Chrome supports that. Safari never did, afaik.
  3. Plugins, that work with file:// URLs. The live reload plugin is a huge timesaver when developing for the web. Unfortunately, Safari plugins are not allowed to work with file:// URLs, which i do most of the day while i develop (i just drag and drop a html file into my browser window). Chrome doesn't have that limitation.
  4. Easily check inheritance of certain values. Sometimes i just want to select an element in the source and e.g. quickly find out, where it inherited its font-size from, without having to endlessly scroll through all the rules and parse striked-through rules etc. I'd like to look at a property in the "Computed Style" section, klick on a little icon and together with a link to the respective line number in the css source, see the classname or id of the rule in the CSS displayed, which ultimately set the property. Chrome has this, but with a UI from hell.
  5. A toggle to simulate :active, :focus, :hover and :visited pseudo classes
  6. Inspector Preferences. Chrome's Inspector Preferences and Overrides are very, very useful. Also, as one get's older, a font-size setting for the inspector ui comes in pretty handy.

Features Safari's Inspector will hopefully soon get

Inspector toolbar

Timothy suggested i should check out the Inspector in Webkit Nightly (which i haven't done in a while). So that's what i just did. I looked at Webkit Nightly Build 8536.29.13, 537+. If all i see there makes it into Safari soon, things don't look so bad at all. Here's my comments on what i saw in the Nightly related to my above laundry list:

  • Live editing of linked css files is supported
  • Toggles to simulate :active, :focus, :hover and :visited pseudo classes are there
  • The proper display of cascading rules seems restored

Inspector pseudoclass new rule
New in Nightly: Nicely cleaned up Rules-Section with new pseudo elements toggles and a Button to quickly add a new rule (you missed a button to easily delete an added rule though). Further above you see a pretty nice new tooolbar.

Features still missing

Here's what's left from my above laundry list with comments about the nightly added (in bold):

  1. Being able to select an element in the source view of the Inspector and keep the element selected between reloads and navigating a site. Chrome supports this and if i remember right, Safari did at one time in the past.
    Selecting an Element in Source and reloading a page is totally buggy in the nightly (it's a beta, so that's ok).
  2. Edit a linked css file directly in the browser. This is often more convenient than fiddling with css in the styles pane of the inspector. Chrome supports that. Safari never did, afaik.
  3. Plugins, that work with file:// URLs. The live reload plugin is a huge timesaver when developing for the web. Unfortunately, Safari plugins are not allowed to work with file:// URLs, which i do most of the day while i develop (i just drag and drop a html file into my browser window). Chrome doesn't have that limitation.
  4. Easily check inheritance of certain values. Sometimes i just want to select an element in the source and e.g. quickly find out, where it inherited its font-size from, without having to endlessly scroll through all the rules and parse striked-through rules etc. I'd like to look at a property in the "Computed Style" section, klick on a little icon and together with a link to the respective line number in the css source, see the classname or id of the rule in the CSS displayed, which ultimately set the property. Chrome has this, but with a UI from hell.
  5. A toggle to simulate :active, :focus, :hover and :visited pseudo classes
  6. Inspector Preferences. Chrome's Inspector Preferences and Overrides are very, very useful. Also, as one get's older, a font-size setting for the inspector ui comes in pretty handy.

Inspector Design in Webkit Nightly

I am pretty sure, that the design we see in the nightlies won't make it into Safari without some additional designer-love, but let me offer some brief remarks anyway. Just in case. I really hope though, the new toolbar (i love it!) makes it into Safari (the current one is kind of overloaded and confusing).

  • Icon sizeThe icons in the toolbar seem too big for me (in relation to the label text-size), even when i set it to display small icons. I'd keep the icon size similar to the size of the 2 icons displayed to the left of the toolbar (the icons to close or dock the window).
  • I prefer the design of the icons very much over the coloured icons currently visible in the Safari Inspector. However, i think we don't need gradients in the icons. We also don't need color to indicate the selection, just make the icon for the selected section darker. Keep it simple.
  • I love the new "Instruments" display, where you - at a glance - see the number of resources loaded, total size, load time, console -logs, -errors and -warnings. However, i won't use fake glass. This is not a 90's version of iTunes. I believe an inset shadow around the area and light borders between the individual sections on hover will do. PS: the icon-size in here feels just right. That'd be a good size for the other toolbar icons too.
  • The area with the pseudo class toggles consumes too much vertical space. It should me much more condensed. Have a look at the chrome toolbar and use an 11" Air when you look at both toolbars, then you get my reasoning.
  • Same goes for the new "+ New Rule" area. Far too much top- and bottom-padding.

Conclusion

I was genuinely worried. Looking at Webkit Nightly, things look much better and some of my confidence is restored. Given, that what i see in the nightlies really makes it into Safari soon.

I still wonder, how it could happen, that Inspector in Safari 6.0.4 is in such a bad state and lost valuable features which it previously had. Is this just a bug that slipped in there due to sloppy QA or is it a case of terrible product management?

I hope, the importance of good developer tools in the form of the web inspector is clear to Apple. If we developers don't like the tools or if the tools slow us down, why should we use them? If we don't use them, we won't develop with the unique features of the platform (used) in mind and thus won't help drive it forward or keep afloat.

Thanks again Timothy for getting back to me! That was totally unexpected. If this feedback, which touches only very few specific points, is of any value to you and the Safari team, i can certainly post some more from time to time.

Posted in: , , by seiz | Comments (0)
January 18, 2013 Flattr this

48


How the hell could i get so old so fast?
It's weird, that in my head i don't notice as much change as the numbers suggest. Time is such a weird concept.

Buzzele

Posted in: by seiz | Comments (0)
December 01, 2012 Flattr this

Leistungsschutzrecht


IconMein Beitrag zum Thema ist eine Safari Erweiterung, die Einträge von Verlagen, die das Leistungsschutzrecht unterstützen, aus den Suchergebnissen von google.de, google.com und bing.com ausblendet.

Hier entlang bitte!

Posted in: , , by seiz | Comments (0)
October 06, 2011 Flattr this

He cared - even about angry customers like me


You probably read tons of stories like this already but this is mine and on this sad day, i'd like to tell it.
A tribute to SJ.

Steve Jobs

I make my living using Macs since 1988 (thanks, Steve for making this possible). I started with a Mac plus, working with PageMaker 1.0.

In 1998, i bought my first LCD display. It was a 15 inch Apple Studio Display and was a huge step forward after all the heavy 19 inch CRT displays which took a lot of room on your desk. I loved it and just had to have it.

Back then, the early adopters still had to pay a huge apple tax and if i remember right, i paid around 3.500 DM (1.700 €). Back then, the display came with a software driver you had to install and that driver was pretty buggy for me and the picture quality wasn't as good as it could be (sync issue).

This was one of the first Apple products i had ever bought which didn't work as expected and which i could not fix myself. So i turned to the official Apple support channels available to me back then. No one could help or even acknowledge the problem.

I was pretty angry, having spent a fortune on the display and various Apple gear i had purchased over the years. I searched the internet and was able to somehow find out Steve Jobs email address and in a huff, composed and sent an email to him. Sending this email already made me feel a bit better and i didn't really expect any reply at all.

About a week later, i had almost forgotten about the email, i received a phone call. It was someone from Apple Munich on the other end of the phone:

"We heard you are having a problem with your Display and i want to make sure we can solve your problems as quickly as possible"
I asked how he heard about my problem and he only said, "this comes right from the top". I was blown away. The guy from Apple Munich then sent me beta versions of the driver for my display and followed up with me via email until the problem was solved and i had the picture quality i was expecting.

Steve Jobs not only read my rant, written in anger, he took it seriously and made sure to make me a happy customer again, which i still am on this very sad day.

Here's to the crazy ones!

PS: i bought a second one of these displays as soon as i had the funds for it.

Posted in: by seiz | Comments (0)
 

Older Posts: Journalist umgeht die Realität