Posts Tagged ‘shortcuts’

Google Chrome Devtools Cheatsheet

If you are a web developer and work with HTML, CSS, or JavaScript then you are probably familiar with one or more browser’s developer tools which are built into all modern browsers or available as an add-on for older browsers, specifically old versions of Internet Explorer. If you don’t know what developer tools are yet, you should learn something about what you are missing out on.

You should get to know the Devtools in each browser really well. Become as familiar with them as you are with your text editor of choice if not better because you will spend a lot of time using them to create and debug web pages. The more you understand the importance of Chrome’s Devtools and how powerful it is as a development tool the more efficient you will be in developing websites. I wanted to help make things a little easier for myself and anyone who might also benefit as well by making a Chrome Devtools Cheatsheet.

The cheatsheet consists of shortcuts and details of various features that aren’t as well known like:

  • Shortcuts to open Devtools
  • Global Shortcuts
  • Elements Panel Shortcuts
  • Styles Sidebar Shortcuts
  • Network Panel tips
  • Sources Panel Shortcuts
  • Console Shortcuts
  • Search Shortcuts
  • Console API Methods
  • Command Line API Methods
  • Chrome Flags
  • Theming Devtools
  • about:pages and Chrome Urls
  • Links and Resources

Anyone is welcome to contribute to the cheatsheet on Github. I plan to continue developing it and keeping it up to date as changes to Chrome and it’s Devtools are made so it will be a valuable resource for developers to keep an eye on.

Keeping Up With Devtools Changes

The team working on Google’s Chrome Developer Tools has been very busy and is constantly making updates to the Devtools in Chrome adding new features and new ways to do certain things much easier and smarter. It can be hard to keep up even with just how much you can do and how to do what with Chrome’s Devtools, which is why I started making the cheatsheet a year ago. I never got to finishing it back then because I became very busy at work. I recently began working on it again after receiving an email from +Addy Osmani about wanting to help update my cheatsheet.

There has been many updates to the Chrome Devtools since last year, and recently the Devtools team at Google has been making a strong effort to communicate the lesser known secrets and various shortcuts for different features available in the Devtools. They have been working hard to improve the Devtools Documentation and there have been more videos made that demonstrate the capabilities of Devtools. Also, Addy Osmani and Paul Irish started hosting live shows called “The Breakpoint”. Those watching the episodes live are able to comment and ask questions during the show.

I’d like to thank the Devtools team for all of their hard work. It’s been a tremendous difference having learned about what I never knew was possible with Devtools and makes my life so much easier. For that I am grateful and really appreciate of all they have done. I wouldn’t have known about all the new stuff I have added and updated on my cheatsheet if not for all the work they’ve done getting the word out about the new things in Devtools.

Suggestions

There is so much you can do with the Devtools in Chrome, and in my experience it can be rather difficult to absorb everything well enough so that you won’t need to refer to a specific second or minute of a half hour long YouTube video someone does which they mention a useful shortcut key or helpful trick that you can do for something. Things shown in videos sometimes happen so quickly when it comes to Devtools I’ve noticed, that before you know it, they are doing something else and you completely missed what they just did to get there. It’s a pain to keep track of it all.

What I suggested which I believe could be extremely useful and what would really just make complete sense to do, is to update the Shortcuts dialog in the Devtools with all shortcuts that are available in the tool itself (The Shortcuts dialog can be accessed by typing ? whenever Devtools is open). In my opinion, what would be most beneficial to developers around the world is if my cheatsheet was used as the Shortcuts dialog in Devtools, or a somewhat trimmed down version of it. As it turns out, Google doesn’t allow external contributions to the Devtools Docs for copyright reasons which is too bad but understandable.

Still, the fact remains that the Shortcuts dialog is extremely outdated, and sometimes displays half broken for me on different size screens for some reason. The need to update this section of the settings is huge. It should really be like a reference of the Devtools Docs which you can view quickly. It would be so great if the Devtools tool had a mini-docs page within it such as this that you could view as long as Devtools was open rather than have to open another tab and find the URL to the docs or something located on a totally different site, which information is spread out across multiple pages on.

You can find the cheatsheet on Github if you want to fork or star it. Anyone interested in contributing to it is more than welcome too.

Do you think it would be a good idea to update the Devtools list of Shortcuts?

Are there any other ideas or suggestions that you feel would make Chrome’s Developer Tools better for everyone?

11.27.12: The Chrome Devtools team is working to update the Shortcuts dialog in Devtools. Should be in Chrome before the end of January if not end of this year.

05.31.13: I have updated the Chrome DevTools Keyboard Shortcuts page using this cheatsheet. It is now more up-to-date than my cheatsheet, since it includes recently added or updated shortcut keys but doesn’t include everything that is on the cheatsheet.