Chrome Dev Relations guy & Web Standards champion, Paul Irish chatted up with the Bangalore JS community on Twitter a few days ago. He shared tips & revealed interesting facts about Chrome Dev Tools. Excerpts (paraphrased at some places to provide context):
- My favorite hidden feature in Chrome Dev Tools is shift-esc which reveals the console in slow-mo.
- You can now emulate User Agents, and screen size of a lot of devices...& emulate touch events. Soon geolocation spoofing.
- ..a more recent addition is "Force Element State" where you can force an elem into :hover mode.
- new: in the console $_ now refers to the most recent returned value in the console.
- $0 refers to the element inspected. so, click on a tag in the elements panel, and $0 in the console refers to it.
- ..if anyone has any feature requests or trouble areas the DevTools could help with, Holler at me. I'm your man.
- the other complement to $0 is inspect(elem) inside console will switch over to Elements panel to inspect that one
- Offline (mobile apps) is still a tough nut to crack. http://www.html5rocks.com/en/tutorials/#technology:offline is a great guide to what you can do....some apps like gmail and google docs have gone offline beautifully...Workflowy's offline mode is strong too and a feature called prefer-online was added to appcache in the HTML spec http://html5.org/tools/web-apps-tracker?from=7135&to=7136 which may help some but there is still work to be done.
- you can explore new upcoming devtools stuff: go to about:flags, flip the devtools one, then see Experiments in settings
- beautify JS: in Sources panel hit the {} icon at the bottom. Boom. beautified. We're looking at making it happen for CSS
- Q: Which is the most useful feature of chrome-dev-tools, that supposedly most people don't know? A: Definitely best feature: "Disable Cache" that's in Settings. And that you need devtools to be visible for it to work. :)
- Q: ..seems Console api which comes with chrome/firefox aren't standardized? any efforts happening to standardize? A: the console API is standardized unofficially, never in the W3C, but all tool vendors agree.. in fact! now $ will be a shortcut to document.querySelector, which is more of what people expect, thanks to jQuery.
- Q: is id based selector better than class based? (when there are many of them) A: webkit doesnt actually have a fastpath for #id selectors, unlike jQuery.. class selectors are more maintainable IMHO
- Q: Can we get chrome dev tools to inspect my web app and tell me all the memory leaks places including line number and file name? A: the Heap Profiler in devtools helps a lot. There is a 3 snapshot technique Gmail pioneered that we'll share soon that helps...you won't get as accurate as "HERE ARE YOUR LEAKS" but the usability of the heap tool is getting stronger all the time
0 comments:
Post a Comment