permalink

6

DevTools: Incrementing CSS values under-the-cursor

Chrome DevTools supports some useful keyboard shortcuts for easily incrementing or decrementing CSS values under-the-cursor. Shortcuts are available for both the Sources and Elements panels in Canary. In this quick 59s video, I walk through how to effectively use them.

For your convenience, I’ve also listed the shortcuts below:

Sources

  • Alt + Up/down: +/- 1
  • Alt + Page-up/Page-down: +/- 10

Elements

  • Up/Down: +/- 1
  • Shift + Up/Down: +/- 10
  • Shift + Page-up/Page-down: +/- 100
  • Alt + Up/Down: +/- 0.1

You can also find them listed under Settings > Shortcuts in Canary:

Screen Shot 2013-11-19 at 17.06.37

6 Comments

  1. I was just talking with one of my co-workers yesterday about how much more fun web development has been since Chrome has taken this accelerated pace into making tools for us to do the little things so much more efficiently.

    It’s a wonderful time to be a front-end developer and we owe a great amount of gratitude to guys like you, Paul Irish, Ben Alman et al.

    Thanks for all of your quicktips (the critical css post was epic) and free books, you’re the man.

Leave a Reply

Required fields are marked *.