Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Firefox Developer Tools – Editable box model, Sublime Text keys

hacks.mozilla.org

Post reply on HN
Print view View original

51–60 of 118 posts

Re: Firefox Developer Tools – Editable box model, Sublime Text keys

#51

Post by mrspeaker »

enscr wrote: post #14

The editable box model & color picker are very useful. I wonder if the editor would one day catch up so that you do your development in the browser itself.

I made my first contribution to Firefox the other day... I downloaded the source on a whim, realised I could build and run it - so went to the bug tracker.

There was a bug with the box model editor that if the labels were long (such as "auto") then they would overlap the borders. I made it so long labels will rotate 90 degrees (try it out, change the outside margin to "auto").

I'm pretty stoked that some code I wrote is in Firefox - seeing an advertised feature that I (in a small way) contributed to is pretty exciting!

Re: Firefox Developer Tools – Editable box model, Sublime Text keys

#52

Post by leeoniya »

clarkm wrote: post #47
leeoniya wrote: post #34

Earlier quoted context omitted.

it's not at all useful. all you get is some stack-tace-like thing without any of what you actually want to see. like req/resp headers and body, params, inline json/html decoding based on response type. chrome lags here by a large margin.

Just click the request from the console, and it takes you to the network tab where you can see the headers, response, etc.

to see the response body of a request in chrome:

1. Click request in console

2. Find and click request again in Net panel

3. Click Preview or Response tab

4. Click console again to return

and then...

5. Oh wait, want to see something in the headers

6. Rinse and repeat.

In FB:

1. Click request in console.

2. See raw response body right away, or click headers to see headers or json/html to see those rendered nicely.

3. bonus: view multiple json requests in same window

Re: Firefox Developer Tools – Editable box model, Sublime Text keys

#53

Post by quarterto »

mnemonik wrote: post #46
quarterto wrote: post #27

The main thing that drove me back to Chrome for web dev was the performance. Firefox would hang for ~30 seconds trying to load source maps for our 150+ modules. Since it's single-threaded, this locks up the entire UI every time our app loads with dev tools open. And if it pauses on an exception during this 30 seconds, good luck trying to do anything for the next five minutes.

We had some source map performance issues a while back, but I fixed all the ones that were reported. If you have a test case and steps to reproduce, I'd love to take a look :)

Don't have a minimal test case yet, I'm seeing it happen on a page with >150 files bundled into a single file with a base64 data URI source map. If the debugger is open on page load, it hangs for 30 seconds to a minute, but loads practically instantly if I open the debugger after page load.

Is there an existing bug I can chime in on or should I report a new one?

Re: Firefox Developer Tools – Editable box model, Sublime Text keys

#54

Post by jolt »

mnemonik wrote: post #23
jolt wrote: post #12

Is it only on Mac it shows the actual status codes on the network tab? On Windows i have to hover the little icon in the first column, which is really annoying when I'm trying to figure out if my caching is working correctly.

Sounds like your windows copy of firefox might be the main release channel. The numeric status codes have been in since 30 (currently Beta). You can hop on Aurora (or Beta, or Nightly, but Aurora is generally best for web devs), or just wait about 6 weeks for the next uplift. https://bugzilla.mozilla.org/show_bug.cgi?id=972054

I see. Thank you!

Re: Firefox Developer Tools – Editable box model, Sublime Text keys

#55

Post by ep103 »

mundanevoice wrote: post #9
james33 wrote: post #4

Wow, I'm really impressed with the strides Mozilla has been making on this front. Chrome has long had the best dev tools and is one of the reasons I hardly ever use Firefox anymore. Once these updates land it may be on par or even better. Excited to see true competition on the dev side of things now.

Same here. I still feel Firefox devtools are not innovating fast enough. Chrome workspaces and a lot of other useful features are just not present in Firefox. I feel that's one of the major reason I could never migrated to Firefox professionally. I am also quite impressed with IE 10 & 11 devtools. It is really useful and has clean UI and UX. In short I could say that: Chrome Devtools > Firebug > IE devtools > Firefox…

