6 ms·

Other browsers need to catch up to Chrome with their development tools. I'd be happy to use Safari or Firefox for development, but... - I can't disable CORS in

by dak1 8y ago

Other browsers need to catch up to Chrome with their development tools. I'd be happy to use Safari or Firefox for development, but... - I can't disable CORS in Firefox (yes, sometimes you have to disable CORS rather than modify the Allow-Origin header response, for example if you need to test against a production backend) (and, no, CORS Everywhere is not a sufficient solution). - I can't inspect WebSocket frames in anything except Chrome. - Safari does not allow self-signed certs over WSS (and there's no way to override it). - Safari does not respect System-wide APC Config for Proxies. There's a handful of other issues. Both Safari and Firefox do do things well, and often better than Chrome. For example, Firefox tends to actually handle standards correctly, whereas Chrome tries to be overly forgiving. And Safari's Develop and Debug menus are easily the best and quickest way to disable CORS or JavaScript, and examine service workers. Unfortunately, some of the above issues are blockers. I can test with Firefox on staging or in production, but not being able to test up front during development really impacts compatibility testing. If another browser was as good or better for development, I'd be happy to use it.

fredsted 8y ago
>- I can't inspect WebSocket frames in anything except Chrome. For what it's worth, WebSockets show up as type 'Other' in the inspector, and the frames are listed under 'Preview'. Edit: Safari.
- echeese 8y ago
  In which browser?
- ken 8y ago
  It just says "WebSocket Connection Established", and then a list of "Binary Frame". Is there a way to inspect their contents? Just seeing that frames are being sent doesn't seem very useful for debugging.
  - eridius 8y ago
    I just tested Safari 12.0.3 on macOS 10.14.3 with https://websocket.org/echo.html https://websocket.org/echo.html and it works for me. In the inspector it has a Sockets folder with the socket, and when I select it, it shows the textual content of each frame. Edit: This is of course textual frames. I don't know where to find a site that demonstrates binary frames. I do notice that if I right-click the textual frame it has "Log Frame Text" as an option; maybe with a binary frame you can ask it to log the binary frame contents? Edit 2: Ok I found a binary websocket test and unfortunately there is no option to log the binary info. That sucks. I recommend filing a bug report at bugreport.apple.com requesting better tooling around this. It's also worth checking the Safari Technical Preview to see if they've already added any better tooling.
arendtio 8y ago
I agree. While the Firefox dev-tools improved a lot over in recent years, they are still not up to where the chrome dev-tools are. Currently, I try to use the Firefox dev-tools as much as possible but keep chrome prepared for some special cases. From a consumer perspective, the story is very different: Any browser will probably do, but choosing Firefox has the best long term effect on the development of the internet.
- thanatropism 8y ago
  You just said Chrome was the superior browser for developers. > the best long term effect What do you mean by this?
  - cptskippy 8y ago
    > What do you mean by this? Supporting Google/Chrome is supporting corporate interest over user interest. We've seen them already taking steps to remove support for 3rd Party Ad Blocking and to ignore privacy related features.
    - wnevets 8y ago
      > remove support for 3rd Party Ad Blocking that's a bit misleading, no?
      - cptskippy 8y ago
        Google maintains plausible deniability but it's an odd coincidence that they first introduce their own Ad Blocker, and then soon after propose to remove an API that's necessary for 3rd Party Ad Blockers. If you keep in mind that Google is an Ad company then adding an Ad Blocker to their product doesn't make sense until you consider that by doing so they diminish the need for 3rd party Ad Blockers. Once you can successfully argue 3rd Party Ad Blockers are unnecessary then the argument for removing an API they depend on to function is easier.
        deleted 8y ago
