禁用chrome開發人員工具中的腳本編輯

Question

我使用Chrome開發者工具來調試我的JavaScript代碼，但我對Chrome允許您編輯“腳本”選項卡下的JavaScript文件的方式有一點不滿。 有時候，我沒有意識到我在Chrome中，並且我開始對“腳本”選項卡下的代碼進行更改，只是為了實現當我刷新時我剛才所做的更改從未保存到磁盤！

我想知道是否有辦法讓“腳本”選項卡中顯示的代碼為只讀，這樣如果我嘗試在Chrome中編輯文件，我會發現它不可編輯然后意識到我不在我的IDE。

Answer 1

使用以下過程在Chrome 32+中將腳本源設置為只讀：

• 轉到chrome：// flags / #enable-devtools-experiments URL

• 選擇允許UI主題

• 打開Chrome開發工具

• 選擇設置（按F1或點擊最右邊的三個點）

• 選擇允許UI主題

• 使用以下樣式創建DevTools主題 ：

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

• 將其發布到Chrome網上應用店

• 安裝主題

• 重啟Chrome

參考

• Custom.css已停止在32.0.1700.76 m谷歌Chrome更新中工作
• 示例DevTools主題擴展
• 適用於Chrome開發者工具的Chrome開發者版黑暗主題
• WebCore Inspector腳本內容視圖
• Chromium用戶數據目錄

使用適用於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 Chromium：
  • %LOCALAPPDATA%\\Chromium\\User Data\\Profile 1\\User StyleSheets\\Custom.css
• Windows 7 Chrome：
  • %LOCALAPPDATA%\\Google\\Chrome\\User Data\\Default\\User StyleSheets\\Custom.css
• OSX Chrome：
  • /Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
• Ubuntu Chrome：
  • ~/.config/chromium/Default/User\\ StyleSheets/Custom.css

使用以下Chrome Devtools網址引用相關樣式：

鉻devtools：//devtools/devTools.css

Answer 2

據我所知，沒有選項可以在Chrome / WebKit開發人員工具中禁用腳本編輯。

以下是兩種可能的解決方案：

解決方案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：//標志下啟用實驗性擴展API）： http ： //www.mediafire.com/？wb1r67ron0x6szh

解決方案2：

修改源並運行自定義構建：

另一種選擇是修改開發人員工具來源，有關詳細信息，請參閱https://developers.google.com/chrome-developer-tools/docs/contributing 。 如果您這樣做，您需要做的就是從編輯器容器中刪除text-editor-editable類（第1279行， DefaultTextEditor.js ）。

解決方案3：

使Chrome自動保存您的文件：

第三個選項是啟用chrome來保存你的文件，有很多擴展來做這個，即Tincr 。 Tincr還讓你活着 - 重新加載你的文件，並提供完整的語法高亮。

我個人認為這是最好的解決方案。