Chrome開發人員工具工作區映射

任何人都可以告訴我Chrome開發人員工具工作區映射是如何工作的。我相信它目前只在加那利羣島有售。Chrome開發人員工具工作區映射

我認爲它應該允許我在元素視圖中對CSS規則進行更改，並讓他們自動保存到本地文件中，如Paul IOI在Google IO 2013中所示。我無法將此功能工作。

https://developers.google.com/events/io/sessions/325206725

來源

2013-05-19 Mike

它目前只能在金絲雀。

編輯：現在在Chrome（因爲版本30+）

1）你需要打開devtools設置面板。它有'工作區'部分。

Screenshot of settings page

2）在本節中，您需要點擊 '添加文件夾' 項。它會顯示文件夾選擇對話框。

3）選擇文件夾後，您將看到一個關於文件夾訪問權限的信息欄。

Screenshot of access rights infobar

4）其結果是，你將看到在源面板文件選擇窗格兩個頂級水平的元件。在我的情況下，它是localhost：9080站點和devtools本地文件系統文件夾。此時您需要創建站點文件和本地文件之間的映射。你可以通過文件上下文菜單來做到這一點。

Mapping screenshot

不要緊映射哪些文件，本地或站點文件。 5）在那一刻devtools會問你重啓。 restart screenshot

重新啓動後，devtools將顯示文件窗格中的單個文件夾條目，並且每次在Mac上按Ctrl + S或Cmd + S時，都會將所做的所有更改應用到本地文件。

來源

2013-05-19 18:40:46 loislo

我應該解釋說我做了上述所有步驟，當我使用「codeavengers.com」作爲我的服務器時，它仍然不工作。（「codeavengers.com」映射到我的Windows主機文件中的localhost）。當我更改爲在我的urls中使用localhost時，它的工作方式如上所述。但是，JavaScript調試似乎停止了工作。 – Mike

我隨後選擇安裝Chrome擴展程序Tincr。到目前爲止它效果很好。 http://addyosmani.com/blog/lets-tincr-bi-directional-editing-and-saving-with-the-chrome-devtools/ – Mike

您需要仔細檢查映射是否適用。可能發生您的網站結構不反映本地文件夾結構。此外，您還需要爲兩個URL創建兩個映射，一個用於localhost，另一個用於codeavengers.com。如果devtools不能將本地文件映射到站點文件，那麼它不能在其中設置斷點。 – loislo

只是更正了loislo所說的。「目前只能在金絲雀身上使用。」

您可以通過在地址欄中鍵入 Chrome：//標誌，在穩定的Chrome版本中觸發所有這些實驗性功能。

來源

2013-08-13 03:20:58 Vennsoh

Chrome開發人員工具工作區映射

回答

相關問題