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:

 

9 responses to “Developer Tools”

  1. Gustavo Avatar
    Gustavo

    “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. Graph Paper Press Avatar

      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. Emily Avatar

        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. Baidya nath Singh Avatar

    The website is very informative and useful. Thanks for producing amazing posts that help in some ways.

  3. AMGML63 Avatar
    AMGML63

    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.

  4. nikitalh Avatar
    nikitalh

    Hi, Do you know the CSS for changing the fonts color? Now they are white, I need them in black… thanks!

  5. Ammar Ali Avatar

    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

Your email address will not be published. Required fields are marked *