InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

Chrome developer tools

  • Chrome - copy as cURL
  • Chrome - how to access pre-release features
  • Chrome - useful internal urls (chrome://)
  • Chrome - view javascript errors
  • Edit and debug css in Chrome
  • How to detach Chrome developer tools window
  • View http headers in Chrome
  • clear Chrome HTTP 301 redirect cache
  • custom http request headers
  • how to debug :hover
  • how to debug javascript in Chrome
  • view event handlers in Chrome
 
  • Home
  • > Tutorials
  • > Web Development
  • > Chrome developer tools

Edit and debug css in Chrome

By admin | Last updated on Mar 18, 2016

Google Chrome Browser has powerful developer tools to debug css on any web page. It can also be used to quickly make minor changes in page color, design, etc. to try out various design flavours.

This is a quick tutorial on using Chrome developers tools to change background color of header area of a page by editing its css properties background and border color. It is desired to have some familiarity with html and css for the purpose of this tutorial. Here are the steps:

  1. Visit the site/page for which you want to edit css. Here we’ll use https://infoheap.com/ for the purpose of this tutorial. Open the chrome developer tools (in Google chrome browser) using the steps as shown below.
    chrome-developer-tools-menu-open
  2. This will open chrome developer tools window. Make sure Elements tab is selected as shown below.
    chrome-developer-tools-windowYou can also dock and undock the tools window. And for each selected DOM (Document object model) element its css/style can be viewed in css panel.
  3. Select the element corresponding to the header of the page and view its css.
    chrome-developer-tools-edit-bg-colorPlease note that in this specific page header is contained in a div with a background css property defined. This page is just being used for illustration purpose. You can select any other site and/or element also. It should have some css property you want to change. Here we changing the background color to gray.
  4. Here is how the old header looked like:
    chrome-developer-tools-header-with-old-bg-color
  5. And after changing it looks like this:
    chrome-developer-tools-header-with-modified-bg-color

 

It takes sometime to get a hang of the chrome developer tools if you are new to it. Once you are used to it, it can be a very powerful tool.

Here is video version of this tutorial:

Suggested posts:

  1. How to debug :hover in Chrome
  2. how to debug javascript in Chrome
  3. How to clear Chrome HTTP 301 redirect cache
  4. view event handlers in Chrome
  5. How to detach Chrome developer tools window
  6. Chrome – how to add custom http request headers
  7. Chrome – copy any request as cURL including headers
  8. How to install and run Chrome PageSpeed insights for measuring site performance
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged Chrome developer tools, CSS, Tutorials, Web Development

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2021 InfoHeap.

Powered by WordPress