7 ms·

New Safari developer tools provide insight into CSS Grid Lanes

123 points by feross 9mo ago

etchalon 9mo ago
Safari continues to have the best developer tools, so long as you don't need to debug JavaScript.
- akst 9mo ago
  I don't think JS debugging in Safari is that bad. But I also use it as my main browser, so maybe there are some nicer features in other browser dev tools I haven't been exposed too.
  - etchalon 9mo ago
    It's mostly that there's no way for third-party tooling to initiate a debugging session, I believe.
    - akst 9mo ago
      That's fair.
  - baxuz 9mo ago
    It's criminally bad. You can't copy logged variables. You can't inspect worker threads (!?). WASM support is practically non-existant. You can't even do a heap snapshot on demand, something that should be a basic feature. The timelines view is practically obfuscated with pretty graphs that show some aggregated data and some automatically generated snapshot points where the dev tools decide that are meaningful. Inspecting the rendering pipeline is impossible. You can't see memory usage, compositing reasons, long frames (you kinda can but it's tricky)... Not even going into remote debugging for iOS which crashes either the dev tools or Safari on iOS in any non-trivial scenario — the exact ones you need a debugger for.
    - akst 9mo ago
      That's fair, it sounds like you're dealing with some use cases I don't deal with often. And yeah remote debugging safari on an iPhone is pretty unreliable.
- aaronbrethorst 9mo ago
  I use Safari for day-to-day web browsing and Chrome for development. Feels like the best of both worlds to me.
  - matwood 9mo ago
    Same. Chrome dev tools, especially around JS are just better.
- boxed 9mo ago
  The Chrome tool where you can edit CSS inside the inspect panel and it writes it to the CSS file is amazing and I really miss that in Safari.
- troupo 9mo ago
  Safari's dev tools are ... just bad. They are frustratingly cumbersome to use: https://x.com/dmitriid/status/1711701552082079764 https://x.com/dmitriid/status/1711701552082079764
- akst 8mo ago
  People have pointed out to what’s Obviously wrong with the JS tooling but I had more problems with CSS style sheets generated at runtime or web components attached stylesheets They all work is just editing their styles that seems to be a pain, you straight up cannot edit a shared stylesheet attached to an web components elements shadow dom. If you generate enough styles in JS you may not be to edit them correctly (as in it shed you the wrong styles for the element)
deleted 9mo ago
[deleted]
gabeidx 9mo ago
It's so good to see Safari steadily making progress on being a decent browser.
- jen729w 9mo ago
  I guess the snark is funny, so I'll bite. I've used Safari daily for … must be 20 years now? Every day, for everything, minus the odd exceptionally rare circumstance. And I couldn't tell you what the last one of those was, it was so long ago. I'm a web developer. I use its devtools constantly. People ask why do you use Safari and not Chrome and I think the question is backwards. Why, given how lovely Safari is, would you go and download Chrome? It's really ugly and doesn't look like any of the other apps on my Mac. When I do want other devtools, I vastly prefer Firefox's to Chrome's.
  - troupo 9mo ago
    Safari's dev tools are infuriatingly cumbersome in comparison to Chrome. They go out of their way to make even the simplest actions hidden in multiple selects and popup menus. I even made a screencast of it: https://x.com/dmitriid/status/1711701552082079764 https://x.com/dmitriid/status/1711701552082079764 As a browser? I agree with you.
  - pprotas 9mo ago
    I don’t think the common question is “Why not use Chrome instead of Safari?” but “Why use Safari?”
    - Y-bar 9mo ago
      I have colleagues who are annoyed that I use Firefox because in their world everything Chrome does is standard and browsers like Safari and Firefox are annoying outliers. No matter if something they have implemented in Chrome is _actually_ standard and no matter how proper to the spec non-Chrome browsers implement a feature they see it as a chore to support the spec rather than the Chrome browser. So, the "Why not use Chrome instead of Safari?” certainly happens.
    - 9mo ago
