We had a very productive ‘Google Drive and Android’ Hackathon and during this event, I got lots of questions from web developers on Chrome DevTools. So here is a great reason to sit down and talk (in hebrew this time) on the special features we have today in DevTools that could help you as a web developer to be more productive and smile more. You can go over the slides while you watch (or after it) on devtools-11.appspot.com It was a talk I gave in Google developer day in Berlin last year. However, the main points that I covered in the screen-cast are from the current DevTools that you have today (Sep 2012) in Chrome Canary.
Few of the main features you might want to master:
- Click on the ? and see how you can be productive with the keyboard. Here is a list of keyboards command
- On the right-bottom corner you can see the ‘setting’ button. Once you click on it – you can have some nice options like: choose other user agent and get their screen resolutions, mimic touch events etc’.
- The Network tab will let you record sessions and the cool part is that you can start a recording and then move between few pages (or in a web app – click and move between states). Once you are done with the recording you can take the data by right click and choosing ‘Save to HAR’ then you can share this data and use tools like this in order to analysis your web app in order to tune it and import its performance.
- The Audit tab let you have a quick and deep analysis of ‘what can be improved’. Think of ‘page speed’ / YSlow but inside your DevTools.
- The Profiles tab let you dive deep into the CPU utilization, memory (to see where it’s leaking) and what is going on with the CSS selectors.
- The console is also a powerful feature that give you options to work with a set of shortcuts like: $0 – for the current selected element etc’. The full list of these shortcuts could be nice to save.
Chrome Dev Tools In Hebrew Part 1
Chrome Dev Tools In Hebrew Part 2
Chrome Dev Tools In Hebrew Part 3
If you have other tips you like to share on Chrome DevTools – please let me know about them.