Every desktop Web browser comes with the ability to view the website’s source code. For aspiring Web designers, it is a quick way to see the code responsible for the site’s layout. However, websites with highly complicated designs may have hundreds of lines of codes making it difficult to pinpoint which lines of codes are responsible for the site elements you are concerned with. Fortunately, modern Web browsers come with additional developer tools to assist without the need for installing third-party add-ons like Firebug.
Google Chrome users can bring up this panel clicking the menu button, going to “Tools” and clicking “Developer Tools” while Mozilla Firefox users need to go to the “Tools” menu and click “Toggle Tools” within the “Web Developer” menu. Apple’s Safari browser refers to this feature as the Web Inspector and is a hidden option by default. You must first open up the Safari preferences and go to the “Advanced” tab. Tick the “Show Develop menu in menu bar” check box and a new “Develop” menu should appear on the menu bar. From the “Develop” menu, you can click “Show Web Inspector” to reveal the panel.
The interface of the developer tools panel varies depending on the browser you are using but each of these browsers all feature the Inspector tool. Represented by a target icon (magnifying glass for Chrome), clicking this tool followed by an object on the webpage you are viewing will take you to the corresponding lines of code. You can expand the line to see more parts of the code and even edit it live for testing purposes. Using these tools is a great way to troubleshoot the layout of a webpage without launching your favorite Web authoring tool.