8 ms·

> - Actually decent dev tools (used to be terrible) As a daily user of Safari, I can't let you say that. The devtools suck. The network tools suck (why is it s

by thiht 6y ago

> - Actually decent dev tools (used to be terrible) As a daily user of Safari, I can't let you say that. The devtools suck. The network tools suck (why is it so hard to find the request payload??), the elements tools suck, there are basically no extensions (React, Redux, etc.). They are just horrible. As much as I try to use only Safari, I still fallback on Firefox Dev when I need some real devtools. I use it for the reasons you mention but it's a really bad browser. It's the only browser that still has consistent rendering issues in 2020: sometimes parts of the pages stay blank, CSS grid support has inconsistencies with other browsers, and some basic layouts fail only on Safari. Another one of my pet peeves with Safari is text selection. It's the worst I have ever seen: https://imgur.com/qC7amU1 https://imgur.com/qC7amU1 It has the potential to be good, but it's just not.

steve_adams_86 6y ago
The network tools drive me insane. It's a major part of why I can't use the dev tools routinely.
ultrarunner 6y ago
Yeah, the devtools have come a long way but there's still some friction there. At this point it might just be because I'm used to Chrome's and I just need a little exercise in mental plasticity. However, eventually I'd like to take a look at porting Vue devtools to Safari, if only for iOS. Maybe I'm just old enough to remember the bad old days, but browser bugs seem very few and far between. One I've found is Chrome's implementation of backdrop-filter is extremely buggy, while Safari works 100% of the time. Specifically it seems that two sibling elements cannot both specify a backdrop-filter in Chrome. I work on a rather large SPA and it has only one browser hack: a dummy div that works around Chrome (and thus Edge's) implementation.
- girvo 6y ago
  The browser bugs/differences I run into these days aren’t surprising; they live at the edges with features that aren’t 100% complete usually, and I know that going in. Long gone are the days of surprising cross browser bugs, I’ve found
MR4D 6y ago
I'll second the text selection (on Catalina, but the new safari). Not sure how they messed up so badly on that. Also, safari on my iPad sucks as well, but got better with the 14.2 update. EDIT: Screenshot here of Apple's Big Sur page NOT rendering! https://imgur.com/a/tF4TDPH https://imgur.com/a/tF4TDPH
- thiht 6y ago
  Screenshot of the sidebar of GitHub rendering only partially: https://i.imgur.com/Fa370r2.png https://i.imgur.com/Fa370r2.png (I hid the center feed myself, but the left sidebar is blank)
benfrain 6y ago
Everything they said! Rendering is shockingly bad at times. Try running some transforms on SVG with CSS or WAAPI and it’s laughably bad. The dev tools are all but useless. Just simple things like adding a new prop/value to a selector declaration is horrid and often inadvertently removed a different declaration. The JS perf is great but the debugging stepper is virtually opaque with buttons with no labels and the like. Let’s not even get started on the raft of web platform features it either doesn’t have yet or has no intention of adding. I too would like to use Safari but it’s so far behind evergreen browsers like FF and Chrome I just can’t rely on it.
kall 6y ago
As a daily user of the safari devtools, I have to disagree I don‘t have much need for the Network tab, so maybe that’s why. They handle the basics very well for me, with a much better interface (IMHO) than chrome tools. I really wish they didn‘t skip the devtools part of WebExtensions so we could get the tools for React/Vue/Redux et al.
- debaserab2 6y ago
  Genuinely curious: what are you developing that you don’t ever need the network tab?
  - kall 6y ago
    I don‘t know, like, average SPA stuff, a lot of React. I just considered what the network tab actually is and I have of course used it before, to work on the loading speed of sites, but haven‘t done that for a while. The only performance work I‘ve done recently is with react profiler. I have never used it to inspect API requests, which I assume it can do? I‘m comfortable with Charles proxy, which is likely overkill. My usage is maybe 45% elements, 45% console, 5 % source/debugger, 3% storage, 2% network. Somehow I dislike elements UI in chrome. Now I‘m thinking that I may be missing out and should look at what it does and what chrome could give me. Edit: after playing around with it for a few minutes: I have in fact been missing out and using Charles and Paw way too much when I could have done it way quicker in the browser. I hope I don't have to switch to chrome now.
    - bluSCALE4 6y ago
      I was going to tease you but you've realized the error of your ways. Unless you don't value your time, by all means, continue to use Charles and Paw. Network tab is great.
    - eric_h 6y ago
      I've been using Safari as my browsing browser and Chrome as my development browser for years. Chrome's network tab is way better than Safari and their profiling tools are also very useful.
