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
}
......
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.
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.
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.
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With