Chrome Web Inspector - CSS панель слева - PullRequest
Новая
       6

Chrome Web Inspector - CSS панель слева

0 голосов
/ 14 февраля 2012

Я пытался настроить Chrome Web Inspector (в частности, здесь и здесь ), чтобы переместить часть CSS панели «Элементы» влево, чтобы HTML-код справа, но я не испытывал радости.

Кто-нибудь умудрился заставить что-то подобное работать или видел какие-нибудь примеры?

Вот быстрый взломанный скриншот того, что я пытаюсь получить.

Редактировать: я использую версию 18.0.1025.33 beta-m Chrome, на всякий случай, если есть какая-то глупость, зависящая от версии:)

1 Ответ

2 голосов
/ 16 февраля 2012

Не знал, что вы можете стилизовать веб-инспектор в Chrome: P, вот несколько CSS-кодов, которые вы можете добавить к вашей Custom.css таблице стилей, найденной в вашем каталоге Chrome, которая даст желаемый результат: 

Custom.css

#elements-content {
    left: 325px !important;
    right: 0 !important;
}

#elements-sidebar {
    left: 0 !important;
    right:auto !important;
    left:0 !important;
    border-right: 1px solid #404040 !important;
}

#elements-content[style] { /* to target the inline style */
   right:0 !important;
   left:325px !important;
}

По одной из предоставленных вами ссылок здесь находится таблица стилей Custom.css:

  • Mac: ~ / Library / Application \ Support /Google / Chrome / По умолчанию / Пользователь \ StyleSheets / Custom.css

  • ПК: C: \ Users \ Ваше имя пользователя \ AppData \ Local \ Google \ Chrome \ Данные пользователя \ По умолчанию \ User StyleSheets \Custom.css

  • Ubuntu (Chromium): ~ / .config / chromium / Default / User \ StyleSheets / Custom.css

Редактировать:снимок экрана

enter image description here

Вот исправленная версия, которая должна работать на вашей версии Chrome, пробовала ее на версии 17.xxxx

CSS

#elements-content,
.scripts-views-container {
    left: 325px !important;
    right: 0 !important;
}

.split-view-sidebar-right  {
    float:right !important;
    right:auto !important;
    left:0 !important;
    width:325px !important;
}

.split-view-sidebar-left  {
    float:left !important;
    left:auto !important;
    right:0 !important;
}

.split-view-sidebar-left {
    border-right: 1px solid rgb(64%, 64%, 64%) !important;
}

.split-view-sidebar-left.maximized {
    border-left: none !important;
}

.split-view-sidebar-right {
    border-right: 1px solid rgb(64%, 64%, 64%) !important;
}

.split-view-sidebar-right.maximized {
    border-left: none !important;
}
...