quest88 8y ago
Yup, Chrome has the best devtools for what I need and I'll continue to use it until there's a better alternative.
- ionised 8y ago
  What is the difference between the two? I am primarily a back-end/services/middleware dev and don't do much front-end stuff these days. When I do though, I use Firefox's dev tools and I don't know...I'm not sure what I'm missing? I have Chrome on this machine too and have tried the dev tools there but I beyond layout I don't know what the differences are or what Firefox's dev tools are lacking.
  - TheAceOfHearts 8y ago
    Chrome DevTools is far more feature-complete than any of the alternatives. I consider it the gold standard for developer tools. Every release they publish a blog post with new DevTools features, here's the latest one from January 2018 [0]. If you scroll to the bottom it has a section titled "Discover other DevTools features", which provides a long list of features they've been adding over time. Their console autocomplete is just amazing. If you type `document.querySelectorAll('body')`, it shows you a preview of the result without even having to hit enter. Then if you type a period it shows you that the constructor is a NodeList, as well as its methods. They go over many of these features in their May 2018 [1] blog post. Keyboard navigation has continually been improving as well. There's no huge killer feature, it's just very solid all-around. Over the years it has remained miles ahead of the competition. With that being said, I still use Firefox as my daily-driver, and I'm perfectly happy with their DevTools for many tasks. And they're actually superior for certain tasks, for example, when working with `display: grid` and `display: flex` [2]. I usually switch over to Chromium while I'm actively developing or debugging something, but I don't think there's any need to limit yourself to just one tool. [0] https://developers.google.com/web/updates/2019/01/devtools https://developers.google.com/web/updates/2019/01/devtools [1] https://developers.google.com/web/updates/2018/05/devtools https://developers.google.com/web/updates/2018/05/devtools [2] https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto...
rhlsthrm 8y ago
I switched recently to using Safari for all my browsing except when I need DevTools, then I just fire up a Chrome window. Only having one Chrome tab open instead of dozens seems to help performance and battery life on my MacBook as well.
wwweston 8y ago
This is a worthwhile point. I still consider Chrome handy and occasionally essential for development. But it's no longer my day-to-day browser. Firefox became more than adequate for that with quantum, and I see no reason to enable a Google that has made absolutely sure to shape itself into a machine that will always have powerful incentives to do the wrong thing.
enraged_camel 8y ago
Yes, totally agreed. I have given Firefox a try several times over the past year, but always came back to Chrome because of Dev Tools.
aloer 8y ago
totally agree. There's one thing that safari has and (afaik) noone else: you can visually inspect all canvas elements on the site even if they are offscreen
valtism 8y ago
Yep. Chrome chugs on super long minified JS lines, but is fine after pretty printing. Meanwhile Firefox will crash on those minified lines, and even when they are non-minified, the size of the files causes FF devtools to run so slowly they are unusable.
Sammi 8y ago
I cannot use the Firefox dev tools because they completely choke on the Angular app I'm working on, while Chrome chugs along like nobodies business. I am using Firefox as my daily driver, because the browser itself is fast. But the dev tools just don't deliver. Waiting for a breakpoint to hit and open takes forever.

by dak1 8y ago

fredsted 8y ago

>- I can't inspect WebSocket frames in anything except Chrome. For what it's worth, WebSockets show up as type 'Other' in the inspector, and the frames are listed under 'Preview'. Edit: Safari.

echeese 8y ago
In which browser?
ken 8y ago
It just says "WebSocket Connection Established", and then a list of "Binary Frame". Is there a way to inspect their contents? Just seeing that frames are being sent doesn't seem very useful for debugging.
- eridius 8y ago
  I just tested Safari 12.0.3 on macOS 10.14.3 with https://websocket.org/echo.html https://websocket.org/echo.html and it works for me. In the inspector it has a Sockets folder with the socket, and when I select it, it shows the textual content of each frame. Edit: This is of course textual frames. I don't know where to find a site that demonstrates binary frames. I do notice that if I right-click the textual frame it has "Log Frame Text" as an option; maybe with a binary frame you can ask it to log the binary frame contents? Edit 2: Ok I found a binary websocket test and unfortunately there is no option to log the binary info. That sucks. I recommend filing a bug report at bugreport.apple.com requesting better tooling around this. It's also worth checking the Safari Technical Preview to see if they've already added any better tooling.

arendtio 8y ago

I agree. While the Firefox dev-tools improved a lot over in recent years, they are still not up to where the chrome dev-tools are. Currently, I try to use the Firefox dev-tools as much as possible but keep chrome prepared for some special cases. From a consumer perspective, the story is very different: Any browser will probably do, but choosing Firefox has the best long term effect on the development of the internet.

