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 Web Site Inspector
Simply right click then find “Inspect Element” as shown below.
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.
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.