jacobolus 6y ago
> consistent rendering issues This is because lazy/incompetent web developers make their sites in Chrome and don’t bother testing other browsers. You could have said the same about any browser that wasn’t IE a decade ago.
- eli 6y ago
  I think you're probably right, but if the site doesn't work in Safari that's a problem for Safari users regardless of whose fault it is.
- lol768 6y ago
  > This is because lazy/incompetent web developers make their sites in Chrome and don’t bother testing other browsers. This has not been my experience at all.. I use Firefox on a day to day basis and generally build applications which work in Chrome and Firefox. They used to work well with EdgeHTML too. I've run into cases in the past where basic SVG rendering with an feColorMatrix filter doesn't work properly in Safari and looks like garbage .. but works fine in Firefox and Chrome. I've run into lack of support for HTML elements that every other modern browser vendor supports. I still can't believe there's no proper input[type=date] support on desktop. Away from desktop, I've also run into Mobile Safari failing to properly calculate the height of <iframe> elements, not supporting background-attachment: fixed and localStorage failing unintuitively in incognito mode. Safari is absolutely the browser that gives me the most issues; I'd call it the new IE.
- mauflows 6y ago
  Or they just don't own a Mac and have mixed results with virtualization. Maybe instead of blaming them recognize that Safari is extremely inaccessible software for most people
  - Razengan 6y ago
    > Safari is extremely inaccessible software for most people How the hell is it "extremely inaccessible" for "most" people? It's Chrome that has an weirdass non-standard UI (the practice of showing app preferences/dialogs in a webpage needs to burn in the flames of Hades) and other niggles, not to mention being a privacy black hole. If they weren't told to use Chrome (i.e. Google didn't nag people to use Chrome when they're trying to use Search etc.) "most" Mac users wouldn't give a fuck about Chrome.
lilyball 6y ago
> The network tools suck (why is it so hard to find the request payload??) Speaking as a non-web-dev who looks at web inspector once in a blue moon, this took me about 5 seconds. I looked at the Network tab, selected a resource, noticed the information in the detail pane had headers but not payload, and then right-clicked the resource and selected "Reveal in Sources Tab" which revealed the payload there.
- phaemon 6y ago
  Clearly not an old-school mac user. Right click?!
- usmannk 6y ago
  If I followed your instructions correctly, that's the response payload not the request.
  - ianwalter 6y ago
    Yes, which I think helps prove the parent's point!
  - thiht 6y ago
    Exactly :) the request payload is hidden at the bottom of the Headers tab (yep...), you need to uncollapse it. I always forget where it is and confuse it with the response payload, which is really confusing when trying to debug what you send to a REST endpoint
- quicklyfrozen 6y ago
  Personally I'm usually looking through a bunch of responses trying to find the one I'm interested in, and that workflow sounds pretty awful.
- ianwalter 6y ago
  Isn't that the response payload and not the request payload?
mmastrac 6y ago
Devtools on Safari have been a joke for 5 years now. Ever since they split from Chrome and went down the Xcode "fancy" route, I have not been able to accomplish anything debugging in that browser.
- djxfade 6y ago
  They never split from Chrome. Chrome forked WebKit into Blink because Apple's wasn't merging Google's patches
  - jolux 6y ago
    Not sure why you're getting downvoted but this is correct. KHTML -> WebKit -> Blink.
    - silly-silly 6y ago
      He's getting downvoted because people misunderstand what he means. Real debugging requires the xcode tools , not the built in 'web developer' garbage.
    - runarberg 6y ago
      And now we only can only hope for the next iteration to take over: KHTML → WebKit → Blink → Edge
      - Cthulhu_ 6y ago
        Unlikely, given how Edge just migrated to Blink itself.
        latexr 6y ago
        I think the point your parent comment is making is that Microsoft may break away from Blink just like Google broke away from Webkit.
  - om2 6y ago
