Atom/Electron開發人員工具主題

Question

我最近從使用netbeans IDE遷移到githubs​​。它沒有我需要的一些功能，我找不到合適的軟件包，所以我正在嘗試自己做。這也讓我對編輯的工作方式有了很好的瞭解。

但是，一個巨大的問題是'開發人員工具'窗口中的字體大小。這是微小的（我猜大約11px）。谷歌告訴我，我需要安裝一個css主題，並有幾個。甚至還有一個針對原子的「開發工具主題」包。但我沒有嘗試過似乎應用。是的，「允許自定義用戶界面主題」已設置。但是，相同的主題可以在Chrome瀏覽器（ver 60.0）中運行。

我可以檢查​​內的檢查員嗎，就像我在chrome中可以做的那樣？ （拆開devtools窗口並再次打CTL SHIFT I）。這將幫助我發現我需要配置哪些類，以及它們是否已正確應用。

我該如何判斷鉻/鉻原子的哪個版本正在使用？在Google的'如何撰寫'指南之後，有些功能可能會發生變化。

如何手動將devtools主題安裝到原子中？

Here is a related question它在瀏覽器中工作，但不在原子中。

Answer 1

我真的不喜歡回答我自己的問題，但我會在這裏發佈此問題給其他任何有問題的人。

檢查原子中的devTools窗口涉及三個步驟。經由electron

1. 啓動​​通過運行命令electron --remote-debugging-port=9222 /usr/lib/atom。該端口可以是任何有效的端口號，路徑可能因操作系統而異。
2. 一旦​​打開，切換developer tools窗口並將其取消。
3. 打開一個單獨的chrome（也可以與chromium一起使用）瀏覽器並導航到chrome://inspect。應該列出2或3個「遠程目標」條目。點擊inspect會將瀏覽器devTools窗口附加到​​。

要安裝主題，請先找到chrome extension，然後在添加到原子之前在瀏覽器中對其進行測試。就我個人而言，我使用了Devtools Author，它有許多內置主題和簡單的字體大小的滑塊。

實際安裝，請按照下列步驟操作：

1. 下載並提取/生成源代碼。我把它們放在~/atom/devTools中，以保持一切。如果使用上述軟件包，則需要安裝npm依賴項並運行grunt。
2. 打開​​並切換到developer tools窗口。在devTools窗口中，勾選'設置 - >實驗 - >允許自定義用戶界面主題'。另外確保內置的黑暗主題是禁用的。
3. 在devTools窗口中單擊「控制檯」並輸入命令require('remote').require('browser-window').addDevToolsExtension('/path/to/your/theme')。如果成功，則應打印主題的名稱，如果出現問題，則輸入undefined。
4. 重新啓動devTools窗口以查看正在使用的主題。當主窗口關閉/打開並重啓系統時，它將持續。

如果使用上述主題，它會向devTools添加一個'作者設置'選項卡，您可以從中選擇主題和字體大小。

刪除主題運行require('remote').require('browser-window').removeDevToolsExtension('theme name')。要查看運行require('remote').require('browser-window').getDevToolsExtensions()的主題名稱。

至於我關於chrome版本被使用的問題，我還沒弄明白。