Chrome and Firefox – Web Developer tools

Go to a random and simple web page, for example https://testmyiq.kandz.me/

How to edit CSS code on the fly, <span>Chrome and Firefox – Web Developer tools</span>, KandZ

If you open the tools for Web developers, you can just press F12 or Ctrl + Shift + I You will see the following

How to edit CSS code on the fly, <span>Chrome and Firefox – Web Developer tools</span>, KandZ
Firefox
How to edit CSS code on the fly, <span>Chrome and Firefox – Web Developer tools</span>, KandZ
Chrome

You can see the HTML code and the CSS code. You can change any CSS attributes and you can see the results on the fly. I clicked the title, and I added the color attribute to the following

How to edit CSS code on the fly, <span>Chrome and Firefox – Web Developer tools</span>, KandZ

The result now:

How to edit CSS code on the fly, <span>Chrome and Firefox – Web Developer tools</span>, KandZ

You can even see just the HTML without the CSS by deleting the line that ads the CSS file to the Web Page.

How to edit CSS code on the fly, <span>Chrome and Firefox – Web Developer tools</span>, KandZ
Delete the <link … > line

The result is too see just the HTML without the CSS code. Now you can understand how important is CSS.

How to edit CSS code on the fly, <span>Chrome and Firefox – Web Developer tools</span>, KandZ

THE END!!!

82440cookie-checkChrome and Firefox – Web Developer toolsChrome and Firefox – Web Developer tools

Related posts

5 Thoughts to “Chrome and Firefox – Web Developer tools

  1. […] Chrome and Firefox – Web Developer tools […]

Comments are closed.