Popular Web Development Tools - Chrome Inspector

Google Chrome also offers functionality similar to Firebug. Their tool is built in to the browser by default and is called ‘Chrome Inspector’. Take a look at below to see an example.

So now we know what exactly ‘inspecting an element’ means - it gives you easy access to specific code the browser is interpreting to display particular elements. This becomes especially important when you just can’t figure out why a certain chunk of text won’t move into the space you want it to. (After you have spent any amount of time developing sites with HTML and CSS, you’ll be very relieved for a tool that helps you troubleshoot so the time has not been spent in vain.)

A bonus feature enables you to edit the code in question, and then see the results instantly in the browser. So, if you thought one piece of code might be offending the browser, you could turn it off and see whether the page displays better without it. To do so in Firebug, simply hover near the code you’d like to temporarily turn off, then click the disable icon that appears, as shown in below.

You can also double-click to edit it. In Chrome, uncheck the adjacent box to turn off bits of code (as shown in below), or double-click to edit it.

If you like the changes you made in Chrome Inspector (or Firebug), be sure to keep track and copy them into the pages stored on your web server. We’ll talk more about publishing (saving pages to your web server) in the next few posts.