New Developer Tools Features in Firefox 34 | Hacker News Reader

New Developer Tools Features in Firefox 34

hacks.mozilla.org

365 pointsxOnic68 comments

Ok debug logging into a table is probably one of the best improvements to logging I've seen in a long time. I kinda want this in every programming language. There are so many useful things about it, especially the ability to then randomly sort it at will!

You might enjoy http://db.cs.berkeley.edu/papers/eurosys10-boom.pdf . They put everything into tables (debug logs, profiling info, server state, monitoring statistics, messages sent/received etc) and then debug the system by writing queries on the tables.

    cat /var/log/syslog | grep -i 'problem'

is also a query on the `/var/log/syslog` "database".

What would be really cool is a RDBMS where the single pieces of data in the cells are related to each other. For example the user IDs in the authentication log could be matched with the IDs present in the request log.

Why add the extra cat command?

grep -i 'problem' /var/log/syslog

He's after this weeks "Useless use of cat" award: http://www.smallo.ruhr.de/award.html#cat

Good to see there's still some competitors out there.

What a silly thing to complain about.

It was light hearted, comes with a smiley now :)

pipelines read better left to right

    </var/log/syslog grep -i 'problem'

because invariably you're going to want to recall this command from history and insert "grep -v HostnameIDontCareAbout" between the cat and the grep. or you're going to want to replace "grep -i 'problem'" with "awk '/problem/ { print $3 }". or you're going to want to do both.

people whine about 'useless use of cat' like it's still 1982, but the fact is that it's convenient for iterative development of a pipeline in situ and it costs nothing.

Apache Drill lets you search logs using column base requirements.

https://cwiki.apache.org/confluence/display/DRILL/Querying+a...

It doesn't work on files with no extension yet or at least there's a bug report on it:

https://issues.apache.org/jira/browse/DRILL-1320?filter=-3

Have a look at lnav: http://tstack.github.io/lnav/

It's been available in Chrome for a year and a half.. https://plus.google.com/u/0/+AddyOsmani/posts/PmTC5wwJVEc ..this is actually one of the things that's most annoying about web dev - each browser has some really cool stuff for debugging, but none of them has everything. The Firefox team are addressing that though - https://hacks.mozilla.org/2014/09/firefox-tools-adapter/ - Firefox nightly can connect to Chrome's debugging interface so you can use Firefox's toolset to debug a page in Chrome. Which is insanely cool.

I was under the impression that it only connects to the debugging interface on chrome for android. Has this changed?

? console.table (and fancy console.log html stuff) has been in Chrome and WebKit since 2012.

Yes, that's correct: The "Firefox Tools Adapter" targets Chrome for Android and Safari for iOS:

https://developer.mozilla.org/en-US/docs/Tools/Firefox_Tools...

You can also debug desktop Chrome with the devtools adapter. Its shown in the video on this page: https://hacks.mozilla.org/2014/09/firefox-tools-adapter

I think even IE11 supports it.

I'm more excited about this coming in the next version(s)

https://wiki.mozilla.org/Electrolysis

http://arewee10syet.com/

Back in August they were debating enabling by default in November but it is probably not ready for prime-time yet

https://wiki.mozilla.org/Electrolysis/Meetings/2014-08-21

If you're running the nightly channel, you already get a prompt introducing e10s and allowing you to enable it.

You can enable it in Aurora, but so far I've found way too much things to be broken for it to be useful.

Especially things like cookie-handling not working 100% and breaking login on lots of sites (like reddit, google, etc) makes enabling it a no-go, or at least did when I tried it a few weeks ago.

You do not want to enable e10s for Firefox Aurora, Beta, or release. The Nightly release channel has many critical bug fixes that are not in the other release channels. :)

The jQuery events inspector looks super useful.

I keep meaning to give Firefox another try - after ditching it for Safari, and then Chrome, some years ago - but I never quite find the motivation.

Why not now? One thing that I love about Firefox is its address bar implementation -- I find it so much better for finding old sites that I've visited before than other browsers. Just type one or more fragments of the URL and/or page title and 99% of the time it's right there in the suggestions. Incredibly helpful for finding bugs in Bugzilla, among other things. With Safari and Chrome I find it's never as smooth or easy.

You can import bookmarks and history from Chrome into Firefox. I'm not sure if it'll offer to do that automatically; if not, follow the instructions at https://support.mozilla.org/en-US/kb/import-bookmarks-google....

And don't forget the add-ons. As well as the well-known ones like AdBlock Plus, I recommend "Tree Style Tabs", which makes organising large numbers of tabs much easier, and "It's All Text", which lets you user the editor of your choice to edit any textbox in a web page. See https://addons.mozilla.org/en-US/firefox/ for these add-ons and more.

One tip: if you have an old Firefox profile hanging around, you should definitely reset it: https://support.mozilla.org/en-US/kb/reset-firefox-easily-fi.... This can fix various problems that old profiles are prone to having.

Finally, it might be a good time to read (or re-read) Mozilla's Manifesto: https://www.mozilla.org/en-US/about/manifesto/. It's good stuff.

Is there a tool for chome that also does this?

Yes - it's called jQuery Audit, and it's super helpful when figuring out whether evens are bound, if there are memory leaks etc.

https://chrome.google.com/webstore/detail/jquery-audit/dhhnp...

Another one: https://chrome.google.com/webstore/detail/jquery-event-callb...

What's holding me back is:

- doesn't natively interoperate with my keychain (and by extension iCloud Keychain). This is a huge win for using Safari on both my laptop and my iPhone.

