Modern Web Development

[paulirish]

Disclaimer: I'm on the Chrome team and specifically focus on the Inspector/DevTools

Majd and I have talked a lot about tooling and the Chrome DevTools in particular. He ends up tweeting me a few requests or bugs a day that I'm routing to the engineering team. I love it.

Majd's writeup here is incredible. I hope to find a way to augment our existing documentation with this very thorough roundup. He's done a similar thing before ( http://jtaby.com/2011/05/31/google-chrome-why-i-hate-it-and-... ) and the Chrome team filed and fixed 33 bugs as a result. For the new article in particular, I expect us to iterate and improve based on the excellent feedback provided here.

I would add that CSS Selector Profiling is mostly in the DevTools so you can see how insignificant of a cost it is (in 99% of cases). But focusing on your network waterfall will pay performance dividends a few orders of magnitude bigger than optimizing selectors. :) That said, Majd knows what he's talking about quite well.

[tszming]

Hi, one of the reason I still use Firebug is we have a multi-line enabled script editor, not just multi-line support (http://code.google.com/p/chromium/issues/detail?id=35487), and the script is retained after page refresh, no up arrow needed.

I hope Chrome will have this feature in the future.

[nikhildaga]

Hi! The author suggests to use chrome canary. I so want to use Chrome Canary on Ubuntu. Are there any plans to support it on ubuntu? Is there an alternative?

[minikomi]

Hi Paul... any light to shed on this? http://stackoverflow.com/questions/8981211/what-is-the-sourc... I think it's the right answer, but just asking to be sure!

[karlshea]

Updating the Heap profiler documentation would be super-helpful since it looks like it changed a version ago.

Otherwise, thanks to the team for the improvements that I've been seeing lately!

[tomdale]

This is a great resource and I'm glad Majd wrote it. However, this is really the kind of content that should be coming out of Google itself.

Google is in an interesting position. Of all of the major Silicon Valley tech companies, I think Google is the one most seen as the "web" company, and yet they've staked a lot of their future on Android. Android, instead of making the web a first-class citizen, has in fact set the mobile web back by years. While they should have worked to bring all of the strengths of the web to mobile devices, they decided to play the app game on Apple's terms and, IMO, have lost.

Surely someone at Google realizes that killing the open web also kills the company's cash cow--search and related advertising--but based on their behavior it doesn't seem like it.

My hope is that the Android wakes up and decides to make the web a priority again. In league with the Chrome team (some of the smartest people I've ever met), they could do wonders to make developing for the mobile web a joy instead of the disaster that it currently is. Google needs focus, and it needs its focus to be on the mobile web. Having great, unified documentation about building sophisticated web apps that competes with Apple's Developer Centers is a good start to doing so.

[Estragon]

  > this is really the kind of content that should be coming 
  > out of Google itself.

What does this blog post do which the official docs don't?

E.g., https://developers.google.com/chrome-developer-tools/docs/sc...

[untog]

It's true- I've spent a lot of time developing HTML5-based apps (i.e. in a webview) and am already surprised at how much worse the Android web engine is than the iOS one. Google should be all over this (and with the release of Chrome of Android, perhaps they finally are) but it baffles me that it took this long. Meanwhile, it took Mozilla to create Boot To Gecko, a true web OS.

[mhansen]

  Android, instead of making the web a first-class citizen,
  has in fact set the mobile web back by years.

I don't know how you can come to this conclusion. Android has made an excellent mobile web browser available to over a quarter of a billion people.

And how is the web not first-class? Google even started Web Intents to interoperate web apps with native apps.

[wyck]

Here ya go, in video too (Google I/O) http://youtu.be/N8SS-rUEZPg

Also has a part on remote debugging which the article doesn't.

[reddit_clone]

> a first-class citizen, has in fact set the mobile web back by years

Steve Jobs started it. Everyone will follow it to the bitter end.

[blhack]

This is worth getting your head around just for the console.

<this post is partially for those of you who are, like me, relatively new to javascript. If you're one of the demigods that works at twitter/facebook, go ahead and ignore this>

I've been transitioning all of my projects from python cgi scripts (yuck), to shtml files, javascript clients, and APIs that run on node.js.

For somebody like me, that has been writing python+cgi for the last 5 years, diving into javascript was daunting. Terrifying even.

Console made this a lot, lot, lot easier. In javascript, you can call

    console.log("thing") 

and it will print it out to the console (again, this is obvious if you're done any JS development, I'm sure).

But that isn't all...

Suppose that I'm working with an object called map_pins. In the javascript console, I can just type:

    map_pins;

and it will print out the object for me in a tree that I can traverse by clicking the little sideways triangles.

Very, very nice.

I can also interact with my javascript functions from the console. If I have a function called update_bounds(), I can force it to fire from the console by just typing:

    update_bounds()

This is really, really nice. Before I discovered this, my javacsript was full of alert("I made it to this without crashing");

It was awful.

If you're learning JS and OP's article looks over your head, at least take the console away from it.

[markkanof]

Also, don't forget the step through debugger. It's such a time saver to be able to set a couple of break points and then when they are hit you can hover your mouse over different variables and see a tool tip that shows the contents of that variable.

[carbocation]

A great post for beginners. Also, beware of the fact that console.log() doesn't always print out the value of the object at the time it is logged; it can print out the value of the object at some time after the fact, leading you to believe there is a bug in your code when there is in fact none.

See also:

https://bugs.webkit.org/show_bug.cgi?id=35801

http://code.google.com/p/chromium/issues/detail?id=50316

http://stackoverflow.com/a/8249333/199475

[philwelch]

The console is great. It's basically a REPL for Javascript.

[TeMPOraL]

It's worth to note that this concept has a name - Read-Eval Print Loop, or REPL, and is present in several good languages. It changes the way people think about programming, making it much more interactive. If one didn't encounter this concept before, it's worth to take a look at it.

[jtaby]

Thanks for the comment. Was there anything specific you could point me to that you felt was above your head? I'd love to do a follow-up with more introductory material.

[potch]

"Modern Web Development" does not mean "Works in Webkit", and it does a disservice to future/novice developers to reinforce that notion. What's dominant now was not in the not-too-distant past, and may not be in the not-too-distant future.

[pavpanchekha]

You misunderstand. This was how modern web applications are written. I know very few people who write modern web apps but do not use Chrome for it. The reason is that Webkit has the best tools. Cross-browser independence isn't the point, since when I'm developing I'm using only one set of tools.

[tomdale]

When Mozilla ships better developer tools than Chrome, I'm sure there will be posts just like this one. The fact that developers prefer Chrome is not a failing of developers; it's a failing of Mozilla to provide compelling tools.

[jtaby]

I acknowledge WebKit's monopoly on the mobile landscape today, I make no claim whether it's a good thing or a bad thing, that argument would distract from the reality that if you want to make a mobile web app work well, you need to build it on webkit and debug it on webkit

[DrJokepu]

I'm not sure if docking to the right is really the best default; it really depends on your setup. On big, wide displays it's indeed a good way to do it. On small displays (notebooks) docking on the bottom is better. If you have multiple displays, detaching and moving the detached window to the other display works best. I think it's a good idea to assume the worst (tiny display) and dock to the bottom; the browser will remember your setting anyway so it's not like you'll need to do this all the time.

[r00fus]

How many netbooks have anything other than a 16:9 display (even the MB Air 11")? Vertical pixels are precious in landscape mode. Dock to the side is far more efficient with current reality of displays.

Let's put aside any frustration that 16x9 is even usable much less desirable for any office work.

[Joeri]

This episode of javascript jabber goes in depth about the chrome dev tools: http://javascriptjabber.com/006-jsj-chrome-dev-tools-with-pa...

I especially like the source maps, which allow you to debug code cross-compiled from another language in that other language. http://www.html5rocks.com/en/tutorials/developertools/source...

[micrypt]

A mild concern of mine with the "Google, if you’re listening" annotations. It's worth remembering that Chromium's an open-source project. If you really want something, send a patch.

[jtaby]

You actually bring up a good point, the webkit inspector right now is tied to the webkit project, and the barrier to contribution is prohibitively high. I've suggested to Paul Irish separating the two projects and making them more independent, though I'm not sure what the feasibility of that is.

I can either try to submit a patch and likely fail, or blog about it. Last time I complained to Google about Chrome, they filed 33 bugs and fixed many of them. The point here is to be an agent of change, not an agent of patches :)

[mmahemoff]

Well, discussion is fine too and not every web developer is in a position to knock out some detailed C++.

But this is still a valid point in the sense that Chromium is run much more in the spirit of an open-source project than other large-scale commercial open source efforts. External patches do make their way into Chromium.

[brettnak]

I'm probably not the only one, but I have no idea where the separation between Chromium and Chrome actually is. Can anyone enlighten me as to where the separation really is? Is Chrome a fork of Chromium, is Chromium an upstream? I know they actively work together in a lot of ways but how exactly?

[wahnfrieden]

It can be useful to engage open source projects of this size on other grounds - I can't speak for Chromium, but with many significant projects, a patch with some code is less than useful if there's been no discussion around it.

[bicknergseng]

The custom scroll bar might look sorta cool, but it's completely unusable on Chrome. The scroll tracker disappears and it's basically impossible to find. I've ended up restarting at the top of the page just to be able to scroll properly.

[jtaby]

Thanks for letting me know, I didn't realize I broke that. I just pushed up a fix

[wsbail29]

This is a really nice inventory of the latest Chrome Developer Tools. I also really like the recent Settings additions of "emulate touch events" and "Override device metrics" for mobile web development.

[jtaby]

Ah damn! I had both those on my outline but forgot to write about them :( I'll update the post. Thanks :D

[dmvaldman]

Wonderful, can't wait for part 2. One question: I don't seem to have the same file navigation for my javascript files as mentioned in this article. There is no "tabbed" browsing, nor an icon with two folders at right angles. Chrome is up to date.

Anyone else in this boat?

[jtaby]

When you go to "About Google Chrome", do you see something close to "Version 20.0.1114.0 canary"?

[mkmcdonald]

> I haven’t found a use for the Properties section yet

It displays DOM properties and their current state. That's pretty important to any web developer.

[mmahemoff]

I was just on the Chrome Dev hangout watching some of the latest mobile devtools features demo'd. These are also really neat - ability to set resolution, simulate user agent, simulate touch events, and dock devtools to the right (so you don't have problems with it becoming too narrow when making the browser thin).

[felipe_csl]

Google Chrome Canary dev tools is definitely worth it despite the bugs you see more often when using Canary. It has been vastly improved over the last years. I remember when Firebug was the standard tool for web debugging, now, chrome (specially canary) is the de facto standard for me.

[Vaanir]

Great read, not so sure why your page was awkward to scroll though.

Here is more about Heap Profiling from the horses mouth https://developers.google.com/chrome-developer-tools/docs/he...

[jtaby]

Do you mean "awkward to scroll" from a performance perspective or from a not-being-able-to-see-the-scrollbar perspective?

[alisey]

One thing that I use often: when execution hits breakpoint, you can switch to the Console tab and modify local variables, and run any code in the context of the current function.

Also, files in the Scripts can be edited by double clicking.

[tambourine_man]

  data:text/html,<b>ZOMG I AM BOLD!?!!?</b>

That's one of the best tips I've learned in a while. Thanks a bunch.

[omfut]

Great Article. Very useful web development tools primer. Thanks for taking time to write such an insightful article.

[jtaby]

My pleasure, glad you enjoyed it :)

[macarthy12]

Very nice write up, quite a few things that were new to me

[macco]

Respect. Great Article.

[rpwverheij]

docking to the right is definitely not working better for me!