Chrome Developer Tools – Easy Web Debugging You Need to Know

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:

• Chrome Dev Tools – More Advanced Tips for Better Debugging
• Sass CSS – This Awesome Tool Will Make You Sassy
• The Unbelievably Powerful Multi Select. Increase Productivity Now
• Windows Task Manager – Resolve High Disk Usage
• Resizing VirtualBox Disks Does Not Work With Snapshots

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.

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.

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.

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.

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) .

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.

For mre on this topic, check out my second article on Chrome Developer Tools that goes a little more in depth.

The post Chrome Developer Tools – Easy Web Debugging You Need to Know appeared first on Programming and Tech Blog.