You are here
Home > How To > Chrome Developer Tools – Easy Web Debugging You Need to Know

Chrome Developer Tools – Easy Web Debugging You Need to Know

Chrome Developer Tools

Chrome Developer Tools – As a web developer, one tool that is invaluable is the Chrome Developer Tools. It is a feature rich set of tools that you can use directly from your Chrome Browser. In this article, I will have a look at four Chrome Developer Tools in particular.

Chrome Developer Tools

Creating web applications pose specific challenges for developers. It isn’t always possible to stick to pure C# debugging in Visual Studio, especially when you are creating a responsive UI. The project below uses SASS that compiles to CSS. To open the Chrome Developer Tools, you obviously need to be using Chrome as your browser. Right click anywhere on your web page (or on an element) and select the Inspect menu option in your context menu. You can also hold down Ctrl+Shift+I. You can download the code from my GitHub repository if you want to follow along.

Looking for something else? Try these links instead:

1. Drag and Drop Elements

Did you know that you can select specific elements on your web page and drag them around to see what they look like in different positions on the web page you are creating? Simply click and hold the element and drag it to a new position.

Drag and drop elements

This is really great if you want to move things around a bit without having to go back to Visual Studio and changing the markup there. As a side note, if you have not looked at what SASS has to offer, I encourage you to do so. It has really changed my life (I know it sounds really geeky) and now I can’t imagine working without SASS.

See Tip # 2 below


2. Adding CSS

Another nice trick is to add CSS to your elements right in the inspector. Chrome Developer Tools makes this really easy by allowing you to select your element and click on the plus icon. You can then add a specific CSS property to your element.

Adding CSS to an Element

This allows you to get a feel for what your element will look like if you add specific CSS properties to it.

3. Adding a Class

In my project, I have a new class called redButton. All it does is sets the background color to red. To see how an element is affected when applying the class to it, select the element and click on the .cls toggle. As you type, the class is found and when you hit Enter, the class is applied. This will style the element immediately. Furthermore, you can then hover over the class name added in the Styles window, hold down Ctrl+Click and go to the file that contains the class you added. Hovering over the tab will show you the location of the file in your project.

Adding a class to css

If you need to make changes to the class, you can use this method to easily find the containing file.

4. Triggering State

A particular tricky thing to do is mimic states. Chrome Developer Tools allows you to trigger the state of an element. In this example we are triggering the hover state of a button. We can then change the CSS as needed to see what effect the changes have on the hover state (for example) .

Triggering State

You can easily modify element states without having to blindly change the CSS and hope that it is applied correctly.

Wrapping up

Chrome Developer Tools give web developers a host of options for debugging the UI. When you use these these tools in conjunction with each other, you can easily change elements styles on the fly.

Dirk Strauss
Dirk is a Software Developer and Microsoft MVP from South Africa. He loves all things Technology and is slightly addicted to Twitter and Jimi Hendrix. Apart from writing code, he also enjoys writing human readable articles. "I love sharing knowledge and connecting with people from around the world. It's the diversity that makes life so beautiful." Dirk feels very strongly that pizza is simply not complete without Tabasco, that you can never have too much garlic, and that cooking the perfect steak is an art he has yet to master.

Similar Articles

Top