2017-08-27 6 views
0

私は最近netbeans IDEを使ってギブス​​に移行しました。それは私が必要とする機能のいくつかを持っていないし、適切なパッケージを見つけることができないので、私はそれを自分でやろうとしています。これにより、エディタの仕組みについての洞察も得られます。アトム/電子開発ツールテーマ

「developer tools」ウィンドウのフォントサイズは大した問題ですが、それは小さい(私は約11pxを推測している)。私はCSSのテーマをインストールする必要があるとGoogleから教えられましたが、そこにはいくつかあります。 atomのための 'dev tools theme'パッケージさえあります。しかし、私が試したことは何も適用されていないようです。はい。「カスタムUIテーマを許可する」が設定されています。しかし、同じテーマはクロームブラウザ(ver 60.0)で動作します。

私はchromeのように​​の検査官を検査できますか? (devtoolsウィンドウをドッキング解除し、CTL SHIFT Iをもう一度押してください)。これにより、どのクラスを設定する必要があるか、正しく適用されているかどうかを確認するのに役立ちます。

使用しているクロム/クロム原子のバージョンを確認するにはどうすればよいですか?グーグルの「方法」ガイドが書かれた後、一部の機能が変更されている可能性があります。

私は手動でdevtoolsテーマをアトムにインストールしますか?

Here is a related questionブラウザでは動作しますが、アトムでは動作しません。

+0

これはちょうどフォントサイズの場合、メインウィンドウのように、開発ツールの 'Ctrl + +' + '(' Cmd' + '+')を押すことができます。 – idleberg

+0

@idlebergそのチップをありがとう。それと、組み込みの、醜い、暗いテーマが今私を連れてくるだろうが、私はこのハッキング可能なエディタをハックすることに決めた。 – Twifty

答えて

0

私は本当に自分の質問に答えるのが好きではありませんが、問題が発生している人のためにここに投稿します。

devToolsウィンドウをアトムで検査するには、3つの手順が必要です。コマンドelectron --remote-debugging-port=9222 /usr/lib/atomを実行して、electron経由

  1. 起動​​。ポートは任意の有効なポート番号にすることができ、パスはOSによって異なる場合があります。
  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ウィンドウで、「設定 - >実験 - >カスタムUIテーマを許可」をチェックします。また、組み込みの暗いテーマが無効になっていることを確認してください。
  3. devToolsウィンドウで 'console'をクリックし、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のバージョンについての私の質問はまだ分かりませんでした。

関連する問題