CODEWITHSUNDEEP
csstwitter-bootstrapgoogle-chromedebugging
VibrationPositive
VibrationPositive

Reputation: 410

Is there a CSS debugger in Google Chrome?

The CSS updates on my website is working on all other browsers except Google Chrome.

Is there a CSS debugger in Google Chrome or an extension I can add?

I am using some styling from bootstrap.

Here is the bootstrap I am using:

 <link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Upvotes: 0

Views: 741

Answers (1)

Rahul Kumar
Rahul Kumar

Reputation: 2344

While you can not "debug" CSS, because it is not a scripting language, you can utilize the Chrome DevTools Elements panel to inspect an element & view the Styles pane on the right. This will give you insights as to the styles being overridden or ignored (line threw). The Styles pane is also useful because of it's ability to LiveEdit the document being inspected, which may help you iron out the issues. If the styles are being overridden, you can then view the Computed Style pane to see the CSS that is actually being utilized to style your document.

For more info visit https://developer.chrome.com/devtools/index

Upvotes: 1

Related Questions