CSS Terminal
CSS Terminal is a bookmarklet that allows you to inject CSS rules directly into a live web page. It's handy for rapid CSS development, prototyping and debugging.
Wanna see it in action?
Click here 👇
Write CSS in the terminal (the dark gray box) and those styles will be applied to the page.
Install
You can install the CSS Terminal bookmarklet in your browser by dragging the CSS
Terminal link above 👆 to your browser's bookmarks toolbar. You may need to first make
the toolbar visible by clicking View -> Always Show Bookmarks Bar or pressing
Command+Shift+B.
Usage Notes
Once you've added the bookmarklet to your bookmarks toolbar, you can click the CSS Terminal bookmark
to activate it on any website you visit. Write CSS in the terminal and those styles will be applied to the
page when you enter a semicolon or hit the Enter key. You can also hit
Command+Enter (on Mac) or Ctrl+Enter to apply the styles.
Pressing Esc or Tab will collapse the terminal. You can reactivate the
terminal by clicking the bookmark again, clicking the 
icon in the top right corner of the page, or pressing the keyboard shortcut Ctrl+/.
If you reload/refresh your page, your custom CSS rules will no longer apply. However, when you reactivate the terminal, your last set of rules are reapplied and you can continue editing.
The CSS Terminal uses local storage to save your custom CSS on a per site basis. This means that it will store your custom styles for ajaxian.com seperate from alistapart.com.
To quickly prototype content changes, press Ctrl+. and click on the part of
the page you'd like to change. CSS Terminal will make that element's content editable.
Note: these content edits are *not* persisted; they will be lost when the page is reloaded.
About CSS Terminal
The CSS Terminal bookmarklet was written by Ben Barber and is released under the MIT License. The source code and project page are hosted on GitHub.