thanatropism 8y ago
You just said Chrome was the superior browser for developers. > the best long term effect What do you mean by this?
- cptskippy 8y ago
  > What do you mean by this? Supporting Google/Chrome is supporting corporate interest over user interest. We've seen them already taking steps to remove support for 3rd Party Ad Blocking and to ignore privacy related features.
  - wnevets 8y ago
    > remove support for 3rd Party Ad Blocking that's a bit misleading, no?
    - cptskippy 8y ago
      Google maintains plausible deniability but it's an odd coincidence that they first introduce their own Ad Blocker, and then soon after propose to remove an API that's necessary for 3rd Party Ad Blockers. If you keep in mind that Google is an Ad company then adding an Ad Blocker to their product doesn't make sense until you consider that by doing so they diminish the need for 3rd party Ad Blockers. Once you can successfully argue 3rd Party Ad Blockers are unnecessary then the argument for removing an API they depend on to function is easier.
      - deleted 8y ago

quest88 8y ago

Yup, Chrome has the best devtools for what I need and I'll continue to use it until there's a better alternative.

ionised 8y ago
What is the difference between the two? I am primarily a back-end/services/middleware dev and don't do much front-end stuff these days. When I do though, I use Firefox's dev tools and I don't know...I'm not sure what I'm missing? I have Chrome on this machine too and have tried the dev tools there but I beyond layout I don't know what the differences are or what Firefox's dev tools are lacking.
- TheAceOfHearts 8y ago
  Chrome DevTools is far more feature-complete than any of the alternatives. I consider it the gold standard for developer tools. Every release they publish a blog post with new DevTools features, here's the latest one from January 2018 [0]. If you scroll to the bottom it has a section titled "Discover other DevTools features", which provides a long list of features they've been adding over time. Their console autocomplete is just amazing. If you type `document.querySelectorAll('body')`, it shows you a preview of the result without even having to hit enter. Then if you type a period it shows you that the constructor is a NodeList, as well as its methods. They go over many of these features in their May 2018 [1] blog post. Keyboard navigation has continually been improving as well. There's no huge killer feature, it's just very solid all-around. Over the years it has remained miles ahead of the competition. With that being said, I still use Firefox as my daily-driver, and I'm perfectly happy with their DevTools for many tasks. And they're actually superior for certain tasks, for example, when working with `display: grid` and `display: flex` [2]. I usually switch over to Chromium while I'm actively developing or debugging something, but I don't think there's any need to limit yourself to just one tool. [0] https://developers.google.com/web/updates/2019/01/devtools https://developers.google.com/web/updates/2019/01/devtools [1] https://developers.google.com/web/updates/2018/05/devtools https://developers.google.com/web/updates/2018/05/devtools [2] https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto...

rhlsthrm 8y ago

I switched recently to using Safari for all my browsing except when I need DevTools, then I just fire up a Chrome window. Only having one Chrome tab open instead of dozens seems to help performance and battery life on my MacBook as well.

wwweston 8y ago

This is a worthwhile point. I still consider Chrome handy and occasionally essential for development. But it's no longer my day-to-day browser. Firefox became more than adequate for that with quantum, and I see no reason to enable a Google that has made absolutely sure to shape itself into a machine that will always have powerful incentives to do the wrong thing.

enraged_camel 8y ago

Yes, totally agreed. I have given Firefox a try several times over the past year, but always came back to Chrome because of Dev Tools.

aloer 8y ago

totally agree. There's one thing that safari has and (afaik) noone else: you can visually inspect all canvas elements on the site even if they are offscreen

valtism 8y ago

Yep. Chrome chugs on super long minified JS lines, but is fine after pretty printing. Meanwhile Firefox will crash on those minified lines, and even when they are non-minified, the size of the files causes FF devtools to run so slowly they are unusable.

Sammi 8y ago

I cannot use the Firefox dev tools because they completely choke on the Angular app I'm working on, while Chrome chugs along like nobodies business. I am using Firefox as my daily driver, because the browser itself is fast. But the dev tools just don't deliver. Waiting for a breakpoint to hit and open takes forever.