Vimming around in Firefox with Vimperator

Vimperator has sadly been deprecated as of Firefox 57, and this article is just hanging around for historical purposes.

I've used Google Chrome for web development the past few years, but I recently switched to using Mozilla Firefox after stumbling upon Vimperator – a plugin that converts Firefox into a vimmish browser packed with modal navigation and interaction (vimmers rejoice!).

Similar to vim, Vimperator allows you to create a ~/.vimperatorrc file to load your configuration, a feature that has me questioning whether Chrome and I's time is done.

In my current config file, I have set up some really handy leader keys in the past few days.

I set up a few to resize the window to different viewports:

" Window sizing
" resize to iPhone 6
noremap <leader>s :js window.outerWidth=375; window.outerHeight=667;<CR>
" resize to iPad
noremap <leader>m :js window.outerWidth=768; window.outerHeight=960;<CR>
" resize to Desktop
noremap <leader>l :js window.outerWidth=5440; window.outerHeight=2600;<CR>

The width and height of the Desktop may seem enormous at 5440x2600, but if your window size is smaller than this resolution it will simply maximize the window.

I also put together some leader keys to activate different developer tools provided by Firefox:

" Toggle dev tools
nnoremap <leader>d :emenu Tools.Web Developer.Toggle Tools<CR>
" Activate inspector
nnoremap <leader>i :emenu Tools.Web Developer.Inspector<CR>
" Activate eyedropper
nnoremap <leader>e :emenu Tools.Web Developer.Eyedropper<CR>
" Open console
nnoremap <leader>c :emenu Tools.Web Developer.Web Console<CR>
" Open network
nnoremap <leader>n :emenu Tools.Web Developer.Network<CR>

I'm sure I might find my way back to Chrome at some point, but Vimperator has proven to be a lot of fun. My poor mouse is getting dusty.