alwillis 6y ago
The only time I've seen rendering issues with Safari was on early versions of Catalina but that was true of a lot of apps back then. I blame how sucky Catalina was for the first few releases. In the latest versions of Catalina and on Big Sur, Safari has been rock solid; none of these issues. Again, no issues with CSS Grid either. Igalia (https://www.igalia.com https://www.igalia.com) implemented CSS Grid for both Webkit and Blink; they had more commits to Webkit and Blink than anyone else except Apple and Google. It's not clear why there would be major differences between the two…
taurath 6y ago
Still no webm support on mobile is awful :(
tambourine_man 6y ago
You’re so right. It used to be great, the nightly WebKit build still uses the old one, I think. But I now use Safari for browsing and Chrome for developing, ever since they destroyed it.
wwweston 6y ago
Seconding all of this. I still regularly use it because of battery life/power (Firefox seems determined to turn my laptop into a space heater) and that has its merits but it's objectively bad in a number of other ways. (Oh, and I'm still thinking about the MBP 16" release a year ago -- Apple had a fancy web page for it with certain actions that triggered on scroll. That page crashed every time I tried to read it in Safari; I literally had to use another browser besides Apple's in order to take in an Apple product page. And I reported to Apple, they had mildly helpful front line support suggestions for troubleshooting... as if it was my problem, not theirs.)
bluedino 6y ago
That’s why I keep Firefox around as well. Surf in Safari and work in Firefox or Chrome.
mekster 6y ago
And why are you using Safari daily? I only use it to open non work related sites to split distractions because I agree it's not the best browser.
- Razengan 6y ago
  • Because Safari takes up much fewer CPU and RAM and feels much snappier in general compared to Chrome and Firefox. • The UI is 100% Mac'cy and doesn't try to be different in retarded ways. Fuck preferences-as-a-webpage. • The automatic syncing between my iPhone, iPad and Mac is also amazingly convenient. I can Handoff this page over to my phone and it will retain the comment I am currently typing! Can't beat that shit. • I don't do webdev so I don't care about the in-browser devtools, but they suffice for me when I dabble in it. • I want to limit what Google sees about me to as little as possible.
rck404 6y ago
In old safari, try setting 'max-content' to to any div 'width' attribute and it'll crash. This has been a persistent since many years and yet not fixed.
sgt 6y ago
It's not perfect but it's pretty darn close. Using the dev tools in Safari daily and it works like a charm.
intellix 6y ago
yep, Safari is absolutely unusable for development. Opening DevTools from an iOS open tab crashes instantly for me and it's impossible to use. It's the biggest pile of and I hope one day that Apple just discontinue it cause they obviously aren't putting any effort into it. If you use Safari I hate you

by thiht 6y ago

steve_adams_86 6y ago

The network tools drive me insane. It's a major part of why I can't use the dev tools routinely.

ultrarunner 6y ago

Yeah, the devtools have come a long way but there's still some friction there. At this point it might just be because I'm used to Chrome's and I just need a little exercise in mental plasticity. However, eventually I'd like to take a look at porting Vue devtools to Safari, if only for iOS. Maybe I'm just old enough to remember the bad old days, but browser bugs seem very few and far between. One I've found is Chrome's implementation of backdrop-filter is extremely buggy, while Safari works 100% of the time. Specifically it seems that two sibling elements cannot both specify a backdrop-filter in Chrome. I work on a rather large SPA and it has only one browser hack: a dummy div that works around Chrome (and thus Edge's) implementation.

girvo 6y ago
The browser bugs/differences I run into these days aren’t surprising; they live at the edges with features that aren’t 100% complete usually, and I know that going in. Long gone are the days of surprising cross browser bugs, I’ve found

MR4D 6y ago

I'll second the text selection (on Catalina, but the new safari). Not sure how they messed up so badly on that. Also, safari on my iPad sucks as well, but got better with the 14.2 update. EDIT: Screenshot here of Apple's Big Sur page NOT rendering! https://imgur.com/a/tF4TDPH https://imgur.com/a/tF4TDPH

thiht 6y ago
Screenshot of the sidebar of GitHub rendering only partially: https://i.imgur.com/Fa370r2.png https://i.imgur.com/Fa370r2.png (I hid the center feed myself, but the left sidebar is blank)

benfrain 6y ago

