Chrome to dość dobra przeglądarka, dla mnie jest idealna z wielu względów, ale najbardziej podoba mi się możliwość jej pełnej personalizacji. Ot na przykład domyślna konsola wygląda tak:
Ale może wyglądać zupełnie inaczej, bo ja mam aktualnie tak:
Cała operacja jest banalnie prosta i wymaga jedynie znajomości CSS’a :) otóż (pełny art. na ten temat jest tu ) musimy podmienić plik CSS w katalogu użytkownika. Jego lokalizacja w zależności od systemu jest:
Mac :
/Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
PC :
C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css
Ubuntu (Chromium) :
~/.config/chromium/Default/User\ StyleSheets/Custom.css
Następnie korzystamy z tego pliku:
/**********************************************/
/*
/* InTheDark Skin by Aleksander Cynarski
/*
/* Based on Darker Skin by Darcy Clarke - 2011
/* Based on Joe Bergantine's Specials Board:
/* http://joebergantine.com/werkstatt/seestyle
/*
/**********************************************/
/**********************************************/
/* Layout
/**********************************************/
#elements-content.source-code {
background: #000 !important;
font-size: 12px !important;
}
#elements-content .highlight {
color: blue;
}
#elements-content .selection {
}
#elements-content .selection.selected {
}
#elements-content .parent {
}
/*.outline-disclosure ol:focus li.parent.expanded.selected::before*/
#elements-content .outline-disclosure li.parent::before,
#elements-content .outline-disclosure ol:focus li.parent.expanded.selected::before {
background: none !important;
content: '' !important;
}
#elements-content .parent.selected {
}
#elements-content .parent.selected {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
#elements-content .parent.expanded {
}
/**********************************************/
/* HTML
/**********************************************/
#elements-content .webkit-html-comment {
color: #8c8c8c !important;
}
#elements-content .webkit-html-doctype {
}
#elements-content .webkit-html-tag {
color: #ffc97c !important;
}
#elements-content .webkit-html-tag-name {
}
#elements-content .webkit-html-attribute {
}
#elements-content .webkit-html-attribute-name {
color: #d97640 !important;
}
#elements-content .webkit-html-attribute-value {
color: #abca7e !important;
}
#elements-content .webkit-html-external-link {
}
#elements-content .webkit-html-resource-link {
}
#elements-content .webkit-html-text-tag {
}
#elements-content .webkit-html-text-node {
color: #c2c3c3 !important;
}
#elements-content .webkit-html-css-node {
color: #c2c3c3 !important;
}
#elements-content .webkit-html-js-node {
color: #c2c3c3 !important;
}
/**********************************************/
/* CSS
/**********************************************/
#elements-content .webkit-css-comment {
}
#elements-content .webkit-css-url {
}
#elements-content .webkit-css-color {
}
#elements-content .webkit-css-selector {
}
#elements-content .webkit-css-property {
}
#elements-content .webkit-css-number {
}
#elements-content .webkit-css-keyword {
}
#elements-content .webkit-css-string {
}
#elements-content .webkit-css-important {
}
/**********************************************/
/* JavaScript
/**********************************************/
#elements-content .webkit-javascript-comment {
}
#elements-content .webkit-javascript-keyword {
color: #d97640 !important;
}
#elements-content .webkit-javascript-ident {
color: #d97640 !important;
}
#elements-content .webkit-javascript-string {
}
#elements-content .webkit-javascript-number {
}
#elements-content .webkit-javascript-regexp {
}
.audit-result-tree li.parent::before,
.console-group-messages .section .header::before,
.outline-disclosure li.parent::before,
.outline-disclosure ol:focus li.parent.selected::before,
.section .header::before,
.properties-tree li.parent::before,
.event-bars .event-bar .header::before,
.data-grid tr.parent td.disclosure::before,
.data-grid:focus tr.parent.selected td.disclosure::before,
.styles-section .properties li.parent::before
{
font-family: 'Arial' !important;
color: #aaa !important;
content: '►' !important;
padding-right: 5px !important;
font-size: 9px !important;
}
.audit-result-tree li.parent.expanded::before,
.console-group-messages .section.expanded .header::before,
.outline-disclosure li.parent.expanded::before,
.outline-disclosure ol:focus li.parent.expanded.selected::before,
.section.expanded .header::before,
.properties-tree li.parent.expanded::before,
.event-bars .event-bar.expanded .header::before,
.data-grid th.sort-descending > div::after,
.data-grid tr.expanded td.disclosure::before,
.data-grid:focus tr.expanded.selected td.disclosure::before,
.styles-section .properties li.parent.expanded::before {
font-family: 'Arial' !important;
color: #aaa !important;
content: '▼' !important;
padding-right: 5px !important;
font-size: 9px !important;
}
#drawer {
display: none;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 200px;
background-color: black !important;
background-image: url(Images/statusbarBottomBackground.png);
background-repeat: repeat-x;
background-position: bottom;
color: #fff;
}
.console-message, .console-user-command {
position: relative;
border-bottom: 1px solid #333;
padding: 1px 22px 1px 24px;
min-height: 10px;
}
.console-formatted-number {
color: #360;
}
.console-error-level .console-message-text {
color: #6F0D11;
}
#elements-content.source-code {
font-family: "Consolas", sans-serif !important;
background: #0D1906 !important;
font-size: 11px !important;
font-weight: normal !important;
}
body.platform-mac.platform-mac-snowleopard .monospace, body.platform-mac.platform-mac-snowleopard .source-code {
font-size: 9px !important;
font-family: Menlo, monospace;
}
.console-group-messages .section .header .title {
color: gray;
font-weight: normal;
}Tutaj jedna uwaga, wszystko działa real-time, więc każda zmiana będzie widziana od razu. Miłej zabawy z personalizacją.
Related
