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

61–70 of 118 posts

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

#61

Post by thousande »

mrspeaker wrote: post #51
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…

Same. Credit to the team for great support and follow-ups.

Some starting points for those who wants to contribute:

* Quick start for devtools developers: https://wiki.mozilla.org/DevTools/Hacking * More general info: http://codefirefox.com/

* bugs/tasks flagged as "mentored" is a good way to introduce your self to the code. Devtools mentored tasks:

https://bugzilla.mozilla.org/buglist.cgi?j_top=OR&f1=compone...

/Contributor

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

#64

Post by magicalist »

leeoniya wrote: post #52
clarkm wrote: post #47

Earlier quoted context omitted.

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.…

It's actually more like

1. Click request in console

2. Click on the request that was just highlighted for you in the Net panel

3. See headers right away, or click Response to see raw response or Preview to see those rendered nicely

4. Click console again to return

and then...

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

6. Go to the Net panel, still there for you

It's a different workflow and it's probably annoying to you since you're not used to it, but "it's not at all useful" is edging past hyperbolic. Personally I feel like a clumsy idiot when I go back to Firebug, even though I used to live in it and once knew every quirk. I think that's just the way of developer tools.

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

#65

Post by dubcanada »

presootto wrote: post #31
Dirlewanger wrote: post #15

Oh look, a bunch of updates to catch up to Chrome's tools again .

Firefox is Free software, Chrome is proprietary and made by the company that employs this guy: http://mostlysignssomeportents.tumblr.com/post/84829703425/r... I know what I'd choose.

Chrome is not proprietary. It's just a fork of WebKit which is entirely open source. Chromium/blink are both open source.

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

#66

Post by usaphp »

Just installed it from Aurora channel. I have not used firefox for couple years now (moved to Chrome) but I think I will jump back now. The only thing in dev tools missing so far for me compared to Chrome is :before and :after pseudo elements, I love how Chrome dev tools shows it as a separate entity in the inspector tree. I hope FF team implements it as well.

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

#67

Post by [deleted] »

mbrubeck wrote: post #43
interurban wrote: post #41

Earlier quoted context omitted.

F12 is the default shortcut for opening the IE devtools, maybe that's why?

Yup, the IE devtools are named "F12" after the keyboard shortcut: http://msdn.microsoft.com/library/ie/bg182326%28v=vs.85%29 (F12 is also the keyboard shortcut for opening the developer tools in Chrome, Firefox, and others.)

[deleted]

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

#68

Post by pytrin »

usaphp wrote: post #66

Just installed it from Aurora channel. I have not used firefox for couple years now (moved to Chrome) but I think I will jump back now. The only thing in dev tools missing so far for me compared to Chrome is :before and :after pseudo elements, I love how Chrome dev tools shows it as a separate entity in the inspector tree. I hope FF team implements it as well.

Firebug gives you the option to toggle all pseudo states for an element and edit its CSS. IMO Firebug and Chrome's dev tools still lag behind Firebug's.

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

#69

Post by tieTYT »

> Console stack traces

> console.error, console.exception, and console.assert logs in the console now include the full stack from where the call was made

But what about if I use `new Error("something");` ? That's how I let errors bubble up in my app. Am I doing it wrong? According to this, that won't show a stack trace.

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

#70

Post by mnemonik »

usaphp wrote: post #66

Just installed it from Aurora channel. I have not used firefox for couple years now (moved to Chrome) but I think I will jump back now. The only thing in dev tools missing so far for me compared to Chrome is :before and :after pseudo elements, I love how Chrome dev tools shows it as a separate entity in the inspector tree. I hope FF team implements it as well.

We have it in the sidebar but not the tree. Its coming though: https://bugzilla.mozilla.org/show_bug.cgi?id=920141
Post reply on HN