Everything they said! Rendering is shockingly bad at times. Try running some transforms on SVG with CSS or WAAPI and it’s laughably bad. The dev tools are all but useless. Just simple things like adding a new prop/value to a selector declaration is horrid and often inadvertently removed a different declaration. The JS perf is great but the debugging stepper is virtually opaque with buttons with no labels and the like. Let’s not even get started on the raft of web platform features it either doesn’t have yet or has no intention of adding. I too would like to use Safari but it’s so far behind evergreen browsers like FF and Chrome I just can’t rely on it.

kall 6y ago

As a daily user of the safari devtools, I have to disagree I don‘t have much need for the Network tab, so maybe that’s why. They handle the basics very well for me, with a much better interface (IMHO) than chrome tools. I really wish they didn‘t skip the devtools part of WebExtensions so we could get the tools for React/Vue/Redux et al.

debaserab2 6y ago
Genuinely curious: what are you developing that you don’t ever need the network tab?
- kall 6y ago
  I don‘t know, like, average SPA stuff, a lot of React. I just considered what the network tab actually is and I have of course used it before, to work on the loading speed of sites, but haven‘t done that for a while. The only performance work I‘ve done recently is with react profiler. I have never used it to inspect API requests, which I assume it can do? I‘m comfortable with Charles proxy, which is likely overkill. My usage is maybe 45% elements, 45% console, 5 % source/debugger, 3% storage, 2% network. Somehow I dislike elements UI in chrome. Now I‘m thinking that I may be missing out and should look at what it does and what chrome could give me. Edit: after playing around with it for a few minutes: I have in fact been missing out and using Charles and Paw way too much when I could have done it way quicker in the browser. I hope I don't have to switch to chrome now.
  - bluSCALE4 6y ago
    I was going to tease you but you've realized the error of your ways. Unless you don't value your time, by all means, continue to use Charles and Paw. Network tab is great.
  - eric_h 6y ago
    I've been using Safari as my browsing browser and Chrome as my development browser for years. Chrome's network tab is way better than Safari and their profiling tools are also very useful.

jacobolus 6y ago

> consistent rendering issues This is because lazy/incompetent web developers make their sites in Chrome and don’t bother testing other browsers. You could have said the same about any browser that wasn’t IE a decade ago.

eli 6y ago
I think you're probably right, but if the site doesn't work in Safari that's a problem for Safari users regardless of whose fault it is.
lol768 6y ago
> This is because lazy/incompetent web developers make their sites in Chrome and don’t bother testing other browsers. This has not been my experience at all.. I use Firefox on a day to day basis and generally build applications which work in Chrome and Firefox. They used to work well with EdgeHTML too. I've run into cases in the past where basic SVG rendering with an feColorMatrix filter doesn't work properly in Safari and looks like garbage .. but works fine in Firefox and Chrome. I've run into lack of support for HTML elements that every other modern browser vendor supports. I still can't believe there's no proper input[type=date] support on desktop. Away from desktop, I've also run into Mobile Safari failing to properly calculate the height of <iframe> elements, not supporting background-attachment: fixed and localStorage failing unintuitively in incognito mode. Safari is absolutely the browser that gives me the most issues; I'd call it the new IE.
mauflows 6y ago
Or they just don't own a Mac and have mixed results with virtualization. Maybe instead of blaming them recognize that Safari is extremely inaccessible software for most people
- Razengan 6y ago
  > Safari is extremely inaccessible software for most people How the hell is it "extremely inaccessible" for "most" people? It's Chrome that has an weirdass non-standard UI (the practice of showing app preferences/dialogs in a webpage needs to burn in the flames of Hades) and other niggles, not to mention being a privacy black hole. If they weren't told to use Chrome (i.e. Google didn't nag people to use Chrome when they're trying to use Search etc.) "most" Mac users wouldn't give a fuck about Chrome.

lilyball 6y ago

> The network tools suck (why is it so hard to find the request payload??) Speaking as a non-web-dev who looks at web inspector once in a blue moon, this took me about 5 seconds. I looked at the Network tab, selected a resource, noticed the information in the detail pane had headers but not payload, and then right-clicked the resource and selected "Reveal in Sources Tab" which revealed the payload there.

