Welcome to our Browser Development Tools section! When working in Web Development, it is vital that your HTML, CSS, and JavaScript works across all popular browsers! Sadly, some of these languages are read differently by different browsers. Luckily, browser developers understand this, and created ways to view your code while in the browser! The following sections explain how to do this in different browsers.

Let's begin with my favorite browser.

1. Google Chrome

To access the HTML, CSS, and JavaScript code to a page in Google Chrome, you can follow these steps:

  1. Click the tools button (three horizontal lines) located to the right of the address bar.
  2. Select "More tools" from the list
  3. Select "Developer tools" from the list
OR
  1. use the keyboard shortcut CTRL + SHIFT + I
OR
  1. right click anywhere in the browser
  2. select "Inspect element" from the list
  • Once you have this open, you can select elements on the page by first clicking the magnifying glass at the top left of your development tool, then selecting the element on the page. You can also go through the HTML code and find the object.
  • By selecting the small phone icon next to the magnifying glass, you can view the browser on different mobile devices!
  • When on the "Elements" tab, you can alter your HTML and CSS on the page to see what the different codes may look like. Keep in mind that if you find something you like, you still have to adjust it on your actual CSS or HTML file.
  • Lastly, by clicking and holding the grey and black square in the top-right corner, you are able to move the development tool in three places. These are:
    1. to the right of the browser
    2. to the bottom of the browser
    3. in it's own independent browser

NOTE: You can bypass the cache in this browser by using CTRL + F5 OR SHIFT + F5

2. Internet Explorer

To access the HTML, CSS, and JavaScript code to a page in Internet Explorer, you can follow these steps:

  1. Click the tools button (the cog) located at the top-right part of the browser.
  2. Select "Developer tools" from the list
OR
  1. use the keyboard shortcut F12.
OR
  1. right click anywhere in the browser
  2. select "Inspect element" from the list
  • Once you have this open, you can select elements on the page by first either clicking the rectangle and cursor at the top left of your development tool or using the keyboard shortcut CTRL + B, then selecting the element on the page. You can also go through the HTML code and find the object.
  • When on the "Elements" tab, you can alter your HTML and CSS on the page to see what the different codes may look like. Keep in mind that if you find something you like, you still have to adjust it on your actual CSS or HTML file.
  • Lastly, by clicking the two white and black window squares in the top-right corner, you are able to alternate the position of the development tool between two places. These are:
    1. to the bottom of the browser
    2. in it's own independent browser

NOTE: You can bypass the cache in this browser by using CTRL + F5

3. Firefox

To access the HTML, CSS, and JavaScript code to a page in Firefox, you can follow these steps:

  1. Click the tools button (three horizontal lines) located to the right of the address bar.
  2. Select "Developer" from the list
  3. Select "Inspector" from the list
OR
  1. use the keyboard shortcut CTRL + SHIFT + C
OR
  1. right click anywhere in the browser
  2. select "Inspect element" from the list
  • Once you have this open, you can select elements on the page by first clicking the cursor and rectangle at the top left of your development tool, then selecting the element on the page. You can also go through the HTML code and find the object.
  • By selecting the small icon that looks like a small, dotted box inside of a larger, solid box next to the mid-right of the developer tool, you can view the web page at different mobile device sizes! You can also do this with the keyboard shortcut CTRL + SHIFT + M.
  • When on the "Inspector" tab, you can alter your HTML and CSS on the page to see what the different codes may look like. Keep in mind that if you find something you like, you still have to adjust it on your actual CSS or HTML file.
  • Lastly, by clicking the grey and black square in the top-right corner, you are able to alternate the position of the development tool to two different places. These are:
    1. to the right of the browser
    2. to the bottom of the browser
  • You can also use the button to the right of the previous one, which will put the developer tool into it's own window.

NOTE: You can bypass the cache in this browser by using CTRL + F5 OR CTRL + SHIFT + R

4. Safari

Unfortunately, Safari does not have a web developer tool for Windows computers yet. There are some addons out there. However, I would always advise developing on a Microsoft Windows computer.

NOTE: You can bypass the cache in this browser by using SHIFT + Reload Toolbar Button

5. Opera

To access the HTML, CSS, and JavaScript code to a page in Opera, you can follow these steps:

  1. Click the Opera button located in the top-left of the browser.
  2. Select "More tools" from the list
  3. Select "Enable Developer tools" from the list
  4. Click the Opera button again.
  5. Select "Developer tools" from the list
  6. Select "Web Inspector" from the list
OR
  1. use the keyboard shortcut CTRL + SHIFT + I
OR
  1. right click anywhere in the browser
  2. select "Inspect element" from the list
  • Once you have this open, you can select elements on the page by first clicking the magnifying glass at the top left of your development tool, then selecting the element on the page. You can also go through the HTML code and find the object.
  • By selecting the small phone icon next to the magnifying glass, you can view the browser on different mobile devices!
  • When on the "Elements" tab, you can alter your HTML and CSS on the page to see what the different codes may look like. Keep in mind that if you find something you like, you still have to adjust it on your actual CSS or HTML file.
  • Lastly, by clicking and/or holding the grey and black square in the top-right corner, you are able to move the development tool in three places. These are:
    1. to the right of the browser
    2. to the bottom of the browser
    3. in it's own independent browser

NOTE: You can bypass the cache in this browser by using CTRL + F5 OR SHIFT + F5

Startup Discount
Small Business?
Contact us for an Enormous Discount!

Contact Us Today!