dekoidal 9mo ago
Have a pat on the head, Safari.
jiehong 9mo ago
Safari is a fine browser, just as Firefox and Chrome are [0]. Regarding CSS Grid Lanes, I find it to be a better name than "masonry". I'm not sure how often I'd actually reach for grid lanes, but I guess not often. What good use cases would you see for grid lanes today? [0]: <out of topic>If anything, Chrome is the new IE: is a monopoly imposing its quirks and "standards" on others.</out of topic>
- baw-bag 9mo ago
  You can't debug it in anything other than a mac
  - edhelas 9mo ago
    This I have users that have issues with Safari, CSS and Javascripts ones. I MUST own an Apple device to debug anything. I'm sorry but as a Free Software Web Developer I can't spend 2K€ on a Mac to just fix a CSS issue.
    - SyrupThinker 9mo ago
      Frequently, but not always, I can reproduce such bugs using Epiphany [1] or other WebKit based browsers. That's at least somewhat cheaper when it works. [1]: https://webkit.org/downloads/ https://webkit.org/downloads/
    - detourdog 9mo ago
      When I was making money as a developer I purchased wintel systems to verify my work. I thought of it as the cost of doing business. Many Macs cost less then 2K euros.
    - tcoff91 9mo ago
      A Mac mini is pretty affordable. Also you can use browserstack.
    - wpm 9mo ago
      You can buy a refurb Mac mini for €589. Macs haven't started at €2K since the early 90s.
spiderfarmer 9mo ago
For a new project I looked into supporting grid-lanes with the polyfill on Simon Willisons website. But sadly the polyfill is not comparible to the native experience. The column width calculation is off.
amadeuspagel 9mo ago
How does "brick" mean "content flows in the column direction"? Don't you lay bricks row by row?
- jensimmons 9mo ago
  The "brick" layout creates rows, yes. When a regular person looks at it, they will see rows. But Grid Lanes flows content up and down, not across the row. If you just want content to flow down one row, then the next, then the next, Flexbox is a better solution. The whole point of masonry layout is that content flows perpendicular to the lane.

123 points by feross 9mo ago

etchalon 9mo ago

Safari continues to have the best developer tools, so long as you don't need to debug JavaScript.

akst 9mo ago
I don't think JS debugging in Safari is that bad. But I also use it as my main browser, so maybe there are some nicer features in other browser dev tools I haven't been exposed too.
- etchalon 9mo ago
  It's mostly that there's no way for third-party tooling to initiate a debugging session, I believe.
  - akst 9mo ago
    That's fair.
- baxuz 9mo ago
  It's criminally bad. You can't copy logged variables. You can't inspect worker threads (!?). WASM support is practically non-existant. You can't even do a heap snapshot on demand, something that should be a basic feature. The timelines view is practically obfuscated with pretty graphs that show some aggregated data and some automatically generated snapshot points where the dev tools decide that are meaningful. Inspecting the rendering pipeline is impossible. You can't see memory usage, compositing reasons, long frames (you kinda can but it's tricky)... Not even going into remote debugging for iOS which crashes either the dev tools or Safari on iOS in any non-trivial scenario — the exact ones you need a debugger for.
  - akst 9mo ago
    That's fair, it sounds like you're dealing with some use cases I don't deal with often. And yeah remote debugging safari on an iPhone is pretty unreliable.
aaronbrethorst 9mo ago
I use Safari for day-to-day web browsing and Chrome for development. Feels like the best of both worlds to me.
- matwood 9mo ago
  Same. Chrome dev tools, especially around JS are just better.
boxed 9mo ago
The Chrome tool where you can edit CSS inside the inspect panel and it writes it to the CSS file is amazing and I really miss that in Safari.
troupo 9mo ago
Safari's dev tools are ... just bad. They are frustratingly cumbersome to use: https://x.com/dmitriid/status/1711701552082079764 https://x.com/dmitriid/status/1711701552082079764
akst 8mo ago
People have pointed out to what’s Obviously wrong with the JS tooling but I had more problems with CSS style sheets generated at runtime or web components attached stylesheets They all work is just editing their styles that seems to be a pain, you straight up cannot edit a shared stylesheet attached to an web components elements shadow dom. If you generate enough styles in JS you may not be to edit them correctly (as in it shed you the wrong styles for the element)

