Developer Tools

Have you ever wanted to change the color or size of text, find a specific html element or locate a buggy javascript file?

The Developer Tools, bundled and available in Google Chrome and Safari web browsers, allows anyone to inspect the elements (html, css, js) that make up a webpage. Simply right-click on any element in the page and select the “Inspect Element” option from the context menu. This will open the Developer Tools and drill right to the element you clicked on.

developer-tools

Selecting “Inspect Element” will bring up the Developer Tools, which should look like the following:

developer-tools-2

The html of the element that you inspected will be be shown highlighted in the bottom left panel. The css of the element that you inspected with be shown in the bottom right panel.

developer-tools-3

Clicking on the html code in the left panel and also the css code in the right panel will allow you to preview html or css changes live directly on the page. Lets change the font-family css attribute to Arial and the font-size of the intro class to 24px:

developer-tools-4

Neat, eh? Using this approach, you can find any element on your webpage, view the html that creates the page and view the css that styles the page.

Important Note

Using Developer Tools doesn’t save these change to your live website. You still need to modify the actual html, css or template file that renders the code. If you are using our WordPress themes, you can visit the Appearance -> Theme Options -> CSS section and paste the code you modified into the textarea to override your theme’s default styles. For the example above, the css would look like this:

#home-welcome p.intro {
font-family: Arial;
font-size: 24px;
}

Developer Tools Video Tutorials

Here are a couple video tutorials for learning more about Chrome’s Developer Tools:

 

Newsletter
Join over 280,000 independent website owners

The next person to join our monthly newsletter gets a 25% off coupon!

We guarantee 100% privacy. Your information will not be shared.

This entry was posted in . Bookmark the permalink.

Posted by , at Graph Paper Press

Thad is the founder of Theme.Works and Graph Paper Press. Previously, he produced online multimedia and documentary projects for USA Today including the inauguration of President Barack Obama and many others. He lives in Brooklyn, NY with his wife Abby.

  • Google
  • Blog
  • Instagram

9 thoughts on “Developer Tools”

  1. “Using Developer Tools doesn’t save these change to your live website”. So, why do I need it? Do you have an easier way to deal with the type ? I went to theme options, there is no CSS section.

    1. You need it because you can preview your changes by modifying the CSS directly in the browser. Then, you just apply those changes to your stylesheet.

      1. I’ve imported the gridspace html into dreamweaver, if i edit this in there is there a way to save and attach it to my blog so that my changes will be live?

  2. Would have been even more useful if you could add FTP that could then allow one to apply changes to the site. This method would eliminate any security or unwarranted access issues.
    BTW nice article.

  3. Developer tool has made my life so easy! I can test new css elements with the help of inspect element. It’s a time saving feature! Love it.

Leave a Reply