I'll use chrome devtools the day they add multiline console support. Really? In 2014, and you want me to shift-enter 200 lines of code?

Re: Firefox Developer Tools – Editable box model, Sublime Text keys

#56

Post by mnemonik »

quarterto wrote: post #53
mnemonik wrote: post #46

Earlier quoted context omitted.

We had some source map performance issues a while back, but I fixed all the ones that were reported. If you have a test case and steps to reproduce, I'd love to take a look :)

Don't have a minimal test case yet, I'm seeing it happen on a page with >150 files bundled into a single file with a base64 data URI source map. If the debugger is open on page load, it hangs for 30 seconds to a minute, but loads practically instantly if I open the debugger after page load. Is there an existing bug I can chime in on or should I report a new one?

New one, please: https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&c...

I understand if your app is proprietary and you can't share the source, but even non-minimal test cases are much better than no test case :)

Thanks!

Re: Firefox Developer Tools – Editable box model, Sublime Text keys

#57

Post by canadev »

tracker1 wrote: post #16

I was surprised when I first saw Copy as cURL in Chrome... and very happy to see it here. It makes for a great base test case... now if the api client tools would only take one of these curl commands and set the settings for a request. I think it's almost funny, but a cURL command line could become the common interface for many tools.

Very happy to see Copy as cURL. Just wrote a crappy script to make copy-pasted cookies from the request window into curl parameters two days ago.

I am sure I will use this quite frequently.

Re: Firefox Developer Tools – Editable box model, Sublime Text keys

#58

Post by dubcanada »

givan wrote: post #8
james33 wrote: post #4

Wow, I'm really impressed with the strides Mozilla has been making on this front. Chrome has long had the best dev tools and is one of the reasons I hardly ever use Firefox anymore. Once these updates land it may be on par or even better. Excited to see true competition on the dev side of things now.

Firebug is still unbeatable, chrome dev has a lot to catch up.

I can't stand firebug, the UI is a complete turn off for me. The Chrome dev tools (any any webkit for that matter) just look and function better for what I spend 99% of my time in dev tools doing, tweaking CSS.

Re: Firefox Developer Tools – Editable box model, Sublime Text keys

#59

Post by IceCreamYou »

ep103 wrote: post #55
mundanevoice wrote: post #9

Earlier quoted context omitted.

Same here. I still feel Firefox devtools are not innovating fast enough. Chrome workspaces and a lot of other useful features are just not present in Firefox. I feel that's one of the major reason I could never migrated to Firefox professionally. I am also quite impressed with IE 10 & 11 devtools. It is really useful and has clean UI and UX. In short I could say that: Chrome Devtools > Firebug > IE devtools > Firefox…

I'll use chrome devtools the day they add multiline console support. Really? In 2014, and you want me to shift-enter 200 lines of code?

I got frustrated with this and created BigConsole[1] to solve it. It's a Chrome extension that adds a Firebug-style split console to DevTools.

Then I tweeted about it, and Addy Osmani responded[2] pointing out that Chrome does in fact support multiline consoles with its Snippets[3] feature. It's still kind of obnoxious, but it does the job.

[1] https://github.com/IceCreamYou/Chrome-BigConsole [2] https://twitter.com/IceCreamYou/status/354181339408375809 [3] https://developers.google.com/chrome-developer-tools/docs/au...

Re: Firefox Developer Tools – Editable box model, Sublime Text keys

#60

Post by dpcan »

james33 wrote: post #4

Wow, I'm really impressed with the strides Mozilla has been making on this front. Chrome has long had the best dev tools and is one of the reasons I hardly ever use Firefox anymore. Once these updates land it may be on par or even better. Excited to see true competition on the dev side of things now.

Arrrg.

I use Chrome for everything but I don't like dev tools and consistently use Firefox because it works so much better for me.

I've been fearing for a long time now that Mozilla would just start doing whatever Chrome is doing.

When it comes to updating dev tools, I wish everything new were an option. When you change a "tool" you change how I "work", and bumps in my work flow just slow me down.

Post reply on HN