deleted 9mo ago

[deleted]

gabeidx 9mo ago

It's so good to see Safari steadily making progress on being a decent browser.

jen729w 9mo ago
I guess the snark is funny, so I'll bite. I've used Safari daily for … must be 20 years now? Every day, for everything, minus the odd exceptionally rare circumstance. And I couldn't tell you what the last one of those was, it was so long ago. I'm a web developer. I use its devtools constantly. People ask why do you use Safari and not Chrome and I think the question is backwards. Why, given how lovely Safari is, would you go and download Chrome? It's really ugly and doesn't look like any of the other apps on my Mac. When I do want other devtools, I vastly prefer Firefox's to Chrome's.
- troupo 9mo ago
  Safari's dev tools are infuriatingly cumbersome in comparison to Chrome. They go out of their way to make even the simplest actions hidden in multiple selects and popup menus. I even made a screencast of it: https://x.com/dmitriid/status/1711701552082079764 https://x.com/dmitriid/status/1711701552082079764 As a browser? I agree with you.
- pprotas 9mo ago
  I don’t think the common question is “Why not use Chrome instead of Safari?” but “Why use Safari?”
  - Y-bar 9mo ago
    I have colleagues who are annoyed that I use Firefox because in their world everything Chrome does is standard and browsers like Safari and Firefox are annoying outliers. No matter if something they have implemented in Chrome is _actually_ standard and no matter how proper to the spec non-Chrome browsers implement a feature they see it as a chore to support the spec rather than the Chrome browser. So, the "Why not use Chrome instead of Safari?” certainly happens.
  - 9mo ago

dekoidal 9mo ago

Have a pat on the head, Safari.

jiehong 9mo ago

Safari is a fine browser, just as Firefox and Chrome are [0]. Regarding CSS Grid Lanes, I find it to be a better name than "masonry". I'm not sure how often I'd actually reach for grid lanes, but I guess not often. What good use cases would you see for grid lanes today? [0]: <out of topic>If anything, Chrome is the new IE: is a monopoly imposing its quirks and "standards" on others.</out of topic>

baw-bag 9mo ago
You can't debug it in anything other than a mac
- edhelas 9mo ago
  This I have users that have issues with Safari, CSS and Javascripts ones. I MUST own an Apple device to debug anything. I'm sorry but as a Free Software Web Developer I can't spend 2K€ on a Mac to just fix a CSS issue.
  - SyrupThinker 9mo ago
    Frequently, but not always, I can reproduce such bugs using Epiphany [1] or other WebKit based browsers. That's at least somewhat cheaper when it works. [1]: https://webkit.org/downloads/ https://webkit.org/downloads/
  - detourdog 9mo ago
    When I was making money as a developer I purchased wintel systems to verify my work. I thought of it as the cost of doing business. Many Macs cost less then 2K euros.
  - tcoff91 9mo ago
    A Mac mini is pretty affordable. Also you can use browserstack.
  - wpm 9mo ago
    You can buy a refurb Mac mini for €589. Macs haven't started at €2K since the early 90s.

spiderfarmer 9mo ago

For a new project I looked into supporting grid-lanes with the polyfill on Simon Willisons website. But sadly the polyfill is not comparible to the native experience. The column width calculation is off.

amadeuspagel 9mo ago

How does "brick" mean "content flows in the column direction"? Don't you lay bricks row by row?

jensimmons 9mo ago
The "brick" layout creates rows, yes. When a regular person looks at it, they will see rows. But Grid Lanes flows content up and down, not across the row. If you just want content to flow down one row, then the next, then the next, Flexbox is a better solution. The whole point of masonry layout is that content flows perpendicular to the lane.