- scrolling is still — after years of waiting — not up to par on OS X. No rubber band or proper inertial scrolling.

This is great! Firefox Aurora has been my main browser for over 6 months and now these great improvements will keep the status quo for me!

Is the bug that treats re-requests source files when opening the debugger fixed yet?

https://bugzilla.mozilla.org/show_bug.cgi?id=156435#c52

also this strangeness while using dev-tools:

https://bugzilla.mozilla.org/show_bug.cgi?id=771043

What about firebug? Who long will firebug live with sight of the developer tools becomming better and better?

I was excited about the WebIDE but apparently it's only for firefox OS apps. Is there any way of linking a webIDE to devTools? I'd pay for a tool that lets me click on a jsconsole error message and then takes me straight to the editor at that line and column on the original file.

Except Firefox OS apps are just web apps. They really should add just "Firefox" / "Web" as a target too.

That's the plan. Work in progress.

This sounds tremendous. It would be great for educational contexts — a development environment that doesn’t require anything more than installing a browser…

A ton of very compelling stuff. I hope it all works nicely; I have found the Firefox dev tools to be weirdly clunky of late and keep going back to Chrome, but this may drag me back.

Agreed, I just wish Firefox's design all-around was better. Things just feel a bit... off. The features here sure look great, though!

Hmm, I never found them to be clunky. I prefer them over Chrome's, but perhaps that's just because I'm used to them? I guess if you used Chrome for months, then read about Firefox' features and try them, they will always feel off.

Finally a way to easily inspect and delete cookies on the run. I remember getting voted down here for complaining about it previously.

EDIT: Ok, read-only. Too bad but at least they have it planned.

https://chrome.google.com/webstore/detail/editthiscookie/fng...

It's for Chrome and Chrome already has the features I want built-in. My point is that Firefox is lacking these.

https://addons.mozilla.org/en-US/firefox/addon/cookie-monste...

Can't live without it. Gives you an icon that allows you to instantly pull up all cookies related to the current site, inspect/delete, and set policy for them. Make sure to disable Ghostery's cookie control, though.

For quick inspection and deletion (that also includes localStorage), nothing has worked better for me than this bookmarklet: http://deceptiveweb.com/blog/examine-offline-data-bookmarkle...

The only feature in Firefox I miss in Chrome is the view that shows the stacked layers of a website. I dismissed it when I first tried, but it can be surprisingly useful. It's no reason to make me switch to Firefox though.

https://developer.mozilla.org/docs/Tools/3D_View

You can get an extension for chrome that does this: https://chrome.google.com/webstore/detail/3d-view-for-webpag...

Although the reviews say it doesn't work, I tried it and it works fine.

hehe... read the add-on comments.

Does anyone know if there is a way to theme the developer tools? Like you can do in Chrome?

Like https://chrome.google.com/webstore/detail/devtools-theme-zer...

The Firefox devtools have two themes built in ("dark theme" and "light theme") and can also be themed with CSS by Firefox extensions (just like all parts of the Firefox UI).

something that got "broken" for me in recent version of firefox (I think starting with 32) is that doing a console.log of a very long string does not display the whole string anymore

i.e it will print

"a looooooong string [..]" (with the [..])

same if i try to observe the variable in the debugger. And I cant find a way to get the full string in anyway, I understand for a lot things you dont want to print accidentally a 200k characters longs string as it will use a lot of memory for maybe nothing, but in my current use case (getting long xml documents to copy paste them in a beautifier / send to colleague as attachments for bug report etc.) it breaks my workflow (I'm posting here because google does not seems very talkative about this issue)

This is https://bugzilla.mozilla.org/show_bug.cgi?id=1027997

'workaround…is to click the value to edit it and then copy and paste somewhere else'

I think allan_s is talking about the value as displayed in the console proper, which can be expanded by clicking the "[…]" part:

http://i.imgur.com/qgBXdGZ.png

Tested by doing console.log(('test').repeat(100000))

thank you, actually I didn't thought about clicking on it, maybe making [...] appears in an other color ?

also the "edit and click value" on debugger was not working for me (also "cutting" the value to a certain limit)

is there any way of making the inspector show simple textContent inline with the nodes without having to unfold them? i keep going back to Firebug for this.

    <em>test</em>

rather than

    <em>
       test
    </em>

I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1071067 to get this issue tracked. I agree that we could do a better job here, as the unfolded view takes up 3x the vertical space compared to the inline view.

thanks, vote added.

Finally, the storage manipulation has arrived. Now I can get rid of Firebug completely.

How big are the developer tools compared to the rest of Firefox? 5% of the total size? 10%?

Can't the more sophisticated tools be split into a separate extension, leaving only some basic things in the distributed package?

As long as they don't impose any load while you're browsing without the tools opened, I see no reason to. And Chrome also includes them.

Dev Tools load on demand and do not affect casual browsing.

The addition of a "firebug like" tool has been made because having it not embedded was hurting Firefox adoption: removing it now would mean to forget the past.

Sweet, sweet console.table()! I've never been happy with the way that console.log works for objects/arrays, I'm eager to use this one

Oh, this is neat. This is probably the first time the built-in debugging tools make me think about ditching FireBug.

great to see the iframe switcher. Was such a pain to manually switch the context between top and child frames.

good list of tools, thanks!

Sourcemaps?

The Firefox debugger tool has supported sourcemaps for over a year: https://hacks.mozilla.org/2013/05/compiling-to-javascript-an...

Reply on news.ycombinator.com