css - Chromeウェブインスペクター-左側のCSSパネル

Question

要素パネルのCSS部分を左に移動し、HTMLを右に移動するために、Chrome Web Inspector（特にこことここ）のカスタマイズを検討してきましたが、喜びはありませんでした。

誰かがこのようなものをうまく機能させることができましたか、またはそれの例を見ましたか？

これは、私が取得しようとしているものの簡単なハッキングされたスクリーンショットです。

18.0.1025.33 beta-m編集：バージョン固有の愚かさがある場合に備えて、私はChromeのバージョンを使用しています:)

Answer 1

Chrome：PでWebインスペクターのスタイルを設定できることを知りませんでした。これはCustom.css、Chromeディレクトリにあるスタイルシートに追加して目的の結果をレンダリングできるCSSです。

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;
}

あなたが提供したリンクの1つから、ここにCustom.cssスタイルシートがあります：

• Mac：〜/ 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

編集：スクリーンショット

---

これは、お使いのバージョンの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;
}