動態更改WinRT JavaScript應用程序的外觀

Question

您知道當您創建Web應用程序時，您可以從瀏覽器中點擊F12，並且可以編輯樣式表，刪除dom元素等。

這使得在開發UI時能夠快速轉身。真正的節省時間！

否則會有大量的編譯，部署和點擊單擊來到您想要測試的區域。如果您正在測試的區域處於工作流程的末尾，那麼痛苦就更大了。我發現當你想要做的只是改變字體大小以使其看起來「更好」時，這樣做會令人費解。

有沒有類似於WinRT環境中的工具？這僅僅是移動應用程序開發的本質，還是在那裏（無論平臺）有什麼東西可以讓你隨時編輯UI？

Answer 1

是的，你有幾種選擇可供你選擇。

首先，Blend for Visual Studio - 與Visual Studio Express for Windows一起安裝 - 是一款非常棒的樣式工具。它與VS共享相同的項目結構，因此您可以同時運行這兩個項目。在VS中，實際上，在解決方案資源管理器中右鍵單擊一個項目，選擇在混合中打開，然後就可以了。

Blend實際上會加載應用程序並執行JS代碼，因此所有動態創建的元素也都適用。它也有一個交互模式，可以讓你進入正在運行的應用程序，根據需要導航和設置狀態，然後退出該模式並處理樣式。如需更多信息，我在我的書中有一個視頻（first edition | second edition preview），其中顯示了Blend的基礎知識 - 您可以專門去here並查看第二版中的視頻2-2和5-3）。第2章在文中也給出了一些介紹。

另外兩個選項在Visual Studio本身。

首先，當它運行的應用程序有一個命令調試>刷新Windows應用程序（F4），它將重新加載HTML和CSS，而無需重新啓動應用程序。我用它來重新加載更改，正是因爲你提到的原因。相同的命令位於暫停/停止/重啓按鈕右側的工具欄中。

其次，正在運行的應用程序將在調試器中具有DOM Explorer窗格。如果您沒有看到它，請使用「調試」>「Windows」>「DOM Explorer」命令將其打開。在該窗格中，您可以導航DOM樹（就像您可以在Blend的Live DOM窗格中一樣）並找到您關心的元素，或者可以使用DOM Explorer中最左邊的按鈕直接在應用中選擇元素。

在DOM瀏覽器的右側，您有樣式，跟蹤，計算，佈局和事件的選項卡。您可以直接在「樣式」窗格中進行更改，並立即應用它們。事實上，我總是使用它來嘗試一些事情。

我在這本書中有一個2分鐘的視頻，請參閱here。有些文檔在http://msdn.microsoft.com/en-us/windows/apps/hh696632。