Inspecting Web Pages with Chrome Developer Tools

GovLoop Featured Contributor ProgramChrome Developer Tools provide a method for developers and designers to view and edit web page code. Ever wondered what the code is doing? Or maybe you want to preview how a web page heading might look in a different color? Chrome Developer Tools let you turn attributes on and off and preview the web page before you actually make changes.

Open the website you want to inspect and move your cursor to the area you want to investigate. Right-click the item and choose Inspect. The code will open in a window usually below the element.

Use the up and down arrows to maximize or minimize code blocks. Check and uncheck options to see how the web page changes. This is a great way to test ideas for changes because none of the changes made here are permanent. You will need to apply any code changes to the production website for them to be live.

If you are like me and learn by doing, then Chrome Developer Tools is a tool for you. Websites have become more complex over the years and this tool will help you test your assumptions around whether things are working or not. The following video shows how to use these tools.

Leslie Labrecque is part of the GovLoop Featured Contributor program, where we feature articles by government voices from all across the country (and world!). See more Featured Contributor posts

You can follow Leslie on Twitter.

Leave a Comment

Leave a comment

Leave a Reply