phaemon 6y ago
Clearly not an old-school mac user. Right click?!
usmannk 6y ago
If I followed your instructions correctly, that's the response payload not the request.
- ianwalter 6y ago
  Yes, which I think helps prove the parent's point!
- thiht 6y ago
  Exactly :) the request payload is hidden at the bottom of the Headers tab (yep...), you need to uncollapse it. I always forget where it is and confuse it with the response payload, which is really confusing when trying to debug what you send to a REST endpoint
quicklyfrozen 6y ago
Personally I'm usually looking through a bunch of responses trying to find the one I'm interested in, and that workflow sounds pretty awful.
ianwalter 6y ago
Isn't that the response payload and not the request payload?

mmastrac 6y ago

Devtools on Safari have been a joke for 5 years now. Ever since they split from Chrome and went down the Xcode "fancy" route, I have not been able to accomplish anything debugging in that browser.

djxfade 6y ago
They never split from Chrome. Chrome forked WebKit into Blink because Apple's wasn't merging Google's patches
- jolux 6y ago
  Not sure why you're getting downvoted but this is correct. KHTML -> WebKit -> Blink.
  - silly-silly 6y ago
    He's getting downvoted because people misunderstand what he means. Real debugging requires the xcode tools , not the built in 'web developer' garbage.
  - runarberg 6y ago
    And now we only can only hope for the next iteration to take over: KHTML → WebKit → Blink → Edge
    - Cthulhu_ 6y ago
      Unlikely, given how Edge just migrated to Blink itself.
      - latexr 6y ago
        I think the point your parent comment is making is that Microsoft may break away from Blink just like Google broke away from Webkit.
- om2 6y ago

alwillis 6y ago

The only time I've seen rendering issues with Safari was on early versions of Catalina but that was true of a lot of apps back then. I blame how sucky Catalina was for the first few releases. In the latest versions of Catalina and on Big Sur, Safari has been rock solid; none of these issues. Again, no issues with CSS Grid either. Igalia (https://www.igalia.com https://www.igalia.com) implemented CSS Grid for both Webkit and Blink; they had more commits to Webkit and Blink than anyone else except Apple and Google. It's not clear why there would be major differences between the two…

taurath 6y ago

Still no webm support on mobile is awful :(

tambourine_man 6y ago

You’re so right. It used to be great, the nightly WebKit build still uses the old one, I think. But I now use Safari for browsing and Chrome for developing, ever since they destroyed it.

wwweston 6y ago

Seconding all of this. I still regularly use it because of battery life/power (Firefox seems determined to turn my laptop into a space heater) and that has its merits but it's objectively bad in a number of other ways. (Oh, and I'm still thinking about the MBP 16" release a year ago -- Apple had a fancy web page for it with certain actions that triggered on scroll. That page crashed every time I tried to read it in Safari; I literally had to use another browser besides Apple's in order to take in an Apple product page. And I reported to Apple, they had mildly helpful front line support suggestions for troubleshooting... as if it was my problem, not theirs.)

bluedino 6y ago

That’s why I keep Firefox around as well. Surf in Safari and work in Firefox or Chrome.

mekster 6y ago

And why are you using Safari daily? I only use it to open non work related sites to split distractions because I agree it's not the best browser.

Razengan 6y ago
• Because Safari takes up much fewer CPU and RAM and feels much snappier in general compared to Chrome and Firefox. • The UI is 100% Mac'cy and doesn't try to be different in retarded ways. Fuck preferences-as-a-webpage. • The automatic syncing between my iPhone, iPad and Mac is also amazingly convenient. I can Handoff this page over to my phone and it will retain the comment I am currently typing! Can't beat that shit. • I don't do webdev so I don't care about the in-browser devtools, but they suffice for me when I dabble in it. • I want to limit what Google sees about me to as little as possible.

rck404 6y ago

In old safari, try setting 'max-content' to to any div 'width' attribute and it'll crash. This has been a persistent since many years and yet not fixed.

sgt 6y ago

It's not perfect but it's pretty darn close. Using the dev tools in Safari daily and it works like a charm.

intellix 6y ago

yep, Safari is absolutely unusable for development. Opening DevTools from an iOS open tab crashes instantly for me and it's impossible to use. It's the biggest pile of and I hope one day that Apple just discontinue it cause they obviously aren't putting any effort into it. If you use Safari I hate you