Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to see the css of a page in chrome, NOT IN ONE LINE

How can I see css in chrome with a prettier format. Currently what I see is like:

input_tiny{width:50px}.input_small{width:100px}.input_medium{width:150px}.input_large{width:200px}.input_xlarge{width:250px}.input_xxlarge{width:300px}.input_full{width:100%}.input_full_wrap{display:block;padding-right:8px}::-moz-focus-inner{border:0;padding:0}input{margin:0}input[type="search"]::-webkit-sear

and they are just presented IN ONE LINE! How can I make it in to multiple lines as

.input_tiny{
    width:50px
 }
 .input_samll{
     width:100px
 }
 ......
like image 759
Daniel Avatar asked May 24 '13 23:05

Daniel


People also ask

How do I view the CSS of a website in Chrome?

On Chrome's Developer Tools tab (CTRL + SHIFT + I), go to Resources (you may have to enable Resource tracking on that page), and click on the sub-tab Stylesheets. That will show all css files loaded by that page. Save this answer.

How do I find the CSS of a page?

Right click on the element you want to view the mobile source and click on the “Inspect” option. Change the element to view the source. Hovering over the HTML code will highlight the corresponding element on the preview browser pane. Find the source CSS code of the selected element.

How do I check padding in Chrome?

Show sidebar button in the action bar on the Styles pane. In the Box Model diagram in the Styles pane, hover over padding. The element's padding is highlighted in the viewport.


1 Answers

Chromium ticket has been updated to fixed https://code.google.com/p/chromium/issues/detail?id=163123

This is available in chrome stable now. You need to click the button with curly braces to prettify CSS (the same way you do JS)

chrome devtools

like image 67
Vinay Raghu Avatar answered Sep 28 '22 07:09

Vinay Raghu