Hacker News Reader

Comment by nestlequ1k | Hacker News Reader

I switched to Chrome web dev tools about 5 months ago and haven't had a reason to launch Firefox since.

There's still stuff I miss about firebug, but overall the chrome web tools are a gigantic improvement in speed, reliability, and functionality. Firebug feels like a dinosaur in comparison.

Capturing the web developer mindshare is actually a huge win for Google, because it means the quality of web apps is going to be highest for Chrome end-users, with subtle but visible bugs in other browsers due to the simple fact that developers will spend less time in these browsers.

View on HN

I have the exact opposite experience with Chrome dev tools. It feel clunky and poorly designed in comparison to firebug. Things like clicking on an element you're trying to edit doesn't work. The page doesn't automatically update your changes as you type them. Trying to modify an html attribute in line is a battle. I could go on. It just doesn't feel polished. It doesn't feel like the people who wrote it actually use it, whereas firebug feels like the user experience was first priority.

It appears that this might start to turn around now...

Chrome has the best Javascript debugging tools.

However when it comes to CSS and HTML, its lagging behind Firebug.

That said, now adays I find myself in Chrome far more than Firefox simply because Javascript debugging in Chrome is fast, never crashes, and is pretty necessary if you're building an extensive rich interface app.

I don't think I agree, as a heavy JavaScript developer. I use FireBug specifically for JavaScript debugging, here are the reasons:

1. The console is a lot better. You aren't limited to the one line interpreter that Chrome provides.

2. Using console.log, and console.dir I get a colored DOM/JSON output. I can click the DOM element and it'll get me to the DOM/HTML tab. This is not available in Chrome. I can move the mouse over the DOM element and it'll be highlighted in the browser.

3. Add-ons: I use the jQuery and Cookies add-ons and they add a lot to the console. I can include jQuery with a click and it highlights the jQuery objects for me in the console. I can watch cookies changes from the console directly.

4. For the debugging tools, they are equal. For syntax coloring the JavaScript code, there is a Firebug add-on for that.

Regarding #1, you can do multiline if you paste, or option-return.

Chrome can do #1 and #2.

How do you do #2?

Recent versions of the Webkit dev tools do syntax coloration and highlighting on hover.

They don't link to the Elements tab though.

2 only partially: it does not link to the DOM tab.

I am a long time firebug and chrome developer tools user and i was with you on chrome having the "best Javascript debugging tools". Unfortunately, it still crashes when doing some tricky debugging things, and it has plenty of bugs (e.g. after a while debugging, the console stops outputting complex objects (objects, arrays) leaving spaces instead, so a collection of elements looks like [, , , ]).

I switched to OSX 4 years ago and i hate to say it, but I found IE9 and IE10 debuggers (even ran in virtual machine) the be the most stable debugging tools. I encourage you to give it a try. It turns out, that we're living rather a miserable life trying to find tools that don't crash, and there are good tools out there. Too bad they are on the "alternative" operating system MS Windows is.

Want to know the value of a global variable using the IE dev tools? Well you'll have to put in a break point, because the watch window isn't even available unless execution is paused.

I agree that Chrome's dev tools are faster and crash less. I also find them more visually appealing. I wouldn't say they are better than Firebug, though... there are a few kinks they need to work out.

One of them is console.log():

  (function(){
	var obj = {};
	console.log(obj);
	obj.new_value = "hello";
	console.log(obj);
  })();

In Chrome, this logs an object {new_value: "hello"} twice, as opposed to the expected: an empty object, and then the aforementioned object.

More details here: http://techblog.appnexus.com/2011/webkit-chrome-safari-conso...

It's not something I encounter often, but when I do, it's really obnoxious to have to work around it. I mean, it's console.log() ffs.

Yeah that one's a complete pain in the ass, it makes debugging much harder in mutation loops as you always get the wrong value displayed in the console and then smash your head in the desk as a test which should be hit is not.

I agree with you. I also made a comment about this topic earlier http://news.ycombinator.com/item?id=2721038.

I too have switched to Chrome about 5 months ago -- only because of its lower memory and CPU footprint (in my experience at least), and have found myself used to the Chrome web dev tools' assortment of annoyances. All things being equal, I'd prefer to use Firebug, but Firefox just eats up too much memory and starts to lock up for a few seconds at a time.

Some issues I've found with Chrome dev tools:

* console.log() is fundamentally broken [1]. There's a bug filed for it and it doesn't seem like it will be fixed.

* When you log an HTML element, there's no way to jump to it in the "Elements" view.

* If XHR response is in JSON, it does not show you it in friendly easy-to-navigate format, but rather a big string.

Aside from that both tools are really awesome and do pretty much everything I need them to.

[1]: http://techblog.appnexus.com/2011/webkit-chrome-safari-conso...

For 1) using breakpoints works very well to see current state of variables.

#3 is fixed (at least in the dev channel). There is a preview tab next to headers and response.

Dealing with breakpoints is a very time consuming process. In my opinion, a better workaround is to have a "log" function which wraps console.log(), and clones any objects if the browser is Chrome or Safari.

> For 1) using breakpoints works very well to see current state of variables.

That's a workaround for a completely broken behavior.

add to that list that the Chrome dev tools don't display errors in red in the network tab. A 200 next to a 404 is nearly to impossible to distinguish at first sight (basically, if you are looking at the name of the file, you are not looking at the response code at the same time.)

Every time I use the dev tools I find them lacking a lot of UI/UX details that Firebug had there forever.

Being unable to quickly switch between the CSS and Layout/Metrics view is another major downer. Tabs beat scrolling, always.

Reply on news.ycombinator.com