So many thoughts. So little time.

25 Cool Blogger and Web Developer’s Tricks and Tools in Firefox and Chrome

1 } Press and hold the back or forward buttons in the browser to see a list of pages you’ve been on, then select from that list to jump to a page rather than hitting the back or forward button repeatedly.

2 } F5 reloads/refreshes the page. Much easier than groping for where they’ve moved the reload button to this time with your mouse! (And a fun key to pound upon – easy to reach!)

3 } CTRL-F5 forces the cache to be emptied and the page loaded entirely afresh.

4 } CTRL-clicking a link will open that link in a new tab.

5 } CTRL-NumberKey will open the tab corresponding to that number.

6 } CTRL-Tab will move through the tabs sequentially. CTRL-Shift-Tab moves you backwards through them.

7 } Similarly, CTRL-Page-Down moves you forward through the tabs, and CTRL-Page-Up moves backwards through them.

8 } CTRL-W will close the current tab

9 } CTRL-T opens a new tab

10 } CTRL-N opens a new window entirely

11 } Still new to many people are the basic keyboard shortcuts for undo, cut, copy, paste, select all, bold and italic. So, here they are:

Undo – CTRL-Z
Cut – CTRL-X
Copy – CTRL-C
Paste – CTRL-V
Select All – CTRL-A
Bold Selected Text – CTRL-B
Italicize Selected Text – CTRL-I

12 } Clicking at the beginning of where you’d like to make a selection (or end!) and then holding down the Shift key and clicking at “the other end” will select everything between those clicks for you.

13 } The “End” key takes you to the end of a line. The “Home” key will take you to the beginning of a line. CTRL-End goes to the end of the document, while CTRL-Home goes to the top of it.

14 } Holding the Shift key and hitting “End” selects from where you are to the end of the line. Shift-Home does the same but from where you are to the beginning of the line. CTRL-Shift-End selects everything from where you are to the end of the document, and CTRL-Shift-Home selects everything from where you are to the top.

15 } Firefox’s Firebug and Chrome’s Inspect Element tools will allow you to edit HTML and CSS elements live in the browser and see immediately what the results will look like. Once you have the code working the way you like it, copy what you’ve come up with and paste it into your actual web programming software or CMS templates.

16 } If you set the CSS settings for an image or other object to position:relative; then you can move in negative directions using the margin settings and employ the z-index for layering/overlapping things. You also can watch the position of the image move to where you want it by double-clicking on the setting and hitting the up and down arrows to sequence through numerically on the setting you’ve double-clicked upon.
(See the video below this article for a demo)

17 } Chrome has an add-on called Pendule that adds many very useful functions to Chrome and are great additions to the capabilities of the Inspect Element tool. [Addendum: Additionally, here’s a link to Chris Pederick’s web developer tools for both Chrome and Firefox browsers so that those aren’t left out here! http://chrispederick.com/work/web-developer/ Thanks to Ron Amatriain for his comment suggesting this!

18 } Chrome’s Inspect Element tool, when arrived at via right-clicking on a spot on your page and selecting “Inspect Element”,  will zap you right to the section of HTML where that element’s code exists, so you don’t have to first open the editor and then use the magnifying glass (like Firebug’s selector tool) to get to the element. Currently in Firefox, the right-click on an element and selecting “Inspect Element” brings up a differently formatted viewer, where you have to click the HTML or Style buttons to see all the info for that element. However, selecting “Inspect Element in Firebug” performs the same feature as Chrome does.

19 } Both Chrome and Firebug have a very powerful selector tool that helps you find where in the HTML your code is sitting. Additionally, clicking on a DIV or any other element in the code will expose its CSS settings for you to play with or add to in the right-hand column.

20 } Both Chrome’s Inspect Element tools and Firefox’s Firebug will open their toolbox when pressing the F12 key. They also respond with “Inspect Element” tools when pressing CTRL-Shift-I.

21 } Both Chrome and Firefox will allow you to view the browser window full-screen using the F11 key. This removes the tabs, bookmarks and other toolbars, the URL window and all menu items. The Firebug and Inspect Element tools remain! The above-mentioned CTRL keyboard shortcuts still work to move through the tabs or close them, and CTRL-clicking a link still opens the link in a new tab.

22 } WordPress and several other CMS platforms having built-in editors often have a full-screen option that further empties the clutter out of your way for writing or coding. WP has this for both their visual and HTML raw code editors. Talk about uninterrupted focus! The WordPress HTML editor will allow you to insert a link and an image or media item, but that’s about it. The Visual editor has bold, italics, ordered/unordered lists, block-quote, insert media and  link make/break, but that’s it (though I’ve installed Syntax Highlighter Evolved and the sister Syntax Highlighter TinyMCE Buttons, and the PRE and CODE buttons appear even in this sparse editor!) Again, the CTRL-key combo shortcuts still work for navigating through your tabs, so you don’t have to leave this environment to switch to the page after saving your code or writing to view the results on a refreshed (F5) page.

Getting your writing done in the HTML editor in WordPress and a few others is cleaner code as hitting the return key does not insert “ ” place holders between paragraphs – just auto-generated paragraph tags. Clean!

(EXTRA: Many people don’t realize that in WordPress the HTML editor will insert <p>paragraph enclosures</p> around paragraphs written there – oh, yes it does! Check out your page’s source! But it can and usually will figure out when you’ve placed code in there and it doesn’t do that to your code.)

23 } ALT-left-arrow will take you back to a previous page, while ALT-right-arrow will take you forward one page. Same as hitting the back or forward buttons, but faster than a mouse can do if you’re typing already.

24 } Shift-Enter will often insert a soft-return via a “break” <br /> tag rather than a full </p> paragraph closure with a new <p> paragraph on the next line. Makes for tighter, truly single-spaced lines of text or other elements when that is what is needed or desired.

This
is
an
example (hitting Shift-Enter)

This is a new paragraph (hitting Enter)

25 } Sometimes viewing the raw source code for a page is the best way – especially if you use find/search on the page. So, for the final ones, you get a two-fer: CTRL-U brings up the source code, and CTRL-F brings up the Find search box.

That’s enough to keep you busy for a while! Use the shortcuts often and they will become new habits that can really save you time and wrist-agony in the long run!

Here is a video that demonstrates the keyboard arrow keys trick in Firebug and in Chrome’s “Inspect Element” tools:

Best watched full-screen at 720p, either from here or at YouTube.

Have fun!

Terry

2 Responses to 25 Cool Blogger and Web Developer’s Tricks and Tools in Firefox and Chrome

Add Comment Register



Share Your Point of View

* Copy This Password *

* Type Or Paste Password Here *