19

私は Chrome 開発者ツールを使用して JavaScript コードをデバッグしていますが、Chrome の [スクリプト] タブで JavaScript ファイルを編集できる方法に不満があります。Chrome を使用していることに気付かず、[スクリプト] タブでコードを変更し始めたのに、更新したときに、行ったばかりの変更がディスクに保存されていないことに気付くことがあります。

[スクリプト] タブに表示されているコードを読み取り専用にする方法があるかどうか疑問に思っていました。そのため、Chrome でファイルを編集しようとすると、編集できないことがわかり、自分の場所にいないことがわかります。 IDE。

4

2 に答える 2

5

Chrome 32 以降でスクリプト ソースを読み取り専用にするには、次のプロセスを使用します。

  • chrome://flags/#enable-devtools-experiments URL に移動します。

  • [UI テーマを許可する] を選択します

  • Chrome 開発ツールを開く

  • [設定] を選択します (F1 を押すか、右端の 3 つの点をクリックします)。

  • [UI テーマを許可する] を選択します

  • 次のスタイルでDevTools テーマを作成します。

    .content-view.script > .text-editor { -webkit-user-modify: read-only !important; }

  • Chrome ウェブストアに公開する

  • テーマをインストールする

  • Chrome を再起動する

参考文献

Chrome 31- の古いプロセスを使用します。

ユーザー スタイルシートを使用してスクリプト タブを完全に無効にします。

.toolbar-item.scripts { display:none !important; } /* Hide Scripts Tab */

または、スクリプト ソースを読み取り専用にします。

.text-editor-editable { -webkit-user-modify: read-only !important; } /* Old selector */
.content-view.script > .text-editor { -webkit-user-modify: read-only !important; } /* Older selector */
.editing { -webkit-user-modify: read-only !important; } /* Generic Selector */

ファイルのいくつかの可能な場所を次に示します。

  • Windows 7 クロム:
    • %LOCALAPPDATA%\Chromium\User Data\Profile 1\User StyleSheets\Custom.css
  • Windows 7 クロム:
    • %LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css
  • OS X クロム:
    • /Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
  • Ubuntu クローム:
    • ~/.config/chromium/Default/User\ StyleSheets/Custom.css

関連するスタイルを参照するには、次のChrome Devtools URL を使用します。

chrome-devtools://devtools/devTools.css

于 2012-08-22T19:07:27.790 に答える
4

私の知る限り、Chrome/WebKit開発ツールでスクリプト編集を無効にするオプションはありません。

以下は2つの3つの可能な解決策です。

解決策1：

編集するたびにアラートを表示する拡張機能を作成します。

JavaScript：

chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(function(resource, content) {
    alert("WARNING: Your changes will not be saved!!");
    // Optional, but and extra layer of "protection", if you don't want/need it just remove the "experimental" permission from the manifest
    if (chrome.experimental) {
        chrome.experimental.devtools.console.addMessage("error", "WARNING: Your changes will not be saved!!");
        // Shows in red
    }
});

拡張機能（解凍、最初にchrome：// flagsで実験的な拡張機能APIを有効にします）：http ：//www.mediafire.com/？wb1r67ron0x6szh

解決策2：解決策2：

ソースを変更し、カスタムビルドを実行します。

もう1つのオプションは、開発者ツールのソースを変更することです。詳細については、 https：//developers.google.com/chrome-developer-tools/docs/contributingを参照してください。その場合、必要なtext-editor-editableのはエディターコンテナからクラスを削除することだけです（1279行目、DefaultTextEditor.js）。

解決策3：

Chromeにファイルを自動保存させる：

3番目のオプションは、Chromeでファイルを保存できるようにすることです。これを行う拡張機能は、Tincrです。Tincrを使用すると、ファイルをライブリロードして、完全な構文の強調表示を行うこともできます。

私の個人的な意見は、これが最善の解決策であるということです。

于 2012-10-11T16:44:42.740 に答える