Troubleshoot Web Site Design with Browser Inspector

Every web designer needs a way to troubleshoot web site design issues that arise. We frequently use browser inspectors when building and testing MyBB Themes such as FlatOne. Did you know that most modern browsers have built-in web site inspectors?

Internet Explorer, Chrome, and Firefox feature a way to look at the raw html, css, and javascript to name a few. There are Windows and Mac variants.

Internet Explorer Web Site Inspector

Simply right click then find “Inspect Element” as shown below.

internet explorer html inspector

 

Firefox Web Site Inspector

Right click then find “Inspect Element” just like on IE.

Chrome Web Site Inspector

You guessed it. Right click then find “Inspect Element”.

We mainly use Firefox around the office so we’ll show you a few cool things with the Firefox web site inspector along with basic usage.

Right click is your friend

Hover over the web page element you want to look at, right click, then click on inspect. Inspector will focus on that element. Awesome, right?

Edit the html on the page

Edit live html by right clicking on element and Edit as HTML as show below. Beware: if you leave the current page or refresh, changes will be lost.

Edit live html on any page.Edit live html on any page.

The Console

Easily spot errors and other issues by clicking on the Console tab.

The Style Editor

Click on the Style Editor tab to view all the current CSS on the page. Changes do not save if you visit a different page.

Test Page Speed

If you’re wondering how long it takes your site to load, click on the Network tab then the little speed indicator icon. Remember though: this test is based on your internet connection. Test varies based on user location, internet, and many other things.

To test again and again, close the inspector and reopen.

The inspector features of browsers are a powerful way to view html and troubleshoot web design issues. We use inspector on client web sites to view html and css so we can suggest fixes that we know works.

Leave a Reply

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